/* =====================================================================
   CONFORT · sistema interno. Colores y medidas del sistema de escritorio (Estilo.cs, Pantalla.cs, Botones.cs), que a
   su vez son los del sistema original. Las pantallas del administrador se dibujan en un "escenario" de 980×580 px con
   las mismas coordenadas (más 22 px de barra de estado abajo) y se escalan a la ventana; el portal de copropietarios e
   inquilinos es para el celular.
   ===================================================================== */
:root {
    --boton-menu: rgb(162, 218, 249);
    --boton-accion: rgb(175, 221, 245);
    --boton-opcion: rgb(125, 190, 255);
    --texto-opcion: rgb(0, 0, 160);
    --etiqueta: rgb(0, 0, 160);
    --etiqueta-verde: rgb(0, 128, 128);
    --etiqueta-gris: rgb(83, 102, 138);
    --etiqueta-azul-oscuro: rgb(0, 0, 128);
    --panel-claro: rgb(177, 209, 226);
    --panel-cobro1: rgb(221, 238, 255);
    --panel-cobro2: rgb(221, 231, 240);
    --panel-deptos: rgb(188, 222, 222);
    --panel-aviso: rgb(215, 228, 236);
    --titulo: rgb(20, 54, 110);
    --campo-ingreso: rgb(0, 64, 128);
    --texto-ingreso: rgb(239, 245, 253);
    --etiqueta-ingreso: rgb(4, 76, 138);
    --guardar: rgb(0, 0, 160);
    --otro: rgb(0, 128, 128);
    --borrar: rgb(255, 0, 0);
    --imprimir: rgb(128, 128, 0);
    --salir: rgb(128, 0, 64);
    --procesar: rgb(255, 128, 64);
    --exportar: rgb(0, 110, 50);
    --gris-deshabilitado: rgb(109, 109, 109);
    --fuente: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--fuente);
    font-size: 10.7px;  /* Arial 8 pt, la letra base del sistema */
    background: linear-gradient(110deg, rgb(18, 70, 150), rgb(96, 170, 225));
    color: #000;
    overflow: hidden;
}

