/* ============================================================================
   QUINCENAS VILLA LUCRE — framework de la pantalla
   ============================================================================
   Mismo esquema que "Como va": tokens en un solo lugar, tres papeles
   tipograficos (--f-tit / --f-txt / --f-num), semaforo por token, tarjetas
   redondeadas, pestañas pildora, tablas que se desplazan en vez de cortarse.
   La identidad es la del PH: verde #197627 del logo y Calibri.
   REGLAS: todo alineado; botones de un grupo miden igual; pildoras de una
   columna miden igual; [hidden] siempre gana.
   ========================================================================= */
:root{
  --ink:#1e1c18;
  --muted:rgba(30,28,24,.55);
  --acc:#197627;
  --acc-ink:#ffffff;
  --marca:#2563eb;   /* las casillas que se marcan: azul a propósito, para no confundirlas con el verde del PH */
  --bg:#edf0ea;
  --card:rgba(255,255,255,.78);
  --card-solido:#ffffff;
  --line:rgba(30,28,24,.13);
  --halo:rgba(25,118,39,.45);

  --f-tit:Calibri,"Segoe UI",system-ui,sans-serif;
  --f-txt:Calibri,"Segoe UI",system-ui,sans-serif;
  /* una sola fuente en toda la pantalla (Valentin, 27-ago): los numeros van en Calibri
     con digitos tabulares, no en monoespaciada */
  --f-num:Calibri,"Segoe UI",system-ui,sans-serif;

  --ok:#197627;      --ok-bg:rgba(25,118,39,.12);
  --avisa:#8A5510;   --avisa-bg:rgba(255,221,0,.30);
  --mal:#C21818;     --mal-bg:rgba(255,34,34,.12);
  --pausa:#3C5A80;   --pausa-bg:rgba(60,90,128,.12);
}
html{ font-size:clamp(15px, 1.15vw, 18px) }
*{ box-sizing:border-box }
[hidden]{ display:none !important }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-txt); font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
button, input, select{ font:inherit; color:inherit }

/* ── barra de arriba ─────────────────────────────────────────────────────── */
.topbar{ background:var(--acc) }
.topnav{
  max-width:1400px; margin:0 auto; padding:.6rem 1.3rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.topnav img{ height:75px; width:auto; display:block; filter:brightness(0) invert(1) }
/* la version DEBAJO del logo (Valentin, 12-sep), sin agrandar la barra ni achicar el logo: va en posicion
   absoluta colgando del borde inferior del logo, asi no ocupa lugar en la fila y el alto de la barra lo
   sigue mandando el logo. Entra en el aire que la barra ya tiene debajo del logo; por eso la letra es
   mas chica que la de al lado. */
.topnav .marca{ position:relative; display:block }
/* OJO: se cuelga del final del DIBUJO, no del borde de la imagen. El PNG del logo trae 57px transparentes
   abajo (de 202), o sea que el dibujo termina en el 72% del alto: colgarlo de top:100% lo dejaba 21px mas
   abajo, caido y fuera del verde. Anclado al 72% caben los dos renglones dentro del propio alto del logo. */
.topnav .marca .ver{
  position:absolute; top:89%; left:0; right:0;
  font-family:var(--f-txt); font-size:.68rem; line-height:1.2; letter-spacing:.02em;
  text-transform:none; color:rgba(255,255,255,.88); text-align:center; white-space:nowrap;
}
.topnav .menu{ display:flex; gap:.2rem; flex-wrap:wrap; margin-left:auto }
/* Igual que el menu de "Como va": texto blanco translucido, al pasar por
   encima cambia al amarillo con transicion suave. Sin fondos ni pildoras. */
.topnav button.mod{
  font-family:var(--f-tit); font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; border:0; cursor:pointer; white-space:nowrap;
  background:transparent; color:rgba(255,255,255,.78);
  padding:.4rem .5rem; transition:color .2s;
  display:flex; align-items:center; gap:.4rem;
}
.topnav button.mod:hover{ color:#FFDD00; background:transparent }
.topnav button.mod.on{ color:#FFDD00 }
.topnav button.mod:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.topnav .punto{ width:7px; height:7px; border-radius:50%; background:#FFDD00 }

/* menu desplegable: se abre con CLIC (como el menu de cuenta de Como va),
   se cierra al hacer clic afuera o al escoger algo */
.desplegable{ position:relative }
.desplegable .submenu{
  display:none; position:absolute; top:calc(100% + .5rem); left:0; z-index:30; min-width:14rem;
  background:#fff; border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.22); padding:.4rem;
}
.desplegable.abierto .submenu{ display:block }
.desplegable .submenu button{
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font-family:var(--f-txt); font-size:.9rem;
  color:var(--ink); padding:.42rem .8rem; border-radius:8px; white-space:nowrap;   /* más compactas (15-sep: Finanzas tapaba los recuadros) */
}
.desplegable .submenu button:hover{ background:rgba(30,28,24,.07) }
.desplegable .submenu button:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px }
/* SECCIONES dentro de un desplegable (Valentin, 15-sep: el menú en cuatro rótulos): el título en gris y chiquito,
   y una rayita entre una sección y la siguiente */
.desplegable .submenu .sec{ padding:.5rem .8rem .15rem; font-family:var(--f-txt); font-size:.68rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; cursor:default }
/* LAS SECCIONES VAN EN COLUMNAS, lado a lado (Valentin, 15-sep: "algunas como Finanzas son tan extensas que tapan los
   módulos"): el desplegable queda tan alto como su sección más larga, y la rayita entre secciones es vertical */
.desplegable.abierto .submenu:has(> .menu-sec){ display:flex; align-items:stretch; gap:.15rem }
.desplegable .submenu > .menu-sec{ min-width:13.5rem }
.desplegable .submenu .menu-sec:not([hidden]) ~ .menu-sec:not([hidden]){ border-left:1px solid var(--line); padding-left:.25rem }
/* un modulo del menu de arriba con desplegable (Recibos, 7-sep): la flechita y el submenu debajo del rotulo */
.topnav .desplegable .mod .flecha{ font-size:.7rem; opacity:.8 }
/* UN solo amarillo arriba (Valentin, 7-sep: con el desplegable abierto se veian dos amarillos; 9-sep: "se despliega
   Planilla pero Informes sigue amarillo"): mientras un desplegable esta abierto el amarillo es del rotulo abierto y el
   del modulo activo se apaga a blanco; al cerrarse sin escoger, vuelve al modulo activo */
.topnav #menu.con-abierto .mod.on{ color:rgba(255,255,255,.78) }
.topnav .desplegable.abierto .mod, .topnav #menu.con-abierto .desplegable.abierto .mod.on{ color:#FFDD00 }
.topnav .desplegable .submenu{ top:calc(100% + .2rem); text-transform:none; letter-spacing:0 }
/* TODOS se abren HACIA LA IZQUIERDA, colgados del borde derecho de su rótulo (15-sep): el menú está a la derecha de la barra y
   Finanzas, con sus tres columnas, se salía de la pantalla. Medido con Edge a 1920 y 1366 px */
.topnav .desplegable .submenu{ left:auto; right:0 }
.topnav .desplegable .submenu button.on{ color:var(--acc); font-weight:700 }
.topnav .desplegable .submenu button:disabled{ color:var(--muted); opacity:.55; cursor:default; background:none }
/* La cuenta, igual que en Como va: circulo transparente con borde; con sesion
   el borde se enciende amarillo y las iniciales van adentro. Debajo, el rotulo
   "Cerrar Sesion" / "Iniciar Sesion" centrado con el circulo. El clic (en el
   circulo O en el rotulo) abre el menu; clic afuera lo cierra. */
.tn-account{ position:relative; flex:none; cursor:pointer; text-align:center }
.persona{
  width:2.6rem; height:2.6rem; border-radius:50%; margin:0 auto;
  background:none; color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.32);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-tit); font-weight:700; font-size:.9rem; cursor:pointer; padding:0;
}
.persona.logueado{ border:2px solid #FFDD00; color:#FFDD00 }
.tn-account:hover .persona{ border-color:#FFDD00; color:#FFDD00 }
.persona:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.tn-account-label{
  display:block; width:3.4rem; margin:.25rem auto 0; text-align:center;
  font-family:var(--f-txt); font-size:.58rem; line-height:1.2; letter-spacing:.02em;
  color:rgba(255,255,255,.62); background:none; border:0; padding:0; cursor:pointer;
}
.tn-account:has(.persona.logueado) .tn-account-label{ color:#FFDD00 }
.tn-account:hover .tn-account-label{ color:#FFDD00 }
.cuenta-menu{
  display:none; position:absolute; top:calc(100% + .5rem); right:0; z-index:30;
  background:#fff; border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.22);
  min-width:12rem; padding:.4rem; text-align:left; cursor:default;
}
.cuenta-menu.open{ display:block }
.cuenta-menu .quien-soy{
  display:block; padding:.55rem .8rem; font-family:var(--f-tit); font-weight:700;
  font-size:.85rem; color:var(--muted); border-bottom:1px solid var(--line); margin-bottom:.2rem;
}
.cuenta-menu button{
  display:block; width:100%; text-align:left; padding:.55rem .8rem; border-radius:8px;
  border:none; background:none; font-family:var(--f-txt); font-size:.9rem;
  color:var(--ink); cursor:pointer; white-space:nowrap;
}
.cuenta-menu button:hover{ background:rgba(30,28,24,.07) }

/* ── marco ───────────────────────────────────────────────────────────────── */
.wrap{ max-width:1400px; margin:0 auto; padding:0 1.3rem 3.5rem }
.page-title{
  font-family:var(--f-tit); font-size:clamp(1.7rem,4.4vw,2.2rem); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; text-align:center;
  margin:clamp(1.5rem,4vw,2.1rem) 0 .3rem;
}
.page-sub{ text-align:center; color:var(--muted); font-size:.92rem; margin:0 0 1.4rem }
.page-sub .estado{ font-family:var(--f-tit); text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--avisa) }
.page-sub .estado.cerrada{ color:var(--pausa) }
.page-sub .estado.sellada{ color:var(--ok) }
.page-sub button.link{ border:0; background:none; cursor:pointer; color:var(--acc); font-weight:700; padding:0 .3rem }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:1.4rem; margin-bottom:1.3rem; box-shadow:0 12px 30px rgba(30,28,24,.06);
}
.card h2{
  font-family:var(--f-tit); font-size:1.15rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 1rem;
}
.card h2 .liviano{ color:var(--muted); font-weight:400; letter-spacing:.02em; text-transform:none }
.explica{ color:var(--muted); font-size:.88rem; margin:-.5rem 0 1rem }

.cifras{ display:flex; gap:2.2rem; flex-wrap:wrap; margin-bottom:1.2rem }
.cifra .k{ font-family:var(--f-tit); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.cifra .v{ font-family:var(--f-num); font-size:1.15rem; font-weight:700 }
.cifra .v.ojo{ color:var(--avisa) }
.cifra .v.malo{ color:var(--mal) }

/* ── botones: los de un grupo miden igual (grid de columnas iguales) ─────── */
.acciones{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center }
.acciones.centrado{ justify-content:center }
.grupo{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.7rem }
.btn{
  font-family:var(--f-tit); font-size:.92rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; cursor:pointer; border-radius:999px;
  padding:.6rem 1.4rem; border:1px solid var(--acc);
  background:var(--card-solido); color:var(--acc); text-align:center; white-space:nowrap;
}
/* FRAMEWORK (Valentin, 15-sep: "¿por qué a veces esas píldoras son fondo verde con letras blancas y otras veces no? lo ideal es que
   cuando las píldoras se puedan tocar se inviertan los colores: de fondo blanco con letra verde, a fondo verde con letra blanca").
   TODAS iguales: blanco con letra y borde verde; al pasarles encima, verde con letra blanca. Las apagadas no se invierten.
   .hueco queda igual que .btn (antes era la "secundaria" gris) */
.btn.hueco{ background:var(--card-solido); color:var(--acc); border-color:var(--acc) }
.btn:hover:not(:disabled), .btn.hueco:hover:not(:disabled), .btn:focus-visible:not(:disabled){ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); filter:none }
.btn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:none }
/* un botón apagado PORQUE ESTÁ TRABAJANDO no lleva el círculo de "prohibido": lleva el reloj de espera
   (Valentin, 11-sep: "pareciera que no lo aceptó") */
.btn.trabajando, .btn.trabajando:disabled{ cursor:progress; opacity:.7 }
/* toda pantalla tiene su salida al inicio, FIJA en la esquina: con un listado de mil filas no se llega al pie
   (Valentin, 11-sep). Va por debajo de las ventanas (z-index 1000) y de los avisos, pero sobre la pantalla */
#volver-inicio{ position:fixed; right:1.3rem; bottom:1.3rem; z-index:35; box-shadow:0 4px 14px rgba(30,28,24,.28);
  background:var(--card-solido); color:var(--ink); border:2px solid var(--acc); padding:.75rem 1.5rem; font-size:.95rem }
#volver-inicio:hover{ background:var(--acc); color:var(--acc-ink) }
.modulo{ padding-bottom:3.5rem }        /* que el botón fijo no tape la última fila de una tabla */
.topnav img{ cursor:pointer }
.btn.chico{ padding:.4rem 1rem; font-size:.78rem }
.dice{ flex:1; min-width:15rem; color:var(--muted); font-size:.9rem }

.avance{ flex:1; min-width:190px }
.avance .barra{ height:8px; background:rgba(30,28,24,.10); border-radius:999px; overflow:hidden }
.avance .barra i{ display:block; height:100%; background:var(--acc) }
.avance .pie{ display:flex; justify-content:space-between; font-family:var(--f-num); font-size:.66rem; color:var(--muted); margin-top:.35rem }

.aviso{
  display:flex; gap:.9rem; align-items:flex-start; background:var(--avisa-bg);
  border:1px solid rgba(138,85,16,.25); border-radius:14px;
  padding:.9rem 1.2rem; margin-bottom:1.3rem; font-size:.93rem;
}
.aviso.grave{ background:var(--mal-bg); border-color:rgba(194,24,24,.25) }
.aviso.suave{ background:var(--pausa-bg); border-color:rgba(60,90,128,.25) }
.aviso .et{ font-family:var(--f-tit); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--avisa); font-weight:700; padding-top:.15rem; white-space:nowrap }
.aviso.grave .et{ color:var(--mal) }
.aviso.suave .et{ color:var(--pausa) }
.aviso p{ margin:0 0 .5rem }
.aviso p:last-child{ margin:0 }
.aviso ul{ margin:.2rem 0 0; padding-left:1.1rem }

