/* ============ El panel del dueño (y activar, entrar y recuperar) ============
   Va como los Ajustes del celular: un inicio con el resumen y listas que llevan a pantallas cortas.
   Mismo papel, tinta y verde salvia que la portada: hojas blancas con línea fina, íconos en salvia.
   Se monta sobre app.css. Va aparte para que la página del chip, la que tiene que abrir con mala señal, no la cargue. */

.i-casco { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'><path d='M3.5 17.5V14a8.5 8.5 0 0 1 17 0v3.5z'/><path d='M11 11h9.3'/></svg>"); }
.i-llavero { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><circle cx='12' cy='5' r='2.6'/><rect x='6.5' y='8.5' width='11' height='13' rx='4'/><path d='M10 15h4' stroke-linecap='round'/></svg>"); }
.i-ajustes { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M4 7h10M18 7h2M4 17h2M10 17h10'/><circle cx='16' cy='7' r='2.2'/><circle cx='8' cy='17' r='2.2'/></svg>"); }
.i-salir { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h5v16h-5M10 8l-4 4 4 4M6 12h10'/></svg>"); }
.i-bajar { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M5 20h14'/></svg>"); }
.i-basura { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M9 7V4.5h6V7M6 7l1 13h10l1-13'/></svg>"); }
.i-x { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>"); }
.i-atras { --icono: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>"); }
.ico { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.flecha { width: 8px; height: 14px; flex: none; background: var(--tenue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'><path d='M1.5 1.5 7.5 7.5l-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'><path d='M1.5 1.5 7.5 7.5l-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }

.caja.angosta { max-width: 480px; }
.intro { margin: 0 4px 16px; color: var(--suave); font-size: 15px; }
.caja > h1, .caja > .intro:first-child { margin-top: 12px; }

/* ---------- Barra de una pantalla de adentro: regresar y el título al centro ---------- */
.barra.sub { min-height: 56px; padding: 6px max(8px, calc((100% - 560px) / 2)); }
.atras { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px; padding: 8px 12px 8px 6px; border-radius: 999px; font-size: 15px; font-weight: 600; }
.atras:hover { background: rgba(29, 35, 32, .05); }
.barra .titulo { position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 196px); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--titulo); font-size: 18px; font-weight: 500; letter-spacing: -.01em; }

/* ---------- Confirmación: una cápsula salvia bajo la barra ---------- */
.flash {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(528px, calc(100% - 32px)); margin: 12px auto 0; padding: 10px 18px 10px 12px;
  border-radius: 14px; font-weight: 600; line-height: 1.3; color: var(--acento-osc);
  background: var(--acento-suave); border: 1px solid rgba(47, 95, 82, .16);
  animation: aparece .35s ease-out;
}
.caja > .flash { margin: 0 auto 14px; }
.flash::before {
  content: ''; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6.5 12.5 3.8 3.8 7.2-8'/></svg>") center / 15px no-repeat;
  background-color: var(--acento);
}
@keyframes aparece { from { opacity: 0; transform: translateY(-6px); } }
.error { margin: 0 0 14px; }

/* ---------- Saludo y estado ---------- */
.hola { margin: 14px 4px 14px; }
.hola h1 { margin: 0 0 10px; font-size: 36px; }
.pildora { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; background: var(--acento-suave); color: var(--acento-osc); }
.pildora i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pildora.falta { background: #f6e9d2; color: #87531b; }

/* Lo que falta: ámbar, porque no es urgente pero sí importa. El rojo se queda para la emergencia. */
.falta-caja {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; margin: 0 0 10px; color: var(--texto); text-decoration: none;
  background: #fbf3e6; border: 1px solid #ecd9b8;
}
.falta-caja > .ico { width: 20px; height: 20px; color: #a8661f; align-self: flex-start; margin-top: 1px; }
.falta-caja > span:nth-child(2) { flex: 1; }
.falta-caja b { display: block; font-size: 15px; }
.falta-caja b + span { display: block; margin-top: 2px; font-size: 14px; color: var(--suave); }

/* ---------- La vista previa: el perfil del paramédico en chiquito ---------- */
.previa { padding: 12px; border-radius: 22px; margin: 0 0 6px; }
.previa-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 6px 10px; }
.previa-cabeza .t { margin: 0; }
.previa-cabeza a { font-size: 14px; font-weight: 600; color: var(--acento); text-decoration: none; white-space: nowrap; }
.previa .no-casco { padding: 9px; margin: 0 0 8px; border-radius: 14px; font-size: 12px; }
.previa .no-casco::before { width: 15px; height: 15px; }
.previa .quien { gap: 12px; padding: 6px 6px 10px; background: none; border: 0; box-shadow: none; }
.previa .quien img, .previa .quien .inicial { width: 52px; height: 52px; font-size: 22px; }
.previa .quien h3 { margin: 0 0 1px; font-size: 19px; }
.previa .quien p { font-size: 14px; }
.previa .datos { gap: 8px; }
.previa .dato { padding: 10px 12px; border-radius: 16px; }
.previa .dato > span { margin-bottom: 3px; font-size: 10.5px; }
.previa .dato p { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.previa .dato.sangre b { font-size: 38px; }

/* ---------- Chips ---------- */
.chips-lista { display: grid; gap: 10px; margin: 0 0 12px; }
.chip-t {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; color: var(--texto); text-decoration: none;
  background: var(--hoja); border: 1px solid var(--linea); box-shadow: var(--sombra); transition: border-color .2s;
}
a.chip-t:hover { border-color: var(--linea-fuerte); }
a.chip-t:active { transform: scale(.99); }
.chip-t.grande { margin: 2px 0 12px; }
.chip-t.plano { margin: 0 0 16px; padding: 10px; border-radius: 14px; background: var(--fondo); box-shadow: none; border-color: transparent; }
.chip-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--acento-suave); color: var(--acento); }
.chip-ico .ico { width: 24px; height: 24px; }
.chip-txt { flex: 1; min-width: 0; }
.chip-txt b { display: block; font-size: 17px; font-weight: 600; }
.chip-txt b .mono { margin-left: 4px; font-size: 14px; font-weight: 500; color: var(--suave); }
.chip-txt small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; color: var(--suave); }
.punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #3f9a6b; box-shadow: 0 0 0 3px rgba(63, 154, 107, .16); }

/* ---------- Listas agrupadas, como Ajustes ---------- */
.grupo-t { margin: 22px 18px 8px; }
.nota-grupo { margin: 8px 18px 0; font-size: 13px; color: var(--suave); }
.filas { list-style: none; margin: 0 0 12px; padding: 0; border-radius: 18px; overflow: hidden; }
.filas li { position: relative; }
.filas li + li::before { content: ''; position: absolute; top: 0; left: 60px; right: 0; border-top: 1px solid var(--linea); }
.filas form { margin: 0; }
.fila, .filas a {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 16px 10px 14px;
  color: var(--texto); text-decoration: none; transition: background-color .15s;
}
button.fila { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.filas a:hover, button.fila:hover { background-color: #fbf9f5; }
.filas a:active, button.fila:active { background-color: var(--fondo); }
.fila-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--acento-suave); color: var(--acento); overflow: hidden; }
.fila-ico.foto { background: var(--gris-claro); }
.fila-ico.foto img { width: 100%; height: 100%; object-fit: cover; }
.fila-ico.urgente { background: var(--rojo-suave); color: var(--rojo); }
.fila-txt { flex: 1; min-width: 0; }
.fila-txt b { display: block; font-size: 16px; font-weight: 600; }
.fila-txt small { display: block; font-size: 13.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-txt small.falta { color: #87531b; }
.filas label.fila-txt { margin: 0; font-size: inherit; font-weight: inherit; color: var(--texto); cursor: pointer; }
.fila input.interruptor {
  width: 50px; height: 30px; flex: none; margin: 0; border-radius: 999px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: #ddd6ca radial-gradient(circle at 15px 50%, #fff 0 12px, transparent 12.5px) no-repeat;
  transition: background-position .25s, background-color .25s;
}
.fila input.interruptor:checked { background-color: var(--acento); background-position: 20px 0; }
.filas.peligro .fila-txt b { color: var(--rojo-osc); }
.filas.peligro .fila-ico { background: var(--rojo-suave); color: var(--rojo); }

/* ---------- Errores pegados al campo ---------- */
form label.mal { color: var(--rojo-osc); }
label.mal input, label.mal select, label.mal textarea { border-color: rgba(215, 31, 38, .55); box-shadow: 0 0 0 4px rgba(215, 31, 38, .08); }
.campo-error { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--rojo-osc); }
.campo-error::before { content: '!'; width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 800; }
fieldset.mal-grupo { border-color: rgba(215, 31, 38, .45); }

/* ---------- Vacío ---------- */
.vacio { display: grid; justify-items: center; gap: 4px; padding: 22px 16px 20px; text-align: center; }
.vacio.grande { padding: 30px 20px 26px; margin-top: 12px; }
.vacio .circulo { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); }
.vacio .circulo .ico { width: 26px; height: 26px; }
.vacio b { font-size: 17px; }
.vacio h1 { margin: 0; font-size: 24px; }
.vacio p { max-width: 340px; margin: 0; font-size: 15px; color: var(--suave); }
.vacio p + p { margin-top: 4px; }
.vacio .boton { margin-top: 14px; }

/* ---------- Formularios del panel ---------- */
.formu .boton, .vidrio.formu > .boton { width: 100%; }
.dos.siempre { grid-template-columns: 1fr 1fr; }
.etiqueta-campo { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--suave); }
.campo-opciones { margin: 0 0 14px; }
.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opciones.cuatro { grid-template-columns: repeat(4, 1fr); }
.opciones.dos-col { grid-template-columns: repeat(2, 1fr); }
form .opciones label { position: relative; margin: 0; }
.opciones .ancho { grid-column: 1 / -1; }
.opciones input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opciones span {
  display: grid; place-items: center; min-height: 48px; padding: 0 8px; border-radius: 12px; text-align: center;
  font-size: 16px; font-weight: 700; color: var(--texto); background: #fff; border: 1px solid var(--linea-fuerte); transition: background .2s, color .2s, border-color .2s;
}
.opciones .ancho span { min-height: 42px; font-size: 14px; font-weight: 600; color: var(--suave); }
.opciones.cuatro span { font-size: 17px; }
.opciones input:checked + span { background: var(--acento); color: #fff; border-color: var(--acento); }
.opciones input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
input.codigo { font-family: var(--mono); font-size: 22px; letter-spacing: .14em; text-transform: uppercase; text-align: center; }

/* El botón de guardar se queda abajo, a la mano del pulgar */
.guardar-fijo { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; margin: 6px 0 16px; }
.guardar-fijo > .boton { width: 100%; }
.dos-botones { display: flex; gap: 10px; }
.dos-botones > .boton { flex: 1; }
.dos-botones > .boton.claro { flex: 0 0 auto; }
.guardar-fijo.dos-botones > .boton { width: auto; }
.botones-col { display: grid; gap: 10px; margin: 14px 0 0; }
.botones-col .boton, .botones-col form, .botones-col form .boton { width: 100%; margin: 0; }

/* Contactos: cada uno en su tarjeta, y un hueco punteado para agregar otro */
.contacto-t { padding: 16px 16px 4px; border-radius: 18px; margin: 0 0 12px; }
.contacto-t .cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.contacto-t .cab b { font-size: 17px; }
.contacto-t .cab .pildora { padding: 4px 10px 4px 8px; font-size: 12px; }
form label.check.quitar { margin: 0 0 14px; font-size: 14px; color: var(--suave); }
.hueco {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; margin: 0 0 12px; border-radius: 18px;
  border: 1.5px dashed var(--linea-fuerte); background: transparent; color: var(--suave); font-weight: 600; cursor: pointer;
}
.hueco:hover { background: #fff; color: var(--texto); }
.nuevo-contacto[open] > .hueco { display: none; }

/* Lo opcional, plegado */
.mas-campos { margin: 0 0 14px; border-radius: var(--radio); }
.mas-campos > summary { display: flex; align-items: center; gap: 8px; padding: 16px; font-weight: 600; }
.mas-campos > summary span { color: var(--tenue); font-weight: 500; }
.mas-campos > summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 400; line-height: 1; color: var(--tenue); }
.mas-campos[open] > summary::after { content: '−'; }
.mas-campos > div { padding: 0 16px 4px; }

/* Foto */
.foto-grande { display: grid; justify-items: center; gap: 12px; padding: 24px 18px; }
.foto-grande img, .foto-grande .inicial { width: 160px; height: 160px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; }
.foto-grande .inicial { display: grid; place-items: center; font-size: 64px; }
.foto-grande form { margin: 0; }
.subir-foto label.boton { margin: 0; color: #fff; font-size: 16px; }
.subir-foto input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Confirmar algo que no se deshace */
.confirmar h2 { margin: 0 0 8px; font-size: 19px; }
.confirmar p { color: var(--suave); }
.confirmar form { margin: 14px 0 0; }

/* Activar: pasos */
.paso-de { margin: 14px 4px 6px; font-size: 13px; font-weight: 600; color: var(--suave); }
.progreso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 4px 18px; }
.progreso i { height: 4px; border-radius: 999px; background: var(--linea); }
.progreso i.si { background: var(--acento); }

/* ---------- En la compu: el inicio a dos columnas, la vista previa fija a la derecha ---------- */
@media (min-width: 900px) {
  .inicio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "hola previa" "resto previa"; column-gap: 28px; align-items: start; }
  .inicio-hola { grid-area: hola; }
  .inicio-previa { grid-area: previa; position: sticky; top: 84px; margin-top: 22px; }
  .inicio-resto { grid-area: resto; }
  .inicio .grupo-t:first-child { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* Activar, último paso: cómo se entra después (folio + código, sin contraseña) */
.acceso-chip { margin: 0 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--acento-suave); color: var(--acento-osc); font-size: 16px; }
.acceso-chip .mono { font-size: 1em; letter-spacing: .04em; }