:root {
    --color-bg: #f6f5f1;
    --color-surface: #ffffff;
    --color-ink: #1e2a25;
    --color-ink-muted: #5b6b63;
    --color-border: #dcded7;
    --color-accent: #2b5d52;
    --color-accent-dark: #1d4139;

    /* Estados: deben coincidir con static/estados.js y models.py. */
    --color-disponible: #6b9c7d;
    --color-apartado: #8a97a8;
    --color-reservado: #c99a44;
    --color-vendido: #a65a4a;

    --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;

    /* Tokens de diseno (componentes) */
    --radio-s: 5px;
    --radio-m: 8px;
    --radio-l: 12px;
    --sombra-s: 0 1px 3px rgba(30, 42, 37, 0.12);
    --sombra-m: 0 6px 24px rgba(30, 42, 37, 0.2);
    --sombra-l: 0 20px 50px rgba(0, 0, 0, 0.28);
    --foco: 0 0 0 3px rgba(43, 93, 82, 0.15);
    --ancho-max: 1200px;
    --z-modal: 1000;
    --z-toast: 1300;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-ink);
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* Barra lateral de navegacion (fija a la izquierda) */
#barra-navegacion {
    flex: none;
    width: 220px;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-accent-dark);
    color: #ffffff;
    padding: 24px 16px;
    overflow-y: auto;
}

#marca {
    display: block;
    padding: 0 8px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

#menu-navegacion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 18px;
}

.nav-item {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-item.activo {
    background: var(--color-accent);
    color: #ffffff;
}

/* Contenido principal (a la derecha del sidebar) */
#contenido {
    flex: 1;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 40px;
    overflow-y: auto;
}

/* Encabezado */
#encabezado {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

#encabezado-izquierda {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

#encabezado h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

#leyenda-estados {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.leyenda-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.leyenda-item span:not(.punto) {
    font-family: var(--font-mono);
    color: var(--color-ink);
    font-weight: 600;
}

.punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.punto-disponible { background: var(--color-disponible); }
.punto-apartado { background: var(--color-apartado); }
.punto-reservado { background: var(--color-reservado); }
.punto-vendido { background: var(--color-vendido); }

/* Barra de planos: selector + carga de DXF */
#barra-planos {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 16px;
    flex-wrap: wrap;
}

/* Interruptor de modo edicion */
#control-modo-edicion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    user-select: none;
}

#control-modo-edicion input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#control-modo-edicion .interruptor {
    position: relative;
    flex: none;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--color-border);
    transition: background 0.2s ease;
}

#control-modo-edicion .interruptor::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(30, 42, 37, 0.25);
    transition: transform 0.2s ease;
}

#control-modo-edicion input:checked + .interruptor {
    background: var(--color-accent);
}

#control-modo-edicion input:checked + .interruptor::after {
    transform: translateX(18px);
}

#control-modo-edicion input:checked ~ .etiqueta-modo {
    color: var(--color-accent);
}

#barra-planos label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
}

#selector-planos {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-ink);
    background: var(--color-surface);
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#selector-planos:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(43, 93, 82, 0.15);
}

#mensaje-planos {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
}

#mensaje-planos.error {
    color: var(--color-vendido);
}

.oculto {
    display: none;
}

/* Layout principal */
#app {
    display: flex;
    align-items: stretch;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
}

#contenedor-plano {
    position: relative;
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-surface);
    background-image:
        linear-gradient(var(--color-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: -1px -1px;
    overflow: hidden;
    /* Redimension suave al abrir/cerrar el panel lateral: al cambiar
       flex-basis/width, el plano no se achica ni crece de golpe. La
       duracion coincide con la transicion de #panel-detalle (0.3s)
       para que mapa y panel se muevan en sincronia. */
    transition: flex-basis 0.3s ease, width 0.3s ease;
}

#plano-svg {
    width: 100%;
    height: 100%;
    display: block;
}

#boton-centrar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(30, 42, 37, 0.12);
    transition: background 0.15s ease, color 0.15s ease;
}

#boton-centrar:hover {
    background: var(--color-accent);
    color: #ffffff;
}

/* Editor flotante de precio (modo edicion) */
#editor-precio {
    position: absolute;
    z-index: 30;
    width: 250px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 6px 24px rgba(30, 42, 37, 0.2);
}

#editor-precio-lote {
    margin: 0 0 4px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink);
}

#form-precio {
    display: flex;
    flex-direction: column;
}

#form-precio label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    margin-top: 10px;
    margin-bottom: 6px;
}

#form-precio input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-ink);
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#form-precio input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(43, 93, 82, 0.15);
}

#acciones-precio {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

#acciones-precio button {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

#boton-guardar-precio {
    background: var(--color-accent);
    color: #ffffff;
}

#boton-guardar-precio:hover {
    background: var(--color-accent-dark);
}

#boton-cancelar-precio {
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border) !important;
}

#boton-cancelar-precio:hover {
    background: var(--color-bg);
}

#mensaje-precio {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--color-ink-muted);
}

/* Panel de detalle: "ficha del lote" (lateral derecho) */
#panel-detalle {
    position: relative;
    flex: 0 0 350px;
    width: 350px;
    min-width: 0;
    min-height: 0;
    margin-left: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    background: var(--color-surface);
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex-basis 0.3s ease, width 0.3s ease, margin-left 0.3s ease, opacity 0.3s ease;
}

/* Oculto: el panel se colapsa a ancho 0 y el plano vuelve a ocupar el
   100% del ancho disponible. Se usa flex-basis (no display:none) para
   que el mapa se redimensione suavemente durante la transicion. */
#panel-detalle.oculto {
    flex-basis: 0;
    width: 0;
    margin-left: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

#boton-cerrar-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#boton-cerrar-panel:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

#contenido-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#panel-detalle .panel-vacio {
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    margin: 0;
}