/* ── tablas ──────────────────────────────────────────────────────────────── */
/* los cuadros se ven completos, sin desplazamiento horizontal (Valentin, 27-ago):
   las celdas parten en dos lineas si hace falta; el scroll queda solo como red de seguridad */
.tabla-scroll{ overflow-x:auto; margin:0 -.3rem }
table{ width:100%; border-collapse:collapse; font-size:.9rem }
th{
  font-family:var(--f-tit); font-size:.68rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink); font-weight:700; line-height:1.2;
  text-align:right; padding:.5rem .5rem; border-bottom:1px solid var(--line); white-space:normal; vertical-align:middle;
}
/* REGLA DEL FRAMEWORK (Valentin, 18-sep): un título más largo que el contenido de su columna se ABREVIA o se PARTE en dos líneas
   (<th class="parte">Fecha<br>depósito</th>), y entonces TODOS los títulos de la fila quedan centrados verticalmente respecto al
   que ocupa dos líneas (por eso th es vertical-align:middle y no bottom) */
th.parte{ white-space:nowrap }   /* parte donde dice el <br>, no donde le dé la gana */
/* REGLA DEL FRAMEWORK (Valentin, 18-sep, sobre el estado de cuenta: "Saldo anterior, Recargo, Pagos, Fecha de pago, CR/DB, Saldo:
   el título no está centrado; ESTO ES FRAMEWORK"): TODOS los títulos de columna van centrados, en pantalla y en papel; la
   alineación izquierda/derecha es solo del dato (td.izq, td.num) */
.nowrap{ white-space:nowrap !important }
td.izq{ text-align:left }
th, th.izq, th.num, th.n{ text-align:center }   /* (la regla de arriba) */
/* REGLA DEL FRAMEWORK (Valentin, 18-sep, listado de copropietarios: "dale prioridad al ancho de la columna a Copropietario y
   Representante; Local, Votos, Dueño al parecen tener más ancho del que necesitan"): las columnas de números, fechas, locales y
   marcas se quedan con lo justo (width:1% + nowrap = el ancho de su contenido) y el resto se lo llevan las de texto */
