/* Yatá Base — lo que sólo es de Base.

   EN SU PROPIA HOJA A PROPÓSITO. app.css lo comparten la aplicación del
   cliente y la de quien trabaja; Base es otra cosa -una mesa de trabajo, no un
   teléfono- y lo que aquí conviene ancho allí estorba. Tocar app.css para
   arreglar Base sería arreglar una pantalla rompiendo dos. */

/* ---------- la mesa ----------
   Base se mira en un portátil, y una consola que se lee en una columna de 620
   obliga a bajar por cosas que caben de sobra al lado. */
.envoltura{max-width:1160px}
.barra .adentro{max-width:1160px}

/* AIRE DEBAJO DE LA BARRA. La barra es pegajosa y la envoltura no llevaba
   nada arriba, así que la primera fila de cifras nacía pegada al borde de la
   barra: se leía como si estuviera cortada. */
#base-panel{padding-top:20px}

/* ---------- la barra ----------
   Base no enlaza al resto de Yatá: es otra cosa y conviene que lo parezca.
   Aquí estaban "cliente" y "personas", que era invitar a salirse. */
/* En app.css el logotipo lleva margin-right:auto para empujar el saldo y el
   engranaje al borde. Aquí eso dejaba la palabra "Base" flotando en mitad de
   la barra, lejos del logotipo del que es apellido: el empujón lo da el bloque
   de quién está dentro, que es lo que sí va al borde. */
.barra .adentro .marca{margin-right:0}
/* EL LOGOTIPO SE SUBE 1,62 px, Y NO ES UN CAPRICHO NI UN OJO.

   align-items:center centra CAJAS, y la caja del logotipo no está llena de
   forma simétrica: el PNG mide 237x78, la tinta llega de la fila 0 a la 77
   -porque la tilde de "Yatá" toca el borde de arriba- pero el CUERPO de las
   letras va de la 10 a la 76. O sea que la masa de la palabra cae por debajo
   del centro de su caja: a 28 px de alto, 1,62 px por debajo.

   Así que todo lo que se centra al lado -la chapa, el nombre de quien entró,
   el botón de salir- queda alineado con una caja y no con lo que se ve, y la
   chapa parecía alta. Se corrige AQUÍ, en el logotipo, y no empujando la
   chapa: movida la causa, todos los vecinos caen en su sitio a la vez.

   Va con `position:relative` para que sólo se mueva lo pintado y la caja se
   quede donde está, que es lo que mantiene el centrado de los demás.

   EL NÚMERO SALE DEL PNG, no del ojo, y hay una prueba que lo vuelve a sacar
   del fichero y compara: si algún día se reexporta el logotipo con otro
   margen, la prueba falla y dice cuál es el número nuevo. */
.barra .adentro .marca img{position:relative;top:-1.62px}

/* "BASE" ES UNA CHAPA, NO UNA PALABRA SUELTA.

   Iba como texto al lado del logotipo y se veía torcida, y no era un error de
   medio píxel: son dos cajas centradas cada una por su cuenta. El logotipo
   mide 237x78 y la TINTA llena la caja entera -la tilde llega arriba del
   todo-, pero el CUERPO de las letras va de la fila 10 a la 76, o sea que la
   masa de "Yatá" cae 1,6 px por debajo del centro de su caja a 28 px de alto.
   Y "Base" no tiene ninguna letra que baje -ni g, ni j, ni p-, así que su masa
   cae por encima del centro de SU caja. Los dos errores suman y van en
   sentidos contrarios: unos tres píxeles, que a ese tamaño se ven.

   Una chapa lo arregla de raíz porque ya no se comparan dos palabras: se
   centra una cápsula contra una imagen, que es centrar dos cajas, que es lo
   único que align-items sabe hacer bien. Y además dice lo que es: no es parte
   del nombre de la marca, es en qué versión de Yatá estás. */
.barra .adentro .base-nombre{font-size:11px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--azul);
  background:rgba(23,107,255,.12);border-radius:999px;padding:4px 9px;
  line-height:1.2;margin-left:2px}
.barra .adentro .base-quien{margin-left:auto;display:flex;align-items:center;
  gap:10px;min-width:0}