#panel-detalle .eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: 6px;
}

#panel-detalle h2 {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    margin: 0 0 10px;
}

#panel-detalle .area-lote {
    color: var(--color-ink-muted);
    font-size: 0.85rem;
    margin: 10px 0 0;
}

#panel-detalle .precio-lote {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink);
    margin: 8px 0 0;
}

#panel-detalle hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 16px 0;
}

.badge-estado {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-disponible { background: var(--color-disponible); }
.badge-apartado { background: var(--color-apartado); }
.badge-reservado { background: var(--color-reservado); }
.badge-vendido { background: var(--color-vendido); }

/* Formulario de accion (reservar / comprar). Oculto inicialmente y se
   despliega con una transicion suave (max-height + opacity) en vez de
   aparecer de golpe. Como el .oculto global usa display:none (que no se
   puede animar), aqui se sobreescribe con display:flex para que el
   formulario colapse/expanda su altura real. */
#form-apartar,
#form-accion-lote,
#form-completar-compra,
#form-cuota {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease, visibility 0.35s ease;
}

#form-apartar:not(.oculto),
#form-accion-lote:not(.oculto),
#form-completar-compra:not(.oculto),
#form-cuota:not(.oculto) {
    max-height: 680px;
    opacity: 1;
    visibility: visible;
}

#form-apartar.oculto,
#form-accion-lote.oculto,
#form-completar-compra.oculto,
#form-cuota.oculto {
    display: flex;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
}

#form-apartar label,
#form-accion-lote label,
#form-completar-compra label,
#form-cuota label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    margin-top: 14px;
    margin-bottom: 6px;
}

#form-apartar input,
#form-accion-lote input,
#form-completar-compra input,
#form-cuota input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-ink);
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#form-apartar input:focus,
#form-accion-lote input:focus,
#form-completar-compra input:focus,
#form-cuota input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(43, 93, 82, 0.15);
}

#form-apartar button,
#form-accion-lote button,
#form-completar-compra button,
#form-cuota button {
    margin-top: 20px;
    padding: 10px 14px;
    background: var(--color-accent);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

#form-apartar button:hover,
#form-accion-lote button:hover,
#form-completar-compra button:hover,
#form-cuota button:hover {
    background: var(--color-accent-dark);
}

/* #form-apartar vive dentro de #acciones-lote: no necesita margen
   superior extra (el espaciado lo dan .boton-apartar y los bordes
   del propio formulario cuando se abre). */
#form-apartar {
    margin-top: 0;
}

/* Separador visual que solo aparece al abrir el formulario de apartar:
   separa el formulario del boton "Registrar Reserva" que queda debajo. */
#form-apartar:not(.oculto) {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* Separador visual que solo aparece al abrir el formulario de reserva/
   venta: separa los botones de accion del formulario que se despliega. */
#form-accion-lote:not(.oculto) {
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
}

/* Botones de accion sobre un lote disponible */
#acciones-lote {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
}

.boton-apartar {
    margin-bottom: 10px;
}

.boton-accion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: saturate(0.35);
}

.aviso-precio-lote {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(196, 148, 46, 0.12);
    color: var(--color-reservado);
    font-size: 0.82rem;
    line-height: 1.4;
}

.boton-accion {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.boton-reservar {
    background: var(--color-reservado);
    color: #ffffff;
}

.boton-reservar:hover {
    background: #a87f2e;
}

.boton-comprar {
    background: var(--color-accent);
    color: #ffffff;
}

.boton-comprar:hover {
    background: var(--color-accent-dark);
}

/* Boton "+ Registrar Cuota" (estado de cuenta del lote) */
.boton-cuota {
    background: var(--color-accent-dark);
    color: #ffffff;
    width: 100%;
}

.boton-cuota:hover {
    background: var(--color-accent);
}

/* Saldo pendiente resaltado en el estado de cuenta */
.saldo-enfoque {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}

/* Detalle de un lote con comprador (reservado/vendido) */
.campo-detalle {
    font-size: 0.88rem;
    margin: 8px 0 0;
    color: var(--color-ink);
}

.campo-detalle strong {
    font-weight: 600;
    color: var(--color-ink-muted);
}

#mensaje-formulario,
#mensaje-cuota {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--color-vendido);
}

/* Pagina de gestion de planos */
.pagina-planos #contenido {
    padding-bottom: 40px;
}

/* Pagina "Cartera de pagos" */
.pagina-cartera #contenido {
    padding-bottom: 40px;
}

#gestion-planos {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

#panel-cargar-plano,
#panel-lista-planos {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(30, 42, 37, 0.04);
}

#form-cargar-plano {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

#form-cargar-plano label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    margin-top: 14px;
    margin-bottom: 6px;
}

#form-cargar-plano input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-ink);
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#form-cargar-plano input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(43, 93, 82, 0.15);
}

#campo-archivo-plano-contenedor {
    position: relative;
}

.campo-archivo-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

#boton-seleccionar-archivo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px dashed var(--color-accent);
    border-radius: 5px;
    background: rgba(43, 93, 82, 0.06);
    color: var(--color-accent-dark);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#boton-seleccionar-archivo:hover {
    background: rgba(43, 93, 82, 0.12);
    border-color: var(--color-accent-dark);
}

#texto-archivo-seleccionado {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

#boton-importar {
    margin-top: 20px;
    padding: 10px 14px;
    background: var(--color-accent);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

#boton-importar:hover {
    background: var(--color-accent-dark);
}

#boton-importar:disabled {
    opacity: 0.6;
    cursor: default;
}

#mensaje-carga {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--color-ink-muted);
}

#mensaje-carga.error {
    color: var(--color-vendido);
}

#lista-planos {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plano-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.plano-info {
    min-width: 0;
}

.plano-nombre {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink);
}

.plano-detalle {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    margin-top: 3px;
}