td.num, th.num, .ang{ width:1%; white-space:nowrap }
tbody th.izq{ text-align:left }                  /* salvo los rótulos de fila (Fecha y hora, Lugar…): esos no son títulos de columna */
th.centro, td.centro{ text-align:center }
td{ padding:.5rem .5rem; border-bottom:1px solid var(--line); text-align:right; white-space:normal; vertical-align:middle }
/* REGLA DEL FRAMEWORK (Valentin, 11-sep): un nombre largo se PARTE en varias líneas, nunca ensancha su
   columna ni empuja a las demás. Las filas llevan un poco más de aire para que, aunque una tenga dos o tres
   renglones, el cuadro se vea parejo. Vale para toda tabla del programa */
td.izq{ overflow-wrap:anywhere; hyphens:auto; line-height:1.3 }
tbody td{ min-height:2.1rem }
td.num{ white-space:nowrap }
td.num, th.num{ font-family:var(--f-num); font-variant-numeric:tabular-nums }
tbody tr:hover{ background:rgba(255,255,255,.55) }
tbody tr.gente{ cursor:pointer }
tbody tr.gente.on td{ background:var(--ok-bg) }
tbody tr.gente.pagada td{ background:var(--ok-bg) }   /* vacaciones: la que le toca ya esta pagada */
tfoot td{ font-weight:700; border-top:1px solid rgba(30,28,24,.25); border-bottom:0; padding-top:.7rem }

.sem{ display:inline-block; width:4px; height:1.5em; border-radius:2px; vertical-align:-.35em; margin-right:.6rem; background:var(--ok) }
.sem.avisa{ background:var(--avisa) } .sem.mal{ background:var(--mal) } .sem.pausa{ background:var(--pausa) }
.nombre{ font-weight:700 }
.debajo{ display:block; font-size:.76rem; color:var(--muted); margin-left:1rem; white-space:normal }

/* ── pildoras: dentro de una columna miden todas igual ───────────────────── */
.pildora{
  display:inline-block; font-family:var(--f-tit); font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:.18rem .6rem; border-radius:999px; text-align:center;
}
/* PÍLDORAS DE LA MISMA FAMILIA, DEL MISMO TAMAÑO (Valentin, 17-sep: "las píldoras que son una misma familia deben siempre ir del
   mismo tamaño, ej. en estado de votaciones APROBADA, DENEGADA y PENDIENTE"): la celda que las lleva se marca .col-pildora y
   todas toman el ancho de la columna, que es el del texto más largo. Nomenclatura fija: APROBADA · DENEGADA · PENDIENTE */
td.col-pildora .pildora{ display:block }
/* DOS PÍLDORAS HERMANAS EN EL MISMO RENGLÓN, DEL MISMO ANCHO (Valentin, 21-sep: "Completos" y "24 subidos" en Poderes): la
   rejilla reparte columnas iguales, así las dos miden lo que mida la más larga. Una píldora que además se toca (despliega)
   es un <button class="pildora">: sin borde, con manita y con el foco visible de todo el framework */
.pildoras-par{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.35rem; vertical-align:middle }
.pildoras-par .pildora{ white-space:nowrap }
button.pildora{ border:0; cursor:pointer; line-height:inherit }
button.pildora:focus-visible{ outline:2px solid var(--marca); outline-offset:2px }
/* TABLAS HERMANAS, MISMAS COLUMNAS (Valentin, 17-sep, FRAMEWORK: "me gusta todo consistente; la columna Se aprueba con y Postulados
   deben estar alineadas, las píldoras de Estado deben ser iguales, y la columna también alineada"): cuando dos tablas van una
   encima de la otra en la misma tarjeta, llevan .hermanas4 y reparten igual sus cuatro columnas — qué · detalle · estado ·
   acciones —, así los títulos, las píldoras y los botones caen en la misma vertical. Anchos fijos: no los decide el contenido */
table.mini.hermanas4{ table-layout:fixed; width:100% }
table.mini.hermanas4 th:nth-child(1), table.mini.hermanas4 td:nth-child(1){ width:35% }
table.mini.hermanas4 th:nth-child(2), table.mini.hermanas4 td:nth-child(2){ width:33% }
table.mini.hermanas4 th:nth-child(3), table.mini.hermanas4 td:nth-child(3){ width:14% }
table.mini.hermanas4 th:nth-child(4), table.mini.hermanas4 td:nth-child(4){ width:18% }
.pildora.ok{ background:var(--ok-bg); color:var(--ok) }
.pildora.avisa{ background:var(--avisa-bg); color:var(--avisa) }
.pildora.mal{ background:var(--mal-bg); color:var(--mal) }
.pildora.pausa{ background:var(--pausa-bg); color:var(--pausa) }
.pildora.gris{ background:rgba(30,28,24,.08); color:var(--muted) }

tr.proyectado td{ background:var(--pausa-bg) }
tr.tocado td{ background:var(--avisa-bg) }
tr.balance td{ background:rgba(30,28,24,.05); font-style:italic }
.rojo{ color:var(--mal); font-weight:700 }
.gris{ color:var(--muted) }
.falta{ font-size:.7rem; color:var(--mal); font-weight:700; font-style:italic }

/* ── pestañas pildora ────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem; justify-content:center }
.tabs button{
  font-family:var(--f-tit); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--line); background:var(--card-solido); color:var(--muted); cursor:pointer;
  padding:.4rem 1rem; border-radius:999px;
}
.tabs button.on{ background:var(--acc); color:#fff; border-color:var(--acc) }
.tabs button:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }

/* ── la tarjeta editable ────────────────────────────────────────────────── */
.celda-sel, .celda-txt{
  font-family:var(--f-num); font-size:.86rem; color:var(--ink);
  background:var(--card-solido); border:1px dashed rgba(30,28,24,.35);
  border-radius:6px; padding:.15rem .35rem; text-align:center;
}
.celda-sel{ font-family:var(--f-tit); font-weight:700; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; -webkit-appearance:none; appearance:none }
.celda-txt{ width:5.6rem }
.celda-txt.vacia{ background:var(--mal-bg); border-color:var(--mal) }
.celda-sel:focus, .celda-txt:focus{ outline:2px solid var(--acc); outline-offset:1px; border-style:solid }
td.fijo{ color:var(--muted) }
td.reloj{ font-family:var(--f-num) }
td .obs{ white-space:normal; font-size:.82rem; color:var(--muted); display:block; max-width:24rem }
/* FRAMEWORK (Valentin, 2-sep): una nota dentro de una celda nunca pasa de 2 lineas
   (el texto completo sale en el tooltip); y los botones dentro de una tabla son
   pildoras del MISMO tamaño que las pildoras de estado */
td .obs.corta{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
td .btn.chico{ padding:.18rem .6rem; font-size:.68rem; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; font-family:var(--f-tit) }
/* FRAMEWORK (Valentin, 2-sep, regla del horario impreso): todas las filas de una tabla miden lo
   mismo — la altura de una fila que lleva su segunda linea; la que no la tiene queda con el aire */
#d-tabla tbody td, #d-tabla-inactivos tbody td{ height:3.3rem }
td .obs.rojo{ color:var(--mal) }

/* ── rejilla del rotativo ────────────────────────────────────────────────── */
.turno{
  display:block; font-family:var(--f-tit); font-size:.7rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; border-radius:6px;
  padding:.25rem .1rem; text-align:center;
}
.turno.normal{ background:rgba(30,28,24,.06); color:var(--muted) }
.turno.tarde{ background:rgba(60,90,128,.16); color:var(--pausa) }
.turno.ext{ background:var(--avisa-bg); color:var(--avisa) }
.turno.dom{ background:var(--ok-bg); color:var(--ok) }
.turno.libre{ background:transparent; color:rgba(30,28,24,.3) }
.turno.vac{ background:var(--pausa); color:#fff }
.turno.fer{ background:var(--mal-bg); color:var(--mal) }
.turno.heredado{ outline:2px solid var(--mal) }
td.dia{ padding:.25rem .2rem; text-align:center }
/* la casilla del turno como selector (con sesion): mismo vestido, cursor de mano */
select.turno-sel{ width:100%; border:1px dashed rgba(30,28,24,.35); cursor:pointer; -webkit-appearance:none; appearance:none }
select.turno-sel:focus{ outline:2px solid var(--acc); outline-offset:1px; border-style:solid }

/* ── entrada / login ─────────────────────────────────────────────────────── */
.login{ max-width:22rem; margin:4rem auto; text-align:center }
.login input{
  width:100%; font-size:1rem;
  border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; background:var(--card-solido);
  margin-top:.7rem;
}
.login input:focus{ outline:2px solid var(--acc); outline-offset:1px }
.login .error{ color:var(--mal); font-size:.88rem; min-height:1.3rem; margin:.5rem 0 }

/* ── varios ──────────────────────────────────────────────────────────────── */
.entrada{ display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line) }
.entrada:last-child{ border-bottom:0 }
.entrada .cuando{ font-family:var(--f-num); font-size:.72rem; color:var(--muted) }
.entrada .detalle{ display:block; font-size:.82rem; color:var(--muted) }
.sello{
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  background:var(--ok-bg); border:1px solid rgba(25,118,39,.25);
  border-radius:14px; padding:.8rem 1.2rem; font-size:.9rem; color:var(--ok);
}
.sello b{ font-family:var(--f-tit); text-transform:uppercase; letter-spacing:.05em }
.sello code{ font-family:var(--f-num); font-size:.72rem; opacity:.8 }
.leyenda{ font-size:.84rem; color:var(--muted); text-align:center; margin-top:1.2rem }
.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:.7rem 1.3rem; border-radius:999px; font-size:.9rem;
  box-shadow:0 12px 30px rgba(0,0,0,.25); z-index:50; max-width:90vw;
}
.toast.mal{ background:var(--mal) }
/* ── ventanas (comun/ventana.js): el contenido hereda el estilo de los dialogos ── */
.q-ven-cuerpo p{ color:var(--muted); font-size:.9rem; margin:0 0 1rem }
.q-ven-cuerpo input{ width:100%; border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem; font-family:var(--f-num); margin-bottom:.8rem; background:var(--card-solido) }
.q-ven-cuerpo input:focus{ outline:2px solid var(--acc) }