.base-quien .quien-nombre{font-size:13.5px;color:var(--suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
/* EL ROL, EN GRIS Y NO EN AZUL. Era una cápsula azul idéntica a la de "Base",
   una en cada punta de la misma barra, y dos chapas iguales se leen como dos
   cosas del mismo tipo: había que pararse a leerlas para ver que una dice qué
   aplicación es y la otra quién eres tú. El azul se queda para la marca. */
.base-quien .quien-rol{font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--suave);background:var(--relleno);
  border-radius:999px;padding:3px 8px}
button.base-salir{width:auto;display:inline-block;padding:7px 14px;font-size:14px;
  font-weight:600;color:var(--azul);background:var(--relleno);box-shadow:none;
  border-radius:999px}
button.base-salir:active{background:rgba(118,118,128,.2)}

/* ---------- la entrada ----------
   Una pantalla que no tiene otra cosa que hacer: el logotipo grande, y debajo
   lo justo para entrar. Centrada de verdad -no arrimada arriba- porque en un
   portátil el formulario quedaba en el tercio de arriba con medio metro de
   gris debajo. */
#base-entrar{max-width:520px;margin:0 auto;min-height:calc(100vh - 46px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:40px}
#base-entrar .tarjeta{width:100%;margin:0}
.base-logo{display:block;width:100%;max-width:460px;height:auto;margin:0 auto 6px}
#base-entrar .sub{text-align:center;margin:0 0 20px;color:var(--suave)}
#base-entrar .campo{margin-bottom:14px}
#base-entrar input{font-size:17px}
/* el código, más separado y en cifras grandes: se teclea mirando el teléfono */
#base-codigo{letter-spacing:.34em;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums}

@media (max-width:520px){
  #base-entrar{min-height:auto;padding-top:18px;justify-content:flex-start}
  .base-logo{max-width:100%}
}

/* ---------- las cifras ----------
   En el portátil caben las nueve en dos filas; en un teléfono, de dos en dos.
   Con auto-fit y 140 px se quedaban en una columna y media en pantallas
   estrechas, que es la forma más tonta de hacer bajar. */
.cifras{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
@media (max-width:520px){
  .cifras{grid-template-columns:1fr 1fr;gap:8px}
  .cifra{padding:12px}
  .cifra b{font-size:22px}
}

/* La tabla de limpiadoras se desplaza sola dentro de su tarjeta: en un
   teléfono son ocho columnas y no hay forma de que quepan. Lo que no puede es
   arrastrar la página entera. */
.tabla{max-width:100%}


/* ---------- REVISAR DOCUMENTOS ----------
   La cédula, al lado de la cara. Antes era un enlace que abría otra pestaña, y
   comparar un documento con una cara saltando de pestaña en pestaña es como no
   compararlo. */
.doc-mirar{margin-top:8px}
.doc-cargando{font-size:13px;color:var(--tenue)}
.doc-foto{max-width:260px;max-height:170px;width:auto;border-radius:10px;
  box-shadow:var(--sombra-1),var(--aro);cursor:zoom-in;display:block}
.doc-grande{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.86);
  display:flex;align-items:center;justify-content:center;padding:24px;
  cursor:zoom-out}
.doc-grande img{max-width:100%;max-height:100%;border-radius:8px}


/* ---------- LAS PESTAÑAS: CRISTAL, AL MODO DE iOS 26 ----------

   Base era una sola página con todo apilado: con la cola en ochenta y siete
   avisos, llegar a los documentos eran varias pantallas de bajar. Una página
   por trabajo, y la barra dice dónde hay algo esperando sin entrar a mirar.

   La barra FLOTA sobre lo que se lee en vez de apoyarse en el fondo. Eso es
   lo que hace el cristal, y no es adorno: una barra opaca pegada arriba corta
   la página en dos y no se sabe si lo de debajo sigue o empieza otra cosa. Una
   de cristal deja ver que la lista continúa por debajo, así que sigue siendo
   la misma página con algo flotando encima.

   Cómo se hace un cristal que parezca cristal, que son cuatro cosas y no una:

     · DESENFOQUE Y SATURACIÓN de lo que pasa por detrás. El desenfoque solo
       da un plástico lechoso; lo que lo vuelve vidrio es que los colores de
       debajo se avivan al atravesarlo.
     · UN FILO CLARO ARRIBA y uno oscuro abajo -las dos sombras interiores-,
       que es como se ve el canto de una pieza de vidrio con luz de arriba.
     · SOMBRA FUERA, blanda y baja, para que se despegue de la página.
     · Y QUE SE CIERRE al pasar texto por debajo (.pegada): con una lista larga
       corriendo detrás, un cristal demasiado limpio se vuelve ilegible. */
.base-nav{position:sticky;top:56px;z-index:20;display:flex;gap:2px;
  overflow-x:auto;padding:5px;margin:0 0 14px;border-radius:999px;
  -webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -1px 0 rgba(16,24,40,.05),
             0 0 0 .5px rgba(16,24,40,.08),
             0 10px 28px rgba(16,24,40,.10),
             0 2px 6px rgba(16,24,40,.05);
  transition:background .25s ease, box-shadow .25s ease}
.base-nav.pegada{background:rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),
             inset 0 -1px 0 rgba(16,24,40,.06),
             0 0 0 .5px rgba(16,24,40,.10),
             0 14px 34px rgba(16,24,40,.14),
             0 2px 8px rgba(16,24,40,.07)}