.boton-eliminar {
    flex: none;
    padding: 7px 12px;
    border: 1px solid var(--color-vendido);
    border-radius: 5px;
    background: transparent;
    color: var(--color-vendido);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.boton-eliminar:hover {
    background: var(--color-vendido);
    color: #ffffff;
}

.boton-eliminar:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------------------------------------------------------------------------
   Pagina "Cartera de pagos"
   --------------------------------------------------------------------------- */
#resumen-cartera {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 20px;
}

.tarjeta-resumen {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.etiqueta-resumen {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

.valor-resumen {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-ink);
}

#tabla-cartera {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    /* Ver nota en #tabla-movimientos: overflow != visible en un item
       flex-column puede colapsarlo a 0px si el contenido total supera
       la altura de #contenido. flex-shrink:0 lo evita. */
    flex-shrink: 0;
}

#filtros-cartera {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#filtros-cartera select,
#buscador-cartera-contenedor {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.88rem;
}

#filtros-cartera select:focus,
#buscador-cartera-contenedor:focus-within {
    outline: none;
    border-color: var(--color-accent);
}

#filtro-proyecto {
    min-width: 220px;
}

#buscador-cartera-contenedor {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#icono-buscar {
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.6;
}

#buscador-cartera {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.88rem;
}

#buscador-cartera:focus {
    outline: none;
}

.tabla-cartera {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.tabla-cartera th,
.tabla-cartera td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.tabla-cartera thead th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    background: var(--color-bg);
}

.tabla-cartera td.numero,
.tabla-cartera th.numero {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.saldo-reserva {
    font-weight: 600;
    color: var(--color-accent-dark);
}

.sub-detalle {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

.badge-proyecto {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(43, 93, 82, 0.1);
    color: var(--color-accent-dark);
    white-space: nowrap;
}

.acciones-reserva {
    text-align: right;
    white-space: nowrap;
}

.boton-detalle-reserva {
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.boton-detalle-reserva:hover {
    border-color: var(--color-accent);
    background: var(--color-bg);
}

/* Modal de detalle de contrato (cartera) */
#detalle-contrato-modal .recibo-dialog {
    width: 640px;
    max-width: 100%;
}

#detalle-contrato-contenido {
    overflow-y: auto;
    background: var(--color-bg);
}

.detalle-contrato {
    padding: 24px 28px;
    background: var(--color-bg);
}

.detalle-contrato-encabezado {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.detalle-contrato-encabezado h2 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-ink);
}

.detalle-contrato-encabezado .badge-estado {
    align-self: flex-start;
}

.detalle-contrato-cliente {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.detalle-contrato-cliente p {
    margin: 0;
}

.detalle-contrato-cliente strong {
    color: var(--color-ink-muted);
}

.detalle-contrato-resumen {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.mini-tarjeta {
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.mini-tarjeta span {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
}

.mini-tarjeta strong {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ink);
}

.mini-tarjeta-saldo {
    border-color: var(--color-accent);
    background: rgba(43, 93, 82, 0.06);
}

.mini-tarjeta-saldo strong {
    color: var(--color-accent-dark);
}

.detalle-contrato-historial,
.detalle-contrato-cuota {
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
}

.tabla-pagos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.tabla-pagos th,
.tabla-pagos td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.tabla-pagos thead th {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    background: var(--color-surface);
}

.tabla-pagos tbody tr:last-child td {
    border-bottom: none;
}

.tabla-pagos .monto-pago {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-accent-dark);
    text-align: right;
    white-space: nowrap;
}

.tabla-pagos th.monto-pago {
    text-align: right;
}

.tabla-pagos .saldo-columna {
    color: var(--color-ink-muted);
}

.tabla-pagos .acciones-pago {
    text-align: right;
    white-space: nowrap;
}

.boton-recibo-pago {
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.boton-recibo-pago:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #ffffff;
}

.boton-anular-pago {
    margin-left: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(166, 90, 74, 0.45);
    border-radius: 5px;
    background: transparent;
    color: var(--color-vendido);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.boton-anular-pago:hover {
    border-color: var(--color-vendido);
    background: var(--color-vendido);
    color: #ffffff;
}

.form-cuota-cartera {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.form-cuota-cartera label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    margin-top: 10px;
    margin-bottom: 6px;
}

.form-cuota-cartera input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-ink);
    background: var(--color-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-cuota-cartera input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(43, 93, 82, 0.15);
}

.form-cuota-cartera button {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--color-accent);
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.form-cuota-cartera button:hover {
    background: var(--color-accent-dark);
}

.mensaje-cuota-cartera {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--color-vendido);
}

.panel-vacio {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--color-ink-muted);
}

.badge-estado {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-reservado {
    background: rgba(196, 148, 46, 0.15);
    color: var(--color-reservado);
}

.badge-vendido {
    background: rgba(196, 76, 54, 0.12);
    color: var(--color-vendido);
}

#mensaje-cartera.error {
    color: var(--color-vendido);
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   Recibo de pago: modal de confirmacion + vista de impresion
   --------------------------------------------------------------------------- */
.recibo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.recibo-modal.oculto {
    display: none;
}

.recibo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 26, 0.55);
}

.recibo-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    background: var(--color-bg);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    /* Permitir que el diálogo tenga altura auto y haga scroll vertical
       si el contenido excede el espacio disponible en pantallas pequeñas. */
    height: auto;
    max-height: none;
}

.recibo-dialog .contenido-con-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    padding-bottom: 80px; /* Espacio para los botones al final */
}

.recibo-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.recibo-cerrar:hover {
    background: var(--color-border);
    color: var(--color-ink);
}

#recibo-contenido {
    overflow-y: auto;
}

.recibo-acciones {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.recibo-acciones .boton-accion {
    flex: 1;
}

.recibo-acciones .boton-accion[data-cerrar-recibo] {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-ink);
}