.dialogo{ position:fixed; inset:0; background:rgba(30,28,24,.45); display:flex; align-items:center; justify-content:center; z-index:40 }
.dialogo .caja{ background:var(--card-solido); border-radius:16px; padding:1.5rem; width:min(26rem, 92vw); box-shadow:0 20px 50px rgba(0,0,0,.25) }
.dialogo h3{ font-family:var(--f-tit); text-transform:uppercase; letter-spacing:.04em; margin:0 0 .6rem; font-size:1.05rem }
.dialogo p{ color:var(--muted); font-size:.9rem; margin:0 0 1rem }
.dialogo input{ width:100%; border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem; font-family:var(--f-num); margin-bottom:.8rem; background:var(--card-solido) }
.dialogo input:focus{ outline:2px solid var(--acc) }
/* FRAMEWORK (15-sep, "no se ve muy claro qué se puede marcar"): en ventanas y diálogos el desplegable tiene cara de desplegable,
   con borde y flecha como las casillas, no texto suelto */
.dialogo select, .q-ven-cuerpo select{ width:100%; border:1px solid var(--line); border-radius:10px; padding:.55rem 2.2rem .55rem .8rem; margin-bottom:.8rem; font:inherit; color:var(--ink); cursor:pointer;
  appearance:none; -webkit-appearance:none; background:var(--card-solido) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .8rem center }
.dialogo select:focus, .q-ven-cuerpo select:focus{ outline:2px solid var(--acc) }
.cargo-bloque{ border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem .1rem; margin:.7rem 0; background:rgba(30,28,24,.02) }
.cargo-bloque h4{ margin:0 0 .45rem; font-family:var(--f-tit); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink) }
.cargo-bloque label.obs{ color:var(--ink); font-weight:600 }
.dialogo .acciones{ justify-content:flex-end }
.fecha-nav{ display:flex; gap:.5rem; align-items:center; justify-content:center; margin-bottom:1rem; flex-wrap:wrap }
.fecha-nav input[type=date], .fecha-nav input.fecha-casilla{ border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; background:var(--card-solido); font-family:var(--f-num) }
/* REGLA DEL FRAMEWORK (Valentin, 11-sep): TODA fecha se escribe DD/MM/AA, con el año en dos dígitos
   (comun/fecha.js). La casilla es angosta porque solo caben 8 caracteres, y va en fuente de números */
.fecha-casilla{ font-family:var(--f-num); letter-spacing:.03em; text-align:center }
/* la casilla y su botón de calendario van juntos (Valentin, 11-sep: "pon el calendario al lado de la fecha") */
.fecha-w{ display:inline-flex; align-items:stretch; gap:.3rem; width:100%; position:relative }
.fecha-w .fecha-casilla{ flex:1; min-width:0; width:auto }
.cm-fila .fecha-w{ max-width:11rem }
.fecha-btn{ flex:none; width:2.15rem; padding:0; border:1px solid var(--line); border-radius:6px;
  background:var(--card-solido); color:var(--acc); cursor:pointer; display:flex; align-items:center; justify-content:center }
.fecha-btn:hover{ border-color:var(--acc); background:#fff }
/* una fecha que no se escoge (la del recibo, que es siempre la de hoy) no muestra el calendario */
.fecha-w .fecha-casilla[readonly] + .fecha-btn, .fecha-w .fecha-casilla:disabled + .fecha-btn{ display:none }
.fecha-btn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }
/* REGLA DEL FRAMEWORK (Valentin, 22-sep): TODA hora se ve 12:30 p.m., arranca ahí y se mueve con flechitas de subir y
   bajar (comun/hora.js), sin desplegable. La casilla va en fuente de números; las flechas, una sobre otra, al lado */
.hora-casilla{ font-family:var(--f-num); letter-spacing:.03em; text-align:center }
.hora-w .hora-casilla{ flex:1; min-width:0; width:auto }
.hora-flechas{ flex:none; display:flex; flex-direction:column; width:1.6rem; gap:2px }
.hora-btn{ flex:1; padding:0; border:1px solid var(--line); border-radius:4px; background:var(--card-solido); color:var(--acc);
  cursor:pointer; display:flex; align-items:center; justify-content:center; min-height:0 }
.hora-btn:hover{ border-color:var(--acc); background:var(--acc); color:var(--acc-ink) }
.hora-w .hora-casilla[readonly] ~ .hora-flechas, .hora-w .hora-casilla:disabled ~ .hora-flechas{ display:none }
.hora-casilla.mal{ border-color:var(--mal); box-shadow:0 0 0 3px rgba(180,30,30,.15) }
/* el calendario del sistema vive escondido detrás del botón: no se ve, pero tiene que estar dibujado */
/* EL CALENDARIO PROPIO, tipo Windows en chiquito (Valentin, 18-sep, FRAMEWORK): un solo calendario para todo el programa.
   Título clicable: días → meses → años; el escogido en verde, hoy con borde, lo fuera de rango apagado */
.cal{ position:absolute; z-index:1600; width:15.5rem; background:var(--card-solido); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14); padding:.5rem; font-size:.82rem; color:var(--ink); user-select:none }
.cal-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.35rem }
.cal-nav{ width:1.7rem; height:1.7rem; border:0; background:none; border-radius:6px; font:inherit; font-size:1.1rem; line-height:1; color:var(--ink); cursor:pointer }
.cal-nav:hover, .cal-tit:not(.fijo):hover{ background:var(--ok-bg) }
.cal-tit{ flex:1; border:0; background:none; font:inherit; font-weight:700; color:var(--ink); cursor:pointer; padding:.25rem .4rem; border-radius:6px; text-align:center; text-transform:capitalize }
.cal-tit.fijo{ cursor:default }
.cal-dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.cal-dn{ text-align:center; font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; padding:.15rem 0 }
.cal-d{ height:1.85rem; border:1px solid transparent; background:none; border-radius:6px; font:inherit; font-family:var(--f-num); color:var(--ink); cursor:pointer; text-align:center; line-height:1.7rem }
.cal-d.otro{ color:var(--line); cursor:default }
.cal-d:not(.otro):not(:disabled):hover{ background:var(--ok-bg) }
.cal-d.hoy, .cal-c.hoy{ border-color:var(--acc) }
.cal-d.esc, .cal-c.esc{ background:var(--acc); color:var(--acc-ink) }
.cal-d:disabled, .cal-c:disabled{ color:var(--line); cursor:default }
.cal-rejilla{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px }
.cal-c{ height:2.1rem; border:1px solid transparent; background:none; border-radius:6px; font:inherit; color:var(--ink); cursor:pointer; text-transform:capitalize }
.cal-c:not(:disabled):hover{ background:var(--ok-bg) }
.cal-pie{ display:flex; justify-content:center; margin-top:.35rem }
.cal-hoy{ border:1px solid var(--line); background:none; border-radius:999px; padding:.2rem .8rem; font:inherit; font-size:.78rem; color:var(--acc); cursor:pointer }
.cal-hoy:hover{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc) }
.fecha-nav select{
  border:1px solid var(--line); border-radius:999px; padding:.35rem .9rem;
  background:var(--card-solido); font-family:var(--f-tit); font-weight:700; cursor:pointer;
}
.fecha-nav select:focus-visible{ outline:2px solid var(--acc) }
/* FRAMEWORK (Valentin, 17-sep): estas píldoras siguen la misma regla que los botones — fondo blanco con letra verde y, al pasar
   el ratón, se invierten a fondo verde con letra blanca. La escogida (.on) se queda verde; la apagada no se invierte */
