/* El vestido de Puntual: Vino · Ámbar · Lienzo. La regla que gobierna
   todas las demás: el vino es estructura, el lienzo es el papel, el
   ámbar significa "activo" y nada más. Entrada/salida hablan en
   semáforo. (El cacao y el hueso se jubilaron; el ámbar se queda.) */

@font-face {
  font-family: 'Satoshi';
  src: url('/estaticos/fuentes/Satoshi-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/estaticos/fuentes/Satoshi-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/estaticos/fuentes/Satoshi-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/estaticos/fuentes/Satoshi-900.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}

:root {
  --vino: #31081F;
  --ambar: #F2B01E; --ambar-hondo: #B07C00; --sobre-ambar: #33241A;
  --ambar-tinta: #B07C00; --lienzo: #F6F6F3;
  --tinta: #33241A; --tinta-suave: #7C7666;
  --fondo: #F6F6F3; --tarjeta: #FFFFFF; --borde: #E3DECF;
  --verde: #067647; --rojo: #B42318;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
       font-size: 16px; line-height: 1.5;
       background: var(--fondo); color: var(--tinta); }
a, nav a, .forma button, .forma input, .boton-suave, .portada li a {
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .12s ease; }

/* Las páginas se FUNDEN en vez de parpadear: toda navegación clásica
   (elegir bot, crear, guardar, cambiar de pestaña) se siente app, no
   recarga. Los navegadores que no lo hablan lo ignoran sin pena. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .14s; }
::view-transition-new(root) { animation-duration: .14s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* La barra es cacao: la estructura oscura donde la marca vive en claro. */
aside { position: fixed; top: 0; bottom: 0; left: 0; width: 230px;
        background: var(--vino); padding: 24px 14px; }
.marca { padding: 0 12px; }
.marca svg { display: block; width: 162px; height: auto; }
aside .org { color: rgba(246, 246, 243, .55); font-size: 13px;
             padding: 2px 12px 20px; }
nav a { display: flex; align-items: center; gap: 10px; min-height: 44px;
        padding: 10px 12px; margin: 2px 0; border-radius: 8px;
        color: rgba(246, 246, 243, .78); text-decoration: none;
        font-size: 16px; font-weight: 500; }
nav a:hover { background: rgba(246, 246, 243, .08); color: #FFFFFF; }
/* El activo nace en la ESQUINA de la pantalla (listón ámbar al filo)
   y cruza toda la barra hasta CONECTAR con el lienzo: una sola pieza
   de hueso, como la referencia. */
nav a.activo { background: var(--lienzo); color: var(--tinta);
               border-left: 3px solid var(--ambar); border-radius: 0;
               margin-left: -14px; margin-right: -14px;
               padding-left: 23px; padding-right: 26px;
               font-weight: 700; }
nav a.activo:hover { background: var(--lienzo); }
nav svg, .icono-liga svg { width: 20px; height: 20px; flex: none; }
.lienzo { margin-left: 230px; padding: 28px 32px 48px; }
/* EL MARCO DEL CONTENIDO, completo: techo 28, piso 48, lados 32 y su
   cuarta pared — ancho máximo 1160 CENTRADO. Igual en toda la casa.
   El fundido acompaña a los viajes sin recarga (app.js). */
#contenido { max-width: 1160px; margin: 0 auto;
             transition: opacity .12s ease; }
#contenido.cambiando { opacity: 0; }

.sub { color: var(--tinta-suave); font-size: 14px; margin: 2px 0 24px; }
.suave { color: var(--tinta-suave); font-size: 13px; }
a { color: var(--ambar-tinta); text-decoration: none; }

/* El filtro por sitio de Asistencias: pastillas arriba de la jornada;
   la elegida en ámbar, las demás tarjetitas blancas. */
.filtro-sitios { display: flex; flex-wrap: wrap; gap: 8px;
                 margin: 0 0 12px; }
.chip-sitio { border: 1px solid var(--borde); border-radius: 999px;
              background: var(--tarjeta); color: var(--tinta);
              font-size: 13px; font-weight: 500; padding: 7px 15px;
              transition: background .15s ease, border-color .15s ease; }
.chip-sitio:hover { border-color: #C9C2AE; }
.chip-sitio.on { background: var(--ambar); border-color: var(--ambar);
                 color: var(--sobre-ambar); font-weight: 700; }

/* El día en jornadas: el primer rectángulo del dashboard de Asistencias.
   Una barra por persona sobre el eje del día; verde vivo = sigue adentro,
   verde sereno = ya salió, ámbar = retardo o salida sin marcar. */
.jornada { background: var(--tarjeta); border: 1px solid var(--borde);
           border-radius: 14px; padding: 20px 22px 10px; }
.dia-cabeza { display: flex; align-items: baseline; gap: 16px;
              flex-wrap: wrap; margin-bottom: 14px; }
.dia-titulo { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.dia-fecha { font-size: 14px; font-weight: 400; color: var(--tinta-suave); }
.dia-dato { font-size: 13.5px; color: var(--tinta-suave); }
.dia-dato b { color: var(--tinta); font-weight: 600;
              font-variant-numeric: tabular-nums; }
.dia-dato .punto-estado { display: inline-block; vertical-align: 1px;
                          margin-right: 4px; }
.punto-estado.neutro { background: #7C7666; animation: none; }
.punto-estado.mini { width: 7px; height: 7px; }
.dia-nav { margin-left: auto; font-size: 13px; color: #A39B8A; }
.eje { position: relative; height: 16px; margin: 0 96px 6px 188px;
       font-size: 11px; color: #A39B8A; }
.eje > span { position: absolute; transform: translateX(-50%); }
.eje .eje-fin { right: 0; left: auto; transform: none; }
.eje .eje-esperada { color: var(--ambar-tinta); }
.fila-dia { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.fila-dia.ausente { opacity: .55; }
.avatar.chico { width: 28px; height: 28px; font-size: 10px; }
.quien-dia { width: 136px; flex: none; font-size: 14px; font-weight: 600;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pista { flex: 1; position: relative; height: 12px; background: #F1EEE6;
         border-radius: 6px; }
.esperada { position: absolute; top: -4px; bottom: -4px;
            border-left: 1px dashed #D6B24A; }
.retardo { position: absolute; top: 4px; bottom: 4px; background: #E8C15A;
           border-radius: 2px; }
.tramo { position: absolute; top: 0; bottom: 0; border: 0; padding: 0;
         background: #12B76A; border-radius: 6px; cursor: pointer;
         transition: filter .15s ease; }
.tramo:hover { filter: brightness(.93); }
.tramo.cerrado { background: #9DC7B1; }
.tramo.sin-salida { background: #E8C15A; }
.tramo.vivo::after { content: ''; position: absolute; right: 2.5px;
                     top: 2.5px; width: 7px; height: 7px; border-radius: 50%;
                     background: #fff; color: rgba(255, 255, 255, .55);
                     animation: late 2.2s ease-out infinite; }
.horas { width: 84px; flex: none; text-align: right; font-size: 13.5px;
         font-weight: 600; font-variant-numeric: tabular-nums; }
.horas .punto-estado { display: inline-block; vertical-align: 1px;
                       margin-left: 5px; }
.fila-dia .falta { color: var(--rojo); opacity: .75; font-size: 13px; }
.fila-dia .pendiente { color: var(--ambar-tinta); font-size: 13px; }
.pie-dia { margin: 10px 0 6px; font-size: 12px; color: #A39B8A; }
/* El cuerpo del día: con mucha gente scrollea POR DENTRO — la cabeza
   y el eje se quedan, la página no crece. */
.dia-cuerpo { max-height: max(340px, calc(100dvh - 310px));
              overflow-y: auto; overscroll-behavior: contain; }
.tarjeta-evidencia { position: absolute; top: 18px; z-index: 25;
                     min-width: 210px; max-width: 280px;
                     background: var(--tarjeta); border: 1px solid var(--borde);
                     border-radius: 14px; padding: 10px 14px;
                     display: flex; gap: 16px; animation: caeEv .18s ease;
                     box-shadow: 0 8px 22px rgba(61, 42, 28, .10); }
@keyframes caeEv { from { opacity: 0; transform: translateY(-4px); }
                   to { opacity: 1; transform: none; } }
.evento-ev { display: flex; flex-direction: column; gap: 3px;
             font-size: 12px; }
.evento-ev .titulo-ev { font-size: 11px; color: var(--tinta-suave); }
.evento-ev .hora-ev { font-size: 15px; font-weight: 600;
                      font-variant-numeric: tabular-nums; }
.evento-ev img { width: 44px; height: 44px; border-radius: 8px;
                 object-fit: cover; }

.vacio { background: var(--tarjeta); border: 1px solid var(--borde);
         border-radius: 14px; padding: 48px 24px; text-align: center;
         color: var(--tinta-suave); }

/* La forma habla con iconos adentro de las cajas, no con letreros.
   Vive plegada tras Agregar usuario y cae como barra al abrirla,
   gemela de la barra de Nuevo sitio: hueso, filo ámbar y bajita. */
.forma { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
         background: var(--lienzo); border: 1px solid var(--ambar);
         border-radius: 10px; padding: 9px 14px; margin-bottom: 14px;
         animation: caeEv .18s ease; }
.forma[hidden] { display: none; }
.campo { position: relative; flex: 1; min-width: 200px; }
.campo.crece { flex: 1.4; }
/* El número de empleado es corto: no necesita el ancho de un nombre. */
.campo.campo-numero { flex: 0 1 160px; min-width: 130px; }
.campo svg { position: absolute; left: 13px; top: 50%; margin-top: -8px;
             width: 16px; height: 16px; color: #A39B8A; pointer-events: none;
             transition: color .18s ease; }
.campo input { width: 100%; padding: 10px 12px 10px 39px; }
.campo input:focus ~ svg,
.campo input:not(:placeholder-shown) ~ svg { color: var(--tinta); }
.forma input { min-height: 38px; font-size: 14px; border: 1px solid #D8D2C2;
               border-radius: 7px; font-family: inherit; font-weight: 400;
               background: var(--tarjeta); }
.forma input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
.forma ::placeholder { color: #A39B8A; }
/* Los botones de acción: cajita gris que DESPIERTA en ámbar al pasar,
   con levantadita, sombra suave y la movidita del icono adentro (el +
   gira, la campana suena). La campana y los abridores de barra hablan
   el mismo idioma. */
/* Botones de acción: tarjetitas blancas en reposo (la referencia) que
   DESPIERTAN en ámbar al pasar el mouse — la regla B1 sigue viva. */
.campana, .abre-barra { border: 1px solid var(--borde); border-radius: 12px;
                 background: var(--tarjeta);
                 color: var(--tinta); cursor: pointer;
                 display: inline-flex; align-items: center;
                 justify-content: center; flex: none; position: relative;
                 box-shadow: 0 1px 2px rgba(61, 42, 28, .05);
                 transition: background .18s ease, color .18s ease,
                             border-color .18s ease,
                             transform .16s ease, box-shadow .18s ease; }
.campana:hover, .abre-barra:hover, .abre-barra.prendido {
  background: var(--ambar); border-color: var(--ambar);
  color: var(--sobre-ambar); }
.campana:hover, .abre-barra:hover { transform: translateY(-2px);
                             box-shadow: 0 5px 12px rgba(61, 42, 28, .14); }
.campana:active, .abre-barra:active { transform: translateY(0) scale(.95);
                               box-shadow: 0 1px 2px rgba(61, 42, 28, .08); }
.campana { width: 44px; height: 44px; }
.abre-barra { height: 44px; padding: 0 16px; gap: 8px; font-family: inherit;
              font-size: 14px; font-weight: 700; }
.abre-barra > svg { width: 14px; height: 14px; transition: transform .22s ease; }
#abre-alta:hover > svg { transform: rotate(90deg); }
#nuevo-sitio:hover > svg { animation: clava .45s ease; }
@keyframes clava { 0% { transform: translateY(0); }
                   40% { transform: translateY(-3.5px); }
                   70% { transform: translateY(1px); }
                   100% { transform: translateY(0); } }
@keyframes campaneo { 0% { transform: rotate(0); }
                      25% { transform: rotate(13deg); }
                      50% { transform: rotate(-10deg); }
                      75% { transform: rotate(6deg); }
                      100% { transform: rotate(0); } }
.barrido { position: absolute; left: 0; bottom: 0; height: 4px; width: 0;
           background: var(--sobre-ambar); opacity: .85;
           transition: width .5s ease; }

.boton-suave { border: 1.5px solid var(--ambar-tinta); color: var(--ambar-tinta);
               background: transparent; border-radius: 8px; padding: 6px 14px;
               font-family: inherit; font-size: 14px; font-weight: 600;
               cursor: pointer; }
.boton-suave:hover { background: var(--lienzo); transform: translateY(-1px); }
.boton-suave:active { transform: scale(.96); }

.cabecera { display: flex; justify-content: space-between; align-items: center;
            gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cabecera .sub { margin: 0; }
#buscar { padding: 8px 38px 8px 35px; min-height: 44px; width: 100%;
          border: 1px solid var(--borde); border-radius: 12px;
          font-family: inherit;
          font-size: 15px; background: var(--tarjeta); }
#buscar::-webkit-search-cancel-button { -webkit-appearance: none;
                                        appearance: none; }
/* La tachita del buscador: solo existe cuando hay algo que borrar. */
.campo-buscar .limpia { position: absolute; right: 7px; top: 50%;
                        margin-top: -13px; width: 26px; height: 26px;
                        border: 0; border-radius: 7px; background: transparent;
                        color: #A39B8A; cursor: pointer;
                        display: inline-flex; align-items: center;
                        justify-content: center;
                        transition: background .15s ease, color .15s ease; }
.campo-buscar .limpia:hover { background: var(--lienzo); color: var(--tinta); }
.campo-buscar .limpia[hidden] { display: none; }
/* La regla de la lupa (svg absoluto) alcanzaba también a esta X y la
   descentraba: aquí vuelve al flujo y el flex del botón la centra. */
.campo-buscar .limpia svg { position: static; margin: 0;
                            width: 13px; height: 13px; }
#buscar:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
/* El padrón en una SOLA columna: la fila usa el ancho del marco y toda
   su información cabe en un renglón — identidad, su gente, su bot y su
   modalidad, sin apilar nada debajo del nombre. */
.lista { display: grid; gap: 10px; grid-template-columns: 1fr; }
/* El sitio es la TARJETA y sus teléfonos viven adentro: la fila deja
   de flotar sola y el grupo se ve de un vistazo. Sin overflow oculto —
   el menucito de los puntitos tiene que poder salirse. */
.sitio { background: var(--tarjeta); border: 1px solid var(--borde);
         border-radius: 14px; }
.miembro { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
           background: none; border: 0; min-width: 0;
           border-bottom: 1px solid #F3F1EB;
           transition: background .15s ease, opacity .18s ease,
                       transform .18s ease; }
.sitio .miembro:last-child { border-bottom: 0; }
.miembro:hover { background: var(--lienzo); }
.retrato { position: relative; flex: none; display: inline-flex; }
/* El estado vive anclado a la esquina del avatar, como los mensajeros:
   verde late (conectado), ámbar espera, rojo perdió el enlace. */
.punto-estado.ancla { position: absolute; right: -2px; bottom: -2px;
                      width: 11px; height: 11px;
                      border: 2px solid var(--tarjeta); }
.avatar { width: 38px; height: 38px; border-radius: 50%; color: #fff;
          font-size: 13px; font-weight: 600; display: inline-flex; flex: none;
          align-items: center; justify-content: center;
          position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: cover; }
/* La foto se pone desde el propio círculo: al pasar, la camarita. */
.sube { position: absolute; inset: 0; display: flex; align-items: center;
        justify-content: center; background: rgba(61, 42, 28, .45);
        color: #fff; opacity: 0; cursor: pointer;
        transition: opacity .15s ease; }
.avatar:hover .sube, .sube:focus-within { opacity: 1; }
.sube svg { width: 14px; height: 14px; }
.quien { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
/* La identidad se apila: el nombre manda (16) y su teléfono vive
   debajo en chiquito (13, con el bot que usa adentro). El .quien crece
   para que su gente y la modalidad caigan siempre en el mismo carril. */
.miembro .quien { flex: 1; }
.quien .nombre { font-weight: 600; font-size: 16px; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
/* Su gente, en caritas encimadas: quién registra a quién, de un vistazo.
   Solo aparece en los de Equipo — el que se registra solo no trae gente. */
.registra { display: inline-flex; align-items: center; gap: 8px; flex: none;
            font-size: 13px; color: var(--tinta-suave); white-space: nowrap;
            margin-right: 14px; }
.pila { display: inline-flex; }
.carita { width: 24px; height: 24px; border-radius: 50%; color: #fff;
          font-size: 9px; font-weight: 700; display: inline-flex;
          align-items: center; justify-content: center; flex: none;
          border: 2px solid var(--tarjeta); margin-right: -8px; }
.carita:last-child { margin-right: 0; }
.tel { display: inline-flex; align-items: center; gap: 5px; }
.tel svg { width: 12.5px; height: 12.5px; flex: none; opacity: .8; }

/* El semáforo del bot: TODOS laten, cada quien con su color — verde
   conectado, ámbar espera, rojo perdió el enlace. La palabra vive en la
   leyenda y el tooltip, no en la fila. */
.punto-estado { width: 9px; height: 9px; border-radius: 50%; flex: none;
                animation: late 2.2s ease-out infinite; }
.punto-estado.conectado { background: #12B76A; color: rgba(18, 183, 106, .42); }
.punto-estado.espera { background: var(--ambar-hondo);
                       color: rgba(224, 168, 0, .45); }
.punto-estado.perdido { background: var(--rojo); color: rgba(180, 35, 24, .4); }
@keyframes late { 0% { box-shadow: 0 0 0 0 currentColor; }
                  70%, 100% { box-shadow: 0 0 0 7px transparent; } }
/* El titular chico y sobrio, como las apps buenas: «Equipo · 6» en
   tinta con su total en gris, y el censo de modalidades a la derecha.
   Sin lema: la vista se explica sola. */
/* Sin título de página: una etiqueta en versalitas (como BOTS) con el
   censo a su derecha — la elección B de Andre. */
/* El renglón del titular mide LO MISMO en toda la casa: con censo o
   sin él, la etiqueta cae en el mismo renglón del marco (centrada en
   una altura fija — la línea base la movía según sus vecinos). */
.titular { display: flex; align-items: center; gap: 12px;
           flex-wrap: wrap; margin: 0 0 12px; min-height: 26px; }
.titulo { font-size: 12px; font-weight: 700; letter-spacing: .14em;
          text-transform: uppercase; line-height: 1.3;
          color: var(--tinta-suave); }
.titulo .total { color: var(--tinta-suave); font-weight: 700;
                 font-size: 12px; }
/* La fila única de acciones: buscar a la izquierda, botones a la
   derecha, y las barras (Agregar, Nuevo sitio) caen debajo, una a la
   vez. El censo vive arriba, en el renglón del titular. */
.acciones-fila { display: flex; align-items: center; gap: 8px;
                 margin-bottom: 14px; }
/* Todo el encabezado en UN renglón: la etiqueta y el censo abren, el
   buscador se estira y los botones cierran. Sin dos pisos. */
.acciones-fila > .titulo { flex: none; margin-right: 2px; }
.acciones-fila > .censo { margin-left: 0; margin-right: 6px; gap: 12px; }
.censo { margin-left: auto; display: inline-flex; align-items: baseline;
         gap: 16px; font-size: 13px; color: var(--tinta-suave);
         white-space: nowrap; }
.censo-dato b { color: var(--tinta); font-weight: 600; font-size: 15px;
                font-variant-numeric: tabular-nums; }
.censo-dato svg { width: 13px; height: 13px; margin-right: 5px;
                  vertical-align: -1.5px; }
.mando { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
         background: var(--lienzo); border: 1px solid var(--ambar);
         border-radius: 10px; padding: 9px 14px; margin-bottom: 14px;
         animation: caeEv .18s ease; }
.mando[hidden] { display: none; }
.mando-cuenta { font-size: 13.5px; color: var(--tinta-suave);
                white-space: nowrap; }
.mando-cuenta b { color: var(--tinta); font-weight: 600;
                  font-variant-numeric: tabular-nums; }
.mando input { flex: 1; min-width: 180px; min-height: 38px;
               padding: 8px 12px; border: 1px solid #D8D2C2;
               border-radius: 8px; font-family: inherit; font-size: 14px; }
.mando input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
.manda { min-height: 38px; padding: 0 16px; border: 0;
         border-radius: 8px; background: var(--ambar);
         color: var(--sobre-ambar); font-family: inherit;
         font-size: 13.5px; font-weight: 600; cursor: pointer;
         position: relative; overflow: hidden;
         transition: background .18s ease, transform .15s ease; }
.manda:hover { background: var(--ambar); filter: brightness(.95);
               transform: translateY(-1px); }
.salir-sitio { width: 32px; height: 32px; border: 0; border-radius: 8px;
               background: transparent; color: var(--tinta-suave);
               cursor: pointer; display: inline-flex; align-items: center;
               justify-content: center; transition: background .15s ease; }
.salir-sitio:hover { background: rgba(61, 42, 28, .06); }
.salir-sitio svg { width: 15px; height: 15px; }
.marca-sitio { margin-left: auto; flex: none; display: none; }
.marca-sitio input { appearance: none; width: 21px; height: 21px; margin: 0;
                     border: 1.5px solid #D8D2C2; border-radius: 6px;
                     background: var(--tarjeta); cursor: pointer;
                     display: grid; place-content: center;
                     transition: background .15s ease, border-color .15s ease; }
.marca-sitio input::before { content: ''; width: 11px; height: 11px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0); background: var(--sobre-ambar);
  transition: transform .12s ease; }
.marca-sitio input:checked { background: var(--ambar);
                             border-color: var(--ambar); }
.marca-sitio input:checked::before { transform: scale(1); }
.lista.eligiendo .modo, .lista.eligiendo .acciones { display: none; }
.lista.eligiendo .marca-sitio { display: inline-flex; }
/* Los sitios en versalitas, el idioma de las etiquetas (como BOTS):
   ahora son la CABECERA de su tarjeta, sobre el lienzo. */
.sitio-titulo { display: flex; align-items: center; gap: 7px;
                padding: 9px 14px; margin: 0;
                background: var(--lienzo);
                border-bottom: 1px solid #EFEDE4;
                border-radius: 13px 13px 0 0;
                font-size: 12px; font-weight: 700;
                letter-spacing: .14em; text-transform: uppercase;
                color: var(--tinta-suave); }
.sitio-titulo svg { width: 14px; height: 14px; }
.sitio-titulo .suave { letter-spacing: normal; }
.campo-buscar { flex: 1; position: relative; }
/* En las filas de arriba el buscador vive a la DERECHA con ancho
   contenido: los botones del día a día quedan a la izquierda. */
.campo-buscar.derecha { flex: 0 1 300px; min-width: 170px;
                        margin-left: auto; }
.campo-buscar svg { position: absolute; left: 12px; top: 50%;
                    margin-top: -7px; width: 14px; height: 14px;
                    color: #A39B8A; pointer-events: none;
                    transition: color .18s ease; }
.campo-buscar input:focus ~ svg,
.campo-buscar input:not(:placeholder-shown) ~ svg { color: var(--tinta); }

/* La campanita vive en la esquina inferior derecha, al alcance de la
   mano, con su burbujita roja contando lo que falta por ver. Al
   tocarla, la cortina del panel SUBE desde la campana. */
/* Arriba de todo: los controles de Leaflet llegan a 800 y tapaban
   la campana en el Mapa. Ella siempre manda. */
.rincon { position: fixed; right: 26px; bottom: 22px; z-index: 1000; }
.campana svg { width: 18px; height: 18px; }
.campana:hover svg { animation: campaneo .5s ease; }
.globo { position: absolute; top: -4px; right: -4px; min-width: 17px;
         height: 17px; border-radius: 9px; background: #D92D20; color: #fff;
         font-size: 11px; font-weight: 600; padding: 0 5px;
         box-shadow: 0 0 0 2px var(--fondo);
         display: flex; align-items: center; justify-content: center; }
.globo[hidden] { display: none; }
.panel-notif { position: absolute; bottom: calc(100% + 10px); right: 0;
               width: 410px; max-width: 90vw; max-height: 320px;
               overflow: auto; background: var(--tarjeta);
               border: 1px solid var(--borde); border-radius: 12px;
               z-index: 30; opacity: 0;
               transform: translateY(6px) scale(.98);
               transform-origin: bottom right;
               transition: transform .2s ease, opacity .18s ease;
               pointer-events: none; }
.panel-notif.abierta { transform: none; opacity: 1; pointer-events: auto; }
/* Cada aviso es puro texto; lo no visto trae listón ámbar sobre hueso. */
.aviso { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
         border-bottom: 1px solid var(--lienzo); font-size: 14px; }
.aviso:last-child { border-bottom: 0; }
.aviso.nuevo { background: var(--lienzo); border-left: 3px solid var(--ambar);
               padding-left: 11px; }
.dicho { min-width: 0; }
.cuando { margin-left: auto; color: #A39B8A; font-size: 12px; flex: none;
          padding-left: 8px; }

/* La modalidad, decidida por el jefe, dicha con todas sus letras: un
   parcito donde la elegida es una tarjetita blanca sobre el hueso —
   Equipo registra a su gente, Solo se registra a sí mismo. */
.miembro .modo { display: inline-flex; margin-left: auto; flex: none;
                 background: var(--fondo); border: 1px solid var(--borde);
                 border-radius: 999px; padding: 3px; gap: 2px; }
.parte-modo { display: inline-flex; align-items: center; gap: 6px;
              border: 1px solid transparent; border-radius: 999px;
              background: none; padding: 6px 14px; cursor: pointer;
              font-family: inherit; font-size: 13px; font-weight: 500;
              color: var(--tinta-suave);
              transition: background .16s ease, color .16s ease,
                          border-color .16s ease; }
.parte-modo svg { width: 15px; height: 15px; flex: none; }
.parte-modo:hover { color: var(--tinta); }
.parte-modo.on { background: var(--tarjeta); border-color: var(--borde);
                 color: var(--tinta); font-weight: 700;
                 box-shadow: 0 1px 2px rgba(61, 42, 28, .06); }
.palanca { width: 34px; height: 20px; border-radius: 10px; border: 0;
           position: relative; cursor: pointer; background: var(--ambar);
           flex: none; transition: background .18s ease; }
.palanca::after { content: ''; position: absolute; top: 2px; left: 16px;
                  width: 16px; height: 16px; border-radius: 50%;
                  background: #fff; transition: left .18s ease; }
.palanca.ind { background: #D8D2C2; }
.palanca.ind::after { left: 2px; }
.palanca:hover { filter: brightness(.95); }

/* El menú de puntitos: las acciones de cada teléfono viven en un
   kebab (crecerá con las funciones que vengan). Eliminar pide su
   segundo toque en rojo, como el bote de antes. */
.acciones { position: relative; flex: none; margin-left: 2px; }
.kebab { width: 30px; height: 30px; border: 0; border-radius: 8px;
         background: transparent; color: #A39B8A; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center;
         transition: background .15s ease, color .15s ease, transform .15s ease; }
.kebab:hover { background: var(--lienzo); color: var(--tinta);
               transform: translateY(-1px); }
.kebab svg { width: 17px; height: 17px; }
.menucito { position: absolute; top: 36px; right: 0; z-index: 40;
            min-width: 185px; background: var(--tarjeta);
            border: 1px solid var(--borde); border-radius: 12px;
            overflow: hidden; animation: caeEv .18s ease;
            box-shadow: 0 8px 22px rgba(61, 42, 28, .10); }
.accion { display: flex; width: 100%; align-items: center; gap: 9px;
          padding: 10px 14px; border: 0; background: none;
          font-family: inherit; font-size: 13.5px; color: var(--tinta);
          cursor: pointer; border-bottom: 1px solid #F1EEE6;
          text-align: left;
          transition: background .12s ease; }
.menucito form:last-child .accion { border-bottom: 0; }
.accion:hover { background: var(--fondo); }
.accion svg { width: 15px; height: 15px; flex: none; }
.accion.peligro { color: var(--rojo); }
.accion.peligro.seguro, .accion.peligro.seguro:hover {
  background: var(--rojo); color: #fff; }
/* El acordeón de Mover a sitio: se abre adentro del menú, con su
   flechita girando y los sitios sangrados sobre fondo suave. */
.abre-mover .flechita { margin-left: auto; width: 13px; height: 13px;
                        transition: transform .18s ease; }
.abre-mover.abierto .flechita { transform: rotate(90deg); }
.sub-sitios { background: var(--fondo); border-bottom: 1px solid var(--lienzo); }
.sub-sitios .accion { padding-left: 38px; font-size: 13px; }
.sub-sitios form:last-child .accion { border-bottom: 0; }
.sub-vacio { margin: 0; padding: 10px 14px 10px 16px; max-width: 235px;
             font-size: 12.5px; line-height: 1.45;
             color: var(--tinta-suave); }
/* SU GENTE: el personal sin celular que este teléfono registra. El
   gafete en la fila (traje del gafete del bot) y el palomeo de
   cajitas en el acordeón del menucito. */
.su-gente { display: inline-flex; align-items: center; gap: 4px;
            margin-left: 9px; color: var(--ambar-tinta); font-weight: 600; }
.su-gente svg { width: 12px; height: 12px; }
.palomea .cajita { width: 17px; height: 17px; flex: none;
                   border: 1.5px solid #D8D2C2; border-radius: 5px;
                   background: var(--tarjeta); display: inline-flex;
                   align-items: center; justify-content: center;
                   color: var(--sobre-ambar);
                   transition: background .15s ease, border-color .15s ease; }
.palomea .cajita svg { width: 11px; height: 11px; opacity: 0;
                       transition: opacity .12s ease; }
.palomea.con-paloma .cajita { background: var(--ambar);
                              border-color: var(--ambar); }
.palomea.con-paloma .cajita svg { opacity: 1; }
.miembro.se-va, .gafete.se-va { opacity: 0; transform: scale(.94); }

.es-el, .es-el:hover { background: var(--lienzo);
                       box-shadow: inset 3px 0 0 var(--ambar); }
.es-el .avatar { animation: saludo .5s ease 2; }
@keyframes saludo { 0%, 100% { transform: none; }
                    50% { transform: translateY(-4px); } }

/* PERSONAL: la barra que espera y la gente en tarjetas compactas,
   gemelas de las de Teléfonos. El alta vive siempre abierta arriba —
   circulito, nombre, fecha, botón — y el circulito pinta las
   iniciales en vivo mientras se teclea (app.js). */
/* El alta de Personal es la MISMA barra que la de Teléfonos: misma
   caja, mismos campos con su iconito, mismo botón y misma tachita.
   Lo único suyo es el circulito que pinta las iniciales en vivo. */
.alta-personal .avatar { background: #D8D2C2; flex: none; }
.alta-personal input[name='nacimiento'] {
  font-variant-numeric: tabular-nums; }
.gafetes { display: grid; gap: 10px;
           grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gafete { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
          background: var(--tarjeta); border: 1px solid var(--borde);
          border-radius: 14px; min-width: 0;
          transition: border-color .15s ease, opacity .18s ease,
                      transform .18s ease; }
.gafete:hover { border-color: #C9C2AE; }
.gafete .acciones { margin-left: auto; }
.gafete-cumple { display: inline-flex; align-items: center; gap: 5px;
                 font-size: 12px; color: var(--tinta-suave); }
.gafete-cumple svg { width: 11px; height: 11px; flex: none; }
.gafete-cumple.del-mes { color: var(--ambar-tinta); }
/* El número de empleado: el de SU nómina, siempre a la vista. */
.gafete-numero { font-size: 12px; color: var(--tinta-suave); }

/* La pestaña Bot: el teléfono JUGABLE hasta la izquierda y a su lado
   EL RELEVO: una columna ancha con los bots; cuando el acompañante de
   crear/editar despierta, los bots le prestan su lugar y regresan al
   cerrarse. El ↺ vive prendido a la esquina del marco. */
/* El conjunto (teléfono + relevo) vive CENTRADO en el marco: el aire
   se reparte parejo a los dos lados, nada se estira para llenar. */
.taller { display: grid; grid-template-columns: auto minmax(0, 560px);
          justify-content: center; gap: 40px; align-items: start; }
.espejo { display: flex; flex-direction: column; align-items: center;
          gap: 12px; }
.relevo { min-width: 0; width: 100%; }
.relevo:has(#creador:not([hidden])) .lado-presets { display: none; }
/* El toggle de modos: Simulación (la experiencia pura del empleado) y
   Edición (el teléfono se desbloquea para armar el bot ahí mismo). */
.modos { display: inline-flex; background: var(--tarjeta);
         border: 1px solid var(--borde); border-radius: 999px;
         padding: 3px; gap: 2px; }
.modo { display: inline-flex; align-items: center; gap: 7px; border: 0;
        border-radius: 999px; background: transparent;
        color: var(--tinta-suave); font-family: inherit; font-size: 14px;
        font-weight: 500; padding: 8px 18px; cursor: pointer;
        transition: background .15s ease, color .15s ease; }
.modo svg { width: 14px; height: 14px; }
.modo:hover { color: var(--tinta); }
.modo.on { background: var(--ambar); color: var(--sobre-ambar);
           font-weight: 700; }
.tel-marco { position: relative; }
.tel-reinicia { position: absolute; top: -9px; right: -9px; z-index: 2;
                width: 30px; height: 30px; border: 1px solid var(--borde);
                border-radius: 50%; background: var(--tarjeta);
                color: #A39B8A; cursor: pointer; display: inline-flex;
                align-items: center; justify-content: center;
                transition: background .15s ease, color .15s ease; }
.tel-reinicia:hover { background: var(--lienzo); color: var(--tinta); }
.tel-reinicia svg { width: 14px; height: 14px; }
.telefono { border: 1px solid var(--borde); border-radius: 28px;
            background: var(--tarjeta); overflow: hidden;
            width: 380px; height: clamp(520px, 100vh - 138px, 780px);
            display: flex; flex-direction: column;
            box-shadow: 0 10px 30px rgba(61, 42, 28, .08); }
/* Vestido de edición: el marco ámbar punteado y la franja que avisa. */
.telefono.editando { outline: 2px dashed #E0BE5C; outline-offset: 4px; }
.tel-edicion { display: flex; align-items: center; justify-content: center;
               gap: 7px; background: var(--lienzo); color: var(--ambar-tinta);
               font-size: 12.5px; font-weight: 700; padding: 7px;
               border-bottom: 1px solid var(--borde); flex: none; }
.tel-edicion[hidden] { display: none; }
.tel-edicion svg { width: 13px; height: 13px; }
.tel-atras.viva { cursor: pointer; }
.tel-barra { display: flex; justify-content: space-between;
             align-items: center; padding: 14px 26px 3px; flex: none; }
.tel-hora { font-size: 14px; font-weight: 600;
            font-variant-numeric: tabular-nums; }
.tel-senales { display: inline-flex; align-items: center; gap: 5px;
               color: var(--tinta); }
.tel-senales svg { height: 12px; width: auto; }
.tel-cabeza { display: flex; align-items: center; gap: 8px;
              font-weight: 700; font-size: 17px; flex: none;
              padding: 8px 14px 11px;
              border-bottom: 1px solid var(--borde); }
.tel-cabeza .suave { font-weight: 400; font-size: 15px; }
.tel-atras { display: inline-flex; color: var(--tinta); }
.tel-atras svg { width: 20px; height: 20px; }
.tel-nombre { flex: 1; text-align: center; }
.tel-avatar { width: 33px; height: 33px; border-radius: 50%; flex: none;
              background: var(--ambar); color: var(--sobre-ambar);
              font-size: 14px; font-weight: 700; display: inline-flex;
              align-items: center; justify-content: center; }
/* El chat es blanco y las burbujas del bot, hueso: como la referencia. */
.tel-chat { background: var(--tarjeta); padding: 16px 14px; flex: 1;
            min-height: 0; overflow-y: auto; scroll-behavior: smooth;
            display: flex; flex-direction: column; gap: 9px; }
.burbuja { max-width: 84%; padding: 9px 12px; border-radius: 12px;
           font-size: 13.5px; line-height: 1.45; }
.burbuja.bot { background: var(--lienzo);
               border-bottom-left-radius: 5px; align-self: flex-start; }
.burbuja.yo { background: var(--ambar); color: var(--sobre-ambar);
              border-bottom-right-radius: 5px; align-self: flex-end;
              font-weight: 700; }
.tel-teclado { background: #EFECE3; padding: 9px; display: flex;
               flex-direction: column; gap: 7px; }
.tec-fila { display: flex; gap: 7px; }
.tecla { flex: 1; background: var(--tarjeta); border: 1px solid var(--borde);
         border-radius: 11px; text-align: center; padding: 11px 4px;
         font-size: 14px; font-weight: 700; color: var(--tinta);
         cursor: pointer; user-select: none;
         transition: background .15s ease, border-color .15s ease,
                     transform .12s ease; }
.tecla:hover { background: var(--lienzo); border-color: var(--ambar);
               transform: translateY(-1px); }
.tecla:active { transform: scale(.97); }
/* Las teclas del modo edición: tocarlas ENTRA a su adentro; al pasar
   el mouse asoman sus herramientas (lápiz, apagador, tachita) y las
   apagadas se ven fantasmas. */
.tecla-ed { position: relative; flex: 1; background: var(--tarjeta);
            border: 1px solid var(--borde); border-radius: 11px;
            text-align: center; padding: 11px 4px; font-size: 14px;
            font-weight: 700; color: var(--tinta); cursor: pointer;
            user-select: none; font-family: inherit;
            transition: background .15s ease, border-color .15s ease; }
.tecla-ed:hover { background: var(--lienzo); border-color: var(--ambar); }
.tecla-ed.apagada { background: transparent; border-style: dashed;
                    color: var(--tinta-suave); font-weight: 500; }
.tecla-ed .gafetes { display: inline-flex; gap: 3px; margin-left: 6px;
                     vertical-align: -2px; }
.tecla-ed .gafetes svg { width: 12px; height: 12px; }
.chips { position: absolute; top: -12px; right: -7px; z-index: 3;
         display: none; gap: 4px; }
.tecla-ed:hover .chips, .chips:has(.seguro) { display: inline-flex; }
.chip { width: 22px; height: 22px; border-radius: 50%;
        background: var(--tarjeta); border: 1px solid var(--borde);
        color: var(--tinta-suave); cursor: pointer; display: inline-flex;
        align-items: center; justify-content: center;
        box-shadow: 0 2px 6px rgba(61, 42, 28, .12);
        transition: background .15s ease, color .15s ease,
                    border-color .15s ease; }
.chip svg { width: 11px; height: 11px; }
.chip:hover { color: var(--tinta); border-color: #A39B8A; }
.chip-quita:hover { background: #FEF2F2; border-color: #DC2626;
                    color: #DC2626; }
.chip-quita.seguro { background: #DC2626; border-color: #DC2626;
                     color: #FFF; }
/* La tecla fantasma: el + Botón de cada nivel del modo edición. */
.tecla-crea { flex: 1; background: transparent;
              border: 1.5px dashed #C9C2AE; border-radius: 11px;
              color: var(--tinta-suave); font-family: inherit;
              font-size: 13.5px; font-weight: 700; padding: 10px 4px;
              cursor: pointer;
              transition: background .15s ease, border-color .15s ease,
                          color .15s ease; }
.tecla-crea:hover { border-color: var(--ambar-tinta);
                    color: var(--ambar-tinta); }

/* El lado del taller: la tira de evidencia (y el creador guiado
   cuando la tecla fantasma lo llama). El árbol vive en el teléfono. */
.lado { min-width: 0; }
.seccion-titulo { display: flex; align-items: center;
                  font-size: 12px; font-weight: 700;
                  letter-spacing: .14em; text-transform: uppercase;
                  color: var(--tinta-suave); margin: 4px 0 10px; }
/* La columna de los bots: tarjetas blancas con su información; la
   elegida lleva el listón ámbar y SE ABRE trayendo su evidencia
   adentro como pastillas: cada evidencia es UNA elección. */
/* El carril de los bots: la columna mide el toggle más el teléfono
   (los 55px de arriba son el toggle con su aire), así el + Bot vive
   pegado al renglón del piso del celular. Las tarjetas scrollean en su
   riel con scrollbar finito y cálido. */
.lado-presets { min-width: 0; width: 100%; display: flex;
                flex-direction: column;
                height: calc(clamp(520px, 100vh - 138px, 780px) + 55px); }
.bots-carril { overflow-y: auto; flex: 1; min-height: 0;
               padding-right: 6px; scrollbar-width: thin;
               scrollbar-color: #D8D2C2 transparent; }
.bots-carril::-webkit-scrollbar { width: 8px; }
.bots-carril::-webkit-scrollbar-thumb { background: #D8D2C2;
                                        border-radius: 999px; }
.bots-carril::-webkit-scrollbar-track { background: transparent; }
.lado-presets .seccion-titulo { flex: none; }
.bot-tarjeta { position: relative; background: var(--tarjeta);
               border: 1px solid var(--borde); border-radius: 14px;
               margin-bottom: 10px;
               transition: border-color .15s ease, background .15s ease,
                           box-shadow .15s ease; }
.bot-tarjeta:hover { border-color: #C9C2AE; }
.bot-tarjeta.on { box-shadow: inset 3px 0 0 var(--ambar); }
.bot-liga { display: block; padding: 14px 16px; text-decoration: none;
            color: inherit; }
.bot-arriba { display: flex; align-items: center; gap: 8px; }
/* El tamaño de nombre de tarjeta ES UNO en toda la casa: 16px (la
   abierta apenas sube a 17). Grande y amable, sin gritar. */
.bot-nombre { flex: 1; min-width: 0; font-size: 16px; font-weight: 700;
              letter-spacing: -.01em; color: var(--tinta);
              white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.bot-tarjeta.on .bot-nombre { font-size: 17px; }
.bot-gente { display: inline-flex; align-items: center; gap: 5px;
             font-size: 13px; color: var(--tinta-suave); flex: none;
             font-variant-numeric: tabular-nums; }
.bot-gente svg { width: 15px; height: 15px; }
.bot-sub { display: flex; align-items: center; gap: 12px;
           font-size: 13px; color: var(--tinta-suave); margin-top: 4px;
           flex-wrap: wrap; }
/* Las miniaturas de evidencia hablan en ámbar tinta, como la referencia. */
.bot-mini { display: inline-flex; align-items: center; gap: 4px;
            color: var(--ambar-tinta); font-weight: 500; }
.bot-mini svg { width: 13px; height: 13px; }
.bot-adentro { border-top: 1px solid var(--borde); margin: 0 16px;
               padding: 12px 0 14px; }
/* La evidencia, en UNA tira: cada pastilla habla en dibujo y solo dice
   su palabra cuando está elegida. Los parcitos siguen siendo grupos —
   una elección cada uno, imposible el estado raro. */
.tira-evi { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.parcito-evi { display: flex; gap: 6px; }
.sep-evi { width: 1px; height: 20px; background: var(--borde); margin: 0 3px; }
.parte-evi { display: inline-flex; align-items: center; justify-content: center;
             gap: 6px; min-height: 34px; padding: 0 10px;
             border: 1px solid var(--borde); border-radius: 999px;
             background: var(--tarjeta); color: var(--tinta-suave);
             font-family: inherit; font-size: 13px; font-weight: 700;
             cursor: pointer;
             transition: background .15s ease, border-color .15s ease,
                         color .15s ease, padding .15s ease; }
.parte-evi svg { width: 16px; height: 16px; flex: none; }
.parte-evi .dice { display: none; }
.parte-evi:hover { border-color: #C9C2AE; color: var(--tinta); }
.parte-evi.on { background: var(--ambar); border-color: var(--ambar);
                color: var(--sobre-ambar); padding: 0 14px; }
.parte-evi.on .dice { display: inline; }
.bot-herramientas { position: absolute; top: 8px; right: 8px;
                    display: none; gap: 2px; align-items: center; }
.bot-tarjeta:hover .bot-herramientas,
.bot-herramientas:has(.seguro) { display: inline-flex; }
.quita-bot, .edita-bot { width: 22px; height: 22px; border: 0;
                         border-radius: 6px; background: transparent;
                         color: #C9C2AE; cursor: pointer;
                         display: inline-flex; align-items: center;
                         justify-content: center;
                         transition: background .15s ease,
                                     color .15s ease; }
.quita-bot svg, .edita-bot svg { width: 11px; height: 11px; }
.edita-bot:hover { background: var(--lienzo); color: var(--tinta); }
.quita-bot:hover { background: #FEF2F2; color: #DC2626; }
.quita-bot.seguro { background: #DC2626; color: #FFF; }
/* Al asomar las herramientas, la cuenta de gente les presta su lugar. */
.bot-tarjeta:hover .bot-gente { visibility: hidden; }
.renombra-forma { padding: 8px 10px; }
.renombra-forma[hidden] { display: none; }
.bot-liga[hidden], .bot-adentro[hidden] { display: none; }
/* El gafete del Equipo: el bot que usa, en cognac junto al teléfono. */
.bot-gafete { display: inline-flex; align-items: center; gap: 4px;
              margin-left: 9px; color: var(--ambar-tinta); font-weight: 600; }
.bot-gafete svg { width: 12px; height: 12px; }
/* El + del renglón de la etiqueta: chiquito y sobrio, despierta en
   ámbar y su cruz gira — el mismo idioma que Agregar teléfono. */
.bot-crea { margin-left: auto; width: 26px; height: 26px; flex: none;
            border: 1px solid var(--borde); border-radius: 8px;
            background: var(--tarjeta); color: var(--tinta-suave);
            cursor: pointer; display: inline-flex;
            align-items: center; justify-content: center;
            transition: background .15s ease, border-color .15s ease,
                        color .15s ease; }
.bot-crea:hover { background: var(--ambar); border-color: var(--ambar);
                  color: var(--sobre-ambar); transform: translateY(-1px); }
.bot-crea svg { width: 14px; height: 14px;
                transition: transform .22s ease; }
.bot-crea:hover svg { transform: rotate(90deg); }
.bot-crea[hidden] { display: none; }
#forma-bot { margin-bottom: 10px; }
.bot-nace { width: 100%; border: 1.5px solid var(--ambar);
            border-radius: 12px; background: var(--tarjeta);
            padding: 11px 12px; font-family: inherit; font-size: 14px;
            font-weight: 700; color: var(--tinta); outline: none;
            text-align: center; }
.bot-nace::placeholder { color: var(--tinta-suave); font-weight: 500; }

/* El acompañante: crear y editar en una sola pantalla, frase viva.
   Mide LO MISMO que la columna de bots a la que releva. */
.creador { width: 100%; }
.creador[hidden] { display: none; }
.creador-cabeza { display: flex; align-items: center;
                  justify-content: space-between; margin-bottom: 6px;
                  min-height: 30px; }
.creador-titulo { font-size: 14.5px; font-weight: 700;
                  color: var(--tinta); margin: 0; }
.creador-cierra { margin-left: auto; width: 30px; height: 30px; border: 0;
                  border-radius: 8px; background: transparent;
                  color: #A39B8A; cursor: pointer; display: inline-flex;
                  align-items: center; justify-content: center;
                  transition: background .15s ease, color .15s ease; }
.creador-cierra:hover { background: var(--lienzo); color: var(--tinta); }
.creador-cierra svg { width: 14px; height: 14px; }
.paso[hidden] { display: none; }
.paso-pregunta { font-size: 15px; font-weight: 700; color: var(--tinta);
                 margin: 0 0 10px; }
.eleccion { display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 6px; border-radius: 10px;
            transition: box-shadow .18s ease; }
/* El marco que guía: la decisión que toca ahora se enmarca en ámbar
   (como la tecla que nace) y se desenmarca al decidirse. */
.eleccion.te-toca { outline: 2px dashed #E0BE5C;
                    outline-offset: 4px; }
.eligible:focus-visible { outline: 2px solid var(--ambar);
                          outline-offset: -2px; }
.eligible { display: flex; flex-direction: column; align-items: center;
            gap: 3px; border: 1px solid #E3DECF; border-radius: 10px;
            background: var(--tarjeta); text-align: center;
            font-family: inherit; padding: 9px 4px; cursor: pointer;
            transition: background .15s ease, border-color .15s ease; }
.eligible:hover { border-color: #A39B8A; }
.eligible > svg { width: 17px; height: 17px; color: #7C7666; }
.eligible-nombre { font-size: 12.5px; font-weight: 600;
                   color: var(--tinta); }
/* La explicación de cada carta asoma como tooltip (title). */
.eligible-dice { display: none; }
.eligible.elegida { background: var(--lienzo); border-color: var(--ambar); }
.eligible.elegida > svg { color: var(--ambar-tinta); }
/* La ficha de un jalón: editar enseña TODO de una vez, sin pasos. */
.creador.jalon .paso { border-top: 1px solid #F1EEE6; padding-top: 11px;
                       margin-top: 11px; }
.creador.jalon .paso:first-of-type { border-top: 0; padding-top: 0;
                                     margin-top: 0; }
.creador.jalon .paso-pregunta { font-size: 13px; margin-bottom: 8px; }
.creador-nombre { width: 100%; border: 1px solid #D8D2C2;
                  border-radius: 10px; padding: 9px 12px;
                  font-family: inherit; font-size: 14px; font-weight: 600;
                  color: var(--tinta); background: var(--tarjeta);
                  outline: none; transition: border-color .15s ease; }
.creador-nombre:focus { border-color: var(--ambar); }
/* La tecla que NACE: la fantasma vuelta campo de texto, ahí mero. */
.tecla-nace { flex: 1; min-width: 0; border: 1.6px solid var(--ambar);
              border-radius: 9px; background: var(--lienzo);
              text-align: center; padding: 10px 8px; font-family: inherit;
              font-size: 13.5px; font-weight: 600; color: var(--tinta);
              outline: none; }
.tecla-nace::placeholder { color: #B8AE97; font-weight: 500; }
.frase-pende { color: var(--ambar-tinta); }
.creador-crear:disabled { background: #EFECE3; color: #A39B8A;
                          cursor: default; transform: none; filter: none; }
.creador-aviso { font-size: 12.5px; font-weight: 600; color: var(--ambar-tinta);
                 margin: 8px 2px 0; }
.detalle { display: flex; align-items: center; gap: 10px;
           padding: 8px 2px; cursor: pointer;
           border-bottom: 1px solid #F1EEE6; }
.detalle > svg { width: 17px; height: 17px; color: var(--tinta-suave);
                 flex: none; }
.detalle-letras { display: flex; flex-direction: column; gap: 1px; }
.detalle-nombre { font-size: 13.5px; font-weight: 600; }
.detalle-dice { font-size: 11.5px; color: var(--tinta-suave); }
.palanquita { appearance: none; width: 34px; height: 20px; flex: none;
              margin-left: auto; border: 0; border-radius: 999px;
              background: #D8D2C2; position: relative; cursor: pointer;
              transition: background .18s ease; }
.palanquita::after { content: ''; position: absolute; top: 2px; left: 2px;
                     width: 16px; height: 16px; border-radius: 50%;
                     background: #FFF;
                     box-shadow: 0 1px 2px rgba(61, 42, 28, .25);
                     transition: left .18s ease; }
.palanquita:checked { background: var(--ambar); }
.palanquita:checked::after { left: 16px; }
.nomina-detalle { display: grid; gap: 8px; padding: 12px 2px 4px 30px; }
.nomina-detalle[hidden] { display: none; }
.parcito { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.parcito label { position: relative; }
.parcito input { position: absolute; opacity: 0; pointer-events: none; }
.parcito span { display: block; text-align: center;
                border: 1px solid #D8D2C2; border-radius: 8px;
                padding: 7px 4px; font-size: 12.5px; font-weight: 600;
                color: var(--tinta-suave); cursor: pointer;
                transition: background .15s ease, border-color .15s ease,
                            color .15s ease; }
.parcito input:checked + span { background: var(--lienzo);
    border-color: var(--ambar); color: var(--tinta); }
.cuanto { display: flex; align-items: center; gap: 8px; }
.cuanto span { font-size: 12.5px; font-weight: 600;
               color: var(--tinta-suave); }
.cuanto input { flex: 1; min-width: 0; border: 1px solid #D8D2C2;
                border-radius: 8px; padding: 7px 10px;
                font-family: inherit; font-size: 13.5px; font-weight: 600;
                color: var(--tinta); outline: none;
                transition: border-color .15s ease; }
.cuanto input:focus { border-color: var(--ambar); }
/* La frase final: el botón contado en cristiano antes de nacer. */
.frase { background: var(--lienzo); border: 1px solid #E9E2CC;
         border-radius: 12px; padding: 10px 13px; font-size: 13px;
         line-height: 1.5; color: var(--tinta); margin: 0 0 5px; }
.frase b { font-weight: 700; }
.frase-destino { font-size: 12px; color: var(--tinta-suave);
                 margin: 0 2px 10px; }
.creador-crear { position: relative; overflow: hidden; width: 100%;
                 border: 0; border-radius: 11px; background: var(--ambar);
                 color: var(--sobre-ambar); font-family: inherit;
                 font-size: 13.5px; font-weight: 700; padding: 10px;
                 cursor: pointer;
                 transition: transform .12s ease, filter .15s ease; }
.creador-crear:hover { transform: translateY(-1px);
                       filter: brightness(1.03); }
@media (max-width: 1120px) {
  .taller { grid-template-columns: 1fr; }
  .espejo { width: 380px; margin: 0 auto; }
  .relevo { margin: 26px auto 0; }
}

/* EL MAPA EN SU TARJETA LLENA: una sola tarjeta grande que llena el
   marco del lienzo (mismos márgenes y esquinas que toda la casa); la
   gente flota adentro en su panel blanco, con cara y latido. */
.mapa-lleno { position: relative; height: calc(100vh - 76px);
              min-height: 380px; border-radius: 14px;
              border: 1px solid var(--borde); overflow: hidden; }
.mapa-lleno #mapa { position: absolute; inset: 0; background: #EFECE3; }
/* El baño cálido de la casa sobre los tiles: familia hueso, sutil. */
.mapa-lleno .leaflet-tile-pane { filter: saturate(.95) sepia(.08); }
.mapa-panel { position: absolute; top: 18px; left: 18px; z-index: 500;
              width: 252px; max-height: calc(100% - 36px);
              overflow-y: auto; background: var(--tarjeta);
              border: 1px solid var(--borde); border-radius: 14px;
              padding: 12px 10px 8px;
              box-shadow: 0 10px 28px rgba(61, 42, 28, .14); }
.etiqueta-mapa { font-size: 12px; font-weight: 700; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--tinta-suave);
                 margin: 0 6px 8px; }
.mapa-nadie { font-size: 13px; color: var(--tinta-suave);
              margin: 2px 6px 8px; }
.gente-fila { display: flex; align-items: center; gap: 10px; width: 100%;
              border: 0; background: none; border-radius: 10px;
              padding: 7px 8px; cursor: pointer; text-align: left;
              font-family: inherit;
              transition: background .15s ease, box-shadow .15s ease; }
.gente-fila:hover { background: var(--lienzo); }
.gente-fila.res { background: var(--lienzo);
                  box-shadow: inset 3px 0 0 var(--ambar); }
.gente-avatar { width: 30px; height: 30px; border-radius: 50%;
                color: #fff; font-size: 11px; font-weight: 700;
                flex: none; display: flex; align-items: center;
                justify-content: center; overflow: hidden; }
.gente-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gente-letras { min-width: 0; }
.gente-nombre { display: block; font-size: 13.5px; font-weight: 600;
                color: var(--tinta); line-height: 1.25;
                white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; }
.gente-hace { display: block; font-size: 11.5px;
              color: var(--tinta-suave); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.burbuja-mapa { position: relative; width: 38px; height: 38px;
                border-radius: 50%; border: 3px solid #fff; color: #fff;
                font-size: 12px; font-weight: 700;
                font-family: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
                display: flex; align-items: center; justify-content: center;
                box-shadow: 0 2px 8px rgba(61, 42, 28, .3);
                transition: transform .2s ease, box-shadow .2s ease; }
.burbuja-mapa img { width: 100%; height: 100%; border-radius: 50%;
                    object-fit: cover; }
.burbuja-mapa.res { transform: scale(1.3);
                    box-shadow: 0 0 0 3px var(--ambar),
                                0 4px 12px rgba(61, 42, 28, .35); }
.burbuja-latido { position: absolute; right: -3px; bottom: -3px;
                  width: 11px; height: 11px; border-radius: 50%;
                  background: #12B76A; border: 2px solid #fff;
                  color: rgba(18, 183, 106, .42);
                  animation: late 2.2s ease-out infinite; }
.mapa-centrar { position: absolute; right: 12px; bottom: 108px;
                z-index: 500; width: 44px; height: 44px;
                border-radius: 50%; border: 1px solid var(--borde);
                background: var(--tarjeta); color: var(--tinta);
                cursor: pointer; display: flex; align-items: center;
                justify-content: center;
                box-shadow: 0 4px 14px rgba(61, 42, 28, .14);
                transition: background .18s ease, color .18s ease,
                            border-color .18s ease, transform .16s ease; }
.mapa-centrar:hover { background: var(--ambar); border-color: var(--ambar);
                      color: var(--sobre-ambar);
                      transform: translateY(-2px); }
.mapa-centrar svg { width: 19px; height: 19px; }
/* Plantar un sitio: el botón vive arriba del ver-a-todos y se queda
   prendido en ámbar mientras el modo espera tu toque en el mapa. */
.mapa-plantar { bottom: 164px; }
.mapa-plantar.prendido { background: var(--ambar); border-color: var(--ambar);
                         color: var(--sobre-ambar); }
.plantar-pista { position: absolute; top: 18px; left: 50%;
                 transform: translateX(-50%); z-index: 500;
                 background: var(--tarjeta); border: 1px solid var(--ambar);
                 border-radius: 999px; padding: 8px 16px;
                 font-size: 13px; font-weight: 600; color: var(--tinta);
                 box-shadow: 0 6px 18px rgba(61, 42, 28, .16);
                 white-space: nowrap; }
.plantar-pista[hidden] { display: none; }
/* Los sitios plantados: pines-chip blancos con el iconito ámbar y su
   gente contada. El elegido se enmarca y enciende a los suyos. */
.pin-sitio { position: absolute; transform: translate(-50%, -100%);
             display: inline-flex; align-items: center; gap: 5px;
             background: var(--tarjeta); border: 1px solid var(--borde);
             border-radius: 999px; padding: 4px 11px;
             font-family: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
             font-size: 12px; font-weight: 700; color: var(--tinta);
             white-space: nowrap; cursor: pointer;
             box-shadow: 0 3px 10px rgba(61, 42, 28, .18);
             transition: box-shadow .15s ease, border-color .15s ease; }
.pin-sitio svg { width: 12px; height: 12px; color: var(--ambar-tinta);
                 flex: none; }
.pin-sitio.res { border-color: var(--ambar);
                 box-shadow: 0 0 0 3px rgba(242, 176, 30, .35),
                             0 3px 10px rgba(61, 42, 28, .18); }
/* El menucito de plantar: con varios sitios sin lugar, se elige cuál. */
.plantar-menu { position: absolute; right: 66px; bottom: 164px;
                z-index: 500; min-width: 200px; background: var(--tarjeta);
                border: 1px solid var(--borde); border-radius: 12px;
                overflow: hidden; animation: caeEv .18s ease;
                box-shadow: 0 8px 22px rgba(61, 42, 28, .14); }
.plantar-menu[hidden] { display: none; }
.plantar-opcion { display: flex; width: 100%; align-items: center;
                  gap: 9px; padding: 10px 14px; border: 0;
                  background: none; font-family: inherit;
                  font-size: 13.5px; color: var(--tinta); cursor: pointer;
                  border-bottom: 1px solid #F1EEE6; text-align: left;
                  transition: background .12s ease; }
.plantar-opcion:last-child { border-bottom: 0; }
.plantar-opcion:hover { background: var(--fondo); }
.plantar-opcion svg { width: 14px; height: 14px; flex: none;
                      color: var(--ambar-tinta); }
/* Los puntitos del propio pin: mover y quitar viven en el sitio. */
.pin-kebab { display: inline-flex; align-items: center;
             margin-left: 2px; padding: 2px; border-radius: 6px;
             color: #A39B8A; transition: background .15s ease,
             color .15s ease; }
.pin-kebab:hover { background: var(--lienzo); color: var(--tinta); }
.pin-kebab svg { width: 13px; height: 13px; }
.pin-menu { position: absolute; z-index: 600; min-width: 185px;
            transform: translate(-50%, 0); background: var(--tarjeta);
            border: 1px solid var(--borde); border-radius: 12px;
            overflow: hidden; animation: caeEv .18s ease;
            box-shadow: 0 8px 22px rgba(61, 42, 28, .14); }
.pin-menu[hidden] { display: none; }
/* El señalamiento honesto en la evidencia: registro lejos de su sitio. */
.lejos-ev { display: inline-flex; align-items: center; gap: 4px;
            font-size: 12px; font-weight: 600; color: var(--rojo); }
.lejos-ev svg { width: 12px; height: 12px; flex: none; }
/* Los hitos del recorrido del día: la hora de cada registro, en su
   chip chiquito junto al puntito del camino. */
.hito-hora { position: absolute; transform: translate(9px, -24px);
             white-space: nowrap; background: var(--tarjeta);
             border: 1px solid var(--borde); border-radius: 999px;
             padding: 2px 9px; font-family: 'Satoshi', 'Segoe UI',
             system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
             color: var(--tinta);
             box-shadow: 0 2px 8px rgba(61, 42, 28, .16); }
/* Los globitos y controles de Leaflet visten la casa. */
.leaflet-popup-content-wrapper { border-radius: 12px;
  box-shadow: 0 8px 22px rgba(61, 42, 28, .18);
  font-family: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
  color: var(--tinta); }
.leaflet-container { font-family: 'Satoshi', 'Segoe UI', system-ui,
                                  sans-serif; }
.leaflet-bar a { color: var(--tinta); }
/* La atribución obligada (licencias de los datos), discreta y cálida;
   el prefijo de la librería se quita desde mapa.js. */
.leaflet-control-attribution { background: rgba(255, 255, 255, .65);
                               font-size: 10px; color: var(--tinta-suave);
                               border-radius: 8px 0 0 0; padding: 1px 7px; }
.leaflet-control-attribution a { color: var(--tinta-suave); }
@media (max-width: 760px) {
  .mapa-lleno { height: 68vh; }
}

.portada { max-width: 420px; margin: 12vh auto 0; padding: 0 16px; }
.portada .marca { font-size: 30px; padding: 0; }
.portada ul { list-style: none; margin-top: 20px; }
.portada li a { display: block; background: var(--tarjeta); font-weight: 600;
                border: 1px solid var(--borde); border-radius: 12px;
                padding: 14px 18px; margin: 10px 0; color: var(--tinta); }
.portada li a:hover { border-color: var(--ambar-tinta); color: var(--ambar-tinta); }

@media (max-width: 760px) {
  aside { position: static; width: auto; border-right: 0; padding: 16px;
          border-bottom: 1px solid var(--borde); }
  nav { display: flex; gap: 6px; }
  nav a { flex: 1; justify-content: center; }
  .lienzo { margin-left: 0; padding: 20px 16px; }
  .lista { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* La trampa de siempre: display propio le gana a [hidden] si no se dice. */
.registra[hidden] { display: none; }

/* El candado: la única puerta que se ve sin la clave. */
.forma.candado { max-width: 420px; margin: 18px auto 0; }
.mal-clave { max-width: 420px; margin: 10px auto 0; text-align: center;
             font-size: 13.5px; font-weight: 600; color: var(--rojo); }

/* TURNOS: el horario con nombre. Cada uno es una tarjeta con su barra
   sobre el dia (de 6 a 22), su gente en caritas y sus sitios al pie. */
.crece-hueco { flex: 1; }
.campo-hora { display: inline-flex; gap: 8px; flex: none; }
.campo-hora label { display: inline-flex; align-items: center; gap: 7px;
                    font-size: 13px; color: var(--tinta-suave); }
.campo-hora input { min-height: 38px; padding: 8px 10px;
                    font-variant-numeric: tabular-nums; }
.turnos { display: grid; gap: 10px; grid-template-columns: 1fr; }
.turno { background: var(--tarjeta); border: 1px solid var(--borde);
         border-radius: 14px; padding: 14px 16px 12px; }
.turno-cabeza { display: flex; align-items: baseline; gap: 12px;
                flex-wrap: wrap; }
.turno-nombre { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.turno-horas { font-size: 14px; color: var(--tinta-suave);
               font-variant-numeric: tabular-nums; }
.turno-gente { margin-left: auto; display: inline-flex; align-items: center;
               gap: 9px; font-size: 13px; color: var(--tinta-suave); }
.turno .acciones { align-self: center; }
/* La barra del dia: el hueso es el dia entero y el verde, su turno. */
.turno-eje { position: relative; height: 10px; background: var(--lienzo);
             border-radius: 6px; margin: 13px 0 5px; overflow: hidden; }
.turno-tramo { position: absolute; top: 0; bottom: 0; background: #12B76A;
               border-radius: 6px; }
.turno-horas-eje { display: flex; justify-content: space-between;
                   font-size: 11px; color: #A39B8A;
                   font-variant-numeric: tabular-nums; }
.turno-sitios { display: flex; align-items: center; gap: 6px; margin: 9px 0 0;
                font-size: 13px; color: var(--tinta-suave); }
.turno-sitios svg { width: 13px; height: 13px; flex: none; }
/* Ya trae otro turno: se dice en chiquito, no se prohibe. */
.en-otro { margin-left: auto; padding-left: 12px; font-size: 11.5px;
           color: #A39B8A; }

/* El veredicto del turno al final del renglon: cumplio sus horas o le
   faltaron. Sin turno la app se calla — no hay contra que medir. */
.cumplio, .no-cumplio { display: inline-flex; margin-left: 7px;
                        vertical-align: -2px; }
.cumplio svg, .no-cumplio svg { width: 13px; height: 13px; }
.cumplio { color: var(--verde); }
.no-cumplio { color: var(--rojo); }

/* El interruptor que parte la fila: apagado, la salida pide lo mismo
   que la entrada. Prendido, cada extremo trae su tira con su etiqueta. */
.tira-evi.con-etiqueta { margin-bottom: 7px; }
.evi-lado { font-size: 11px; letter-spacing: .12em; font-weight: 700;
            text-transform: uppercase; color: var(--tinta-suave);
            width: 46px; flex: none; }
/* La palanquita vive DENTRO de la tira: una sola fila de información.
   Si el ancho no alcanza, el wrap de la tira la baja solo. */
.parte-fila { display: inline-flex; }
.parte-evi.larga { padding: 0 12px; gap: 8px; font-weight: 500;
                   color: var(--tinta-suave); }
.parte-evi.larga .dice-siempre { display: inline; }
.palanquita { width: 30px; height: 17px; border-radius: 999px;
              background: #E3DECF; position: relative; flex: none;
              transition: background .18s ease; }
.palanquita::after { content: ''; position: absolute; top: 2px; left: 2px;
                     width: 13px; height: 13px; border-radius: 50%;
                     background: var(--tarjeta);
                     box-shadow: 0 1px 2px rgba(61, 42, 28, .3);
                     transition: left .18s ease; }
.parte-evi.larga.on { background: var(--tarjeta); border-color: var(--ambar);
                      color: var(--tinta); font-weight: 700; }
.parte-evi.larga.on .palanquita { background: var(--ambar); }
.parte-evi.larga.on .palanquita::after { left: 15px; }