.recibo-acciones .boton-accion[data-cerrar-recibo]:hover {
    background: var(--color-bg);
}

/* Papel del recibo */
.recibo-papel {
    width: 480px;
    background: #ffffff;
    padding: 28px 32px;
    color: #1e2a25;
}

.recibo-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-accent-dark);
}

.recibo-empresa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.recibo-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--color-accent-dark);
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.8rem;
}

.recibo-empresa h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-accent-dark);
}

.recibo-empresa-linea {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--color-ink-muted);
    line-height: 1.4;
}

.recibo-meta {
    text-align: right;
    font-size: 0.8rem;
    white-space: nowrap;
}

.recibo-meta p {
    margin: 3px 0;
}

.recibo-meta span {
    color: var(--color-ink-muted);
    margin-right: 6px;
}

.recibo-documento {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px !important;
}

.recibo-numero {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    letter-spacing: -0.02em;
}

.recibo-cliente {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.recibo-cliente h3 {
    margin: 0 0 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

.recibo-nombre {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.recibo-cedula {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--color-ink-muted);
}

.recibo-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.85rem;
}

.recibo-tabla th {
    text-align: left;
    padding: 8px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
}

.recibo-tabla td {
    padding: 10px;
    border: 1px solid var(--color-border);
}

.recibo-totales {
    margin: 8px 0 4px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.recibo-fila-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--color-ink);
}

.recibo-fila-total span {
    color: var(--color-ink-muted);
}

.recibo-fila-total strong {
    font-family: var(--font-mono);
    font-size: 1rem;
}

.recibo-fila-monto {
    background: var(--color-bg);
}

.recibo-saldo {
    border-top: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-accent-dark);
    background: rgba(43, 93, 82, 0.08);
}

.recibo-saldo strong {
    font-size: 1.15rem;
    color: var(--color-accent-dark);
}

.recibo-pie {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-ink-muted);
}

.recibo-pie p {
    margin: 0;
}

/* Impresion: solo el papel del recibo (para guardar como PDF) */
@media print {
    body * {
        visibility: hidden !important;
    }

    #recibo-modal,
    #recibo-modal * {
        visibility: visible !important;
    }

    #recibo-modal {
        position: absolute;
        inset: 0;
        padding: 0;
        align-items: flex-start;
    }

    .recibo-overlay,
    .recibo-cerrar,
    .recibo-acciones {
        display: none !important;
    }

    .recibo-dialog {
        max-height: none;
        box-shadow: none;
        background: #ffffff;
        border-radius: 0;
    }

    #recibo-contenido {
        overflow: visible;
    }

    .recibo-papel {
        width: 100%;
        padding: 24px;
    }
}

/* ---------------------------------------------------------------------------
   Confirmacion personalizada: reemplaza el window.confirm nativo
   --------------------------------------------------------------------------- */
.confirmar-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.confirmar-modal.oculto {
    display: none;
}

.confirmar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 26, 0.55);
}

.confirmar-dialog {
    position: relative;
    width: 400px;
    max-width: 100%;
    background: var(--color-surface);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    padding: 28px 28px 20px;
    text-align: center;
}

.confirmar-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.confirmar-cerrar:hover {
    background: var(--color-border);
    color: var(--color-ink);
}

.confirmar-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(166, 90, 74, 0.14);
    color: var(--color-vendido);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.confirmar-dialog h2 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--color-ink);
}

.confirmar-mensaje {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-ink);
    line-height: 1.5;
}

.confirmar-nota {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--color-ink-muted);
    line-height: 1.45;
}

.confirmar-acciones {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.confirmar-cancelar {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-ink);
}

.confirmar-cancelar:hover {
    background: var(--color-bg);
}

.confirmar-aceptar {
    background: var(--color-vendido);
    color: #ffffff;
}

.confirmar-aceptar:hover {
    background: #8f4a3d;
}

/* ------------------------------------------------------------------ */
/* Login, error y logout                                               */
/* ------------------------------------------------------------------ */
body.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 24px;
    height: 100vh;
}

.login-panel {
    width: 100%;
    max-width: 380px;
    padding: 36px 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(30, 42, 37, 0.08);
    text-align: center;
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

.login-titulo {
    margin: 18px 0 6px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}

.login-subtitulo {
    margin: 0 0 24px;
    font-size: 0.9rem;
    color: var(--color-ink-muted);
}

.login-error {
    margin: 0 0 18px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fbecec;
    border: 1px solid #f0c6c6;
    color: var(--color-vendido);
    font-size: 0.85rem;
    text-align: left;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.login-form label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink);
}

.login-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-ink);
    background: #ffffff;
}

.login-form input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.boton-login {
    margin-top: 14px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 6px;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background 0.15s ease;
}

.boton-login:hover {
    background: var(--color-accent-dark);
}

.boton-login-enlace {
    margin-top: 4px;
}

.form-logout {
    margin-top: auto;
    padding-top: 16px;
}

.boton-logout {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.boton-logout:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Dashboard                                                           */
/* ------------------------------------------------------------------ */
.resumen-dashboard {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 24px;
}

#panel-lotes-por-estado {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

#panel-lotes-por-estado .eyebrow {
    display: block;
    margin-bottom: 14px;
}