.q-pills{ display:inline-flex; border:1px solid var(--acc); border-radius:999px; overflow:hidden; background:var(--card-solido) }
.q-pills button{
  font-family:var(--f-tit); font-weight:700; font-size:.85rem; letter-spacing:.05em;
  border:0; background:transparent; color:var(--acc); cursor:pointer; padding:.4rem 1.1rem;
}
.q-pills button.on{ background:var(--acc); color:var(--acc-ink) }
.q-pills button:hover:not(:disabled):not(.on){ background:var(--acc); color:var(--acc-ink) }
.q-pills button:disabled{ color:var(--muted); opacity:.5; cursor:not-allowed }
.q-pills button:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px }
/* píldoras hermanas del mismo ancho (FRAMEWORK): todas toman el ancho de la más larga */
.q-pills.parejas{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr }

/* ── "trabajando": barra de progreso indeterminada ──────────────────────── */
/* EL AVANCE SE VE SIEMPRE, también sobre una ventana abierta (FRAMEWORK, Valentin 15-sep: "mientras está escaneando debe haber
   algo que indique el avance, como en todo lo que se hace en este programa"): antes iba en 60 y las ventanas en 1000, así que
   al escanear desde "Subir firmada" quedaba escondido detrás. Va sobre las ventanas (1000) y debajo de los avisos (9000) */
.trabajando{ position:fixed; inset:0; background:rgba(30,28,24,.35); display:flex; align-items:center; justify-content:center; z-index:1500 }
.trabajando .caja{
  background:var(--card-solido); border-radius:16px; padding:1.5rem 2rem; width:min(24rem,90vw);
  box-shadow:0 20px 50px rgba(0,0,0,.25); text-align:center;
  font-family:var(--f-tit); font-weight:700; letter-spacing:.03em;
}
.barra-ind{ height:8px; background:rgba(30,28,24,.10); border-radius:999px; overflow:hidden; margin-top:1rem }
.barra-ind i{ display:block; height:100%; width:35%; background:var(--acc); border-radius:999px; animation:corre 1.2s ease-in-out infinite }
@keyframes corre{ 0%{ margin-left:-35% } 100%{ margin-left:100% } }
@media(prefers-reduced-motion:reduce){ .barra-ind i{ animation:pulsa 1.2s ease-in-out infinite alternate; width:100%; margin:0 } }
@keyframes pulsa{ from{ opacity:.3 } to{ opacity:1 } }
.celda-obs{
  font-family:var(--f-txt); font-size:.8rem; color:var(--ink);
  background:var(--card-solido); border:1px dashed rgba(30,28,24,.35);
  border-radius:6px; padding:.15rem .4rem; width:16rem; text-align:left;
}
.celda-obs:focus{ outline:2px solid var(--acc); outline-offset:1px; border-style:solid }
/* TODAS LAS TARJETAS DE LA PLANILLA IGUALES (Valentin, 23-sep: la de Danitza salía con otros anchos y la píldora OFICINA
   partida en dos): las columnas tienen ancho FIJO, no las decide el contenido; el turno —selector o píldora— llena su columna */
#t-tabla{ table-layout:fixed; width:100%; min-width:64rem }
#t-tabla th:nth-child(1){ width:3rem }
#t-tabla th:nth-child(2){ width:4.6rem }
#t-tabla th:nth-child(3){ width:10rem }
#t-tabla th:nth-child(4), #t-tabla th:nth-child(5){ width:7rem }
#t-tabla th:nth-child(6), #t-tabla th:nth-child(7), #t-tabla th:nth-child(8), #t-tabla th:nth-child(9){ width:4.6rem }
#t-tabla th:nth-child(10){ width:6.6rem }
#t-tabla td:nth-child(3) .celda-sel{ width:100%; box-sizing:border-box }
#t-tabla td:nth-child(3) .pildora{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#t-tabla .celda-obs{ width:100%; box-sizing:border-box }
.celda-obs::placeholder{ color:var(--muted); font-style:italic }

@media(max-width:760px){
  .entrada{ grid-template-columns:1fr; gap:.2rem }
  .cifras{ gap:1.2rem }
  .grupo{ grid-auto-flow:row }
  .topnav .menu{ margin-left:0 }
}
@media(prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important } }
@media print{
  .topbar .menu, .persona, .acciones, .tabs, .fecha-nav, .toast{ display:none !important }
  body{ background:#fff }
  .card{ box-shadow:none; break-inside:avoid }
}

/* ---- ventana del pago de vacaciones (26-ago) ---- */
.dos-col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:.6rem 0 }
@media (max-width:640px){ .dos-col{ grid-template-columns:1fr } }
/* FILAS ALTERNADAS EN TODO LISTADO (Valentin, 22-sep, FRAMEWORK: "en los listados siempre pon una fila sin fondo, y la siguiente
   con el color del framework, el verde que ya usas"): las pares llevan un verde suave. Y LAS QUE ESTÁN PENDIENTES VAN EN ÁMBAR
   ("en los casos de Asambleas o directivas en curso o que no estén cerradas o archivadas, sombréalas de ámbar"; ej. las dos últimas
   de la Junta, pendientes de subir el acta firmada): la fila lleva la clase .pendiente y el ámbar manda sobre la alternancia */