/* ------------------------------------------------------------------ carga y errores */
.cargando { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.cargando-logo { font: bold 34px var(--fuente); letter-spacing: 6px; }
.cargando-texto { margin-top: 10px; font-size: 14px; opacity: .85; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: #ffe9a8; font-size: 14px; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ------------------------------------------------------------------ escenario (pantallas del administrador) */
.marco { position: fixed; inset: 0; overflow: hidden; }
.escenario {
    position: absolute; left: 50%; top: 50%; width: 980px; height: 602px; margin: -301px 0 0 -490px;
    transform: scale(var(--escala, 1)); box-shadow: 0 6px 30px rgba(0, 20, 50, .45);
}
.pantalla { position: absolute; left: 0; top: 0; width: 980px; height: 580px; overflow: hidden; background: linear-gradient(125deg, rgb(28, 78, 150), rgb(70, 140, 205)); }
.pantalla > .arcos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pantalla .franja { position: absolute; left: 12px; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(12, 40, 90, .35), rgba(12, 40, 90, .16)); }
.pantalla .barra { position: absolute; left: 0; right: 0; height: 68px; background: linear-gradient(180deg, rgba(10, 40, 85, .47), rgba(10, 40, 85, .27)); }
.pantalla .titulo {
    position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font: bold 21px var(--fuente);
    background: linear-gradient(180deg, rgb(30, 60, 120), rgb(14, 36, 82)); border: 1.5px solid rgb(160, 200, 230); border-radius: 6px;
}
.abs { position: absolute; }
.panel { position: absolute; border: 1px solid rgba(255, 255, 255, .6); }
.panel.marco-blanco { border: 1px solid #fff; background: transparent; }
.linea { position: absolute; background: rgb(60, 60, 60); }
.estado {
    position: absolute; left: 0; right: 0; top: 580px; height: 22px; display: flex; align-items: center; gap: 18px; padding: 0 12px;
    background: rgba(8, 30, 66, .82); color: #dfefff; font-size: 11px;
}
.estado b { color: #fff; }
.estado .derecha { margin-left: auto; font-style: italic; }

/* ------------------------------------------------------------------ etiquetas y campos */
.etq { position: absolute; color: var(--etiqueta); white-space: nowrap; line-height: 1.15; }
.etq.negrita { font-weight: bold; font-size: 12px; }
.etq.verde { color: var(--etiqueta-verde); }
.etq.gris { color: var(--etiqueta-gris); }
.etq.blanca { color: #fff; }
.etq.centro { text-align: center; }
.etq.derecha { text-align: right; }
.campo {
    position: absolute; height: 21px; padding: 1px 4px; border: 1px solid rgb(122, 122, 122); background: #fff; color: #000;
    font: 12px var(--fuente); outline: none;
}
.campo:focus { border-color: rgb(0, 120, 215); box-shadow: 0 0 0 1px rgb(0, 120, 215) inset; }
.campo[readonly], .campo:disabled { background: rgb(240, 240, 240); color: rgb(60, 60, 60); }
.campo.numero { text-align: right; }
.campo.mayusculas { text-transform: uppercase; }
.campo.solo { background: #fff; color: rgb(40, 40, 40); }
.etq.opcion-radio { display: flex; align-items: center; gap: 4px; color: #000; font-size: 12px; cursor: pointer; }
.campo.negrita { font-weight: bold; }
select.campo { padding: 0 2px; }

/* ------------------------------------------------------------------ botones del sistema */
.boton-pantalla {
    position: absolute; width: 70px; height: 62px; padding: 0; cursor: pointer; background: var(--boton-accion);
    border: 1px solid rgb(120, 160, 200); font: 10.7px var(--fuente); color: #000; display: flex; flex-direction: column; align-items: center;
}
.boton-pantalla.menu { background: var(--boton-menu); font-size: 12px; }
.boton-pantalla:hover:not(:disabled) { filter: brightness(1.08); }
.boton-pantalla:active:not(:disabled) { filter: brightness(.95); }
.boton-pantalla .circulo {
    margin-top: 5px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #fff, var(--claro, #dbe9ff));
}
.boton-pantalla .circulo svg { width: 20px; height: 20px; }
.boton-pantalla .rotulo { margin-top: auto; margin-bottom: 4px; white-space: nowrap; }
.boton-pantalla:disabled { cursor: default; }
.boton-pantalla:disabled .rotulo, .boton-pantalla:disabled svg { color: var(--gris-deshabilitado) !important; opacity: .7; }
.boton-pantalla .insignia {
    position: absolute; top: 2px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: rgb(200, 30, 30);
    color: #fff; font: bold 11px var(--fuente); line-height: 18px;
}

.boton-opcion {
    position: absolute; height: 34px; padding: 0 6px; cursor: pointer; background: var(--boton-opcion); color: var(--texto-opcion); border: 1px solid #fff;
    font: bold 16px var(--fuente); overflow: hidden;   /* el texto se ajusta solo para entrar (confort.js) */
}
.boton-opcion:hover:not(:disabled) { background: rgb(170, 214, 255); }
.boton-opcion:disabled { color: var(--gris-deshabilitado); cursor: default; }

/* ------------------------------------------------------------------ recuadro con edificios (banner) */
.banner { position: absolute; border-radius: 16px; overflow: hidden; border: 3px solid #fff; background: linear-gradient(180deg, rgb(120, 190, 240), rgb(235, 246, 255)); }
.banner svg.ciudad { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner .banner-titulo {
    position: absolute; left: 20px; right: 20px; top: 24px; height: 40px; display: flex; align-items: center; justify-content: center;
    font: bold 26.7px var(--fuente); color: rgb(0, 40, 100); text-shadow: 2px 2px 0 rgba(255, 255, 255, .63); white-space: nowrap; overflow: hidden;
}
.banner .banner-subtitulo { position: absolute; left: 20px; right: 20px; top: 66px; text-align: center; font: bold 18.7px var(--fuente); color: rgb(0, 64, 128); }
.banner .pestana {
    position: absolute; left: 50%; top: 10px; height: 40px; transform: translateX(-50%); padding: 0 30px; display: flex; align-items: center;
    background: linear-gradient(180deg, rgb(120, 190, 235), rgb(30, 90, 160)); border: 2px solid #fff; border-radius: 8px;
    font: bold 26.7px "Times New Roman", Times, serif; color: rgb(10, 30, 80); white-space: nowrap;
}

/* ------------------------------------------------------------------ ingreso */
.pantalla.ingreso { background: linear-gradient(180deg, rgb(150, 210, 202), rgb(205, 236, 232)); }
.ingreso .tarjeta {
    position: absolute; left: 305px; top: 118px; width: 390px; height: 372px; border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(232, 244, 250, .92)); border: 1.5px solid rgba(34, 108, 191, .47);
    box-shadow: 4px 5px 0 rgba(0, 50, 60, .2);
}
.ingreso .pildora {
    position: absolute; left: 345px; top: 132px; width: 310px; height: 72px; border-radius: 36px; display: flex; align-items: center; gap: 10px;
    padding-left: 18px; background: linear-gradient(180deg, rgb(34, 108, 191), rgb(0, 50, 110)); color: #fff;
}
.ingreso .pildora svg { width: 44px; height: 44px; color: #fff; }
.ingreso .pildora .chico { font: bold 13px var(--fuente); color: rgb(200, 228, 255); letter-spacing: .5px; }
.ingreso .pildora .grande { font: bold 27px var(--fuente); letter-spacing: 2px; line-height: 1; }
.ingreso .fila { position: absolute; left: 318px; width: 364px; border-radius: 14px; background: rgba(150, 210, 202, .27); }
.ingreso .icono-fila { position: absolute; color: var(--etiqueta-ingreso); }
.ingreso .icono-fila svg { width: 100%; height: 100%; }
.ingreso .campo { background: var(--campo-ingreso); color: var(--texto-ingreso); font: bold 13.3px var(--fuente); height: 23px; border-color: rgb(0, 40, 90); }
.ingreso .campo:focus { box-shadow: 0 0 0 2px rgb(120, 190, 240); }
.ingreso .version { position: absolute; left: 418px; top: 214px; color: rgb(34, 108, 191); font: bold 18.7px var(--fuente); }
.ingreso .pie { position: absolute; right: 10px; bottom: 12px; color: var(--etiqueta-ingreso); font: italic bold 12px var(--fuente); }
.boton-ingreso {
    position: absolute; width: 101px; height: 43px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 8px; cursor: pointer;
    background: rgb(76, 180, 168); color: var(--etiqueta-ingreso); border: 1px solid rgb(40, 120, 115); font: bold 12px var(--fuente);
}
.boton-ingreso:hover:not(:disabled) { background: rgb(110, 200, 190); }
.boton-ingreso svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ cuadros de edificios */
.cuadro-edificio {
    position: absolute; width: 270px; height: 350px; border-radius: 16px; overflow: hidden; cursor: pointer; padding: 0; text-align: left;
    background: linear-gradient(180deg, #fff, rgb(221, 238, 255)); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 20, 50, .35);
    font-family: var(--fuente); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}
.cuadro-edificio:hover { outline: 3px solid rgb(255, 214, 90); }
.cuadro-edificio .vista { position: relative; flex: none; height: 96px; background: linear-gradient(180deg, rgb(120, 190, 240), rgb(235, 246, 255)); }
.cuadro-edificio .vista svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cuadro-edificio .nombre { margin: 10px 16px 4px; font: bold 16px var(--fuente); color: var(--titulo); line-height: 1.2; min-height: 38px;
                          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cuadro-edificio .codigo { margin: 0 16px; color: var(--etiqueta-gris); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuadro-edificio .dato { margin: 6px 16px 0; color: var(--etiqueta); font: bold 13px var(--fuente); }
/* cifras del edificio en el cuadro (computadora) y en la tarjeta (celular) */
.cifras-edificio { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font: 12px var(--fuente); color: var(--etiqueta-gris); }
.cuadro-edificio .cifras-edificio { margin: 6px 16px 0; }
.cifras-edificio span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cifras-edificio .ancha { grid-column: 1 / -1; }
.cifras-edificio b { color: var(--titulo); }
.cifras-edificio .al-dia b { color: rgb(0, 110, 50); }
.cifras-edificio .debe b { color: rgb(170, 0, 0); }
.cifras-edificio .aviso b { color: rgb(200, 110, 0); }
.mm-edificio-tarjeta .cifras-edificio { margin-top: 6px; font-size: 13px; }
.cuadro-edificio .entrar {
    position: absolute; left: 16px; right: 16px; bottom: 14px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: var(--boton-opcion); color: var(--texto-opcion); font: bold 14px var(--fuente); border: 1px solid #fff;
}

/* ------------------------------------------------------------------ procesando (reloj de arena) */
.procesando { position: fixed; inset: 0; z-index: 450; cursor: wait; display: flex; align-items: center; justify-content: center; }
.procesando .aviso { padding: 12px 22px; background: rgba(0, 40, 90, .88); color: #fff; font: bold 14px var(--fuente); border: 2px solid #fff;
                     opacity: 0; animation: aparecer 0s linear .4s forwards; }
@keyframes aparecer { to { opacity: 1; } }

/* ------------------------------------------------------------------ mensajes (MessageBox) */
.velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; z-index: 500; }
.mensaje {
    min-width: 320px; max-width: min(520px, 92vw); background: #fff; border: 1px solid rgb(100, 100, 100); box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    font: 13px "Segoe UI", var(--fuente);
}
.mensaje .cabecera { padding: 8px 12px; background: rgb(0, 64, 128); color: #fff; font-weight: bold; }
.mensaje .cuerpo { padding: 18px 16px; display: flex; gap: 14px; align-items: flex-start; white-space: pre-line; }
.mensaje .cuerpo svg { flex: none; width: 32px; height: 32px; }
.mensaje .cuerpo .texto { flex: 1; }
.mensaje .entrada { display: block; width: 100%; margin-top: 10px; height: 26px; padding: 2px 6px; border: 1px solid rgb(122, 122, 122);
                    font: 13px "Segoe UI", var(--fuente); }
.mensaje .acciones { padding: 10px 12px; background: rgb(240, 240, 240); display: flex; justify-content: flex-end; gap: 8px; }
.mensaje .acciones button { min-width: 86px; height: 26px; font: 13px "Segoe UI", var(--fuente); cursor: pointer; }

/* ------------------------------------------------------------------ paneles y grillas de las pantallas */
.panel.relleno { border-color: rgba(255, 255, 255, .59); }
select.campo.mes { font-size: 12px; }
.grilla { position: absolute; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid rgb(122, 122, 122); outline: none; }
.grilla table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 11px var(--fuente); }
.grilla td { height: 17px; padding: 0 3px; border-right: 1px solid rgb(220, 220, 220); border-bottom: 1px solid rgb(220, 220, 220);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.grilla td.derecha { text-align: right; }
.grilla tr:hover td { background: rgb(229, 243, 255); }
.grilla tr.elegida td { background: rgb(0, 120, 215); color: #fff; }
.grilla.con-titulos th { position: sticky; top: 0; z-index: 1; height: 20px; padding: 0 3px; text-align: left; white-space: nowrap;
                        background: var(--panel-deptos); color: var(--etiqueta-azul-oscuro); font: bold 11px var(--fuente);
                        border-right: 1px solid rgb(200, 210, 210); border-bottom: 1px solid rgb(150, 170, 170); }
.grilla.con-titulos th.derecha { text-align: right; }
.grilla.con-titulos input[type=checkbox] { margin: 0; vertical-align: middle; cursor: pointer; }
.grilla tr.nuevo-grupo td { border-top: 2px solid rgb(150, 170, 170); }
.grilla tr.apagada td { color: rgb(110, 110, 110); }
.grilla tr.elegida.apagada td { color: #fff; }
.grilla .rojo { color: rgb(190, 0, 0); font-weight: bold; }
.grilla tr.elegida .rojo { color: #fff; }
.boton-buscar { position: absolute; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
                background: var(--boton-opcion); color: var(--texto-opcion); border: 1px solid #fff; font: bold 12px var(--fuente); }
.boton-buscar svg { width: 14px; height: 14px; }
.grilla .vacia { padding: 12px; color: var(--etiqueta-gris); text-align: center; font-size: 12px; }

/* ------------------------------------------------------------------ cuadro de exportar a Excel */
.cuadro { position: absolute; background: var(--panel-aviso); border: 2px solid #fff; box-shadow: 0 8px 30px rgba(0, 20, 50, .45); z-index: 50; }
.cuadro .cabecera { height: 30px; display: flex; align-items: center; padding: 0 12px; background: linear-gradient(180deg, rgb(30, 60, 120), rgb(14, 36, 82));
                    color: #fff; font: bold 14px var(--fuente); }
.cuadro fieldset { position: absolute; margin: 0; padding: 6px 10px; border: 1px solid rgb(150, 170, 190); }
.cuadro legend { padding: 0 4px; color: var(--etiqueta-azul-oscuro); font: bold 12px var(--fuente); }
.cuadro label.opcion { display: flex; align-items: center; gap: 6px; height: 21px; color: #000; font: 12px var(--fuente); white-space: nowrap; cursor: pointer; }
.cuadro .nota { position: absolute; color: var(--etiqueta-azul-oscuro); font: bold 12px var(--fuente); }
.cuadro .cabecera svg { width: 18px; height: 18px; margin-right: 8px; }
.cuadro .filas { display: grid; grid-template-columns: 110px 1fr; gap: 5px 8px; align-items: center; margin-top: 2px; }
.cuadro .filas > label:not(.opcion) { color: var(--etiqueta); font: bold 12px var(--fuente); text-align: right; }
.cuadro .columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 10px; }
.campo.libre { position: static; width: 100%; }
.campo.libre.corto { width: 64px; }
.cuadro .en-linea { display: flex; align-items: center; gap: 6px; font: 12px var(--fuente); }
.contenido { display: contents; }
.cuadro .enlace { background: none; border: none; padding: 0; color: rgb(0, 90, 170); font: 11px var(--fuente); text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------------------------ informes y recibos impresos */
.informe, .recibo-impreso, .notas-impresas, .cartas-impresas { display: none; }
@media print {
    @page { margin: 12mm; }
    html, body { height: auto; overflow: visible; background: #fff; }
    .marco, .velo, #blazor-error-ui, .cargando, .portal { display: none !important; }
    .informe { display: block; color: #000; font: 8pt Arial, Helvetica, sans-serif; }
    .informe-titulo { font: bold 13pt Arial, Helvetica, sans-serif; line-height: 1.149; margin-bottom: 0.02in; }
    .informe-subtitulo { font-size: 9pt; line-height: 1.149; }
    .informe table { width: 100%; margin-top: 0.06in; border-collapse: collapse; table-layout: fixed; }
    /* En el papel nada se corta con "…": lo largo sigue en otro renglón y la fila crece (pedido de CONFORT). */
    .informe th, .informe td { height: 0.157in; padding: 0 0.02in; white-space: normal; overflow-wrap: anywhere; vertical-align: top; line-height: 1.149; }
    .informe th { background: #dcdcdc; font-weight: bold; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .informe .derecha { text-align: right; }
    .informe tfoot td { font-weight: bold; border-top: 1px solid #000; padding-top: 0.03in; }
    .informe tr { break-inside: avoid; }
    .informe-vacio { margin-top: 0.04in; color: #696969; }
    .informe-pie { margin-top: 0.12in; font-size: 9pt; color: #696969; }

    /* Recibo: el del sistema de escritorio (recuadro de 7,5" × 4,7" arriba de la hoja carta, posiciones en pulgadas). */
    /* Recibo: el COMPROBANTE DE INGRESO del sistema anterior (DisenoRecibo: piezas en píxeles de 96 ppp, letra Tahoma). */
    .recibo-impreso { display: block; position: relative; width: 816px; height: 520px; color: #000; font-family: Tahoma, Verdana, sans-serif; }
    .recibo-impreso .rp-texto { position: absolute; white-space: nowrap; line-height: 1; }
    .recibo-impreso .rp-raya { position: absolute; height: 0; border-top: 1px solid #000; }
    .recibo-impreso .rp-caja { position: absolute; border: 1px solid #000; box-sizing: border-box; }
    .recibo-impreso .rp-img { position: absolute; object-fit: fill; }
    .recibo-impreso .rp-sello { position: absolute; width: 0; height: 0; overflow: visible; }
    .recibo-impreso .rp-sello span { position: absolute; transform: translate(-50%, -50%) rotate(var(--grados)); white-space: nowrap; font-weight: bold; line-height: 1; }
    /* Notas de cobro: dos por hoja carta, con el recuadro y las letras del recibo. */
    .notas-impresas { display: block; color: #000; font: 9pt Arial, Helvetica, sans-serif; }
    .nota-cobro { position: relative; width: 7.5in; height: 4.7in; padding: 0.12in 0.14in; border: 0.012in solid #000; box-sizing: border-box;
            margin-bottom: 0.4in; overflow: hidden; break-inside: avoid; }
    .nota-cobro:nth-child(2n) { break-after: page; margin-bottom: 0; }
    .nota-cobro .cabecera { display: flex; justify-content: space-between; font: bold 14pt Arial, sans-serif; line-height: 1.149; }
    .nota-cobro .cabecera.segunda { font: 9pt Arial, sans-serif; margin-bottom: 0.08in; }
    .nota-cobro .logo { position: absolute; left: 0.14in; top: 0.12in; width: 1.41in; height: 0.42in; }
    .nota-cobro .cabecera.con-logo { margin-left: 1.41in; padding-left: 0.14in; }
    .nota-cobro .cabecera.segunda.con-logo { margin-bottom: 0.14in; }
    .nota-cobro .cabecera .fecha { font: bold 10pt Arial, sans-serif; }
    .nota-cobro p { margin: 0.05in 0; line-height: 1.25; }
    .nota-cobro table { border-collapse: collapse; }
    .nota-cobro table.datos th { width: 1.2in; text-align: left; padding: 0.01in 0; }
    .nota-cobro table.detalle { margin: 0.06in 0; }
    .nota-cobro table.detalle th { text-align: left; padding: 0 0.2in 0 0; white-space: nowrap; }
    .nota-cobro table.detalle td { padding: 0 0.2in 0 0; }
    .nota-cobro table.detalle td:first-child { width: 2.55in; }
    .nota-cobro .cant { text-align: center; width: 0.6in; }
    .nota-cobro .importe { text-align: right; width: 0.9in; }
    .nota-cobro tfoot td { font-weight: bold; border-top: 0.01in solid #000; }
    .nota-cobro .firma { position: absolute; right: 0.6in; bottom: 0.3in; width: 2.4in; padding-top: 0.03in; border-top: 0.01in solid #000; text-align: center; }
    .nota-cobro .pie { position: absolute; left: 0.06in; bottom: 0.06in; font-size: 7pt; color: #696969; }
    /* Cartas de mora: una hoja carta por depto. */
    /* Cartas de mora: el modelo de Word de ARCADIA (Calibri 11; "Normal" = 1,08 y 8 pt después; "Sin espaciado" = sencillo). */
    .cartas-impresas { display: block; color: #000; font: 11pt Calibri, Carlito, "Segoe UI", Arial, sans-serif; }
    .carta-mora { position: relative; break-after: page; }
    .carta-mora:last-child { break-after: auto; }
    .carta-mora p { margin: 0 0 8pt; line-height: 14.49pt; }
    .carta-mora p.sin-espacio { margin: 0; line-height: 13.43pt; }
    .carta-mora .logo { position: absolute; left: -0.369in; top: 0; width: 1.5in; height: 0.583in; }
}

/* ------------------------------------------------------------------ portal de residentes (celular) */
.portal { position: fixed; inset: 0; overflow-y: auto; background: #f3f7fc; color: #1b2a3a; font-family: var(--fuente); }
.portal header { position: sticky; top: 0; display: flex; align-items: center; padding: 12px 16px; background: var(--titulo); color: #fff; }
.portal header .marca { font: bold 20px var(--fuente); letter-spacing: 3px; }
.portal header .salir { margin-left: auto; padding: 8px 16px; background: var(--boton-menu); color: var(--titulo); border: 2px solid #fff;
                        font: bold 14px var(--fuente); cursor: pointer; }
.portal main { max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; }
.portal h1 { margin: 0 0 4px; font-size: 24px; color: var(--titulo); }
.portal .rol { margin: 0 0 20px; color: var(--etiqueta-gris); font-size: 15px; }
.tarjeta-portal { padding: 18px 16px; background: #fff; border: 1px solid #d5e3f2; border-radius: 10px; font-size: 15px; line-height: 1.5; }
.tarjeta-portal h2 { margin: 0 0 8px; font-size: 18px; color: var(--titulo); }
.tarjeta-portal a { color: var(--azul-medio, rgb(34, 108, 191)); }
.qr-vista { position: absolute; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgb(122, 122, 122);
            color: var(--etiqueta-gris); font-size: 13px; }
.qr-vista img { max-width: 100%; max-height: 100%; }
.campo.libre-archivo { padding: 2px; font-size: 12px; }
.tarjeta-portal { margin-bottom: 14px; }
.tarjeta-portal .dato-portal { margin: 4px 0; }
.estado-deuda { margin: 8px 0; padding: 8px 10px; border-radius: 6px; font-weight: bold; }
.estado-deuda.debe { background: #fdecec; color: rgb(170, 0, 0); }
.estado-deuda.al-dia { background: #e8f6ec; color: rgb(0, 110, 50); }
.acciones-portal { display: flex; gap: 10px; margin-top: 10px; }
.acciones-portal button { flex: 1; min-height: 42px; border: 1px solid #b8c9dc; background: #fff; color: var(--titulo); font: bold 15px var(--fuente);
                          border-radius: 6px; cursor: pointer; }
.acciones-portal button.principal { background: var(--titulo); color: #fff; border-color: var(--titulo); }
.acciones-portal button:disabled { opacity: .5; cursor: default; }
.lista-portal { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.lista-portal li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 0; border-top: 1px solid #e3ebf4; }
.lista-portal li.anulado { color: #999; }
.tarjeta-portal label { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-weight: bold; font-size: 14px; }
.tarjeta-portal label input { min-height: 40px; padding: 6px 8px; border: 1px solid #b8c9dc; border-radius: 6px; font: 15px var(--fuente); }
.qr-portal { display: block; width: 100%; max-width: 280px; margin: 8px auto; border: 1px solid #d5e3f2; }
.chip { padding: 2px 8px; border-radius: 10px; font-size: 13px; font-weight: bold; }
.chip.pendiente { background: #fff4d6; color: #8a6400; }
.chip.registrado { background: #e8f6ec; color: rgb(0, 110, 50); }
.chip.rechazado { background: #fdecec; color: rgb(170, 0, 0); }
.portal .contacto { margin-top: 20px; font-size: 14px; color: var(--etiqueta-gris); text-align: center; }
/* portal de la directiva: pestañas, cifras del resumen, filtros y listas */
.portal main.ancho { max-width: 900px; }
.pestanas-portal { display: flex; gap: 6px; margin-bottom: 14px; }
.pestanas-portal button { flex: 1; min-height: 42px; border: 1px solid #b8c9dc; border-radius: 6px; background: #fff; color: var(--titulo);
                          font: bold 15px var(--fuente); cursor: pointer; }
.pestanas-portal button.activa { background: var(--titulo); color: #fff; border-color: var(--titulo); }
.cifras-portal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cifras-portal div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #f3f7fc; border-radius: 8px; }
.cifras-portal div.ancha { grid-column: span 2; }
.cifras-portal span { font-size: 13px; color: var(--etiqueta-gris); }
.cifras-portal b { font-size: 22px; color: var(--titulo); }
.cifras-portal .al-dia b { color: rgb(0, 110, 50); }
.cifras-portal .debe b { color: rgb(170, 0, 0); }
.nota-portal { margin: 10px 0 0; font-size: 13px; color: var(--etiqueta-gris); }
.campos-portal { display: flex; flex-wrap: wrap; gap: 0 12px; }
.campos-portal label { flex: 1 1 140px; }
.tarjeta-portal label select { min-height: 40px; padding: 6px 8px; border: 1px solid #b8c9dc; border-radius: 6px; font: 15px var(--fuente); background: #fff; }
.lista-portal li.total { font-weight: bold; border-top: 2px solid #b8c9dc; }
.lista-portal.copropietarios li { flex-direction: column; align-items: flex-start; }
.lista-portal.copropietarios .detalle { color: var(--etiqueta-gris); font-size: 13px; }
@media (max-width: 420px) { .cifras-portal div.ancha { grid-column: auto; } }
/* comprobantes de pago (revisión del administrador) */
.comprobante-vista img { object-fit: contain; width: 100%; height: 100%; }
.comprobante-vista span { padding: 0 16px; text-align: center; }
.comprobante-datos { overflow: hidden; font-size: 11px; line-height: 1.45; white-space: normal; }
/* recibo en PDF desde "Ver pagos" del portal */
.enlace-pdf { padding: 2px 10px; border: 1px solid #d6a5a5; border-radius: 12px; background: #fff; color: rgb(170, 0, 0); font: bold 12px var(--fuente); cursor: pointer; }
/* ------------------------------------------------------------------ Cobro fácil (pensado para el celular) */
.cobro-facil header .cf-edificio { margin-left: 12px; font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-buscar { width: 100%; min-height: 48px; padding: 8px 12px; border: 2px solid #b8c9dc; border-radius: 10px; font: 17px var(--fuente); box-sizing: border-box; }
.cf-buscar:focus { outline: none; border-color: var(--titulo); }
.cf-filtros { display: flex; gap: 8px; margin: 10px 0 4px; }
.cf-filtros button { padding: 6px 14px; border: 1px solid #b8c9dc; border-radius: 16px; background: #fff; color: var(--titulo); font: 14px var(--fuente); cursor: pointer; }
.cf-filtros button.activa { background: var(--titulo); color: #fff; border-color: var(--titulo); }
.cf-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.cf-lista li + li { border-top: 1px solid #e3ebf4; }
.cf-lista button { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 4px;
                   border: 0; background: none; text-align: left; font: 15px var(--fuente); color: #1b2a3a; cursor: pointer; }
.cf-lista button:active, .cf-lista button:hover { background: #eef4fb; }
.cf-codigo { font-weight: bold; color: var(--titulo); }
.cf-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.cf-cabecera { display: flex; justify-content: space-between; align-items: center; }
.cf-cabecera h2 { margin: 0; }
.enlace { border: 0; background: none; color: rgb(34, 108, 191); font: bold 14px var(--fuente); cursor: pointer; padding: 6px; }
.cf-meses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cf-mes { min-height: 44px; border: 1px solid #b8c9dc; border-radius: 8px; background: #fff; font: 14px var(--fuente); color: #1b2a3a; cursor: pointer; }
.cf-mes.adeudado { border-color: rgb(200, 60, 60); color: rgb(170, 0, 0); font-weight: bold; }
.cf-mes.elegido { background: var(--titulo); border-color: var(--titulo); color: #fff; }
.cf-mes.elegido.adeudado { background: rgb(170, 0, 0); border-color: rgb(170, 0, 0); }
.cf-formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.cf-formas button { min-height: 44px; border: 1px solid #b8c9dc; border-radius: 8px; background: #fff; color: var(--titulo); font: bold 15px var(--fuente); cursor: pointer; }
.cf-formas button.activa { background: var(--titulo); color: #fff; border-color: var(--titulo); }
.cf-mas summary { cursor: pointer; color: var(--etiqueta-gris); font-size: 14px; margin-top: 8px; }
.cf-pie { position: sticky; bottom: 0; padding: 10px 0 4px; background: linear-gradient(rgba(243, 247, 252, 0), #f3f7fc 35%); }
.cf-cobrar { width: 100%; min-height: 56px; border: 0; border-radius: 12px; background: rgb(0, 120, 60); color: #fff; font: bold 19px var(--fuente);
             cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
.cf-cobrar:disabled { opacity: .5; cursor: default; }
.cf-listo { text-align: center; }
.cf-check { width: 64px; height: 64px; margin: 4px auto 8px; border-radius: 50%; background: rgb(0, 120, 60); color: #fff; font: bold 36px/64px var(--fuente); }
.cf-total { font: bold 30px var(--fuente); color: var(--titulo); margin: 8px 0 14px; }
.cf-acciones { display: flex; flex-direction: column; gap: 8px; }
.cf-acciones button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 1px solid #b8c9dc; border-radius: 10px;
                      background: #fff; color: var(--titulo); font: bold 16px var(--fuente); cursor: pointer; }
.cf-acciones button.principal { background: rgb(0, 120, 60); border-color: rgb(0, 120, 60); color: #fff; }
.cf-acciones button:disabled { opacity: .5; cursor: default; }
.cf-acciones button svg { width: 20px; height: 20px; }
/* ------------------------------------------------------------------ celular: ingreso, cuadros y menú (bloques .movil) */
.movil { display: none; }
@media (max-width: 700px) {
    .movil { display: block; position: fixed; inset: 0; z-index: 100; overflow-y: auto; }
    .ingreso-movil { display: flex; flex-direction: column; align-items: center; justify-content: center; }
}
.ingreso-movil { padding: 28px 16px; box-sizing: border-box; background: linear-gradient(160deg, rgb(20, 54, 110), rgb(74, 144, 210)); }
.im-tarjeta { width: 100%; max-width: 380px; padding: 22px 18px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); box-sizing: border-box; }
.im-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 14px; border-radius: 12px; background: var(--titulo); color: #fff; }
.im-marca svg { width: 30px; height: 30px; flex: none; }
.im-marca.im-logo { justify-content: center; padding: 4px 8px; background: #fff; border: 1px solid #e3ebf4; }
.im-marca.im-logo img { display: block; width: 100%; max-width: 300px; height: auto; }
.im-marca small { display: block; font-size: 11px; letter-spacing: 1px; opacity: .85; }
.im-marca b { font-size: 22px; letter-spacing: 3px; }
.im-tarjeta label { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font: bold 14px var(--fuente); color: var(--titulo); }
.im-tarjeta input { width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid #b8c9dc; border-radius: 8px; font: 17px var(--fuente); box-sizing: border-box; }
.im-fila { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; }
.im-fila label { margin: 0; }
.im-nota { margin: 6px 0 14px; font-size: 12px; color: var(--etiqueta-gris); }
.im-aceptar { width: 100%; min-height: 52px; border: 0; border-radius: 10px; background: var(--titulo); color: #fff; font: bold 18px var(--fuente); cursor: pointer; }
.im-aceptar:disabled { opacity: .6; }
.im-salir { width: 100%; margin-top: 10px; padding: 10px; border: 0; background: none; color: rgb(34, 108, 191); font: 14px var(--fuente); cursor: pointer; }
.im-pie { margin-top: 16px; color: rgba(255, 255, 255, .8); font-size: 12px; text-align: center; }
.mm-edificio { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; font: bold 15px var(--fuente); color: var(--titulo); }
.mm-principal { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin-bottom: 14px; padding: 12px 16px; border: 0;
                border-radius: 14px; background: rgb(0, 120, 60); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 80, 40, .3); }
.mm-principal svg { width: 34px; height: 34px; flex: none; }
.mm-principal b { display: block; font-size: 20px; }
.mm-principal small { font-size: 13px; opacity: .9; }
.mm-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mm-opciones button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px;
                      padding: 8px 4px; border: 1px solid #d5e3f2; border-radius: 12px; background: #fff; color: var(--titulo); font: bold 13px var(--fuente); cursor: pointer; }
.mm-opciones button svg { width: 26px; height: 26px; }
.mm-opciones em { position: absolute; top: 6px; right: 8px; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: rgb(200, 30, 30); color: #fff;
                  font: bold 12px var(--fuente); font-style: normal; }
.mm-edificio-tarjeta { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; cursor: pointer; }
.mm-edificio-tarjeta b { font-size: 18px; color: var(--titulo); }
.mm-edificio-tarjeta small { color: var(--etiqueta-gris); }

/* ------------------------------------------------------------------ pantallas del administrador en el celular (MovilPantalla) */
/* En el celular se oculta la pantalla de la computadora (no toma el foco ni abre el teclado) donde hay versión de celular. */
@media (max-width: 700px) { body:has(.movil) .marco { display: none; } }
.mp header { gap: 10px; padding: 8px 12px; }
.mp-volver { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
             font: bold 28px/1 var(--fuente); cursor: pointer; }
.mp-titulo { display: flex; flex-direction: column; min-width: 0; }
.mp-titulo b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-titulo small { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp main { padding: 14px 12px 24px; }
.mp h2 { margin: 0 0 8px; font-size: 17px; color: var(--titulo); }
.mp-pie:not(:has(*)) { display: none; }
.mp-pie { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
          background: #fff; border-top: 1px solid #d5e3f2; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
.mp-pie button { flex: 1 1 30%; min-height: 46px; padding: 6px 8px; border: 1px solid #b8c9dc; border-radius: 10px; background: #fff; color: var(--titulo);
                 font: bold 15px var(--fuente); cursor: pointer; }
.mp-pie button.principal, .mp-boton.principal { background: var(--titulo); color: #fff; border-color: var(--titulo); }
.mp-pie button.verde, .mp-boton.verde { background: rgb(0, 120, 60); border-color: rgb(0, 120, 60); color: #fff; }
.mp-pie button.peligro, .mp-boton.peligro { color: rgb(170, 0, 0); border-color: #e3b5b5; }
.mp-pie button:disabled, .mp-boton:disabled { opacity: .5; cursor: default; }
.mp-boton { min-height: 44px; padding: 6px 14px; border: 1px solid #b8c9dc; border-radius: 10px; background: #fff; color: var(--titulo);
            font: bold 15px var(--fuente); cursor: pointer; }
.mp-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mp-botones .mp-boton { flex: 1 1 40%; }
/* opciones de los submenús: los botones de la computadora, uno debajo de otro */
.mp-opciones { display: flex; flex-direction: column; gap: 10px; }
/* Archivos usa botones con ícono: en el celular, ícono a la izquierda y el texto al lado */
.mp-opciones .boton-pantalla { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important;
                               min-height: 56px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 14px; border-radius: 12px; font-size: 16px; }
.mp-opciones .boton-pantalla .circulo { margin: 0; flex: none; }
.mp-opciones .boton-pantalla .rotulo { margin: 0; font-size: 16px; font-weight: bold; }
.movil .boton-opcion { position: static !important; width: 100% !important; height: auto !important; min-height: 54px; padding: 10px 14px;
                       border-radius: 12px; font-size: 16px; text-align: left; }
/* formularios */
.mp-form label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font: bold 13px var(--fuente); color: var(--titulo); }
.mp-form input, .mp-form select, .mp-form textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #b8c9dc; border-radius: 8px;
                                                     font: 16px var(--fuente); color: #1b2a3a; background: #fff; box-sizing: border-box; }
.mp-form textarea { min-height: 70px; resize: vertical; }
.mp-form .mayusculas { text-transform: uppercase; }
.mp-form input[readonly], .mp-form input:disabled, .mp-form select:disabled { background: #eef3f9; color: #3c4c5c; }
.mp-form .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mp-form .fila3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 8px; }
.mp-form label.mp-check { flex-direction: row; align-items: center; gap: 10px; font-weight: normal; font-size: 15px; color: #1b2a3a; }
.mp-form label.mp-check input { width: 22px; min-height: 22px; height: 22px; flex: none; }
.mp-seccion { margin: 16px 0 8px; font: bold 13px var(--fuente); letter-spacing: 1px; color: var(--etiqueta-gris); text-transform: uppercase; }
/* listas de filas tocables */
.mp-lista { list-style: none; margin: 0 0 12px; padding: 0; background: #fff; border: 1px solid #d5e3f2; border-radius: 10px; overflow: hidden; }
.mp-lista > li + li { border-top: 1px solid #e3ebf4; }
.mp-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; background: none;
           text-align: left; font: 15px var(--fuente); color: #1b2a3a; box-sizing: border-box; }
button.mp-fila { cursor: pointer; }
button.mp-fila:active, button.mp-fila:hover { background: #eef4fb; }
.mp-fila.elegida { background: #e3effc; }
.mp-fila .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-fila .cuerpo b { color: var(--titulo); }
.mp-fila .cuerpo small { color: var(--etiqueta-gris); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-fila .lado { flex: none; text-align: right; font-weight: bold; }
.mp-fila .lado.debe { color: rgb(170, 0, 0); }
.mp-fila input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.mp-vacio { padding: 18px 12px; color: var(--etiqueta-gris); text-align: center; }
/* informes en tarjetas (InformeMovil) */
.mp-informe h2 { margin-top: 6px; }
.mp-renglon { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 8px 0 0; padding: 10px 12px; background: #fff; border: 1px solid #d5e3f2;
              border-radius: 10px; font-size: 14px; }
.mp-renglon b { flex: 1 1 100%; color: var(--titulo); }
.mp-renglon em { font-style: normal; color: var(--etiqueta-gris); font-size: 12px; }
.mp-renglon.total { background: #e8f0fa; border-color: #b8c9dc; font-weight: bold; }
/* el cuadro de Excel dentro de la pantalla del celular */
.movil .cuadro.cuadro-movil { position: static; width: auto; height: auto; margin: 0 0 14px; padding-bottom: 10px; box-shadow: none; border-radius: 10px; }
.cuadro.cuadro-movil fieldset { position: static !important; width: auto !important; height: auto !important; margin: 8px 10px; }
.cuadro.cuadro-movil .columnas { max-height: none; }
.cuadro.cuadro-movil .nota { position: static !important; width: auto !important; height: auto !important; margin: 6px 12px; }
.cuadro.cuadro-movil .columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 14px; }
.cuadro.cuadro-movil .filas { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 14px; }
.cuadro.cuadro-movil .filas .campo { position: static !important; width: 100% !important; min-height: 40px; font-size: 16px; }
.cuadro.cuadro-movil .cabecera { position: static; }
.acciones-recibo { display: flex; gap: 6px; flex-basis: 100%; }
/* ------------------------------------------------------------------ aviso de pagos por QR desde la web (Mich) */
.aviso-pagos { position: fixed; top: 12px; right: 12px; z-index: 400; display: flex; align-items: center; gap: 10px; max-width: min(460px, calc(100vw - 24px));
               padding: 12px 14px; background: #fff8e1; border: 2px solid rgb(230, 160, 0); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
               font: 14px var(--fuente); color: #4a3500; box-sizing: border-box; }
.aviso-pagos svg { width: 26px; height: 26px; flex: none; }
.aviso-pagos .revisar { padding: 8px 12px; border: 0; border-radius: 8px; background: var(--titulo); color: #fff; font: bold 14px var(--fuente); cursor: pointer; }
.aviso-pagos .cerrar { border: 0; background: none; font: bold 20px var(--fuente); color: #8a6400; cursor: pointer; }
.aviso-menu { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid rgb(230, 160, 0);
              border-radius: 8px; background: #fff8e1; color: #4a3500; font: bold 13px var(--fuente); cursor: pointer; }
.aviso-menu svg { width: 18px; height: 18px; }
.aviso-menu.suave { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .15); color: #fff; font-weight: normal; }
.mm-aviso { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 12px 14px; border: 2px solid rgb(230, 160, 0);
            border-radius: 12px; background: #fff8e1; color: #4a3500; text-align: left; cursor: pointer; font: 14px var(--fuente); }
.mm-aviso svg { width: 28px; height: 28px; flex: none; }
.mm-aviso b { display: block; font-size: 16px; }
/* ojito de las llaves (ver lo que se escribe) */
.ojito { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #4a5a6a; cursor: pointer; z-index: 2; }
.ojito svg { width: 16px; height: 16px; }
.con-ojo { position: relative; display: block; }
.con-ojo input { padding-right: 46px !important; }
.con-ojo .ojito { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; }
.con-ojo .ojito svg { width: 22px; height: 22px; }
/* calendario de los campos de fecha (CampoFecha) */
.fecha-calendario { position: absolute; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.boton-calendario { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 3px;
                    background: rgba(255, 255, 255, .85); color: rgb(0, 70, 140); cursor: pointer; }
.boton-calendario:hover:not(:disabled) { background: #fff; color: rgb(0, 40, 110); }
.boton-calendario:disabled { opacity: .4; cursor: default; }
.boton-calendario svg { width: 13px; height: 13px; }
/* vista filtrada de los reportes (FILTROS): filtros arriba, tabla del informe debajo, botones abajo */
.cuadro.vista-filtrada { z-index: 49; }
.vista-filtrada .cabecera .quitar { margin-left: auto; color: #fff; font-size: 12px; }
.vista-filtrada .grilla th { overflow: hidden; text-overflow: ellipsis; }
.vista-filtrada .grilla tfoot td { position: sticky; bottom: 0; z-index: 1; background: rgb(235, 241, 248); font-weight: bold;
                                   box-shadow: 0 -1px 0 rgb(150, 170, 170); }
.vista-filtrada .nota { font-weight: normal; line-height: 1.35; }
.vista-filtrada fieldset .campo.mayusculas { text-transform: uppercase; }
.etq.aviso-filtro { color: rgb(150, 0, 0); font: bold 11px var(--fuente); text-align: center; white-space: normal; }
.check-portal { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font: 14px var(--fuente); color: #1b2a3a; }
.check-portal input { width: 20px; height: 20px; }
/* Pagar del portal: meses en orden (los que debe en rojo, adelantos en azul, en revisión apagados) y el total sin editar */
.paso-pago { margin: 12px 0 6px; font-size: 14px; color: #1b2a3a; }
.meses-pago { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 8px 0; }
.mes-pago { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 6px 10px; border-radius: 8px;
            border: 2px solid #b8c9dc; background: #fff; color: #1b2a3a; font: 14px var(--fuente); text-align: left; cursor: pointer; }
.mes-pago small { font-size: 12px; color: var(--etiqueta-gris); }
.mes-pago.debe { border-color: #e3a3a3; }
.mes-pago.debe b { color: rgb(170, 0, 0); }
.mes-pago.adelanto { border-color: #a9c4e4; }
.mes-pago.revision { background: #f1f1f1; border-color: #d6d6d6; color: #888; cursor: not-allowed; }
.mes-pago.elegido { background: var(--titulo); border-color: var(--titulo); color: #fff; }
.mes-pago.elegido b, .mes-pago.elegido small { color: #fff; }
.cantidad-pago { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0; }
.cantidad-pago button { min-height: 40px; padding: 0 14px; border: 1px solid #b8c9dc; border-radius: 6px; background: #fff; color: var(--titulo);
                        font: bold 14px var(--fuente); cursor: pointer; }
.cantidad-pago button:disabled { opacity: .45; cursor: default; }
.cantidad-pago span { font: bold 15px var(--fuente); }
.total-pago { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #eef4fb; }
.total-pago span { font-size: 14px; }
.total-pago b { font-size: 24px; color: var(--titulo); }
.total-pago small { font-size: 12px; color: var(--etiqueta-gris); }
.mp-fila .rojo { color: rgb(190, 0, 0); font-weight: bold; }
/* resumen mensual: dos tablas (ingresos / gastos) y el resultado del mes */
.resumen-titulo { color: var(--etiqueta-azul-oscuro); }
.resumen-tabla tfoot td { font-weight: bold; background: rgb(235, 241, 248); border-top: 1px solid rgb(150, 170, 170); }
.resultado-mes { position: absolute; display: flex; align-items: center; gap: 16px; padding: 0 18px; border-radius: 6px;
                 background: #e8f6ec; color: rgb(0, 110, 50); border: 1px solid #9fd3b0; }
.resultado-mes.perdida { background: #fdecec; color: rgb(170, 0, 0); border-color: #e3a3a3; }
.resultado-mes span { font: bold 15px var(--fuente); letter-spacing: 1px; }
.resultado-mes b { font: bold 22px var(--fuente); }
.resultado-mes small { margin-left: auto; font: 12px var(--fuente); color: #3c4c5c; }
/* saldo de la cuenta */
.saldo-actual { position: absolute; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; border-radius: 6px;
                background: #e8f6ec; border: 1px solid #9fd3b0; color: rgb(0, 110, 50); }
.saldo-actual.negativo { background: #fdecec; border-color: #e3a3a3; color: rgb(170, 0, 0); }
.saldo-actual span { font: bold 11px var(--fuente); letter-spacing: 1px; }
.saldo-actual b { font: bold 20px var(--fuente); }
/* fotos de la agenda y de los reportes (EVIDENCIA) */
.fotos-elegidas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foto-mini { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid #b8c9dc; background: #fff; }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-mini button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
                    background: rgba(170, 0, 0, .85); color: #fff; font: bold 14px/20px var(--fuente); cursor: pointer; }
.foto-agregar { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px dashed #7d9cc0;
                border-radius: 6px; background: #f3f7fc; color: var(--titulo); font: bold 12px var(--fuente); cursor: pointer; overflow: hidden; }
.foto-agregar svg { width: 16px; height: 16px; }
.foto-agregar input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-nota { font: 12px var(--fuente); color: var(--etiqueta-gris); }
.foto-nota.error { color: rgb(170, 0, 0); }
/* agenda de tareas */
.tarea-panel { overflow-y: auto; }
.tarea-detalle { padding: 10px 12px; font: 12px var(--fuente); color: #1b2a3a; }
.tarea-detalle h3 { margin: 4px 0 6px; font: bold 14px var(--fuente); color: var(--titulo); }
.tarea-detalle p { margin: 4px 0; line-height: 1.4; }
.tarea-detalle .texto { padding: 6px 8px; background: #fff; border: 1px solid #d5e3f2; border-radius: 4px; white-space: pre-wrap; }
.tarea-detalle .gris { color: var(--etiqueta-gris); }
.tarea-detalle .rojo { color: rgb(190, 0, 0); font-weight: bold; }
.tarea-campo { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; font: bold 12px var(--fuente); color: var(--etiqueta); }
.tarea-campo input, .tarea-campo textarea { padding: 4px 6px; border: 1px solid #9fb4cc; border-radius: 3px; font: 12px var(--fuente); resize: vertical; }
.tarea-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tarea-boton { position: static; width: 100%; height: 30px; margin-top: 8px; }
.foto-mini { padding: 0; cursor: zoom-in; }
.grilla tr.tarea-atrasada td:last-child { color: rgb(190, 0, 0); font-weight: bold; }
.aviso-menu.agenda { border-color: rgb(0, 100, 160); background: #e6f1fb; color: rgb(0, 60, 120); }
.mm-aviso.agenda { border-color: rgb(0, 100, 160); background: #e6f1fb; color: rgb(0, 60, 120); }
.cifras-edificio .agenda-cuadro { color: rgb(0, 80, 140); }
.cifras-edificio .agenda-cuadro.atrasada { color: rgb(170, 0, 0); }
.tarjeta-portal label textarea { min-height: 80px; padding: 6px 8px; border: 1px solid #b8c9dc; border-radius: 6px; font: 15px var(--fuente); resize: vertical; }
.lista-portal li.reporte-portal { flex-wrap: wrap; }
.lista-portal li.reporte-portal small { flex-basis: 100%; color: var(--etiqueta-gris); }
/* procesos → agregar edificio: las dos maneras de registrarlo */
.alta-opcion { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px 22px;
               border: 2px solid #fff; border-radius: 14px; background: linear-gradient(180deg, #f4f9ff, #d9eafa); color: var(--titulo);
               font: 13px var(--fuente); text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 30, 70, .18); }
.alta-opcion:hover:not(:disabled) { background: linear-gradient(180deg, #ffffff, #c6e0f8); }
.alta-opcion:disabled { opacity: .55; cursor: default; }
.alta-opcion svg { width: 56px; height: 56px; color: rgb(0, 90, 170); }
.alta-opcion b { font-size: 20px; color: var(--etiqueta-azul-oscuro); }
.alta-opcion span { line-height: 1.45; color: #1b2a3a; }
.alta-opcion.movil { position: static; width: 100%; padding: 14px; }
.alta-opcion.movil svg { width: 36px; height: 36px; }
.alta-opcion.movil b { font-size: 17px; }
.boton-buscar.crear { background: rgb(0, 128, 64); color: #fff; }
.boton-buscar.crear:disabled, .boton-buscar:disabled { opacity: .5; cursor: default; }
.boton-buscar.en-linea { position: static; height: 26px; padding: 0 10px; margin: 2px 0 6px; }
.campo.script-sql, .mp-form textarea.script-sql { font: 12px/1.45 Consolas, "Courier New", monospace; white-space: pre; overflow: auto; resize: none; tab-size: 4; }
.mp-form textarea.script-sql { min-height: 260px; font-size: 13px; }
.alta-resultado { position: absolute; overflow-y: auto; padding: 8px 10px; background: #fff; border: 1px solid #9fb4cc; font: 12px var(--fuente); color: #1b2a3a; }
.alta-resultado.movil { position: static; margin-top: 4px; border-radius: 8px; font-size: 14px; }
.alta-resultado.error { border-color: rgb(190, 0, 0); background: #fff6f6; }
.alta-resultado > b { display: block; margin-bottom: 4px; color: var(--etiqueta-azul-oscuro); }
.alta-resultado.error > b, .alta-resultado.error p:first-of-type { color: rgb(170, 0, 0); }
.alta-resultado p { margin: 4px 0; line-height: 1.4; white-space: normal; }
.alta-resultado .gris { color: var(--etiqueta-gris); }
.alta-resultado .aviso { color: rgb(150, 80, 0); }
.alta-resultado dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 4px 0; }
.alta-resultado dt { font-weight: bold; color: var(--etiqueta); }
.alta-resultado dd { margin: 0; }
.mp-boton-ancho { width: 100%; min-height: 48px; margin: 0 0 4px; border: 1px solid #7d9cc0; border-radius: 10px; background: #e6f1fb;
                  color: var(--titulo); font: bold 15px var(--fuente); }
/* edificios: los cuadros en un área con desplazamiento que termina antes del botón Salir */
.lista-edificios { position: absolute; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fit, 270px);
                   justify-content: center; align-content: start; gap: 22px 30px; padding: 10px 8px 14px; }
.lista-edificios .cuadro-edificio { position: relative; }
.lista-edificios::-webkit-scrollbar { width: 12px; }
.lista-edificios::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .55); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
/* detalle de una fila de grilla: los datos completos (sin "…"); debajo de los cuadros de mensaje */
.velo.detalle-velo { z-index: 490; }
.mensaje.detalle-fila { width: min(620px, 94vw); max-width: none; }
.detalle-fila .detalle-cuerpo { max-height: min(70vh, 520px); overflow-y: auto; padding: 14px 16px; }
.detalle-fila dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.detalle-fila dt { font-weight: bold; color: var(--etiqueta-azul-oscuro); }
.detalle-fila dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.detalle-fila .detalle-cuerpo p { margin: 12px 0 0; color: rgb(150, 0, 0); }
.grilla[data-detalle] td { cursor: pointer; }

/* Procesos → Consumo de Agua (pedido de CONFORT): las lecturas se escriben dentro de la grilla; totales abajo. */
.grilla.consumo td input.celda { width: 100%; box-sizing: border-box; height: 18px; margin: 0; padding: 0 3px; border: 1px solid #7f9db9;
    text-align: right; font: inherit; background: #fff; }
.grilla.consumo td input.celda:focus { outline: 2px solid #1a5fb4; outline-offset: -1px; }
.grilla.consumo td.negrita, .grilla.consumo tr.negrita td { font-weight: bold; }
.grilla.consumo tfoot td { position: sticky; bottom: 0; z-index: 1; background: rgb(235, 241, 248); border-top: 2px solid #8aa0b8; }
.panel.con-sombra { box-shadow: 0 6px 24px rgba(0, 0, 0, .35); border: 1px solid #7f9db9; }
.mp-lista > li.mp-tarjeta { padding: 10px 12px; }
.mp-tarjeta.elegida { background: #e3effc; }
.mp-tarjeta .fila { display: flex; gap: 8px; margin: 6px 0; }
.mp-tarjeta label { display: flex; flex-direction: column; flex: 1; gap: 2px; font: bold 12px var(--fuente); color: var(--titulo); }
.mp-tarjeta input { width: 100%; box-sizing: border-box; min-height: 38px; padding: 4px 6px; font-size: 16px; border: 1px solid #9ab0c8; border-radius: 6px; }