.lista-estados-dashboard {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fila-estado-dashboard {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.fila-estado-dashboard .punto {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.nombre-estado {
    width: 130px;
    font-weight: 600;
    color: var(--color-ink);
}

.cantidad-estado {
    width: 48px;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-ink);
}

.barra-estado {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--color-bg);
    overflow: hidden;
}

.relleno-estado {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

/* ------------------------------------------------------------------ */
/* Fase 2: componentes compartidos (toasts, skeletons, empty-states),  */
/* accesibilidad, iconos de navegacion y responsividad.                */
/* ------------------------------------------------------------------ */

/* Foco visible para navegacion por teclado (accesibilidad). */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Clase de solo-lectura para lectores de pantalla. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Boton en estado "Guardando..." */
.boton-cargando {
    opacity: 0.72;
    cursor: progress;
}

/* ------------------------------------------------------------------ */
/* Toasts                                                              */
/* ------------------------------------------------------------------ */
.toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
}

.toast {
    padding: 12px 16px;
    border-radius: var(--radio-m);
    background: var(--color-ink);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: var(--sombra-m);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-exito {
    background: var(--color-accent-dark);
}

.toast-error {
    background: #8f4a3d;
}

.toast-info {
    background: var(--color-ink);
}

.toast-saliendo {
    opacity: 0;
    transform: translateY(-6px);
}

/* ------------------------------------------------------------------ */
/* Skeletons (estados de carga en tablas)                              */
/* ------------------------------------------------------------------ */
.skeleton {
    display: inline-block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8eae4 25%, #f4f5f0 50%, #e8eae4 75%);
    background-size: 200% 100%;
    animation: skeleton-brillo 1.2s ease-in-out infinite;
}

@keyframes skeleton-brillo {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.fila-esqueleto td {
    padding: 16px 14px;
}

.fila-esqueleto .skeleton {
    width: 80%;
}

.fila-esqueleto td.numero .skeleton {
    width: 55%;
}

/* ------------------------------------------------------------------ */
/* Empty states ilustrados                                             */
/* ------------------------------------------------------------------ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;
    color: var(--color-ink-muted);
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.5;
}

.empty-state svg {
    width: 40px;
    height: 40px;
    color: var(--color-border);
}

.empty-state p {
    margin: 0;
    max-width: 340px;
}

#contenedor-plano .empty-state {
    position: absolute;
    inset: 0;
}

/* El oculto global usa display:none; se refuerza para que gane sobre el
   display:flex de .empty-state (definido despues en la hoja). */
.empty-state.oculto {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Navegacion: iconos en la barra lateral                              */
/* ------------------------------------------------------------------ */
#marca {
    display: flex;
    align-items: center;
    gap: 10px;
}

.marca-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radio-m);
    background: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-item svg {
    flex: none;
}

.boton-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.boton-logout svg {
    flex: none;
}

/* ------------------------------------------------------------------ */
/* Hover en filas de la cartera                                        */
/* ------------------------------------------------------------------ */
.fila-reserva {
    transition: background 0.15s ease;
}

.fila-reserva:hover {
    background: rgba(43, 93, 82, 0.05);
}

/* Contenedores con scroll horizontal para tablas (movil). */
.tabla-contenedor {
    overflow-x: auto;
}

/* Cargando en la ficha del lote (pagina plano). */
.cargando-detalle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-ink-muted);
    font-size: 0.88rem;
}

.cargando-detalle-spinner {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------------ */
/* Boton de menu movil (lo crea static/ui.js)                          */
/* ------------------------------------------------------------------ */
#menu-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 900;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radio-m);
    background: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: var(--sombra-s);
}

#menu-toggle:hover {
    background: var(--color-bg);
}

/* ------------------------------------------------------------------ */
/* Responsividad                                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
    body {
        height: 100dvh;
    }

    #menu-toggle {
        display: inline-flex;
    }

    /* Sidebar fuera de pantalla; se abre con body.sidebar-abierta. */
    #barra-navegacion {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 850;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    body.sidebar-abierta #barra-navegacion {
        transform: translateX(0);
        box-shadow: 8px 0 28px rgba(20, 30, 26, 0.25);
    }

    body.sidebar-abierta::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(20, 30, 26, 0.35);
        z-index: 840;
    }

    #contenido {
        padding: 14px 16px;
    }

    #encabezado {
        margin-bottom: 14px;
    }

    #app {
        flex-direction: column;
    }

    /* El panel de detalle se vuelve una hoja inferior a pantalla. */
    #panel-detalle {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 500;
        flex: none;
        width: 100%;
        max-height: 72vh;
        margin: 0;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 32px rgba(20, 30, 26, 0.22);
        transform: translateY(0);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #panel-detalle.oculto {
        flex-basis: auto;
        width: 100%;
        margin: 0;
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
    }

    #boton-centrar {
        top: 8px;
        right: 8px;
    }

    #gestion-planos {
        flex-direction: column;
    }

    .recibo-papel {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .tarjeta-resumen {
        min-width: 100%;
    }

    #filtros-cartera {
        flex-direction: column;
    }

    #filtro-proyecto {
        min-width: 100%;
    }

    #buscador-cartera-contenedor {
        min-width: 100%;
    }

    .tabla-cartera,
    .tabla-pagos {
        min-width: 640px;
    }

    #detalle-contrato-modal .recibo-dialog {
        width: 100%;
    }

    .login-panel {
        padding: 28px 20px;
    }

    .toasts {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}
/* ------------------------------------------------------------------ */
/* Fase 3: dashboard (graficos SVG), reporte de atrasadas,             */
/* paginacion/orden en cartera y edicion de contratos.                */
/* ------------------------------------------------------------------ */

/* Boton de exportacion (enlace con aspecto de boton). */
.boton-exportar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.boton-exportar:hover {
    background: var(--color-accent);
    color: #ffffff;
}

.encabezado-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.encabezado-seccion .eyebrow {
    margin: 0;
}

/* Tarjeta de cuotas atrasadas destacada. */
.tarjeta-atrasadas {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.tarjeta-atrasadas .etiqueta-resumen,
.tarjeta-atrasadas .valor-resumen {
    color: #ffffff;
}

/* Seccion de graficos del dashboard. */
#graficos-dashboard {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.panel-grafico {
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.panel-grafico .eyebrow {
    display: block;
    margin-bottom: 14px;
}

.grafico-donut {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.grafico-donut svg {
    width: 180px;
    height: 180px;
    flex: none;
}

.grafico-donut-total {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    fill: var(--color-ink);
}

.leyenda-donut {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 160px;
}

.leyenda-donut li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--color-ink);
}