:root{ --fila-alt:rgba(25,118,39,.07); --fila-pendiente:rgba(255,190,0,.22) }
table.mini tbody tr:nth-child(even) > td, .tabla-scroll table tbody tr:nth-child(even) > td{ background:var(--fila-alt) }
table.mini tbody tr.pendiente > td, .tabla-scroll table tbody tr.pendiente > td{ background:var(--fila-pendiente) }
table.mini{ width:100%; font-size:.84rem; border-collapse:collapse }
table.mini th, table.mini td{ padding:.22rem .4rem; border-bottom:1px solid var(--line) }
table.mini tfoot td{ border-top:2px solid var(--line); border-bottom:none }
table.mini input[type=checkbox]{ vertical-align:middle; margin-right:.3rem }
.fila-inputs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem }
.fila-inputs input{ flex:1 1 140px }
/* estado dentro de titulos de tarjeta/talonario (decimo y vacaciones) */
h2 .estado, .liviano .estado{ font-family:var(--f-tit); text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--avisa) }
h2 .estado.cerrada, .liviano .estado.cerrada{ color:var(--pausa) }
.estado{ font-family:var(--f-tit); text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--avisa) }
.estado.cerrada{ color:var(--pausa) } .estado.sellada{ color:var(--ok) }
/* vacaciones: calendario del año, 12 meses; los dias se escogen por bloques de 7 (27-ago) */
.cal-anio{ display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.9rem; margin:.6rem 0 }
.cal-mes{ width:100%; border-collapse:collapse; font-size:.78rem; table-layout:fixed }
.cal-mes caption{ font-family:var(--f-tit); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; color:var(--muted); text-align:left; padding:0 0 .2rem }
.cal-mes th{ font-size:.6rem; padding:.1rem 0; text-align:center; border:0 }
.cal-mes td{ text-align:center; padding:.15rem 0; border:0; border-radius:6px; white-space:nowrap }
.cal-mes td.cal-d{ cursor:pointer } .cal-mes td.cal-d:hover{ outline:1px solid var(--halo) }
.cal-mes td.pag{ background:var(--ok-bg); color:var(--ok); font-weight:700 }
.cal-mes td.prog{ background:var(--pausa-bg); color:var(--pausa) }
.cal-mes td.sel{ background:#FFDD00; color:var(--ink); font-weight:700 }
.cal-mes td.hoy{ outline:2px solid var(--acc) }
/* cronograma de vacaciones: cada mes es una pista; las barras ocupan sus dias a escala (28-ago) */
table.crono{ table-layout:fixed }
table.crono th{ padding:.3rem .1rem }
table.crono td.crono-td{ position:relative; height:2rem; padding:0; border-left:1px solid var(--line); overflow:hidden }
table.crono td.crono-sep{ border:0; height:.8rem; padding:0 }
.crono-mes{ position:absolute; top:0; bottom:0; width:1px; background:var(--line) }
.crono-barra{ position:absolute; top:.3rem; height:1.4rem; min-width:6px; border-radius:6px; font-family:var(--f-tit); font-size:.66rem; font-weight:700; line-height:1.4rem; text-align:center; overflow:hidden; white-space:nowrap; box-sizing:border-box; z-index:1 }
.crono-barra.ok{ background:var(--ok); color:#fff }
.crono-barra.pausa{ background:var(--pausa); color:#fff }
.crono-barra.mal{ background:var(--mal); color:#fff }
.crono-barra.notomo{ background:repeating-linear-gradient(45deg, rgba(30,28,24,.10) 0 4px, transparent 4px 8px); color:var(--muted); border:1px dashed var(--muted); font-weight:400; font-style:italic }
.crono-hoy{ position:absolute; top:0; bottom:0; width:2px; background:#FFDD00 }
/* liquidacion: cada prestacion en su recuadro con barra de titulo (27-ago) */
.bloque-liq{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:.9rem; background:var(--card-solido) }
.bloque-liq .bl-tit{ background:var(--acc); color:#fff; font-family:var(--f-tit); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; padding:.35rem .7rem }
.bloque-liq table.mini{ margin:0 } .bloque-liq table.mini td{ padding:.28rem .7rem }
.bloque-liq tfoot td{ background:var(--ok-bg) }

/* ---- al entrar: escoger modulo, Planilla o Informe (Valentin, 1-sep) ---- */
/* los recuadros de Inicio más abajo: el desplegable más alto (Finanzas) no los tapa (15-sep, medido con Edge a 1920 y 1366 px) */
/* MÁS CHICOS, TRES POR FILA con la ventana a media pantalla (Valentin, 18-sep): a 960 px de ventana quedan ~918 px de ancho
   útil (.wrap con 1.3rem por lado) → 3 × 270 + 2 × 1rem = 842 px. Medido con Edge a 960 px */
.escoger{display:flex;gap:1rem;justify-content:center;align-items:stretch;flex-wrap:wrap;margin-top:3.5rem;max-width:1000px;margin-left:auto;margin-right:auto}
/* LOS TÍTULOS DE UNA MISMA FILA, A LA MISMA ALTURA (Valentin, 22-sep: "el título de los recuadros debe estar alineado con el
   título del recuadro de su misma fila"): el contenido arranca ARRIBA (no centrado), así el h2 queda en la misma línea aunque
   el texto de abajo tenga una o dos líneas; la fila estira los recuadros a la misma altura (align-items: stretch) */
.escoger .card{width:270px;min-height:7.2rem;display:flex;flex-direction:column;justify-content:flex-start;cursor:pointer;text-align:center;padding:1.2rem 1rem;border:2px solid var(--line);font:inherit;color:var(--ink)}   /* hermanos de la misma altura */
.escoger .card:hover{border-color:var(--acc);box-shadow:0 0 0 3px var(--halo)}
.escoger .card h2{margin:0 0 .4rem;font-size:1.1rem}
.escoger .card p{margin:0;color:var(--muted);font-size:.86rem}

/* la zona donde se sueltan los archivos del banco: el recuadro punteado clasico */
.zona-soltar{border:2px dashed var(--line);border-radius:12px;padding:2.2rem 1.5rem;text-align:center;cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s,color .15s}
.zona-soltar:hover,.zona-soltar.suelta{border-color:var(--acc);background:rgba(25,118,39,.06);color:var(--ink)}
.zona-soltar.suelta{box-shadow:0 0 0 3px var(--halo)}
/* celda de turno en planilla SELLADA: papel impreso, no se cambia */
.turno.sellado{opacity:.75;cursor:not-allowed}
.zona-soltar svg{width:42px;height:42px;margin-bottom:.6rem;color:var(--acc)}
.zona-soltar .zs-titulo{font-size:1.05rem;font-weight:bold;color:var(--ink)}
.zona-soltar .zs-sub{font-size:.85rem;margin-top:.3rem}

/* la fila de casillas de la caja menuda del informe */
.cm-fila{display:flex;gap:1rem;flex-wrap:wrap}
.cm-fila label{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:150px;font-size:.85rem;color:var(--muted)}
.cm-fila input,.cm-fila select{padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;font:inherit;background:var(--card-solido);width:100%;box-sizing:border-box}
/* REGLA DEL FRAMEWORK (Valentin, 2-sep): en un formulario, TODOS los recuadros del mismo tamaño —
   rejilla fija de 4 columnas; una fila con menos campos deja el hueco, no se estira */
/* REGLA DEL FRAMEWORK (Valentin, 7-sep, ampliada el 11-sep a TODO el programa): el campo donde está el
   cursor SIEMPRE se ve resaltado — borde verde, halo y fondo blanco — esté donde esté, y su rótulo se
   enciende. Vale para cualquier casilla: formularios, diálogos, ventanas, tablas y filtros */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):focus,
select:focus, textarea:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(25,118,39,.18); background:#fff }
/* las casillas de marcar y los botones-campo también avisan dónde está el cursor */
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }
label:focus-within{ color:var(--acc) }
.cm-fila label:focus-within{ color:var(--acc); font-weight:600 }
/* REGLA DEL FRAMEWORK (Valentin, 14-sep: "los campos que ya están llenos que se pongan en negrita, de manera que vamos
   llenando en orden; los que se dejaron en blanco a propósito, que queden en negrita"): lo LLENO se ve en negrita, el
   valor y su rótulo. Un campo por el que ya se pasó y se dejó en blanco también queda con el rótulo en negrita (clase
   .visto, la pone app.js al salir del campo y se limpia al cambiar de pantalla): así se ve hasta dónde se revisó.
   El ejemplo gris (placeholder) de un campo vacío NO va en negrita */
.cm-fila input:not([type=checkbox]):not([type=radio]):not(:placeholder-shown),
.cm-fila textarea:not(:placeholder-shown),
.cm-fila select:has(option:checked:not([value=""])){ font-weight:700; color:var(--ink) }
.cm-fila label:has(input:not([type=checkbox]):not([type=radio]):not(:placeholder-shown)),
.cm-fila label:has(select option:checked:not([value=""])),
.cm-fila label:has(textarea:not(:placeholder-shown)),
.cm-fila label.visto{ font-weight:700; color:var(--ink) }
.cm-fila input::placeholder, .cm-fila textarea::placeholder{ font-weight:400 }
/* el campo donde está el cursor sigue mandando: su rótulo en verde, aunque esté lleno */
.cm-fila label:focus-within{ color:var(--acc) !important }
/* las pildoras dentro de un campo del formulario (El pago es, en Recibos): misma altura que un recuadro */
.cm-fila label .q-pills{ height:2.35rem; align-items:stretch; align-self:flex-start }
.cm-fila label .q-pills button{ padding:.3rem .8rem; font-size:.8rem; letter-spacing:.03em }
/* REGLA DEL FRAMEWORK (Valentin, 11-sep): un campo que la regla no pide llenar NO se esconde — se queda en su
   sitio diciendo "No aplica". Así la pantalla no baila de lugar cada vez que cambia la regla, y se ve que el
   programa decidió, no que se olvidó. Mismo lenguaje del talonario del décimo */
.cm-fila label .modo-no, .cm-fila label .no-aplica{ display:flex; align-items:center; height:2.35rem; padding:0 .6rem; border:1px dashed var(--line); border-radius:6px; color:var(--muted); font-size:.85rem; background:rgba(30,28,24,.03) }
/* un boton que va como un campo mas de la fila (Buscar el recibo, en Anular): misma altura que los recuadros */
.cm-fila label > .btn{ height:2.35rem; display:inline-flex; align-items:center; justify-content:center }
/* los botones de una fila (Ver · Imprimir · Anular · Anular y rehacer) en dos renglones parejos, sin ensanchar la tabla */
/* las acciones de una fila (Ver, Imprimir, Aprobar, Corregir, Anular…): una sobre otra y todas del mismo tamaño (Valentín, 8-sep) */
.acc-celda{ display:flex; flex-direction:column; align-items:stretch; gap:.25rem; width:7rem; margin:0 auto }
.acc-celda .btn{ white-space:nowrap; width:100%; text-align:center; justify-content:center }
/* EN FILA (Valentin, 21-sep, listado de Asambleas: "las dos píldoras fuera bueno que estuvieran una al lado de la otra"): la misma
   celda de acciones pero de lado, con columnas de ancho FIJO — así las hermanas miden igual y la primera cae en la misma vertical
   en todas las filas, tenga la fila una píldora o dos */
.acc-celda.en-fila{ display:grid; grid-auto-flow:column; grid-auto-columns:6.2rem; gap:.3rem; width:auto; margin:0; justify-content:start }
/* tres casillas en un campo (TRN · SEC · N-ON del slip de Banco General) */
.cm-fila .trio, .dialogo .trio{ display:flex; gap:.3rem }
/* cada casilla lleva su rotulo PINTADO fijo (TRN / SEC / N-ON) a la izquierda, que no se borra al escribir */
.tri{ display:flex; align-items:center; flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; background:var(--card-solido); overflow:hidden }
.tri b{ font-size:.68rem; letter-spacing:.04em; color:var(--acc); padding:0 .3rem 0 .4rem; white-space:nowrap; flex:none }
.cm-fila .tri input, .dialogo .tri input{ min-width:0; flex:1; width:100%; border:0 !important; border-radius:0; box-shadow:none !important; padding:.45rem .3rem .45rem 0; font-family:var(--f-num); margin-bottom:0; background:transparent }
.tri:focus-within{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(25,118,39,.18) }
.cm-fila input.fijo{ background:rgba(30,28,24,.05); color:var(--ink); cursor:not-allowed }
.cm-fila input.centro{ text-align:center; font-variant-numeric:tabular-nums }   /* un numero solo (el rango del listado de ACH, 9-sep) */
/* el RANGO del listado de ACH: titulo grande y los dos campos centrados, como los botones de abajo (Valentin, 9-sep: consistencia) */
.rango-tit{ text-align:center; font-size:1.35rem; margin:.2rem 0 .9rem }
.cm-fila.rango{ justify-content:center; gap:1.6rem }
.cm-fila.rango label{ flex:0 0 9rem; min-width:0; align-items:center; text-align:center }
.cm-fila.rango input{ font-size:1.15rem; padding:.5rem .6rem }
/* una fecha ESCRITA se lee negra, no gris (Valentin, 12-sep: "el campo que se ponga negro, actualmente queda
   en gris"): el rotulo de arriba sigue gris, el dato no */
.cm-fila.rango input, .cm-fila.rango select{ color:var(--ink); font-weight:600 }
.cm-fila.rango label.mes{ flex:0 0 12rem }
/* EL LISTADO DE RECIBOS EN PANTALLA (Valentin, 12-sep): "Recibido de" con ancho de sobra — el nombre se lee
   en una linea, dos a lo sumo, y no partido en cuatro renglones como salia */
#r-tabla th:nth-child(2), #r-tabla td:nth-child(2){ white-space:nowrap }
#r-tabla th:nth-child(3), #r-tabla td:nth-child(3){ white-space:nowrap }
#r-tabla th:nth-child(4), #r-tabla td:nth-child(4){ min-width:14rem }
#r-tabla th:nth-child(5), #r-tabla td:nth-child(5){ min-width:7.5rem }
/* TRANSACCION: con el numero partido en renglones, pero con mas aire — con la letra chica sobraba ancho en
   Concepto y faltaba aqui (Valentin, 12-sep) */
#r-tabla th:nth-child(9), #r-tabla td:nth-child(9){ max-width:9.5rem; white-space:normal; overflow-wrap:anywhere }
/* LETRA MAS CHICA EN ESTE CUADRO (Valentin, 12-sep: "tenemos que achicar el font"): son 10 columnas y con
   la letra de siempre no caben sin apretujarse. Solo aplica al listado de recibos, no a las demas tablas */
#r-tabla{ font-size:.8rem }
/* los titulos, centrados de alto y de ancho y con letra mas chica para que quepan (Valentin, 12-sep) */
#r-tabla th{ font-size:inherit; letter-spacing:0; padding-left:.3rem; padding-right:.3rem; text-align:center; vertical-align:middle; line-height:1.15 }
#r-tabla td{ vertical-align:middle }
#r-tabla td{ padding:.35rem .35rem }
#r-tabla td .obs{ font-size:.72rem }
#r-tabla td .btn.chico{ font-size:.62rem; padding:.15rem .5rem }
#r-tabla .acc-celda{ width:5.6rem }
#r-tabla th:nth-child(7), #r-tabla td:nth-child(7){ white-space:nowrap }
.cm-fila.rango select{ font-size:1.05rem; padding:.5rem .6rem }
/* los campos numericos SIN flechitas de subir/bajar: enredan (Valentin, 9-sep, los montos de las facturas) — en todo el programa */
input[type=number]{ -moz-appearance:textfield; appearance:textfield }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.cm-fila input.mal{ border-color:var(--mal); box-shadow:0 0 0 3px rgba(180,30,30,.15) }
.cm-fila input::placeholder{ color:rgba(30,28,24,.38) }
/* campo con lista de sugerencias (Local del recibo): la lista cuelga debajo del recuadro */
.sug-w{ position:relative }
.sug{ position:absolute; left:0; right:0; top:100%; z-index:30; margin-top:.2rem; max-height:22rem; overflow-y:auto; min-width:22rem;
  background:var(--card-solido); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.15); font-size:.9rem; color:var(--ink) }
/* cada fila: "Local 4" a la izquierda en su columna fija y el propietario al lado, en gris, para escoger bien */
.sug-it{ padding:.35rem .7rem; cursor:pointer; display:flex; align-items:baseline; gap:.6rem; border-bottom:1px solid var(--line) }
.sug-it:last-child{ border-bottom:0 }
.sug-it b{ font-family:var(--f-num); min-width:5.5rem; flex:none }
.sug-it .obs{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted) }
.sug-it:hover,.sug-it.activa{ background:rgba(25,118,39,.1) }
.sug-vacia{ padding:.5rem .7rem; color:var(--muted); font-size:.85rem }
.cm-fila.forma-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.cm-fila.forma-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* los archivos juntados en el recuadro, esperando el Subir: fichas todas del mismo tamaño */
.pendientes{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.pend{display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;background:var(--card-solido);font-size:.85rem;width:300px}
.pend svg{width:22px;height:22px;color:var(--acc);flex:none}
.pend-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* las pildoras de la lista de requisitos miden todas igual */
#i-checklist .pildora{display:inline-block;min-width:4.6rem;text-align:center}
#i-checklist .entrada{display:flex;align-items:center;padding:.35rem 0}
.pend-tam{color:var(--muted);font-size:.75rem}
.pend-x{border:none;background:none;cursor:pointer;color:var(--muted);font-size:.85rem;padding:.1rem .25rem}
.pend-x:hover{color:var(--mal)}
.pend-acciones{display:flex;gap:.6rem;margin-left:auto}

/* notificaciones EN EL MEDIO, se cierran con la X (no se van solas) */
.avisos-centro{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;pointer-events:none;z-index:9000}
.aviso{pointer-events:auto;display:flex;align-items:center;gap:.9rem;max-width:560px;background:var(--card-solido);border:2px solid var(--ok);border-radius:10px;padding:.9rem 1.1rem;box-shadow:0 8px 30px rgba(0,0,0,.25);font-size:.95rem}
.aviso.mal{border-color:var(--mal)}
.aviso.se-va{opacity:0;transition:opacity .7s ease}   /* el aviso de "listo" se desvanece a los 5 s */
/* el visor propio de solicitudes: las paginas una debajo de la otra, cada una como hoja */
/* el documento (.visor-doc) se escala con `zoom`, asi las paginas, los espacios y los rotulos crecen juntos y el
   punto bajo el mouse se puede mantener fijo al acercar; el cuerpo de la ventana es el que rueda */
.visor{background:var(--bg);margin:-1rem -1.1rem;padding:1rem;min-width:max-content;min-height:100%;display:flex;justify-content:center}
.visor-doc{display:flex;flex-direction:column;gap:1rem;align-items:stretch}
.visor-pag{margin:0}
.visor-pag img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 4px 18px rgba(30,28,24,.22);border-radius:4px;transform-origin:center center}
/* hoja girada un cuarto de vuelta: el JS le pone el alto a la caja; aqui solo se centra la imagen */
.visor-pag.girada{display:flex;align-items:center;justify-content:center}
.visor-pag.girada figcaption{display:none}
.visor-zoom{display:flex;align-items:center;gap:.3rem;margin-left:.8rem;flex:0 0 auto}
.visor-zoom #visor-pct{min-width:3rem;text-align:center;font-size:.8rem}
/* los controles del visor son ÍCONOS cuadrados del mismo tamaño (Valentin, 11-sep): no se encogen ni se esconden */
.visor-zoom .btn.icono{width:2rem;height:2rem;min-width:2rem;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.visor-zoom .btn.icono svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.visor-zoom .sep{width:1px;height:1.4rem;background:var(--line);margin:0 .15rem}
.visor-pag figcaption{text-align:center;font-size:.8rem;color:var(--muted);margin-top:.3rem}
.aviso-txt{flex:1}
.aviso-x{border:none;background:none;cursor:pointer;font-size:1rem;color:var(--muted);padding:.2rem .4rem;flex:none}
.aviso-x:hover{color:var(--ink)}

/* el modulo Informe cabe en una pantalla normal sin scroll: todo mas compacto */
#m-informe .page-title{margin:.9rem 0 .2rem}
#m-informe .page-sub{margin-bottom:.7rem}
#m-informe .card{padding:.85rem 1.1rem;margin-bottom:.7rem}
#m-informe .card h2{margin-bottom:.5rem;font-size:1rem}
#m-informe .zona-soltar{padding:.9rem 1rem}
#m-informe .zona-soltar svg{width:30px;height:30px;margin-bottom:.3rem}
#m-informe .zona-soltar .zs-titulo{font-size:.95rem}
#m-informe .zona-soltar .zs-sub{font-size:.8rem;margin-top:.15rem}
#m-informe .acciones{margin-top:.5rem !important}
#m-informe #i-checklist .entrada{padding:.2rem 0;font-size:.9rem}
#m-informe .cm-fila input{padding:.3rem .5rem}
#m-informe .leyenda{margin-top:.4rem !important}

/* aviso amarillo (tipo ojo): importante pero no error; se queda hasta cerrarlo */
.aviso.ojo{border-color:var(--avisa)}

/* los avisos respetan los saltos de linea (preguntas numeradas, una por renglon) */
.aviso-txt{white-space:pre-line}

/* las preguntas del mes, con sus campos de respuesta */
.pregunta{border:1px solid var(--line);border-left:4px solid var(--avisa);border-radius:10px;padding:.8rem 1rem;margin-bottom:.7rem;background:var(--card-solido)}
.pregunta p{margin:.1rem 0 .5rem}


/* ---------- Recibos de cobro ---------- */
#m-recibos #r-proximo{ text-align:center; margin-bottom:.8rem }
#m-recibos #r-proximo .btn.chico{ vertical-align:middle }
/* los botones de la fila van en .acc-celda (uno debajo del otro, todos del mismo ancho): NADA de margenes
   sueltos entre ellos o quedan corridos y disparejos (Valentin, 10-sep) */
#m-recibos td .obs{ max-width:20rem }
/* REGLA DEL FRAMEWORK (Valentin, 11-sep): las píldoras HERMANAS van del mismo ancho. Dentro de .grupo lo
   resuelve la rejilla (grid-auto-columns:1fr); en el pie de las ventanas y diálogos los botones van sueltos,
   así que se igualan con un mínimo común que cubre el más largo que se usa ("Imprimir copia" = 151px) */
.q-ven-pie .btn:not(.chico){ min-width:10.5rem }
/* el cuadro de copropietarios: columnas de ancho fijo para que ningún nombre largo (el 17, con dos dueños)
   desacomode el resto — el texto se parte y la fila crece, que es lo parejo (Valentin, 11-sep) */
#cp-tabla{ table-layout:fixed }
/* anchos a lo justo (Valentin, 18-sep: "Local, Finca, Votos y Dueño al están más anchas de lo que necesitan"): Local 3.4, Finca 3.8,
   m² 5.2, % 4.6, Votos 3.2, Dueño al 5.4 rem; el resto se lo reparten Copropietario y Representante */
#cp-tabla th:nth-child(1), #cp-tabla td:nth-child(1){ width:3.4rem }
#cp-tabla th:nth-child(2), #cp-tabla td:nth-child(2){ width:3.8rem }
#cp-tabla th:nth-child(3), #cp-tabla td:nth-child(3){ width:auto }
#cp-tabla th:nth-child(4), #cp-tabla td:nth-child(4){ width:30% }
#cp-tabla th:nth-child(5), #cp-tabla td:nth-child(5){ width:5.2rem }
#cp-tabla th:nth-child(6), #cp-tabla td:nth-child(6){ width:4.6rem }
#cp-tabla th:nth-child(7), #cp-tabla td:nth-child(7){ width:3.2rem }
#cp-tabla th:nth-child(8), #cp-tabla td:nth-child(8){ width:5.4rem }
/* ---------- Copropietarios: las tres cifras del quórum y el cuadro de mayorías ---------- */
.cifra{ display:flex; flex-direction:column; align-items:center; padding:.6rem 1.2rem; border:1px solid var(--line); border-radius:8px; background:var(--card-solido); min-width:9rem }
.cifra b{ font-family:var(--f-tit); font-size:1.6rem; color:var(--acc); line-height:1.1 }
.cifra span{ font-size:.8rem; color:var(--muted); text-align:center }
/* FRAMEWORK (Valentin, 15-sep): recuadros de cosas similares, TODOS DEL MISMO TAMAÑO */
.cm-fila > .cifra{ flex:0 0 13rem; box-sizing:border-box; justify-content:flex-start }
/* Planilla (Valentin, 23-sep): Regulares, Extras, Domingo, Feriado, Bruto y Neto EN UNA SOLA FILA, todos del mismo ancho */
.cifras.una-fila{ flex-wrap:nowrap; gap:.7rem }
.cifras.una-fila > .cifra{ flex:1 1 0; min-width:0; box-sizing:border-box; padding:.6rem .4rem }
@media (max-width:600px){ .cifras.una-fila{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) } }
/* cifras en rejilla: los similares uno sobre otro; el que no es similar (.alta) a la derecha con la altura de las dos filas */
/* más angostos (10.5rem) y se encogen en vez de saltar de fila: siempre las dos filas (Valentin, 15-sep) */
.cifras-rejilla{ display:grid; grid-template-columns:repeat(4,minmax(0,10.5rem)); grid-auto-rows:1fr; gap:.7rem; justify-content:center; margin:.7rem 0 }
.cifras-rejilla > .cifra{ box-sizing:border-box; min-width:0; padding:.5rem .6rem }
.cifras-rejilla > .cifra.alta{ grid-column:4; grid-row:1 / span 2; justify-content:center }
@media (max-width:600px){ .cifras-rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)) } .cifras-rejilla > .cifra.alta{ grid-column:auto; grid-row:auto } }
@media (max-width:480px){ .cifras-rejilla{ grid-template-columns:minmax(0,1fr) } }
.cifra .t{ font-style:normal; font-family:var(--f-tit); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); text-align:center; line-height:1.25; text-align:center }
.cifra .s{ font-size:.85rem; font-weight:600; color:var(--ink); text-align:center; margin-bottom:.15rem }
@media (max-width:480px){ .cm-fila > .cifra{ flex:1 1 100% } }
#cp-quorum table.mini tr.falta td{ background:rgba(194,24,24,.05) }
/* Anular un recibo: pantalla de una sola cosa, todo centrado en la misma columna (Valentin, 11-sep) */
.ra-form{ max-width:34rem; margin:0 auto }
/* el rotulo "N° del recibo" es lo primero que se lee de la pantalla: grande y en negro, no en gris de rotulo */
.ra-num-fila label{ font-size:1.05rem; font-weight:700; color:var(--ink); gap:.4rem; flex:0 0 11rem }
.ra-num-fila input{ font-size:1.3rem }
/* la casilla de "tengo todas las copias a la vista" para anular: se lee como lo que es, una declaracion */
.check{ display:flex; align-items:flex-start; gap:.5rem; padding:.6rem .7rem; border:1px dashed var(--line); border-radius:6px;
  background:rgba(30,28,24,.03); cursor:pointer; font-size:.9rem; line-height:1.35 }
.check input[type=checkbox]{ width:1.05rem; height:1.05rem; margin:.05rem 0 0; flex:none; accent-color:var(--acc); cursor:pointer }
.check:focus-within{ border-color:var(--acc); border-style:solid; box-shadow:0 0 0 3px rgba(25,118,39,.18) }