/* Firmas · piezas de Ambulancias que no trae jewel.css (mismos tokens, sin cambiarlos) */

/* ---------- Entrada ---------- */
html.en-entrada, html.en-entrada body { height: 100%; }
html.en-entrada body { overflow: hidden; background: linear-gradient(160deg, #0F1B2D 0%, #13233B 50%, #1B3356 100%); }
.ent-login { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 472px) minmax(0, 1fr); align-items: center; gap: 48px; padding: 24px clamp(16px, 7vw, 150px); overflow-y: auto; }
.ent-tarjeta { width: 100%; padding: 40px 36px 36px; border-radius: 24px; background: #fff; color: var(--tinta); box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 50px 100px -30px rgba(0, 0, 0, .7); }
.ent-tarjeta .logo { display: block; height: 52px; width: auto; margin-bottom: 28px; }
.ent-tarjeta h1 { margin: 0 0 28px; font-size: 28px; letter-spacing: -.01em; line-height: 1.2; }
.ent-campo { display: block; margin-bottom: 16px; }
.ent-campo span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--texto-2); }
.ent-campo input, .ent-campo select { display: block; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--gris-suave); box-shadow: inset 0 0 0 1.5px transparent; font: 500 17px var(--letra); color: var(--tinta); appearance: none; -webkit-appearance: none; }
.ent-campo select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.ent-campo input:focus, .ent-campo select:focus { outline: none; background-color: #fff; box-shadow: inset 0 0 0 2px var(--teal-osc), 0 0 0 4px rgba(90, 158, 156, .14); }
.ent-campo input[aria-invalid="true"] { background: #FFF5F5; box-shadow: inset 0 0 0 2px #F3B4B4; }
.ent-boton { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; margin-top: 8px; border: 0; border-radius: 16px; background: var(--navy); color: #fff; font: 600 18px var(--letra); box-shadow: 0 1px 2px rgba(15, 27, 45, .2), 0 10px 22px -12px rgba(44, 53, 83, .8); }
@media (hover: hover) { .ent-boton:hover { background: #3A4670; } }
.ent-error { margin: -4px 0 12px; color: var(--mal); font-weight: 600; font-size: 15px; }
.ent-nota { margin: 16px 0 0; color: var(--texto-2); font-size: 14px; }
.ent-muestra { justify-self: center; width: min(100%, 760px); display: grid; gap: 14px; }
.ent-muestra img { display: block; width: 100%; aspect-ratio: 2.5; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-1.5deg); }
.ent-muestra p { color: #9FB3C8; font-size: 15px; font-weight: 500; text-align: center; }
@media (max-width: 899px) { .ent-login { grid-template-columns: 1fr; place-items: center; } .ent-muestra { display: none; } .ent-tarjeta { max-width: 472px; padding: 32px 24px 28px; } }

/* ---------- Campos (Ambulancias) ---------- */
.campo { display: grid; }
.campo .etiqueta { margin-bottom: 8px; color: var(--s700); }
.texto { width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-radius: var(--radio-ch); background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-2); font-size: 16px; }
.texto:focus { outline: none; box-shadow: inset 0 0 0 2px var(--teal-osc); }
select.texto { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }
.boton.compacto { width: auto; min-height: 48px; padding: 0 18px; font-size: 15px; }
.boton.auto { width: auto; }
.boton .ico { width: 20px; height: 20px; margin-right: 8px; }
.form-clave { display: grid; gap: 16px; max-width: 440px; }
.casilla { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 0; cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--navy); flex: none; }

/* ---------- Cuenta y pares ---------- */
.cuenta { display: grid; gap: 16px; padding-bottom: 32px; }
.perfil-cab { display: flex; align-items: center; gap: 20px; }
.perfil-cab h2 { font-size: 22px; color: var(--tinta); }
.perfil-cab p { color: var(--texto-2); }
.bloque h3 { margin-bottom: 12px; font-size: 16px; color: var(--tinta); }
.pares { margin: 0; display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 12px 16px; }
.pares div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 16px; }
.pares dt { color: var(--texto-2); font-size: 15px; }
.pares dd { margin: 0; font-weight: 600; }

/* ---------- Avisos dentro de pantalla ---------- */
.aviso-ok { margin: 0; padding: 12px 16px; border-radius: var(--radio-m); background: var(--bien-suave); box-shadow: inset 0 0 0 1px var(--bien-borde); color: var(--bien); font-weight: 600; }
.aviso-av { padding: 14px 18px; border-radius: var(--radio-m); background: var(--aviso-suave); box-shadow: inset 0 0 0 1px var(--aviso-borde); color: var(--aviso); font-weight: 600; }
.volver-origen { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -8px 0 4px -6px; padding: 0 8px 0 2px; border-radius: var(--radio-ch); color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: none; width: max-content; }
.volver-origen .ico { width: 20px; height: 20px; }
@media (hover: hover) { .volver-origen:hover { background: var(--gris-suave); } }
.resaltado { box-shadow: 0 0 0 3px var(--teal-osc), var(--sombra) !important; }

/* ---------- Aviso flotante (Ambulancias) ---------- */
.toast { position: fixed; z-index: 60; left: calc(var(--lado) + (100vw - var(--lado)) / 2); bottom: calc(24px + var(--inset-bottom)); transform: translate(-50%, 0); display: flex; align-items: center; gap: 16px; width: max-content; max-width: min(560px, calc(100vw - var(--lado) - 32px)); padding: 8px 8px 8px 20px; border-radius: var(--radio-m); background: var(--tinta); color: #fff; box-shadow: var(--sombra-alta); font-weight: 500; font-size: 15px; }
.toast:not(:has(.toast-accion)) { padding-right: 20px; min-height: 48px; }
.toast-accion { min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--radio-ch); background: rgba(255, 255, 255, .12); color: var(--teal-claro); font-weight: 600; font-size: 15px; }
.toast.error { background: var(--mal); }

/* ---------- Firmas: tabla editable y vista previa ---------- */
.firmas-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; padding-bottom: 32px; }
.tabla-caja { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.tabla-desliza { overflow-x: auto; }
.tabla-op { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabla-op th { text-align: left; font-size: 13px; font-weight: 600; color: var(--texto-2); background: #F7F9FC; padding: 14px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla-op th:first-child { padding-left: 20px; }
.tabla-op td { padding: 4px 4px; border-bottom: 1px solid var(--linea); vertical-align: middle; font-size: 15px; }
.tabla-op td:first-child { padding-left: 12px; }
.tabla-op td.estado { padding: 0 16px 0 8px; width: 132px; white-space: nowrap; }
.tabla-op tr.sel td { background: var(--agua); }
@media (hover: hover) { .tabla-op tbody tr:not(.sel):not(.agregar):hover td { background: #FAFBFD; } }
.tabla-op tr.agregar td { border-bottom: 0; padding: 4px 12px; }
.tabla-op .c-nombres { width: 15%; } .tabla-op .c-apellidos { width: 17%; } .tabla-op .c-puesto { width: 26%; } .tabla-op .c-correo { width: 34%; } .tabla-op .c-extension { width: 8%; min-width: 64px; }
.tabla-op .celda { font-size: 14px; }
.tabla-op td.estado { width: 104px; }
.tabla-op .celda { padding-left: 6px; padding-right: 6px; }
.celda { display: block; width: 100%; min-height: 48px; padding: 12px 8px; border: 0; border-radius: var(--radio-ch); background: transparent; box-shadow: inset 0 0 0 1.5px transparent; font: 400 15px/1.4 var(--letra); color: var(--texto); resize: none; overflow: hidden; }
@media (hover: hover) { .celda:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-2); } }
.celda:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--teal-osc); }
.celda::placeholder { color: #A9B5C3; }
.c-correo .celda { overflow-wrap: break-word; }
.tabla-op .vacia { padding: 28px 20px; color: var(--texto-2); text-align: center; }
.vacio { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; text-align: center; }
.vacio h3 { font-size: 20px; color: var(--tinta); }
.vacio p { color: var(--texto-2); }
.vista-c { position: sticky; top: 24px; display: grid; gap: 14px; }
.vista-c .fila-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vista-c h3 { font-size: 20px; color: var(--tinta); }
.vista-c .quien { color: var(--texto-2); font-size: 14px; font-weight: 500; text-align: right; }
.muestra { display: block; width: 100%; aspect-ratio: 2.5; object-fit: contain; border-radius: var(--radio-ch); box-shadow: inset 0 0 0 1px var(--linea); background: var(--gris-suave); }
.muestra-vacia { display: grid; place-items: center; aspect-ratio: 2.5; padding: 16px; border-radius: var(--radio-ch); background: var(--gris-suave); color: var(--texto-2); text-align: center; font-size: 15px; }
.muestra-vacia.av { background: var(--aviso-suave); color: var(--aviso); font-weight: 600; }
.vista-c .boton { min-height: 52px; font-size: 16px; }

/* ---------- Cajón (contenido) ---------- */
.cajon .tarjeta { padding: 20px; }
.cajon .fila-botones .boton { flex: 1 1 180px; }
.cajon .pt { white-space: normal; }
.soltar { display: grid; justify-items: center; gap: 8px; padding: 32px 20px; border-radius: var(--radio); background: #fff; box-shadow: inset 0 0 0 2px var(--linea-2); text-align: center; cursor: pointer; }
.soltar .ico { width: 32px; height: 32px; color: var(--teal-osc); }
.soltar b { font-size: 17px; color: var(--tinta); }
.soltar small { color: var(--texto-2); font-size: 14px; }
.soltar.sobre { background: var(--agua); box-shadow: inset 0 0 0 2px var(--teal-osc); }
.leidas b { font-size: 32px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.leidas span { margin-left: 8px; color: var(--texto-2); }
.notas { display: grid; gap: 4px; color: var(--texto-2); font-size: 14px; }
.sug-lista { display: grid; }
.sug-lista .casilla { border-top: 1px solid var(--linea); }
.sug-lista .casilla:first-child { border-top: 0; }
.sug-tx { display: grid; gap: 2px; min-width: 0; }
.sug-tx small { color: var(--texto-2); font-size: 13px; font-weight: 600; }
.sug-tx del { color: var(--texto-2); }
.sug-tx ins { text-decoration: none; font-weight: 600; color: var(--tinta); }
.segmento.dos button { font-size: 15px; }
.clave-nueva { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radio-m); background: var(--agua); }
.clave-nueva b { font-size: 20px; letter-spacing: .06em; color: var(--navy); font-variant-numeric: tabular-nums; }
.clave-nueva .boton { margin-left: auto; }
.grande { display: block; width: 100%; aspect-ratio: 2.5; object-fit: contain; border-radius: var(--radio-ch); box-shadow: inset 0 0 0 1px var(--linea); background: var(--gris-suave); }
.subida { display: grid; gap: 12px; }
.subida-f { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.subida-f img, .subida-f .muestra-vacia { width: 120px; font-size: 12px; padding: 6px; }
.subida-f b { display: block; font-size: 15px; overflow-wrap: anywhere; }

/* ---------- Unidades y plantillas ---------- */
.uni-card { cursor: pointer; }
.uni-card .uni-f2 { color: var(--texto-2); }
.uni-card.con-accion .uni-f2 { padding-right: 56px; }
.pl-card { padding: 0; overflow: hidden; gap: 0; }
.pl-card img { display: block; width: 100%; aspect-ratio: 2.5; object-fit: cover; }
.pl-card .pl-tx { display: grid; gap: 8px; padding: 14px 18px 16px; }
.pl-card h3 { font-size: 17px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pantallas angostas ---------- */
@container cont (max-width: 1260px) {
  .firmas-grid { grid-template-columns: minmax(0, 1fr); }
  .vista-c { position: static; order: -1; grid-template-columns: minmax(0, 520px) minmax(220px, 1fr); column-gap: 24px; align-items: start; }
  .vista-c .fila-tit { grid-column: 1 / -1; }
  .vista-c #v-img { grid-column: 1; grid-row: 2 / span 3; }
  .vista-c #v-aviso, .vista-c #b-una, .vista-c #b-quitar { grid-column: 2; }
}
@container cont (max-width: 700px) {
  .vista-c { grid-template-columns: minmax(0, 1fr); }
  .vista-c #v-img, .vista-c #v-aviso, .vista-c #b-una, .vista-c #b-quitar { grid-column: auto; grid-row: auto; }
}
.filtros > .cab-der { flex: 1 1 420px; flex-wrap: nowrap; }
.filtros > .cab-der .busca-campo.local { flex: 1 1 220px; max-width: 340px; }
@container cont (max-width: 640px) { .filtros > .cab-der { flex-wrap: wrap; } .filtros > .cab-der .boton { flex: 1 1 auto; } }
@media (max-width: 699px) {
  .toast { left: 50%; max-width: calc(100vw - 32px); }
  .tabla-op { min-width: 820px; }
  .clave-nueva { flex-wrap: wrap; }
}
@container cont (max-width: 640px) {
  .filtros .busca-campo.local { max-width: none; }
}
.cab-pant > .volver-origen { grid-column: 1 / -1; flex-basis: 100%; }
.cerrar { border: 0; background: none; cursor: pointer; }
.uni-accion { border: 0; }
.uni-card .uni-f1 { align-items: flex-start; }
.uni-card .uni-f1 h3 { white-space: normal; overflow: visible; line-height: 1.25; }
.uni-card .uni-f1 .pt { margin-top: 3px; }
.cajon .fila-tit h3 { flex: 1; }
.cajon .fila-tit .enlace { white-space: nowrap; }
.cuenta-mini { width: 200px; aspect-ratio: 2.5; flex: none; object-fit: cover; border-radius: var(--radio-ch); box-shadow: inset 0 0 0 1px var(--linea), 0 1px 2px rgba(15, 27, 45, .08); }
.cuenta-mini.muestra-vacia { font-size: 14px; padding: 8px; }
.fila-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
@media (max-width: 699px) { .perfil-cab { flex-direction: column; align-items: flex-start; } .cuenta-mini { width: 100%; } }

/* ---------- Entrada: capa de firmas reales detrás del navy ---------- */
.ent-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ent-muro { position: absolute; left: -30%; right: -30%; top: -20%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; transform: rotate(-11deg); opacity: .2; filter: saturate(.75); animation: muro-sube 120s linear infinite; }
.ent-muro img { display: block; width: 100%; aspect-ratio: 2.5; object-fit: cover; border-radius: 10px; }
@keyframes muro-sube { from { transform: rotate(-11deg) translateY(0); } to { transform: rotate(-11deg) translateY(-50%); } }
.ent-fondo::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 34% 52% at 24% 50%, rgba(15, 27, 45, .94) 0%, rgba(15, 27, 45, .78) 55%, rgba(15, 27, 45, 0) 100%),
    radial-gradient(ellipse 38% 40% at 70% 48%, rgba(127, 182, 180, .22) 0%, rgba(127, 182, 180, 0) 70%),
    linear-gradient(160deg, rgba(15, 27, 45, .82) 0%, rgba(19, 35, 59, .62) 50%, rgba(27, 51, 86, .74) 100%); }
@media (prefers-reduced-motion: reduce) { .ent-muro { animation: none; } }
@media (max-width: 899px) { .ent-fondo::after { background: linear-gradient(160deg, rgba(15, 27, 45, .86), rgba(27, 51, 86, .8)); } }

/* Verificación en dos pasos */
.ent-texto { margin: -12px 0 24px; color: var(--texto-2); font-size: 16px; line-height: 1.5; }
.ent-volver { display: block; width: 100%; min-height: 48px; margin-top: 8px; border: 0; background: none; color: var(--navy); font: 600 16px var(--letra); cursor: pointer; }
.ent-volver:focus-visible { outline: 2px solid var(--teal-osc); outline-offset: 2px; border-radius: 12px; }
.ent-alta { align-self: start; margin: 8px 0; }
.alta-pasos { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 18px; font-size: 15px; line-height: 1.5; color: var(--tinta); }
.alta-pasos li::marker { font-weight: 600; color: var(--navy); }
.alta-pasos b { font-weight: 600; }
.alta-dominio { font-weight: 600; white-space: nowrap; }
.alta-qr { display: block; width: 196px; height: 196px; margin: 12px 0 4px; image-rendering: pixelated; }
.alta-manual { margin-top: 8px; }
.alta-manual summary { cursor: pointer; color: var(--navy); font-weight: 600; min-height: 32px; }
.alta-manual p { margin: 8px 0; color: var(--texto-2); }
.alta-manual .pares { margin: 8px 0 12px; }
.alta-clave { font-variant-numeric: tabular-nums; font-weight: 600; word-break: break-word; user-select: all; }
.alta-pasos .ent-campo { margin: 10px 0 0; }
@media (max-width: 899px) { .ent-alta { margin: 0; } }