.leyenda-donut li strong {
    margin-left: auto;
    font-family: var(--font-mono);
    font-weight: 600;
}

.leyenda-porcentaje {
    color: var(--color-ink-muted);
    font-size: 0.78rem;
    min-width: 38px;
    text-align: right;
}

.leyenda-donut .punto {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
}

.grafico-barras-valor {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    fill: var(--color-ink-muted);
}

.grafico-barras-eje {
    font-family: var(--font-body);
    font-size: 0.72rem;
    fill: var(--color-ink-muted);
}

#seccion-atrasadas {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.tabla-atrasados {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

.tabla-atrasados th,
.tabla-atrasados td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
    font-size: 0.85rem;
}

.tabla-atrasados thead th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    background: var(--color-bg);
}

.tabla-atrasados .numero {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.tabla-atrasados .saldo-atrasado {
    color: var(--color-vendido);
    font-weight: 600;
}

.dias-atraso {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(166, 90, 74, 0.14);
    color: var(--color-vendido);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Paginacion de la cartera. */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.boton-paginacion {
    padding: 7px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.boton-paginacion:hover:not(:disabled) {
    border-color: var(--color-accent);
    background: var(--color-bg);
}

.boton-paginacion:disabled {
    opacity: 0.45;
    cursor: default;
}

.info-paginacion {
    font-size: 0.82rem;
    color: var(--color-ink-muted);
}

/* Orden de columnas en la cartera. */
.ordenar-columna {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.ordenar-columna:hover,
.ordenar-columna.orden-activo {
    color: var(--color-accent);
}

.indicador-orden {
    font-size: 0.68rem;
    line-height: 1;
}

/* Edicion de contrato en el detalle. */
.acciones-contrato {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.btn-editar-contrato,
.btn-eliminar-contrato,
.boton-guardar-contrato,
.boton-cancelar-edicion-contrato,
.boton-guardar-edicion,
.boton-cancelar-edicion,
.boton-editar-pago {
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-editar-contrato:hover,
.boton-guardar-contrato:hover,
.boton-guardar-edicion:hover,
.boton-editar-pago:hover {
    border-color: var(--color-accent);
    background: var(--color-bg);
}

.btn-eliminar-contrato {
    margin-top: 16px;
    border-color: rgba(166, 90, 74, 0.4);
    color: var(--color-vendido);
}

.btn-eliminar-contrato:hover {
    background: var(--color-vendido);
    border-color: var(--color-vendido);
    color: #ffffff;
}

.editar-contrato .form-editar-contrato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 4px;
}

.editar-contrato label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.editar-contrato input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.editar-contrato input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.mensaje-edicion-contrato {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-vendido);
}

.acciones-edicion {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
}

/* Edicion de una cuota dentro del historial. */
.fila-edicion-pago td {
    padding: 6px 12px;
}

.campo-edicion-pago {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.82rem;
    width: 100%;
    min-width: 110px;
}

.campo-edicion-pago:focus {
    outline: none;
    border-color: var(--color-accent);
}

.boton-cancelar-edicion:hover,
.boton-cancelar-edicion-contrato:hover {
    background: var(--color-bg);
}

/* ---------------------------------------------------------------------------
   Pagina "Contabilidad"
   --------------------------------------------------------------------------- */
/* Panel unificado de contabilidad: titulo + leyenda + tarjetas + grafico */
#grafico-contabilidad {
    max-width: var(--ancho-max, 1200px);
    width: 100%;
    margin: 0 auto 20px;
    padding: 18px 24px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-m, 8px);
}

.grafico-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.grafico-cabecera .eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* Tarjetas de resumen dentro del mismo panel, en una fila sobre las barras */
.grafico-resumen-fila {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.grafico-resumen-fila .tarjeta-resumen {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.grafico-resumen-fila .etiqueta-resumen {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

.grafico-resumen-fila .valor-resumen {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
}

.grafico-resumen-fila .tarjeta-resumen-destacada {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    border-color: var(--color-accent-dark);
    box-shadow: var(--sombra-m);
}

.grafico-resumen-fila .tarjeta-resumen-destacada .etiqueta-resumen {
    color: rgba(255, 255, 255, 0.78);
}

.grafico-resumen-fila .tarjeta-resumen-destacada .valor-resumen {
    font-size: 1.4rem;
    color: #ffffff;
}

.grafico-resumen-fila .tarjeta-resumen-destacada .tendencia-resumen {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.grafico-resumen-fila .tarjeta-resumen-destacada .valor-negativo {
    color: #ffd9d0 !important;
}

.grafico-resumen-fila .tarjeta-resumen-secundaria {
    background: var(--color-bg);
    border-style: dashed;
}

.grafico-resumen-fila .tarjeta-resumen-secundaria .etiqueta-resumen {
    font-size: 0.62rem;
}

.grafico-resumen-fila .tarjeta-resumen-secundaria .valor-resumen {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-ink-muted);
}

.grafico-resumen-fila .valor-negativo {
    color: var(--color-vendido) !important;
}

.grafico-comparativo-contenedor {
    display: flex;
    flex-direction: column;
}

.grafico-leyenda-comparativa {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    font-size: 0.78rem;
    color: var(--color-ink-muted);
}

.grafico-barras-valor.valor-ingreso {
    fill: var(--color-disponible, #6b9c7d);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
}

.grafico-barras-valor.valor-egreso {
    fill: var(--color-vendido, #a65a4a);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
}

#filtros-contabilidad {
    max-width: var(--ancho-max, 1200px);
    width: 100%;
    margin: 0 auto 16px;
    padding: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-m, 8px);
    box-shadow: var(--sombra-s);
}

#filtro-mes-contenedor input[type="month"],
#filtros-contabilidad select,
#buscador-contenedor {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.88rem;
}

#filtro-mes-contenedor input[type="month"]:focus,
#filtros-contabilidad select:focus,
#buscador-contenedor:focus-within {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--foco);
}

#buscador-contenedor {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Filtro de mes: control segmentado (‹ | mes | ›) en una sola pildora */
#filtro-mes-contenedor {
    display: flex;
    align-items: center;
    gap: 0;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

#filtro-mes-contenedor input[type="month"] {
    height: 100%;
    padding: 0 12px;
    border: none;
    border-radius: 0;
}

#btn-mes-anterior {
    border-right: 1px solid var(--color-border);
}

#btn-mes-siguiente {
    border-left: 1px solid var(--color-border);
}