.base-nav::-webkit-scrollbar{display:none}
/* Sin desenfoque -navegadores viejos- el cristal se queda en un cristal
   sucio: se cierra hasta ser opaco, que es mejor que texto sobre texto. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .base-nav,.base-nav.pegada{background:var(--tarjeta)}
}

/* La cápsula encendida. Va DETRÁS de los botones y se desliza de uno a otro:
   como fondo del botón, cambiar de pestaña era un parpadeo -se apaga una, se
   enciende otra- y no decía de dónde a dónde se fue. */
.base-nav .gota{position:absolute;top:5px;bottom:5px;left:0;width:0;opacity:0;
  border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             0 0 0 .5px rgba(16,24,40,.07),
             0 4px 12px rgba(16,24,40,.10)}

.base-nav button{position:relative;z-index:1;width:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--suave);
  background:transparent;box-shadow:none;border-radius:999px;
  transition:color .2s ease}
.base-nav button .icono{width:17px;height:17px;flex:0 0 auto;opacity:.75}
.base-nav button:hover{color:var(--tinta)}
.base-nav button.on{color:var(--azul-hondo)}
.base-nav button.on .icono{opacity:1}
.base-nav .tic{display:inline-block;min-width:19px;padding:1px 6px;border-radius:999px;
  background:var(--rosa);color:#fff;font-size:11.5px;font-weight:800;
  line-height:1.5;text-align:center;font-variant-numeric:tabular-nums}

/* En un teléfono la barra va ABAJO, que es donde llega el pulgar y donde la
   pone iOS, y flotando sobre la zona segura. Arriba se queda el buscar. */
@media (max-width:720px){
  .base-nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
    top:auto;margin:0;z-index:40}
  #base-panel{padding-bottom:86px}
  .base-nav button{padding:8px 13px;font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .base-nav .gota{transition:none !important}
}

/* De noche el cristal es oscuro y el filo va por dentro: un cristal claro
   sobre una página oscura no es cristal, es una lámina de papel. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .base-nav{background:rgba(28,28,30,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
               inset 0 -1px 0 rgba(0,0,0,.35),
               0 0 0 .5px rgba(255,255,255,.08),
               0 12px 30px rgba(0,0,0,.45)}
  :root:not([data-tema="claro"]) .base-nav.pegada{background:rgba(28,28,30,.84)}
  :root:not([data-tema="claro"]) .base-nav .gota{
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
               0 0 0 .5px rgba(255,255,255,.10),
               0 4px 12px rgba(0,0,0,.35)}
  :root:not([data-tema="claro"]) .base-nav button.on{color:#fff}
}
:root[data-tema="oscuro"] .base-nav{background:rgba(28,28,30,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             inset 0 -1px 0 rgba(0,0,0,.35),
             0 0 0 .5px rgba(255,255,255,.08),
             0 12px 30px rgba(0,0,0,.45)}
:root[data-tema="oscuro"] .base-nav.pegada{background:rgba(28,28,30,.84)}
:root[data-tema="oscuro"] .base-nav .gota{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 0 0 .5px rgba(255,255,255,.10),
             0 4px 12px rgba(0,0,0,.35)}
:root[data-tema="oscuro"] .base-nav button.on{color:#fff}

/* La caja de buscar, del mismo material: si la barra es de cristal y la caja
   de encima es una tarjeta opaca, parecen de dos aplicaciones distintas. */
