/* ============================================================
   UTILIDADES COMPARTIDAS
   Sistema de Administración de Condominios
   ============================================================
   Bloques que aparecían repetidos en atributos style de varios
   módulos a la vez. No pertenecen a ninguna pantalla concreta,
   de ahí el prefijo u-.

   Los valores son exactamente los que estaban escritos en el JS:
   el objetivo es mover el estilo de sitio, no rediseñar nada. Si
   algo se ve distinto tras usar una de estas clases, es un fallo.

   Ver docs/PLAN_LIMPIEZA_CSS.md
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   VOCABULARIO COMÚN

   Estas clases no pertenecen a una pantalla: son las piezas que
   se repiten por todo el sistema. Aprenderlas una vez sirve para
   todos los módulos, y ése es el motivo de que existan.

   Al escribir una pantalla nueva, mirar aquí antes de inventar
   un estilo: si la pieza ya está, se reutiliza.
   ══════════════════════════════════════════════════════════ */

/* ── Tablas ───────────────────────────────────────────────── */

.u-tabla,
.u-tabla-blanca {
    width: 100%;
    border-collapse: collapse;
}

.u-tabla-blanca { background: #fff; }

/* Envoltura que permite desplazar una tabla ancha en pantallas
   estrechas, en vez de que desborde */
.u-tabla-scroll { overflow-x: auto; }

/* Encabezados. El color sale del tema; ver docs/COLORES_DE_TABLAS.md */
.u-th {
    padding: 8px 12px;
    color: var(--tabla-encabezado-texto);
    font-size: 11px;
    text-align: left;
    text-transform: uppercase;
}

.u-th-bold {
    padding: 6px 10px;
    color: var(--tabla-encabezado-texto, #1f2937);
    font-size: 11px;
    font-weight: 700;
    text-align: left;
}

.u-th-centro {
    padding: 10px 12px;
    color: #0d2e7a;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.u-td-centro     { padding: 5px 8px;  text-align: center; }
.u-td-centro-md  { padding: 8px 10px; text-align: center; }
.u-td-centro-sm  { padding: 8px;      text-align: center; }

/* ── Títulos y cabeceras de sección ───────────────────────── */

/* Título principal de módulos y submódulos. La etiqueta HTML puede ser h2,
   h3 o span: la jerarquía visual depende de esta clase única. */
.u-titulo-modulo {
    margin: 0;
    color: #0a2463;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.u-subtitulo {
    margin: 6px 0 0 0;
    color: #6b7280;
    font-size: 13px;
}

.u-cabecera-linea {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

/* Rótulo pequeño encima de un dato, tenue y en mayúsculas */
.u-eyebrow {
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 0.7;
    text-transform: uppercase;
}

/* ── Filas y columnas ─────────────────────────────────────── */

.u-fila-centro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-fila-10 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.u-col-4 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.u-celda-flex {
    flex: 1;
    padding: 3px;
    text-align: center;
}

/* ── Etiquetas de campo ───────────────────────────────────── */

.u-label {
    display: block;
    margin-bottom: 4px;
    color: #374151;
    font-size: 10px;
    font-weight: 600;
}

.u-label-rem {
    display: block;
    margin-bottom: 4px;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 600;
}

.u-label-gris {
    display: block;
    margin-bottom: 5px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.u-label-seccion {
    margin-bottom: 6px;
    color: #0a2463;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* ── Campos ───────────────────────────────────────────────── */

.u-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 11px;
}

.u-input-rem {
    width: 100%;
    padding: 7px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ── Tablas ───────────────────────────────────────────────── */

/* El color sale de la variable de tema; ver docs/COLORES_DE_TABLAS.md */
.u-linea-tabla {
    border-bottom: 1px solid var(--tabla-linea, #e5e7eb);
}

.u-celda-borde {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    font-size: 12px;
}

.u-pad-celda {
    padding: 5px 8px;
}

/* ── Títulos ──────────────────────────────────────────────── */

.u-titulo-azul {
    margin: 0;
    color: #0a2463;
    font-size: 13px;
    font-weight: 500;
}

/* ── Espaciado y tamaños sueltos ──────────────────────────── */

.u-mb0   { margin-bottom: 0; }
.u-mb12  { margin-bottom: 12px; }
.u-mr6   { margin-right: 6px; }
.u-mr8   { margin-right: 8px; }
.u-flex1 { flex: 1; }
.u-span2 { grid-column: span 2; }
.u-fs-05 { font-size: 0.5rem; }
.u-fs10  { font-size: 10px; }
.u-fs12  { font-size: 12px; }

.u-mb16 { margin-bottom: 16px; }

/* ── Más etiquetas de campo, por tamaño y tono ────────────── */

.u-campo-label {
    display: block;
    margin-bottom: 4px;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 600;
}

.u-campo-label-sm {
    display: block;
    margin-bottom: 5px;
    color: #374151;
    font-size: 11px;
    font-weight: 600;
}

.u-campo-label-xs {
    display: block;
    margin-bottom: 3px;
    color: #4a5568;
    font-size: 0.72rem;
    font-weight: 600;
}

.u-campo-label-gris {
    display: block;
    margin-bottom: 8px;
    color: #2c3e50;
    font-size: 12px;
    font-weight: 500;
}

.u-campo-nota {
    display: block;
    margin-bottom: 2px;
    color: #6b7280;
    font-size: 11px;
}

.u-nota-block {
    display: block;
    color: #64748b;
    font-size: 10px;
}

/* Rótulo de sección, en el azul del sistema */
.u-seccion-label {
    display: block;
    margin-bottom: 6px;
    color: #0a2463;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.u-seccion-label-sm {
    display: block;
    margin-bottom: 4px;
    color: #0a2463;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
}

/* ── Campos ───────────────────────────────────────────────── */

.u-input-borde {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    box-sizing: border-box;
    font-size: 12px;
}

.u-input-radio {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 11px;
}

/* ── Colores y tamaños sueltos ────────────────────────────── */

.u-gris-claro  { color: #9ca3af; }
.u-rojo-fuerte { color: #dc2626; }
.u-gris-10     { color: #6b7280; font-size: 10px; }
.u-gris-bold   { color: #6b7280; font-weight: 600; }
.u-mr4         { margin-right: 4px; }
.u-fs14        { font-size: 14px; }

.u-icono-grande {
    margin-bottom: 10px;
    font-size: 24px;
}

/* ══════════════════════════════════════════════════════════
   VOCABULARIO — SEGUNDA TANDA
   Piezas que se repiten siete veces o más por el sistema.
   ══════════════════════════════════════════════════════════ */

/* ── Encabezados de tabla ─────────────────────────────────── */

.u-th-lg {
    padding: 14px 16px;
    color: var(--tabla-encabezado-texto);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
    text-transform: uppercase;
}

.u-th-centro-sm {
    padding: 6px 10px;
    color: var(--tabla-encabezado-texto, #1f2937);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.u-th-azul,
.u-th-azul-sp,
.u-th-azul-centro-sp {
    padding: 10px 12px;
    color: #0d2e7a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.u-th-azul            { text-align: left; }
.u-th-azul-sp         { text-align: left;   letter-spacing: 0.5px; }
.u-th-azul-centro-sp  { text-align: center; letter-spacing: 0.5px; }

.u-th-gris,
.u-th-gris-sm {
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: left;
    text-transform: uppercase;
}

.u-th-gris    { padding: 8px 12px; }
.u-th-gris-sm { padding: 8px 10px; }

.u-th-compacto {
    padding: 5px 8px;
    border-right: 1px solid var(--tabla-linea-columna, #f1f5f9);
    font-size: 0.55rem;
    font-weight: 700;
    text-align: left;
}

/* ── Celdas ───────────────────────────────────────────────── */

.u-td-centro-bold {
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.u-td-centro-lg { padding: 12px;   text-align: center; }
.u-td-izq-xs    { padding: 3px 8px; text-align: left; }
.u-td-xs        { padding: 3px 6px; }

/* Tabla de datos sin encabezado: una lista, no una cuadrícula. Se llamaba
   u-tabla-11 por sus 11px, que era justo lo que la sacaba del estándar del
   sistema. Al no tener <thead> tampoco la alcanza la regla global de
   responsive/global/tables.css, así que toma el tamaño de la variable
   directamente. Ver docs/COLORES_DE_TABLAS.md */
.u-tabla-datos {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tabla-texto, 12px);
}

.u-fila-gris {
    border-bottom: 2px solid #9ca3af;
    background: #e5e7eb;
}

/* ── Campos, por tamaño de letra ──────────────────────────── */

.u-input-13,
.u-input-12,
.u-input-11,
.u-input-085 {
    width: 100%;
    border: 1px solid #d1d5db;
    box-sizing: border-box;
}

.u-input-13  { padding: 6px 10px; font-size: 13px; }
.u-input-12  { padding: 6px 10px; font-size: 12px; }
.u-input-11  { padding: 5px 8px;  border-radius: 4px; font-size: 11px; }
.u-input-085 { padding: 6px 10px; border-radius: 6px; font-size: 0.85rem; }

.u-input-09 {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* ── Botones secundarios ──────────────────────────────────── */

.u-btn-gris,
.u-btn-gris-fijo {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    cursor: pointer;
}

/* Igual, pero sin dejarse encoger ni estirar dentro de un flex */
.u-btn-gris-fijo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: unset;
    max-width: none;
    flex-shrink: 0;
}

/* ── Estados vacíos ───────────────────────────────────────── */

.u-vacio {
    padding: 40px;
    color: #6b7280;
    text-align: center;
}

.u-vacio-sm {
    padding: 12px;
    color: #64748b;
    text-align: center;
}

/* ── Rejillas y superposición ─────────────────────────────── */

.u-grid2-12 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.u-grid2-10 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.u-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* ── Etiquetas y títulos ──────────────────────────────────── */

.u-campo-label-13 {
    display: block;
    margin-bottom: 6px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.u-campo-label-09 {
    display: block;
    margin-bottom: 5px;
    color: #4a5568;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Título que se recorta con puntos suspensivos si no cabe */
.u-titulo-elipsis {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #0a2463;
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.u-panel-borde {
    padding: 18px;
    border: 1px solid #d1d5db;
    background: #fff;
}

/* ── Sueltas ──────────────────────────────────────────────── */

.u-separador-vertical {
    width: 2px;
    min-height: 30px;
    background: rgba(255, 255, 255, 0.4);
}

.u-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.u-centro       { text-align: center; }
.u-pad20        { padding: 20px; }
.u-fw500        { font-weight: 500; }
.u-fs9          { font-size: 9px; }
.u-fs12-tenue   { font-size: 12px; opacity: 0.8; }
.u-gris-9       { color: #6b7280; font-size: 9px; }
.u-gris-11      { color: #6b7280; font-size: 11px; }
.u-gris-suave   { color: #94a3b8; }
.u-oscuro       { color: #1e293b; }
.u-icono-14     { width: 14px; color: #9ca3af; }
.u-mr5          { margin-right: 5px; }
.u-mt12         { margin-top: 12px; }
.u-mb15         { margin-bottom: 15px; }

/* ══════════════════════════════════════════════════════════
   VOCABULARIO — TERCERA TANDA
   Piezas repetidas seis veces. A partir de aquí el rendimiento
   baja: unos seis estilos por clase, frente a los trece de la
   primera tanda.
   ══════════════════════════════════════════════════════════ */

/* ── Estados vacíos y de error ────────────────────────────── */

.u-vacio-20 { padding: 20px; color: #6b7280; text-align: center; }
.u-vacio-30 { padding: 30px; color: #6b7280; text-align: center; }
.u-error    { padding: 40px; color: #ef4444; text-align: center; }

/* Zona de soltar archivos, o hueco a la espera de contenido */
.u-zona-vacia {
    padding: 60px 20px;
    border: 2px dashed #d1d5db;
    background: #f9fafb;
    text-align: center;
}

/* ── Tablas: cabecera con los colores del tema ────────────── */
/* Ver docs/COLORES_DE_TABLAS.md antes de tocar estos dos */

.u-thead {
    border-bottom: 2px solid var(--tabla-linea-encabezado, #94a3b8);
    background: var(--tabla-encabezado-bg, #c1c6c9);
    /* El color del texto va aquí y no en cada <th>: es el mismo para
       todos los encabezados del sistema, y estaba repetido en el
       atributo de cinco tablas. */
    color: var(--tabla-encabezado-texto, #1f2937);
}

.u-thead-simple { background: var(--tabla-encabezado-bg); }

.u-th-mayus-sm {
    padding: 6px 8px;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.u-th-gris-fondo {
    padding: 5px 8px;
    background: #f9fafb;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.u-th-subrayado {
    padding: 10px;
    border-bottom: 2px solid #0a2463;
    color: #0a2463;
    font-weight: 700;
    text-align: center;
}

/* ── Tablas: celdas ───────────────────────────────────────── */

.u-td-11     { padding: 5px 8px; font-size: 11px; }
.u-td-texto  { padding: 4px 8px; color: #374151; font-size: 11px; }

.u-td-num {
    padding: 4px 8px;
    color: #6b7280;
    font-size: 11px;
    text-align: right;
}

.u-td-compacto-centro {
    padding: 5px 8px;
    border-right: 1px solid var(--tabla-linea-columna, #f1f5f9);
    font-size: 0.55rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.u-td-compacto-top {
    padding: 5px 6px;
    border-right: 1px solid var(--tabla-linea-columna, #f1f5f9);
    vertical-align: top;
}

.u-celda-oculta {
    padding: 8px 10px;
    overflow: hidden;
}

/* ── Botones y avisos ─────────────────────────────────────── */

.u-btn-morado,
.u-btn-azul {
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.u-btn-morado { padding: 8px 20px; background: #8e44ad; }
.u-btn-azul   { padding: 8px 14px; background: #3498db; }

.u-btn-plano {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1rem;
    cursor: pointer;
}

.u-alerta-roja {
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
}

.u-panel-blanco {
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ── Filas, por separación ────────────────────────────────── */

.u-fila-3-nowrap,
.u-fila-6,
.u-fila-8,
.u-fila-12,
.u-fila-12-mb,
.u-fila-6-linea {
    display: flex;
    align-items: center;
}

.u-fila-3-nowrap { gap: 3px; white-space: nowrap; }
.u-fila-6        { gap: 6px; }
.u-fila-8        { gap: 8px; }
.u-fila-12       { gap: 12px; }
.u-fila-12-mb    { gap: 12px; margin-bottom: 12px; }

.u-fila-6-linea {
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dee2e6;
}

.u-fila-centro-4 {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.u-fila-centro-8 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 8px;
}

/* ── Textos ───────────────────────────────────────────────── */

.u-titulo-08 { margin: 0; color: #2c3e50; font-size: 0.8rem; }
.u-titulo-14 { margin: 0; color: #0a2463; font-size: 14px; }

.u-dato-grande {
    color: #1e293b;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.u-texto-078 { color: #2c3e50; font-size: 0.78rem; font-weight: 600; }
.u-texto-062 { color: #2c3e50; font-size: 0.62rem; font-weight: 600; }
.u-texto-08  { color: #64748b; font-size: 0.8rem; }

/* Devuelve un texto a su forma normal dentro de un contenedor
   que lo pondría en mayúsculas y en negrita */
.u-texto-normal {
    color: #6b7280;
    font-weight: 400;
    text-transform: none;
}

.u-seccion-titulo {
    margin-bottom: 10px;
    color: #0a2463;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.u-label-10 {
    display: block;
    margin-bottom: 4px;
    color: #374151;
    font-size: 10px;
    font-weight: 600;
}

/* ── Iconos y colores ─────────────────────────────────────── */

.u-icono-48 { margin-bottom: 12px; color: #9ca3af; font-size: 48px; }
.u-icono-18 { display: block; margin-bottom: 8px; font-size: 18px; }
.u-icono-blanco { color: #fff; font-size: 1.2rem; }

.u-morado       { color: #8e44ad; }
.u-gris         { color: #6b7280; }
.u-texto-oscuro { color: #374151; }
.u-verde        { color: #10b981; }
.u-verde-oscuro { color: #059669; }

/* ── Espaciado y tamaños ──────────────────────────────────── */

.u-mb8  { margin-bottom: 8px; }
.u-mb10 { margin-bottom: 10px; }
.u-mb14 { margin-bottom: 14px; }
.u-fs24 { font-size: 24px; }
.u-fs12-centro { font-size: 12px; text-align: center; }

/* ── Otros ────────────────────────────────────────────────── */

.u-video {
    width: 100%;
    max-height: 300px;
    border-radius: 8px;
    background: #000;
}

.u-input-e0 {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e0e6ed;
    border-radius: 5px;
}

/* ══════════════════════════════════════════════════════════
   MOSTRAR Y OCULTAR

   Para que el JavaScript no tenga que escribir display en el
   atributo style. Se pone y se quita con classList, y al
   quitarla el elemento vuelve al display que le dé su hoja, en
   vez de al que adivinara quien escribió el código.

   LLEVA !important, Y HACE FALTA
   ------------------------------
   Esta hoja se carga antes que las de cada módulo. Un componente
   que declare su propio display —.al-visor es flex, .doc-tools
   es flex, .prov-bancarios es grid— gana por ir después en la
   cascada, aunque su especificidad sea la misma.

   Sin !important, poner la clase no ocultaba nada: el visor de
   leyes salía abierto nada más entrar y no había forma de
   cerrarlo. Ocultar es un estado, no una preferencia de estilo,
   y tiene que ganar siempre.
   ══════════════════════════════════════════════════════════ */

.u-oculto { display: none !important; }

/* ── El aro del campo al recibir el foco ──────────────────────
   Lo hacía una pareja onfocus/onblur en cada campo, repitiendo en
   el onblur el color de reposo para poder volver a él. :focus se
   pone y se quita solo, y además funciona con el teclado igual
   que con el ratón.

   Los colores son los que ya había. El campo conserva en su hoja
   —o en su atributo— su borde y su fondo de reposo; aquí solo se
   dice qué cambia mientras está enfocado. */

.u-foco-morado:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* Los que además se aclaran al enfocarse: descansan en gris y se
   ponen blancos para señalar dónde se está escribiendo. */
.u-foco-morado-claro:focus {
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.u-foco-pizarra:focus { border-color: #2c3e50; }
.u-foco-ambar:focus   { border-color: #f39c12; }
.u-foco-azul:focus    { border-color: #3b82f6; }

/* ── Fila de tabla bajo el ratón ───────────────────────────────
   La comparten todos los módulos. El color sale de una variable,
   como el resto de los colores de tabla; ver
   docs/COLORES_DE_TABLAS.md */
.u-fila-hover:hover { background: var(--tabla-fila-hover); }

/* Variante del fondo de modal con algo de aire alrededor, para los que
   traen una tarjeta grande y no deben pegarse a los bordes en pantallas
   pequeñas. El nivel de apilado lo pone una atómica: cada modal tiene el
   suyo y de ahí depende cuál queda encima de cuál. */
.u-overlay--con-aire {
    box-sizing: border-box;
    padding: 20px;
}

/* ── Tarjeta de un aviso o confirmación ────────────────────────
   La caja blanca que va dentro de u-overlay cuando solo hay que
   preguntar algo corto. Se repetía en cinco módulos. */
.u-modal-aviso {
    width: 90%;
    max-width: 400px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

/* ── Tabla que ocupa el ancho de su caja ───────────────────────
   El fondo lleva su valor de respaldo escrito porque estas tablas
   también salen impresas, y la ventana de impresión no carga las
   hojas. Ver docs/COLORES_DE_TABLAS.md */
.u-tabla-completa {
    width: 100%;
    border-collapse: collapse;
    background: var(--tabla-fondo, #fff);
}

.u-tabla-completa--menuda { font-size: 0.6rem; }


/* ── Variantes del fondo de modal ──────────────────────────────
   El mismo fondo aparecía escrito a mano con cinco opacidades
   distintas —0.4, 0.5, 0.55, 0.6 y 0.7— y seis niveles de
   apilado. La forma es siempre la de .u-overlay; lo que cambia
   es cuánto oscurece y quién queda encima.

   El nivel sigue en una atómica, porque de él depende el orden
   entre modales y eso no se puede uniformar sin mirarlos todos. */

.u-overlay--suave  { background: rgba(0, 0, 0, 0.4); }
.u-overlay--medio  { background: rgba(0, 0, 0, 0.55); }
.u-overlay--fuerte { background: rgba(0, 0, 0, 0.6); }
.u-overlay--oscuro { background: rgba(0, 0, 0, 0.7); }

/* Con el fondo difuminado, para los que tapan algo que distrae. */
.u-overlay--difuminado { backdrop-filter: blur(4px); }

/* Para los modales altos: el contenido arranca arriba y la capa
   se desplaza, en vez de centrarlo y que se salga por los bordes. */
.u-overlay--arriba {
    box-sizing: border-box;
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px;
}

/* ── Fuera de la pantalla ──────────────────────────────────────
   Se usa para medir algo antes de enseñarlo, o para preparar lo
   que va a imprimirse. No es display:none: un elemento oculto no
   tiene medidas, y aquí hacen falta. */
.u-fuera-de-pantalla {
    position: absolute;
    top: 0;
    left: -9999px;
}

/* ── Campo que se valida mientras se escribe ───────────────────
   Sin clase, su borde es el que le toque por su hoja. Con una de
   las dos, avisa de si lo escrito ya vale: rojo mientras falta,
   verde cuando está completo.

   Llevan !important porque el borde de estos campos viene de la
   clase de su módulo, que se lee después que ésta y ganaría por
   orden. Es el mismo motivo que en .campo-invalido. */

.u-campo-falta { border-color: #f56565 !important; }
.u-campo-vale  { border-color: #48bb78 !important; }

/* ── Campo que se comprueba contra el servidor ─────────────────
   Cuatro estados: mientras se escribe, cuando el formato no vale,
   cuando el número ya está usado, y cuando está disponible. La
   pista de debajo lleva el mismo color que el borde, así que van
   en pareja pero en clases distintas: al campo no se le puede dar
   el color de la pista sin teñirle también lo que se teclea.

   Con !important por lo mismo de siempre: el borde de estos
   campos viene de la clase de su módulo, que se lee después. */

.u-verifica-error { border-color: #ef4444 !important; }
.u-verifica-ok    { border-color: #10b981 !important; }
.u-verifica-aviso { border-color: #f59e0b !important; }

.u-pista       { color: #6b7280; }
.u-pista-error { color: #ef4444; }
.u-pista-ok    { color: #10b981; }
.u-pista-aviso { color: #f59e0b; }

/* ── Aviso de tres tonos ───────────────────────────────────────
   Rojo cuando algo está mal, ámbar cuando conviene mirarlo y
   verde cuando todo va bien. Es el mismo trío en varios módulos.
   Va sin !important: se usa en textos sueltos que no traen color
   de ninguna otra clase. */
.u-aviso-mal  { color: #dc2626; }
.u-aviso-ojo  { color: #d97706; }
.u-aviso-bien { color: #059669; }

/* Fila señalada con las flechas del teclado en una lista de
   sugerencias. */
.u-fila-marcada { background: #f0f4ff; }

/* ── Botón de fila que confirma o rechaza ──────────────────────
   Verde al aceptar, rojo al rechazar. El mismo par en Comunicados
   e Informes, para asistencia de reuniones. */
.u-btn-si { background: #16a34a; }
.u-btn-no { background: #dc2626; }

/* Sugerencia señalada con las flechas del teclado. Es la del
   autocompletar y la del selector con buscador, que hasta ahora
   usaban dos azules distintos sin motivo. */
.u-sugerencia-marcada { background: #eff6ff; }

/* Elemento atenuado porque otra cosa lo anula: un concepto
   excluido, una opción que ya no aplica. */
.u-atenuado      { opacity: 0.65; }
.u-atenuado-poco { opacity: 0.6; }
.u-atenuado-medio { opacity: 0.5; }
.u-arrastrando   { opacity: 0.4; }

/* ── Tablas: piezas que estaban repetidas en el marcado ──────
   Ver docs/COLORES_DE_TABLAS.md. Todas usan las variables del
   esquema con su valor de respaldo, porque el HTML que las traía
   se arma desde JavaScript y puede acabar en una impresión. */

.u-thead-linea {
    border-bottom: 2px solid var(--tabla-linea-encabezado, #94a3b8);
}

/* Encabezado de columna numérica: la cifra se lee alineada a la derecha. */
.u-th-num {
    padding: 6px 10px;
    color: var(--tabla-encabezado-texto, #1f2937);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

/* Encabezados menudos, para las tablas que llevan muchas columnas. */
.u-th-xs,
.u-th-xs-centro,
.u-th-xs-der {
    padding: 3px 6px;
    color: var(--tabla-encabezado-texto, #1f2937);
    font-size: 10px;
    font-weight: 700;
}

.u-th-xs        { text-align: left; }
.u-th-xs-centro { text-align: center; }
.u-th-xs-der    { text-align: right; }

.u-th-sm-centro {
    padding: 8px;
    color: var(--tabla-encabezado-texto, #1f2937);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* Celda con divisoria de columna a la derecha. */
.u-td-columna {
    padding: 5px 6px;
    border-right: 1px solid var(--tabla-linea-columna, #f1f5f9);
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

/* ── Otras piezas repetidas ──────────────────────────────────── */

/* La marca del radio y de la casilla, en rojo: se usa donde elegir
   significa anular o descartar algo. */
.u-marca-roja {
    accent-color: #dc2626;
}

/* Botón metido dentro de un campo, pegado a su borde derecho:
   limpiar lo escrito, abrir el calendario, y similares. */
.u-campo-boton {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 13px;
}

/* Panel blanco con sombra amplia, el envoltorio de sección que usan
   Facturación, Mantenimiento y Programación de Facturación. */
.u-panel-blanco {
    background: white;
    padding: 18px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 14px;
}

/* La misma caja con la sombra más corta y sin separación abajo. */
.u-panel-blanco--suave {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}

/* ── Estados que el JavaScript ponía escribiendo el color ─────
   Cada uno tenía el valor repetido en el módulo. Con nombre, el
   módulo dice QUÉ pasa y la hoja decide cómo se ve. */

.u-campo-valido   { border-color: #059669; }
.u-campo-invalido { border-color: #ef4444; }

/* El campo que no se puede escribir porque su valor lo calcula otro. */
.u-campo-bloqueado { background: #f3f4f6; }

.u-texto-verde { color: #059669; }
.u-texto-gris  { color: #6b7280; }
.u-texto-ambar { color: #f59e0b; }

/* El botón que acaba de guardar, mientras dura el aviso. */
.u-btn-guardado { background: #16a34a; }

/* ── Piezas que el JavaScript montaba con cssText ─────────────
   cssText reemplaza el estilo ENTERO del elemento, así que borra
   de paso cualquier cosa que hubiera antes. Con una clase eso no
   pasa, y además se puede ajustar por tamaño de pantalla. */

/* El aviso flotante de la esquina. El color lo pone el módulo con
   una variable, porque depende de si informa, avisa o da error. */
.u-aviso-flotante {
    display: flex;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    align-items: center;
    gap: 10px;
    max-width: 400px;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--u-aviso-fondo, #0a2463);
    color: white;
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* La banda fija al pie de la ventana. */
.u-banda-inferior {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

/* Se coloca fuera de la vista para medirlo o capturarlo sin que
   llegue a verse. No es ocultarlo: tiene que seguir midiendo. */
.u-fuera-de-pantalla {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* Miniatura cuadrada de un adjunto, y el contador que va debajo. */
.u-miniatura {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

.u-contador-menudo {
    margin-top: 4px;
    color: #6b7280;
    font-size: 10px;
}

.u-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.u-fila-6 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* El superpuesto que monta el JavaScript va por encima del cromo
   de la cabecera, así que sube de plano respecto a .u-overlay. */
.u-overlay--alto    { z-index: 10000; }
.u-overlay--aparece { animation: fadeIn 0.3s ease; }

/* La misma, pero anclada arriba: el recibo que se captura con
   html2canvas se mide desde su borde superior. */
.u-fuera-de-pantalla--arriba { top: 0; }

/* Cuántas capas tiene que salvar el superpuesto. Lo oscuro que deja
   el fondo y el desenfoque ya los dicen --suave, --medio, --fuerte,
   --oscuro y --difuminado, más arriba. */
.u-overlay--altisimo  { z-index: 10001; }
.u-overlay--camara    { z-index: 10050; }