.btn-mes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 100%;
    flex: none;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-mes:hover {
    color: var(--color-accent);
    background: var(--color-bg);
}

/* Panel de metricas del filtro aplicado (mini tarjetas sobre la tabla) */
.subtotales-barra {
    max-width: var(--ancho-max, 1200px);
    width: 100%;
    margin: 0 auto 16px;
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-m, 8px);
    box-shadow: var(--sombra-s);
}

.metrica-item {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.metrica-etiqueta {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
}

.metrica-valor {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-ink);
}

.metrica-item-saldo .metrica-valor {
    color: var(--color-accent);
}

/* Cabeceras de columna ordenables */
th.ordenable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.ordenable:hover {
    color: var(--color-accent);
}

.indicador-orden {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.62rem;
    vertical-align: 1px;
}

.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.boton-icono:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-bg);
}

#icono-buscar-cont {
    opacity: 0.6;
    flex-shrink: 0;
}

#buscador-movimientos {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.88rem;
}

#buscador-movimientos:focus {
    outline: none;
}

#tabla-movimientos {
    max-width: var(--ancho-max, 1200px);
    width: 100%;
    margin: 0 auto 32px;
    overflow-x: auto;
    /* Los elementos flex con overflow distinto de "visible" pierden su
       alto minimo automatico dentro de un contenedor flex-column
       (#contenido): si el contenido total supera la altura de la
       pantalla, el navegador puede encoger ESTA seccion a 0px en vez
       de dejar que #contenido haga scroll (que es lo que se busca).
       flex-shrink:0 evita que esta seccion se colapse. */
    flex-shrink: 0;
}

/* Contenedor del boton "Cargar mas movimientos" (paginacion) */
.cargar-mas-contenedor {
    max-width: var(--ancho-max, 1200px);
    width: 100%;
    margin: 16px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cargar-mas-contenedor .texto-muted {
    font-size: 0.8rem;
}

.tabla-contabilidad {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-m, 8px);
}

.tabla-contabilidad th,
.tabla-contabilidad td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    font-size: 0.88rem;
}

.tabla-contabilidad tbody tr {
    transition: background 0.15s ease;
}

.tabla-contabilidad tbody tr:hover {
    background: rgba(43, 93, 82, 0.045);
}

.tabla-contabilidad td:first-child {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-ink);
    white-space: nowrap;
}

.tabla-contabilidad thead th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    background: var(--color-bg);
}

.tabla-contabilidad td.numero,
.tabla-contabilidad th.numero {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.badge-tipo {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-tipo-ingreso {
    background: rgba(107, 156, 125, 0.18);
    color: #2b5d52;
}

.badge-tipo-egreso {
    background: rgba(166, 90, 74, 0.16);
    color: #a65a4a;
}

.badge-origen {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--color-bg);
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
}

.badge-origen-venta {
    background: #eef2f6;
    color: #3b5998;
    border-color: #d0dbe5;
}

.badge-origen-manual {
    background: var(--color-bg);
    color: var(--color-ink);
}

.badge-activa {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-activa-si {
    background: rgba(107, 156, 125, 0.18);
    color: #2b5d52;
}

.badge-activa-no {
    background: rgba(120, 120, 120, 0.15);
    color: var(--color-ink-muted);
}

.monto-ingreso {
    color: #2b5d52;
    font-weight: 600;
}

.monto-egreso {
    color: #a65a4a;
    font-weight: 600;
}

.valor-negativo {
    color: var(--color-vendido, #a65a4a) !important;
}

.referencia-tag {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-ink-muted);
}

.mov-descripcion {
    max-width: 320px;
    word-break: break-word;
}

.mov-subtexto {
    margin-top: 3px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-ink-muted);
    max-width: 320px;
    word-break: break-word;
}

/* Celda "Categoria / Origen": icono de origen (venta/manual) + nombre
   de la categoria. Los iconos sustituyen a los badges de texto largo. */
.cat-origen {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.icono-origen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-ink-muted);
}

.icono-origen[data-origen="abono"],
.icono-origen[data-origen="cuota"] {
    background: #eaf0f4;
    color: #3b5998;
    border-color: #d4dee8;
}