.base-buscar input{background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),
             0 0 0 .5px rgba(16,24,40,.08),
             0 4px 14px rgba(16,24,40,.07)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .base-buscar input{background:rgba(28,28,30,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
               0 0 0 .5px rgba(255,255,255,.08),
               0 6px 18px rgba(0,0,0,.4)}
}
:root[data-tema="oscuro"] .base-buscar input{background:rgba(28,28,30,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 0 0 .5px rgba(255,255,255,.08),
             0 6px 18px rgba(0,0,0,.4)}

/* Los títulos de sección, con su aclaración en gris y no en negrita: antes
   cada uno llevaba el estilo escrito a mano en el atributo. */
.pagina h2{margin:22px 0 10px;font-size:19px;letter-spacing:-.02em}
.pagina h2:first-child{margin-top:4px}
.pagina h2 small{font-weight:400;color:var(--suave);font-size:14px}
.pagina .item .quien-rol{margin-left:auto}


/* ---------- REVISAR: UNA FICHA POR COSA SUBIDA ----------
   Antes era una fila de lista con un enlace que abría otra pestaña. Una cédula
   en una fila de lista no se lee, y comparar un documento con una cara
   saltando de pestaña en pestaña es como no compararlo. Ahora cada cosa subida
   es una ficha: quién, qué, la imagen, y las dos decisiones. */
#documentos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;background:transparent;box-shadow:none;padding:0}
.doc-ficha{background:var(--tarjeta);border-radius:var(--r-xl);padding:14px;
  box-shadow:var(--sombra-1),var(--aro);display:flex;flex-direction:column;gap:10px}
.doc-cab{display:flex;align-items:center;gap:11px}
.doc-cab .retrato{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.doc-quien{display:flex;flex-direction:column;min-width:0}
.doc-quien b{font-size:15.5px;letter-spacing:-.01em}
.doc-que{font-size:13px;font-weight:700;color:var(--azul)}
.doc-espera{margin-left:auto;flex:0 0 auto;align-self:flex-start;font-size:11.5px;
  color:var(--suave);white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-nota{font-size:12.5px;color:var(--suave);line-height:1.35}
.doc-mirar{background:var(--relleno);border-radius:12px;min-height:132px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.doc-foto{max-width:100%;max-height:190px;width:auto;display:block;cursor:zoom-in}
.doc-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.doc-botones button{width:100%;margin:0}

/* ---------------------- CRECIMIENTO: las gráficas ----------------------
   El SVG se estira con viewBox y preserveAspectRatio=none, así que aquí sólo
   se le da la caja: el dibujo se adapta solo al ancho que le toque. Los
   tamaños de texto dentro del SVG van en unidades del viewBox, por eso son
   números tan pequeños. */
.mandos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 16px}
.mandos .grupo{display:inline-flex;background:var(--relleno);border-radius:11px;padding:3px;gap:2px}
.mandos .grupo button{margin:0;padding:6px 13px;font-size:13.5px;font-weight:650;
  background:transparent;color:var(--suave);border-radius:8px;box-shadow:none;width:auto}
.mandos .grupo button.on{background:var(--tarjeta);color:var(--tinta);box-shadow:var(--sombra-1)}
.mandos .acum{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--suave);cursor:pointer;user-select:none}
.mandos .acum input{width:16px;height:16px;accent-color:var(--azul);margin:0}

.gr-ficha{background:var(--tarjeta);border-radius:var(--r-xl);padding:16px 18px 12px;
  box-shadow:var(--sombra-1),var(--aro)}
.gr-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px}
.gr-cab b{font-size:17px;letter-spacing:-.015em}
.gr-que{margin:3px 0 0;font-size:13px;color:var(--suave);line-height:1.42;max-width:52ch}
.gr-cifra{text-align:right;font-size:26px;font-weight:750;letter-spacing:-.025em;
  white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.15}
.gr-cambio,.gr-igual{display:block;font-size:12.5px;font-weight:700;margin-top:2px}
.gr-cambio.bien{color:var(--verde)}
.gr-cambio.mal{color:var(--rosa)}
.gr-igual{color:var(--suave)}
.gr-pie{margin:8px 0 0;font-size:12.5px;color:var(--suave)}

/* El dibujo y sus rótulos. Los números NO van dentro del SVG: el dibujo se
   estira al ancho que le toque, y lo que estira las barras estira las letras
   -salían anchas y aplastadas-. Aquí el SVG lleva sólo lo que se dibuja y los
   rótulos son HTML normal, alineados con la misma rejilla. */
.gr-caja{display:flex;gap:9px;align-items:stretch}
.gr-caja.sola{display:block}
.gr-y{display:flex;flex-direction:column;justify-content:space-between;
  font-size:11px;color:var(--suave);text-align:right;flex:0 0 auto;
  font-variant-numeric:tabular-nums;line-height:1;padding:1px 0 17px}
.gr-plot{flex:1 1 auto;min-width:0}
.gr-x{display:flex;margin-top:5px;font-size:11px;color:var(--suave);
  font-variant-numeric:tabular-nums;line-height:1}
.gr-x span{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:visible}
.gr-svg{display:block;width:100%;height:200px;overflow:visible}
.gr-raya{stroke:var(--pelo);stroke-width:.2;vector-effect:non-scaling-stroke}

.gr-grupo{margin:20px 0 9px;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--suave)}
.gr-fila{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
/* Cada mini es un BOTÓN, no una tarjeta con un manejador de clic encima: se
   llega con el tabulador y se abre con la barra, que es como se recorre una
   parrilla de catorce cosas sin tocar el ratón. */
.gr-mini{display:flex;flex-direction:column;gap:2px;text-align:left;width:auto;margin:0;
  background:var(--tarjeta);color:var(--tinta);border-radius:14px;padding:12px 13px 8px;
  box-shadow:var(--sombra-1),var(--aro);cursor:pointer;font:inherit}
.gr-mini.on{box-shadow:var(--sombra-1),0 0 0 2px var(--azul)}
.gr-mini-t{font-size:12.5px;color:var(--suave);font-weight:600;line-height:1.3}
.gr-mini-v{font-size:19px;font-weight:750;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.gr-mini-v .gr-cambio,.gr-mini-v .gr-igual{display:inline;font-size:11.5px;margin:0}
.gr-mini .gr-caja{margin-top:6px}
.gr-mini .gr-svg{height:50px}

@media (max-width:640px){
  .gr-cab{flex-direction:column;gap:8px}
  .gr-cifra{text-align:left}
  .gr-svg{height:160px}
}

/* ------------------- BUSCAR, FICHAS, BITÁCORA -------------------
   La caja de buscar va encima de las pestañas porque no pertenece a ninguna:
   se usa desde donde se esté cuando suena el teléfono. */
.base-buscar{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.base-buscar input{flex:1 1 auto;margin:0;background:var(--tarjeta);
  border:0;border-radius:12px;padding:12px 14px;font-size:15px;color:var(--tinta);
  box-shadow:var(--sombra-1),var(--aro);min-width:0}
.base-buscar input::placeholder{color:var(--tenue)}
.base-buscar button{margin:0;width:auto;padding:11px 15px;font-size:13.5px;
  background:var(--relleno);color:var(--suave);box-shadow:none}

/* Una fila a la que se puede entrar tiene que parecerlo. Sin esto eran
   catorce filas idénticas y unas llevaban a algún sitio y otras no. */
.item.tocable{cursor:pointer}
.item.tocable:hover{background:var(--relleno)}
.item.tocable:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.item.apagada{opacity:.55}
.item .lado{margin-left:auto;flex:0 0 auto;text-align:right;font-size:13px;
  color:var(--suave);font-variant-numeric:tabular-nums}

.marco.rosa{background:rgba(255,79,163,.14);color:var(--rosa)}
.marco.gris{background:var(--relleno);color:var(--suave)}
.marco.grande{width:46px;height:46px;border-radius:13px}

/* Los distintivos de estado. Van con color de fondo y no sólo de letra porque
   se leen de reojo: lo que se mira en una ficha es si puede trabajar y si debe
   dinero, no el párrafo de al lado. */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;
  font-size:12px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  background:var(--relleno);color:var(--suave)}
.chip.verde{background:rgba(52,199,89,.16);color:#1B7A33}
.chip.ambar{background:rgba(255,149,0,.17);color:#9A5A00}
.chip.rojo{background:rgba(255,59,48,.14);color:#B3261E}
.chip.rosa{background:rgba(255,79,163,.14);color:#B01A67}
.chip.azul{background:rgba(23,107,255,.13);color:var(--azul-hondo)}
.chip.gris{background:var(--relleno);color:var(--suave)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .chip.verde{color:#5BE07C}
  :root:not([data-tema="claro"]) .chip.ambar{color:#FFB74D}
  :root:not([data-tema="claro"]) .chip.rojo{color:#FF8A80}
  :root:not([data-tema="claro"]) .chip.rosa{color:#FF9CC9}
}
:root[data-tema="oscuro"] .chip.verde{color:#5BE07C}
:root[data-tema="oscuro"] .chip.ambar{color:#FFB74D}
:root[data-tema="oscuro"] .chip.rojo{color:#FF8A80}
:root[data-tema="oscuro"] .chip.rosa{color:#FF9CC9}

.ficha-cab{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ficha-cab .retrato{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ficha-quien{flex:1 1 240px;min-width:0}
.ficha-quien b{font-size:20px;letter-spacing:-.02em}
.ficha-quien .meta{font-size:13.5px;color:var(--suave);margin-top:2px}
.ficha-quien .meta a{color:var(--azul);text-decoration:none}
/* Los mandos van EN la cabecera, al lado de quién es, y no en otra pantalla:
   lo que se hace con una persona se decide mirándola. */
.ficha-mandos{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.ficha-mandos button{margin:0;width:auto;flex:0 0 auto}
.nota-interna{background:rgba(255,149,0,.10);box-shadow:none}
.nota-interna b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ambar)}
.nota-interna p{margin:5px 0 0;font-size:14.5px;line-height:1.45;white-space:pre-wrap}

/* Un botón que apaga a una persona tiene que parecerlo. `button.peligro` deja
   el fondo transparente y `.chico` lo vuelve a pintar del color normal -va
   después en la hoja-, así que "Apagar" salía azul claro, igual que "Nota
   interna". */
button.chico.peligro{background:rgba(255,59,48,.12);color:var(--rojo)}
button.chico.peligro:hover{background:rgba(255,59,48,.18)}

/* Qué hay que hacer. La urgencia se lee por el borde de la izquierda y no
   sólo por el distintivo: en una lista de doce cosas, lo que dice dónde mirar
   primero es una franja de color, no una palabra. */
/* La franja se pinta con el propio fondo y no con una sombra interior: una
   sombra interior la recorta el redondeo de la primera y la última fila, así
   que la de arriba y la de abajo salían sin franja. */
.item.urge-ahora,.item.urge-hoy,.item.urge-pronto{
  background:linear-gradient(to right,var(--u) 0 4px,var(--tarjeta) 4px)}
.item.urge-ahora{--u:var(--rojo)}
.item.urge-hoy{--u:var(--ambar)}
.item.urge-pronto{--u:var(--azul)}
/* y al pasar por encima no se pierde la franja, que es lo que dice cuál de
   las doce hay que mirar primero */
.item.urge-ahora.tocable:hover,.item.urge-hoy.tocable:hover,
.item.urge-pronto.tocable:hover{
  background:linear-gradient(to right,var(--u) 0 4px,var(--relleno) 4px)}
#atencion .titulo .chip{margin-left:7px;vertical-align:1px}
.tabla tr.tocable{cursor:pointer}
.tabla tr.tocable:hover td{background:var(--relleno)}


/* ---------- LOS BOTONES DE UNA TARJETA, EN FILA ----------

   En la hoja general un botón es `display:block; width:100%; padding:16px` -se
   diseñó para el teléfono, donde un botón ocupa el ancho y se toca con el
   pulgar-, y tres de ésos dentro de un flex piden CADA UNO el ancho entero y
   se lo reparten a empujones: "Abrir en WhatsApp" acababa en una columna de
   32 px con el texto partido en tres renglones y recortado, mientras "No hace
   falta" -que no se encogía- se quedaba con media tarjeta y su texto suelto
   en el centro.

   Aquí cada uno ocupa lo que mide, no se parte, y si no caben bajan a otro
   renglón en vez de estrujarse. Y del tamaño de Base: dieciséis píxeles de
   relleno y diecisiete de letra son medidas de pulgar, no de ratón. */
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:12px}
.acciones > *{flex:0 0 auto;width:auto;margin:0;white-space:nowrap;
  padding:9px 16px;font-size:14.5px;font-weight:650;line-height:1.35;
  border-radius:11px;display:inline-flex;align-items:center;justify-content:center}
.acciones > .boton{box-shadow:0 3px 10px rgba(23,107,255,.26),
                              inset 0 1px 0 rgba(255,255,255,.18)}
/* lo que descarta algo se va al otro lado: pegado al de al lado se toca por
   error, y aquí equivocarse es no mandar un aviso que alguien está esperando */
.acciones .aparte{margin-left:auto}
@media (max-width:560px){
  .acciones > *{flex:1 1 auto}
  .acciones .aparte{margin-left:0}
}

/* Los mandos de una ficha: van en la cabecera, pegados a lo que describen. */
.ficha-acciones{width:100%;margin-top:12px;padding-top:12px;
  border-top:.5px solid var(--pelo)}