.categoria-nombre {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.registrado-por {
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

/* Iconos de tipo (ingreso/egreso) y estado (activa/oculta) en la tabla
   de categorias del panel lateral. */
.tipo-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.tipo-ico-ingreso {
    background: rgba(107, 156, 125, 0.18);
    color: #2b5d52;
}

.tipo-ico-egreso {
    background: rgba(166, 90, 74, 0.16);
    color: #a65a4a;
}

.dot-estado {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: middle;
}

.dot-activa {
    background: var(--color-disponible, #6b9c7d);
    box-shadow: 0 0 0 3px rgba(107, 156, 125, 0.18);
}

.dot-oculta {
    background: #b9c0bb;
    box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.12);
}

/* Pagina de usuarios: tabla y formulario (modal) */
.tabla-usuarios {
    width: 100%;
    border-collapse: collapse;
}

.tabla-usuarios th,
.tabla-usuarios td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.tabla-usuarios thead th {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    background: var(--color-bg);
}

.tabla-usuarios td.centrado,
.tabla-usuarios th.centrado {
    text-align: center;
}

.tabla-usuarios .estado-usuario {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--color-ink-muted);
}

.tabla-usuarios .rol-usuario {
    font-family: var(--font-mono, "IBM Plex Mono", monospace);
    font-size: 0.78rem;
}

.form-usuario {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-usuario .campo-grupo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-usuario label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.form-usuario input,
.form-usuario select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.88rem;
}

.form-usuario input:focus,
.form-usuario select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-usuario input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.campo-ayuda {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    margin: 0;
}

/* Categorias de movimiento: panel lateral (drawer) que se desliza desde
   la derecha al pulsar el engranaje junto al filtro de categoria.
   A diferencia de los modales centrados, el contenedor nunca se oculta
   con display:none (eso romperia la animacion de entrada): se mantiene
   visible con opacity/visibility y se anima el desplazamiento del panel. */
#categorias-modal.categorias-modal-panel {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#categorias-modal.categorias-modal-panel:not(.oculto) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#categorias-modal.categorias-modal-panel .categorias-drawer {
    width: min(440px, 100%);
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

#categorias-modal.categorias-modal-panel:not(.oculto) .categorias-drawer {
    transform: translateX(0);
}

.categorias-panel-cabecera {
    padding-bottom: 4px;
}

.categorias-panel-titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

.categorias-panel-subtitulo {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--color-ink-muted);
}

/* Categorias de movimiento (contenido del modal) */
.categorias-modal-contenido {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

#categorias-form {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radio-s, 5px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* El .oculto global usa un selector de clase (especificidad menor que
   un ID), asi que sin esta regla el "display: flex" de arriba siempre
   ganaba y el formulario quedaba visible desde que cargaba la pagina,
   sin haber hecho clic en "+ Nueva categoria". */
#categorias-form.oculto {
    display: none;
}

.form-categoria {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.form-categoria .campo-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-categoria .campo-grupo-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.form-categoria label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.form-categoria input[type="text"],
.form-categoria select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-categoria input[type="text"]::placeholder {
    color: var(--color-ink-muted);
    opacity: 0.7;
}

.form-categoria input[type="text"]:focus,
.form-categoria select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(43, 93, 82, 0.15);
}

.form-categoria .acciones-form {
    display: flex;
    gap: 12px;
    width: 100%;
}

.form-categoria .acciones-form .boton-accion {
    flex: 1;
    height: 44px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.form-categoria .boton-primario {
    background: var(--color-accent);
    color: #ffffff;
}

.form-categoria .boton-primario:hover {
    background: var(--color-accent-dark);
}

.form-categoria .boton-secundario {
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
}

.form-categoria .boton-secundario:hover {
    background: var(--color-bg);
    border-color: var(--color-ink-muted);
}

.tabla-categorias {
    width: 100%;
    border-collapse: collapse;
}

.tabla-categorias th,
.tabla-categorias td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.tabla-categorias thead th {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-muted);
    background: var(--color-bg);
}

.tabla-categorias td.centrado,
.tabla-categorias th.centrado {
    text-align: center;
}

/* Modal formulario movimiento */
#movimiento-modal .recibo-dialog {
    width: 100%;
    max-width: 640px;
    padding: 0;
    border-radius: 12px;
}

.movimiento-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.movimiento-titulo {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-ink);
}

#movimiento-modal .recibo-cerrar {
    position: static;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.form-movimiento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding: 24px 24px 22px;
}

.form-movimiento .campo-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-movimiento .campo-grupo--full {
    grid-column: 1 / -1;
}

.form-movimiento label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.form-movimiento input,
.form-movimiento select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-movimiento input::placeholder {
    color: var(--color-ink-muted);
    opacity: 0.7;
}

.form-movimiento input:focus,
.form-movimiento select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(43, 93, 82, 0.15);
}

.form-movimiento .mensaje-formulario {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-vendido);
}

.form-movimiento .acciones-form {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
}

.form-movimiento .acciones-form .boton-accion {
    flex: 1;
    height: 44px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.92rem;
}

.form-movimiento .boton-primario {
    background: var(--color-accent);
    color: #ffffff;
}

.form-movimiento .boton-primario:hover {
    background: var(--color-accent-dark);
}

.form-movimiento .boton-secundario {
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
}

.form-movimiento .boton-secundario:hover {
    background: var(--color-bg);
    border-color: var(--color-ink-muted);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
}

.btn-tabla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    color: var(--color-ink-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-tabla:hover {
    background: var(--color-bg);
    color: var(--color-ink);
}

.btn-tabla-eliminar:hover {
    background: rgba(166, 90, 74, 0.12);
    color: var(--color-vendido, #a65a4a);
}

.acciones-tabla {
    display: flex;
    gap: 6px;
    align-items: center;
}

@media (max-width: 900px) {
    #graficos-dashboard {
        grid-template-columns: 1fr;
    }

    .form-categoria {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .grafico-donut {
        flex-direction: column;
        text-align: center;
    }

    .leyenda-donut {
        min-width: 0;
        width: 100%;
    }

    .editar-contrato .form-editar-contrato {
        grid-template-columns: 1fr;
    }

    .tabla-atrasados,
    .tabla-contabilidad {
        min-width: 640px;
    }

    #filtros-contabilidad {
        flex-direction: column;
        align-items: stretch;
    }

    #filtro-mes-contenedor {
        align-self: flex-start;
    }

    #filtros-contabilidad select,
    #buscador-contenedor {
        width: 100%;
        min-width: 0;
    }

    .metrica-item {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .form-categoria {
        grid-template-columns: 1fr;
    }
}