/* =============================================================================
   Liquidar - hoja de estilos principal
   Paleta tomada del logo: violeta profundo #260050 -> violeta vivo #480082.
   Sin frameworks: es CSS plano para que no haga falta build ni npm.
   ============================================================================= */

:root {
    /* marca */
    --violeta-900: #1a0036;
    --violeta-800: #260050;
    --violeta-700: #350070;
    --violeta-600: #480082;
    --violeta-500: #5c2a9d;
    --violeta-200: #d8cce8;
    --violeta-100: #ede7f4;
    --violeta-50:  #f7f4fb;

    /* neutros */
    --tinta:     #1d1b20;
    --tinta-2:   #55505d;
    --tinta-3:   #8b8595;
    --borde:     #e4e0ea;
    --fondo:     #f8f8f8;
    --superficie:#ffffff;

    /* semanticos */
    --ok:      #1a7f52;
    --ok-bg:   #e6f4ed;
    --alerta:  #9a6700;
    --alerta-bg:#fdf5e2;
    --error:   #b3261e;
    --error-bg:#fdeceb;
    --info:    var(--violeta-600);
    --info-bg: var(--violeta-100);

    --radio:   10px;
    --radio-sm: 6px;
    --sombra:    0 1px 2px rgba(26, 0, 54, .06), 0 2px 8px rgba(26, 0, 54, .04);
    --sombra-md: 0 4px 16px rgba(26, 0, 54, .10);
    --lateral: 248px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tinta);
    background: var(--fondo);
}

a { color: var(--violeta-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 650; line-height: 1.25; }
h1 { font-size: 1.5rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* ---------------------------------------------------------------- estructura */
.app { display: flex; min-height: 100vh; }

.lateral {
    width: var(--lateral);
    flex: 0 0 var(--lateral);
    background: linear-gradient(170deg, var(--violeta-800) 0%, var(--violeta-900) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.lateral .marca {
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
/* El lockup ya trae la palabra LIQUIDAR: no hace falta repetirla debajo. */
.lateral .marca img { width: 138px; height: auto; display: block; }
.lateral .marca .bajada { font-size: .7rem; color: rgba(255, 255, 255, .5); margin-top: 9px; }

.lateral nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.lateral .grupo {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: rgba(255, 255, 255, .42); padding: 14px 10px 6px; font-weight: 600;
}
.lateral nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; margin-bottom: 2px;
    color: rgba(255, 255, 255, .84);
    border-radius: var(--radio-sm);
    font-size: .875rem;
    transition: background .14s, color .14s;
}
.lateral nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.lateral nav a.activo { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.lateral nav a .ico { width: 17px; text-align: center; opacity: .85; flex: 0 0 17px; }

.lateral .pie {
    padding: 12px 16px; font-size: .72rem;
    color: rgba(255, 255, 255, .45);
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.encabezado-fijo { position: sticky; top: 0; z-index: 20; }

.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    padding: 14px 26px;
    display: flex; align-items: center; gap: 16px;
}

/* Franja propia para los botones de accion de cada pantalla. */
/* Los botones de accion van SIEMPRE a la derecha, en toda la aplicacion: el
   ojo los busca siempre en el mismo lugar. Lo que no es una accion -- un
   buscador, un filtro -- se queda a la izquierda con .a-la-izquierda. */
.barra-acciones {
    background: var(--violeta-50);
    border-bottom: 1px solid var(--borde);
    padding: 10px 26px;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; flex-wrap: wrap;
}
.barra-acciones form { display: inline-flex; }

/* Empuja al borde izquierdo y manda el resto a la derecha. */
.a-la-izquierda { margin-right: auto; }

/* Pie de un formulario: Guardar y Cancelar, tambien a la derecha. */
.acciones-formulario {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; flex-wrap: wrap;
    margin-top: 18px;
}
.barra .titulo { flex: 1; min-width: 0; }
.barra .titulo h1 { margin: 0; }
.barra .titulo .miga { font-size: .78rem; color: var(--tinta-3); margin-bottom: 1px; }


.contenido { padding: 22px 26px 60px; flex: 1; }

/* -------------------------------------------------------------------- tarjeta */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    margin-bottom: 18px;
    overflow: hidden;
}
.tarjeta > .cabecera {
    padding: 13px 18px;
    border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(to bottom, #fff, #fcfbfd);
}
.tarjeta > .cabecera h2, .tarjeta > .cabecera h3 { margin: 0; flex: 1; }
.tarjeta > .cuerpo { padding: 18px; }
.tarjeta > .cuerpo.sin-relleno { padding: 0; }

/* --------------------------------------------------------------------- grilla */
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------ tarjetas de dato */
.metrica {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 15px 17px;
    box-shadow: var(--sombra);
    position: relative;
    overflow: hidden;
}
.metrica::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--violeta-600);
}
.metrica.ok::before    { background: var(--ok); }
.metrica.alerta::before{ background: var(--alerta); }
.metrica.error::before { background: var(--error); }
.metrica .rotulo {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tinta-3); font-weight: 600; margin-bottom: 5px;
}
.metrica .valor {
    font-size: 1.5rem; font-weight: 680; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.metrica .detalle { font-size: .78rem; color: var(--tinta-2); margin-top: 3px; }

/* --------------------------------------------------------------------- tablas */
.tabla-marco { overflow-x: auto; }
table.datos { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.datos th {
    text-align: left; font-weight: 600; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-2); background: var(--violeta-50);
    padding: 9px 12px; border-bottom: 1px solid var(--borde);
    white-space: nowrap; position: sticky; top: 0;
}
table.datos td {
    padding: 9px 12px; border-bottom: 1px solid #f1eff5; vertical-align: top;
}
table.datos tbody tr:hover td { background: var(--violeta-50); }
table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos tfoot td {
    padding: 10px 12px; font-weight: 680;
    background: var(--violeta-100); border-top: 2px solid var(--violeta-600);
}
table.datos .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.datos .centro { text-align: center; }
table.datos .apretado td, table.datos.apretado td { padding: 6px 10px; }
table.datos .fila-grupo td {
    background: var(--violeta-100); font-weight: 650; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--violeta-800);
}

/* --------------------------------------------------------------------- botones */
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: var(--radio-sm);
    border: 1px solid transparent; background: var(--violeta-600); color: #fff;
    font-size: .85rem; font-weight: 570; font-family: inherit;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .14s, box-shadow .14s, border-color .14s;
}
.btn:hover { background: var(--violeta-700); text-decoration: none; box-shadow: var(--sombra-md); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.inactivo { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn.suave { background: var(--superficie); color: var(--violeta-700); border-color: var(--borde); }
.btn.suave:hover { background: var(--violeta-50); border-color: var(--violeta-200); }
.btn.fantasma { background: transparent; color: var(--tinta-2); border-color: var(--borde); }
.btn.fantasma:hover { background: #fff; color: var(--tinta); }
.btn.peligro { background: var(--error); }
.btn.peligro:hover { background: #8f1e17; }
.btn.exito { background: var(--ok); }
.btn.exito:hover { background: #146341; }
.btn.chico { padding: 5px 11px; font-size: .78rem; }

/* ------------------------------------------------------------------- etiquetas */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 620; letter-spacing: .02em;
    background: var(--violeta-100); color: var(--violeta-700);
    white-space: nowrap;
}
.chip.ok     { background: var(--ok-bg);     color: var(--ok); }
.chip.alerta { background: var(--alerta-bg); color: var(--alerta); }
.chip.error  { background: var(--error-bg);  color: var(--error); }
.chip.gris   { background: #f0eef3;          color: var(--tinta-2); }
.chip .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ formularios */
.campo { margin-bottom: 14px; }
.campo label {
    display: block; font-size: .78rem; font-weight: 600;
    color: var(--tinta-2); margin-bottom: 5px;
}
.campo .ayuda { font-size: .74rem; color: var(--tinta-3); margin-top: 4px; }

input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], select, textarea {
    width: 100%; padding: 8px 11px;
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    font-family: inherit; font-size: .875rem; color: var(--tinta);
    background: var(--superficie);
    transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--violeta-500);
    box-shadow: 0 0 0 3px rgba(72, 0, 130, .12);
}
input.num, td input.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Lo calcula el sistema: se ve que es un dato, no un campo para completar. */
input[readonly] {
    background: var(--violeta-50);
    border-style: dashed;
    color: var(--tinta-2);
    cursor: default;
}
input[readonly]:focus { border-color: var(--borde); box-shadow: none; }
textarea { min-height: 76px; resize: vertical; line-height: 1.45; }

.fila-campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------------------------------------------------------------------- avisos */
.aviso {
    padding: 11px 15px; border-radius: var(--radio-sm);
    border-left: 3px solid; margin-bottom: 16px; font-size: .86rem;
}
.aviso.ok     { background: var(--ok-bg);     border-color: var(--ok);     color: #10593a; }
.aviso.error  { background: var(--error-bg);  border-color: var(--error);  color: #8f1e17; }
.aviso.alerta { background: var(--alerta-bg); border-color: var(--alerta); color: #7a5200; }
.aviso.info   { background: var(--info-bg);   border-color: var(--info);   color: var(--violeta-800); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

/* ----------------------------------------------------------------------- varios */
.vacio { padding: 44px 20px; text-align: center; color: var(--tinta-3); }
.vacio .ico { font-size: 2.2rem; opacity: .35; display: block; margin-bottom: 8px; }
.vacio p { margin: 0 0 14px; }

.tenue { color: var(--tinta-3); }
.mini { font-size: .78rem; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.derecha { text-align: right; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }

.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .86rem; }
.lista-datos dt { color: var(--tinta-3); font-weight: 500; }
.lista-datos dd { margin: 0; font-weight: 550; }

.barra-pasos { display: flex; gap: 0; margin-bottom: 18px; }
.barra-pasos .paso {
    flex: 1; padding: 9px 14px; font-size: .8rem; text-align: center;
    background: var(--superficie); border: 1px solid var(--borde);
    border-right: 0; color: var(--tinta-3);
}
.barra-pasos .paso:first-child { border-radius: var(--radio-sm) 0 0 var(--radio-sm); }
.barra-pasos .paso:last-child  { border-radius: 0 var(--radio-sm) var(--radio-sm) 0; border-right: 1px solid var(--borde); }
.barra-pasos .paso.hecho   { background: var(--violeta-100); color: var(--violeta-700); font-weight: 600; }
.barra-pasos .paso.actual  { background: var(--violeta-600); color: #fff; font-weight: 650; border-color: var(--violeta-600); }

@media (max-width: 900px) {
    .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.c3, .grid.c2 { grid-template-columns: 1fr; }
    .lateral { position: fixed; left: -100%; z-index: 100; transition: left .2s; }
    .lateral.abierta { left: 0; }
    .contenido, .barra, .barra-acciones { padding-left: 14px; padding-right: 14px; }
}

@media print {
    .lateral, .barra-acciones, .btn { display: none !important; }
    body { background: #fff; }
    .tarjeta { border: 0; box-shadow: none; }
}

/* =============================================================================
   Carga de egresos: dos columnas y zona para soltar el comprobante
   ============================================================================= */
.dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.zona-soltar {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; text-align: center;
    min-height: 220px; padding: 26px 18px;
    border: 2px dashed var(--violeta-200);
    border-radius: var(--radio);
    background: var(--violeta-50);
    color: var(--tinta-3);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.zona-soltar:hover,
.zona-soltar.encima {
    border-color: var(--violeta-500);
    background: var(--violeta-100);
    color: var(--violeta-700);
}
.zona-soltar .icono { font-size: 2.4rem; line-height: 1; opacity: .5; }
.zona-soltar .texto { font-size: .92rem; font-weight: 560; line-height: 1.45; }
.zona-soltar.encima .icono { opacity: .9; }

.zona-soltar .aviso-heic {
    max-width: 34ch; line-height: 1.5; opacity: .75;
    padding-top: 7px; border-top: 1px solid var(--violeta-200);
}

/* Lo que quedo afuera al arrastrar: tipo no aceptado o archivo muy pesado. */
.error-archivos:empty { display: none; }
.error-archivos {
    margin: 10px 0 0; padding: 9px 12px;
    background: var(--error-bg);
    border: 1px solid var(--error);
    border-radius: var(--radio-sm);
    color: var(--error);
    font-size: .79rem; line-height: 1.55;
}

ul.elegidos { list-style: none; margin: 12px 0 0; padding: 0; }
ul.elegidos li {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 11px; margin-bottom: 6px;
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-sm);
    font-size: .82rem;
}
ul.elegidos li span:first-child { flex: 1; min-width: 0; word-break: break-all; }
ul.elegidos li button {
    background: none; border: 0; color: var(--error);
    cursor: pointer; font-size: .78rem; padding: 0; font-family: inherit;
}

details.tarjeta > summary { list-style: none; }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary::before { content: "\25B8 "; color: var(--violeta-600); }
details.tarjeta[open] > summary::before { content: "\25BE "; }

@media (max-width: 980px) {
    .dos-columnas { grid-template-columns: 1fr; }
    .zona-soltar { min-height: 150px; }
}

@media (max-width: 760px) {
    .selector-consorcio { border-right: 0; padding-right: 0; }
    .selector-consorcio .rotulo { display: none; }
    .selector-consorcio select { min-width: 140px; }
}

/* =============================================================================
   Pantalla de entrada: tarjetas de consorcio
   ============================================================================= */
.tarjetas-consorcio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}

.tarjeta-consorcio {
    display: flex; flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 17px 18px 14px;
    color: inherit; text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tarjeta-consorcio:hover {
    text-decoration: none;
    border-color: var(--violeta-500);
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}

.tarjeta-consorcio .encabezado { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; }
.tarjeta-consorcio .inicial {
    flex: 0 0 42px; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: linear-gradient(145deg, var(--violeta-600), var(--violeta-800));
    color: #fff; font-size: 1.2rem; font-weight: 700;
}
.tarjeta-consorcio .identidad { min-width: 0; }
.tarjeta-consorcio .nombre {
    font-weight: 660; font-size: 1rem; line-height: 1.3; color: var(--violeta-800);
}
.tarjeta-consorcio .domicilio { font-size: .8rem; color: var(--tinta-3); margin-top: 2px; }

.tarjeta-consorcio .cifras {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding: 12px 0; border-top: 1px solid #f1eff5; border-bottom: 1px solid #f1eff5;
}
.tarjeta-consorcio .cifras .rotulo {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tinta-3); font-weight: 650; margin-bottom: 3px;
}
.tarjeta-consorcio .cifras .dato {
    font-size: 1.15rem; font-weight: 680; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.tarjeta-consorcio .cifras .dato.chico { font-size: .84rem; font-weight: 620; }
.tarjeta-consorcio .cifras .dato.rojo  { color: var(--error); }
.tarjeta-consorcio .cifras .dato.verde { color: var(--ok); }

.tarjeta-consorcio .pie-tarjeta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 12px; min-height: 24px;
}
.tarjeta-consorcio .entrar {
    margin-left: auto; font-size: .82rem; font-weight: 640; color: var(--violeta-600);
}

/* La ultima tarjeta: agregar */
.tarjeta-consorcio.agregar {
    align-items: center; justify-content: center; text-align: center; gap: 4px;
    border: 2px dashed var(--violeta-200);
    background: var(--violeta-50);
    box-shadow: none;
    min-height: 196px;
}
.tarjeta-consorcio.agregar:hover {
    border-color: var(--violeta-500); background: var(--violeta-100);
}
.tarjeta-consorcio.agregar .mas {
    font-size: 2.3rem; line-height: 1; color: var(--violeta-600); font-weight: 300;
}
.tarjeta-consorcio.agregar .rotulo-agregar {
    font-weight: 640; color: var(--violeta-700); font-size: .95rem;
}
.tarjeta-consorcio.agregar .ayuda-agregar {
    font-size: .76rem; color: var(--tinta-3); max-width: 210px;
}

/* ------------------------------------------------- menu sin consorcio elegido */
.lateral nav .sin-consorcio {
    padding: 18px 12px; font-size: .8rem; line-height: 1.5;
    color: rgba(255, 255, 255, .42);
}
.lateral nav .ico svg { display: block; }

/* ------------------------------------------------- dialogo de alta rapida */
dialog.dialogo {
    border: 0; border-radius: var(--radio); padding: 24px;
    width: min(560px, 92vw);
    box-shadow: 0 16px 48px rgba(26, 0, 54, .28);
    color: var(--tinta);
}
dialog.dialogo::backdrop { background: rgba(26, 0, 54, .45); }
dialog.dialogo h2 { margin-bottom: 4px; }
dialog.dialogo .acciones-dialogo {
    display: flex; gap: 8px; margin-top: 18px;
    padding-top: 16px; border-top: 1px solid var(--borde);
}

/* =============================================================================
   Barra superior: consorcio a la izquierda, usuario y acciones a la derecha
   ============================================================================= */
.barra-consorcio {
    display: flex; align-items: center; gap: 10px;
    padding-right: 16px; margin-right: 2px;
    border-right: 1px solid var(--borde);
    max-width: 300px;
}
.barra-consorcio .inicial {
    flex: 0 0 32px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--violeta-600), var(--violeta-800));
    color: #fff; font-weight: 700; font-size: .95rem;
}
.barra-consorcio .nombre {
    font-weight: 660; font-size: .95rem; color: var(--violeta-800);
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.barra-usuario {
    display: flex; align-items: center; gap: 10px;
    padding-left: 16px; margin-left: 2px;
    border-left: 1px solid var(--borde);
}
.barra-usuario .datos-usuario { display: flex; flex-direction: column; line-height: 1.25; }
.barra-usuario .datos-usuario .nombre { font-size: .84rem; font-weight: 620; }
.barra-usuario .datos-usuario .rol { font-size: .72rem; color: var(--tinta-3); }

.icono-barra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 50%; border: 1px solid var(--borde);
    background: var(--superficie); color: var(--tinta-2);
    font-size: .95rem; font-weight: 650; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: background .14s, color .14s, border-color .14s;
}
.icono-barra:hover {
    background: var(--violeta-50); color: var(--violeta-700);
    border-color: var(--violeta-200); text-decoration: none;
}
/* Cerrar sesion: boton con texto, no un simbolo suelto. Es la unica salida del
   sistema y tiene que leerse como tal; en rojo solo al pasar por encima, para
   que no compita con las acciones de la pantalla. */
.btn-salir {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 13px;
    border-radius: 999px; border: 1px solid var(--borde);
    background: var(--superficie); color: var(--tinta-2);
    font-size: .8rem; font-weight: 600; font-family: inherit;
    white-space: nowrap; cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.btn-salir svg { width: 15px; height: 15px; flex: 0 0 15px; }
.btn-salir:hover {
    background: var(--error-bg); color: var(--error); border-color: #f3c9c6;
}
.btn-salir:focus-visible {
    outline: 2px solid var(--violeta-500); outline-offset: 2px;
}

@media (max-width: 1100px) {
    .btn-salir .texto { display: none; }
    .btn-salir { padding: 0; width: 32px; justify-content: center; }
}

@media (max-width: 860px) {
    .barra-consorcio { max-width: 150px; padding-right: 10px; }
    .barra-usuario .datos-usuario { display: none; }
}

/* ------------------------------------------------------------ pasos de ayuda */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.pasos > li {
    counter-increment: paso;
    position: relative; padding: 0 0 22px 46px;
    border-left: 2px solid var(--violeta-100);
    margin-left: 15px;
}
.pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pasos > li::before {
    content: counter(paso);
    position: absolute; left: -16px; top: -2px;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--violeta-600); color: #fff;
    font-size: .82rem; font-weight: 700;
}
.pasos h3 { margin: 3px 0 5px; font-size: .96rem; }
.pasos p  { margin: 0 0 6px; color: var(--tinta-2); font-size: .88rem; }

/* ------------------------------------------------- buscador de conceptos */
.buscador-concepto { position: relative; }
.buscador-concepto input[type=text] {
    background: var(--violeta-50);
    border-color: var(--violeta-200);
    font-weight: 550;
}
.buscador-concepto .resultados {
    position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
    margin-top: 4px; max-height: 340px; overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--violeta-200); border-radius: var(--radio-sm);
    box-shadow: var(--sombra-md);
}
.buscador-concepto .resultado {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; text-align: left; padding: 9px 12px;
    background: none; border: 0; border-bottom: 1px solid #f1eff5;
    cursor: pointer; font-family: inherit;
}
.buscador-concepto .resultado:last-child { border-bottom: 0; }
.buscador-concepto .resultado:hover,
.buscador-concepto .resultado.marcado { background: var(--violeta-50); }
.buscador-concepto .linea1 { display: flex; align-items: center; gap: 7px; font-size: .88rem; }
.buscador-concepto .linea2 { font-size: .78rem; color: var(--violeta-700); font-weight: 560; }
.buscador-concepto .linea3 { font-size: .74rem; color: var(--tinta-3); line-height: 1.35; }

/* =============================================================================
   Gastos agrupados por rubro, como se imprime la expensa
   ============================================================================= */
.rubro { border-bottom: 1px solid var(--borde); }
.rubro:last-of-type { border-bottom: 0; }

.cabecera-rubro {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 18px;
    background: var(--violeta-50);
}
.rubro.vacio-rubro .cabecera-rubro { background: #fbfafc; }

.cabecera-rubro .numero {
    flex: 0 0 24px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; background: var(--violeta-600); color: #fff;
    font-size: .76rem; font-weight: 700;
}
.rubro.vacio-rubro .cabecera-rubro .numero { background: var(--tinta-3); }

.cabecera-rubro .titulo-rubro {
    flex: 1; font-weight: 650; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em; color: var(--violeta-800);
}
.rubro.vacio-rubro .cabecera-rubro .titulo-rubro { color: var(--tinta-3); }
.cabecera-rubro .cantidad { font-size: .76rem; color: var(--tinta-3); }
.cabecera-rubro .total-rubro {
    font-weight: 700; font-variant-numeric: tabular-nums; min-width: 120px; text-align: right;
}
.cabecera-rubro .agregar-rubro {
    flex: 0 0 24px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--violeta-200);
    background: #fff; color: var(--violeta-600);
    font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none;
}
.cabecera-rubro .agregar-rubro:hover {
    background: var(--violeta-600); color: #fff; text-decoration: none;
}

.rubro-sin-gastos {
    padding: 9px 18px 11px 53px; font-size: .8rem; color: var(--tinta-3); font-style: italic;
}

.total-general {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 18px; background: var(--violeta-800); color: #fff;
    font-weight: 700; letter-spacing: .04em; font-size: .88rem;
}
.total-general .num { font-variant-numeric: tabular-nums; font-size: 1.05rem; }

/* rubro quitado de un periodo */
.rubro.oculto-rubro .cabecera-rubro { opacity: .5; background: #fafafa; }
.cabecera-rubro form { display: inline-flex; }
.cabecera-rubro .quitar-rubro {
    width: 24px; height: 24px; flex: 0 0 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--borde);
    background: #fff; color: var(--tinta-3);
    font-size: .95rem; line-height: 1; cursor: pointer; font-family: inherit;
}
.cabecera-rubro .quitar-rubro:hover { background: var(--error-bg); color: var(--error); border-color: #f3c9c6; }
.rubro.oculto-rubro .quitar-rubro:hover { background: var(--ok-bg); color: var(--ok); border-color: #bfe3d1; }

/* =============================================================================
   Abrir nuevas expensas
   ============================================================================= */
.abrir-expensas .paso-abrir { margin-bottom: 16px; }
.abrir-expensas .paso-abrir:last-of-type { margin-bottom: 12px; }

.abrir-expensas .rotulo-paso {
    display: flex; align-items: center; gap: 8px;
    font-weight: 650; font-size: .92rem; margin-bottom: 8px;
}
.abrir-expensas .rotulo-paso .n {
    width: 20px; height: 20px; flex: 0 0 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--violeta-600); color: #fff;
    font-size: .72rem; font-weight: 700;
}

/* El paso 1 entra en un solo renglon: pregunta, campo y aviso. */
.abrir-expensas .paso-abrir.en-linea {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.abrir-expensas .paso-abrir.en-linea .rotulo-paso { margin-bottom: 0; }

.abrir-expensas .elegir-periodo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abrir-expensas .elegir-periodo input {
    width: auto; min-width: 190px;
    font-size: .95rem; font-weight: 620; padding: 7px 12px;
    color: var(--violeta-800);
    background: var(--violeta-50); border-color: var(--violeta-200);
}
.abrir-expensas .cuando {
    font-size: .8rem;
    background: var(--violeta-100); color: var(--violeta-700);
    padding: 4px 11px; border-radius: 999px; font-weight: 570;
}

.opciones-arranque {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.opciones-arranque .opcion { cursor: pointer; }
.opciones-arranque .opcion input { position: absolute; opacity: 0; pointer-events: none; }

/* El icono va al lado del titulo, no arriba: ahorra un renglon por tarjeta. */
.opciones-arranque .marco {
    display: grid; height: 100%;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icono   titulo"
        "detalle detalle"
        "pie     pie";
    align-content: start;
    gap: 2px 8px;
    padding: 11px 13px;
    border: 2px solid var(--borde); border-radius: var(--radio);
    background: var(--superficie);
    transition: border-color .14s, background .14s, box-shadow .14s;
}
.opciones-arranque .opcion:hover .marco { border-color: var(--violeta-200); }
.opciones-arranque .opcion input:checked + .marco {
    border-color: var(--violeta-600);
    background: var(--violeta-50);
    box-shadow: 0 0 0 3px rgba(72, 0, 130, .09);
}
.opciones-arranque .marco .icono {
    grid-area: icono; align-self: center;
    font-size: 1rem; line-height: 1; color: var(--violeta-600);
}
.opciones-arranque .marco .titulo {
    grid-area: titulo; align-self: center;
    font-weight: 660; font-size: .92rem;
}
.opciones-arranque .marco .detalle {
    grid-area: detalle;
    font-size: .8rem; color: var(--tinta-2); line-height: 1.38;
    margin-top: 3px;
}
.opciones-arranque .marco .pie-opcion {
    grid-area: pie; padding-top: 5px;
    font-size: .73rem; font-weight: 620; color: var(--violeta-600);
}

.opciones-arranque .opcion.inhabilitada { cursor: not-allowed; }
.opciones-arranque .opcion.inhabilitada .marco { opacity: .5; background: #fbfafc; }

.btn.grande { padding: 9px 18px; font-size: .92rem; }

/* ------------------------------------------- acciones de fila en un listado */
td.acciones-fila { white-space: nowrap; }
td.acciones-fila form { display: inline; }

.accion {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; margin-right: 4px;
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    background: var(--superficie); color: var(--tinta-2);
    font-size: .78rem; font-weight: 570; font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.accion:hover {
    background: var(--violeta-50); color: var(--violeta-700);
    border-color: var(--violeta-200); text-decoration: none;
}
.accion .ico { font-size: .86rem; line-height: 1; }

.accion.editar { color: var(--violeta-700); border-color: var(--violeta-200); background: var(--violeta-50); }
.accion.editar:hover { background: var(--violeta-100); }

.accion.borrar:hover { background: var(--error-bg); color: var(--error); border-color: #f3c9c6; }

.accion.inactiva { opacity: .35; cursor: not-allowed; }
.accion.inactiva:hover { background: var(--superficie); color: var(--tinta-2); border-color: var(--borde); }

/* =============================================================================
   Indicador de espera (ver public/js/espera.js)
   ============================================================================= */
#cargando {
    position: fixed; inset: 0; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    background: rgba(248, 248, 248, .72);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s;
}
#cargando.visible { opacity: 1; visibility: visible; }

#cargando .caja-espera {
    min-width: 260px; max-width: 380px;
    padding: 28px 32px;
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 18px 44px rgba(38, 0, 80, .18);
}

#cargando .rueda {
    width: 38px; height: 38px; margin: 0 auto 16px;
    border: 3px solid var(--violeta-100);
    border-top-color: var(--violeta-600);
    border-radius: 50%;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

#cargando .texto-espera {
    margin: 0; font-size: .95rem; font-weight: 640; color: var(--violeta-800);
}
#cargando .nota-espera {
    margin: 6px 0 0; font-size: .76rem; color: var(--tinta-3); line-height: 1.4;
}

/* La capa cubre toda la ventana, asi que ya se come los clics de atras. */
body.esperando { cursor: progress; }

/* Quien prefiera menos movimiento ve el cartel igual, pero sin la rueda girando. */
@media (prefers-reduced-motion: reduce) {
    #cargando .rueda { animation-duration: 2.4s; }
    #cargando { transition: none; }
}

/* =============================================================================
   Paginacion (ver resources/views/paginacion.blade.php)
   ============================================================================= */
.paginacion {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 11px 4px 0;
    font-size: .82rem;
}
.paginacion .cuenta { color: var(--tinta-3); }
.paginacion .cuenta strong { color: var(--tinta-2); font-weight: 640; }

/* Los pasos van a la derecha, como el resto de los controles. */
.paginacion .pasos { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }

.paginacion .paso {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 30px; padding: 0 9px;
    border: 1px solid var(--borde); border-radius: var(--radio-sm);
    background: var(--superficie); color: var(--tinta-2);
    font-size: .8rem; font-weight: 560; text-decoration: none;
    transition: background .14s, color .14s, border-color .14s;
}
.paginacion a.paso:hover {
    background: var(--violeta-50); color: var(--violeta-700);
    border-color: var(--violeta-200); text-decoration: none;
}
.paginacion .paso.actual {
    background: var(--violeta-700); border-color: var(--violeta-700);
    color: #fff; font-weight: 650;
}
.paginacion .paso.inactivo { opacity: .38; }
.paginacion .paso.puntos { border: 0; background: none; min-width: 18px; padding: 0; }

@media (max-width: 620px) {
    .paginacion .cuenta { width: 100%; }
    .paginacion .pasos { margin-left: 0; }
}

/* ------------------------------------------ orden de las tarjetas de consorcio */
.encabezado-panel {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: -6px 0 18px;
}
.encabezado-panel > p { margin: 0; }

/* Los controles van a la derecha, como el resto. */
.orden-tarjetas { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.orden-tarjetas .rotulo-orden {
    font-size: .76rem; color: var(--tinta-3); margin-right: 3px;
}
.orden-tarjetas .opcion-orden {
    padding: 5px 11px;
    border: 1px solid var(--borde); border-radius: 999px;
    background: var(--superficie); color: var(--tinta-2);
    font-size: .78rem; font-weight: 570; text-decoration: none;
    transition: background .14s, color .14s, border-color .14s;
}
.orden-tarjetas .opcion-orden:hover {
    background: var(--violeta-50); color: var(--violeta-700);
    border-color: var(--violeta-200); text-decoration: none;
}
.orden-tarjetas .opcion-orden.activa {
    background: var(--violeta-700); border-color: var(--violeta-700);
    color: #fff; font-weight: 640;
}

/* ------------------------------------------ zona de acciones irreversibles */
.zona-peligro {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 22px; padding: 13px 16px;
    border: 1px solid var(--borde); border-radius: var(--radio);
    background: #fcfbfd;
}
.zona-peligro .texto { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.zona-peligro .texto b { font-size: .88rem; }
.zona-peligro form { margin-left: auto; }

/* =============================================================================
   Dialogo de confirmacion (ver public/js/confirmar.js)
   ============================================================================= */
.capa-confirmar {
    position: fixed; inset: 0; z-index: 950;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(24, 0, 48, .42);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .16s ease, visibility .16s;
}
.capa-confirmar.visible { opacity: 1; visibility: visible; }

.capa-confirmar .dialogo {
    width: 100%; max-width: 420px;
    padding: 22px 24px 18px;
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: 0 24px 60px rgba(38, 0, 80, .32), 0 2px 8px rgba(0, 0, 0, .14);
    transform: translateY(8px) scale(.98);
    transition: transform .16s ease;
}
.capa-confirmar.visible .dialogo { transform: none; }

.capa-confirmar h2 { margin: 0 0 7px; font-size: 1.02rem; }
.capa-confirmar .mensaje {
    margin: 0; font-size: .87rem; color: var(--tinta-2); line-height: 1.5;
}
.capa-confirmar .acciones {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; margin-top: 20px;
}

/* Mientras el dialogo esta abierto, la pagina de atras no se mueve. */
body.con-dialogo { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .capa-confirmar, .capa-confirmar .dialogo { transition: none; }
    .capa-confirmar .dialogo { transform: none; }
}

/* ------------------------------------------- accesos del periodo (expensas)
   Van arriba de la liquidacion porque en la fila del listado los botones
   quedaban fuera de pantalla: nueve columnas de datos mas cinco acciones. */
.accesos-periodo {
    display: grid; gap: 12px; margin-bottom: 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.accesos-periodo .acceso {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borde); border-radius: var(--radio);
    color: var(--tinta); text-decoration: none;
    transition: border-color .14s, background .14s, box-shadow .14s;
}
.accesos-periodo a.acceso:hover {
    border-color: var(--violeta-500);
    background: var(--violeta-50);
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(38, 0, 80, .08);
}
.accesos-periodo .acceso .ico {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 38px;
    background: var(--violeta-50); color: var(--violeta-700);
    border-radius: 9px; font-size: 1.1rem;
}
.accesos-periodo a.acceso:hover .ico { background: var(--violeta-100); }
.accesos-periodo .acceso .texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accesos-periodo .acceso .texto b { font-size: .9rem; }
.accesos-periodo .acceso.apagado { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------ panel lateral de detalle */
.capa-panel {
    position: fixed; inset: 0; z-index: 940;
    display: flex; justify-content: flex-end;
    background: rgba(24, 0, 48, .42);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility .18s;
}
.capa-panel.visible { opacity: 1; visibility: visible; }

.capa-panel .panel-lateral {
    display: flex; flex-direction: column;
    width: 100%; max-width: 440px; height: 100%;
    background: var(--superficie);
    box-shadow: -18px 0 50px rgba(38, 0, 80, .26);
    transform: translateX(24px);
    transition: transform .18s ease;
}
.capa-panel.visible .panel-lateral { transform: none; }

.panel-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--borde);
}
.panel-cabecera h2 { margin: 0; font-size: 1rem; }
.panel-cerrar {
    background: none; border: 0; cursor: pointer; padding: 4px 6px;
    font-size: 1rem; line-height: 1; color: var(--tinta-3); border-radius: var(--radio-sm);
}
.panel-cerrar:hover { background: var(--violeta-50); color: var(--violeta-700); }

.panel-cuerpo { padding: 18px 20px 24px; overflow-y: auto; flex: 1; }

/* Pares etiqueta/valor, que es como se ve casi todo el detalle. */
.panel-cuerpo .dato { padding: 9px 0; border-bottom: 1px solid var(--borde); }
.panel-cuerpo .dato:last-child { border-bottom: 0; }
.panel-cuerpo .dato .et {
    display: block; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--tinta-3); margin-bottom: 3px;
}
.panel-cuerpo .dato .vl { font-size: .9rem; line-height: 1.45; }
.panel-cuerpo .dato .vl.vacio { color: var(--tinta-3); font-style: italic; }

/* Fila de numeros: gastos, conceptos, proveedores. */
.panel-cuerpo .cifras { display: flex; gap: 10px; margin: 14px 0 4px; }
.panel-cuerpo .cifras div {
    flex: 1; text-align: center; padding: 11px 6px;
    background: var(--violeta-50); border-radius: var(--radio-sm);
}
.panel-cuerpo .cifras .n { display: block; font-size: 1.25rem; font-weight: 600; color: var(--violeta-700); }
.panel-cuerpo .cifras .t { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); }

.panel-acciones {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde);
}

@media (max-width: 600px) {
    .capa-panel .panel-lateral { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .capa-panel, .capa-panel .panel-lateral { transition: none; }
    .capa-panel .panel-lateral { transform: none; }
}

/* Un grupo del menu que arranca seccion nueva: linea arriba y mas aire. */
.lateral .grupo.separado {
    margin-top: 14px; padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* La fila del historial que se esta viendo. */
table.datos tr.fila-activa > td { background: var(--violeta-50); }
table.datos tr.fila-activa > td:first-child { box-shadow: inset 3px 0 0 var(--violeta-600); }

/* Selector de mes en la barra de acciones (liquidacion de sueldos). */
.elegir-mes { display: flex; align-items: center; gap: 9px; }
.elegir-mes label { font-size: .78rem; font-weight: 600; color: var(--tinta-2); }
.elegir-mes input {
    width: auto; padding: 5px 10px; font-size: .86rem; font-weight: 600;
    color: var(--violeta-800); background: var(--superficie); border-color: var(--violeta-200);
}
.elegir-mes .cuando {
    font-size: .76rem; color: var(--violeta-700);
    background: var(--violeta-100); padding: 4px 10px; border-radius: 999px;
}

/* =============================================================================
   Recibo de sueldo en pantalla: se parece al papel que se imprime
   ============================================================================= */
.recibo-papel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px 24px 18px;
}

.recibo-papel .cab {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;
    padding-bottom: 14px; border-bottom: 2px solid var(--tinta);
}
.recibo-papel .cab .centro { text-align: center; }
.recibo-papel .cab .derecha { text-align: right; }
.recibo-papel .ley {
    font-weight: 700; font-size: .92rem; line-height: 1.3; letter-spacing: .02em;
}
.recibo-papel .rot {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tinta-3); display: block;
}
.recibo-papel .val { font-weight: 660; font-size: .95rem; }
.recibo-papel .val.chico { font-weight: 570; font-size: .84rem; }

.recibo-papel .legajo {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px;
    padding: 14px 0; border-bottom: 1px solid var(--borde);
}
.recibo-papel .legajo .val { font-size: .88rem; }

.recibo-papel table.renglones { width: 100%; border-collapse: collapse; margin-top: 4px; }
.recibo-papel table.renglones th {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-3); font-weight: 650; text-align: left;
    padding: 9px 8px; border-bottom: 1px solid var(--tinta);
}
.recibo-papel table.renglones td {
    padding: 4px 8px; font-size: .85rem;
    border-bottom: 1px solid var(--borde);
}
.recibo-papel table.renglones td.codigo { font-weight: 700; font-family: var(--mono, monospace); }
.recibo-papel table.renglones .centro, .recibo-papel table.renglones th.centro { text-align: center; }
.recibo-papel table.renglones .num,    .recibo-papel table.renglones th.num    { text-align: right; }

.recibo-papel table.renglones tr.totales td {
    border-top: 2px solid var(--tinta); border-bottom: 0;
    font-weight: 700; padding: 11px 8px;
}
.recibo-papel table.renglones tr.neto td {
    border-bottom: 0; font-weight: 700; font-size: 1.05rem;
    padding: 4px 8px 12px; color: var(--violeta-800);
}

/* Los campos de la grilla: se ven como texto hasta que los tocas. */
.recibo-papel input.en-linea {
    width: 100%; padding: 4px 7px; font-size: .85rem;
    border: 1px solid transparent; background: transparent; border-radius: var(--radio-sm);
}
.recibo-papel input.en-linea:hover { border-color: var(--borde); background: #fcfbfd; }
.recibo-papel input.en-linea:focus { border-color: var(--violeta-500); background: #fff; }

.recibo-papel .agregar-renglon {
    margin-top: 14px; padding: 13px 14px;
    background: var(--violeta-50); border: 1px solid var(--violeta-200);
    border-radius: var(--radio);
}
.recibo-papel .agregar-renglon form {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.recibo-papel .agregar-renglon .campo { margin-bottom: 0; }
.recibo-papel .agregar-renglon .campo:first-child { flex: 1; min-width: 260px; }
.recibo-papel .agregar-renglon .campo input { width: 120px; }

.recibo-papel .pie-recibo {
    margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borde);
    font-size: .85rem;
}

/* ------------------------------------------ grupos desplegables del menu */
.lateral .grupo-desplegable { margin-top: 6px; }
.lateral .grupo-desplegable + .grupo-desplegable { margin-top: 0; }

/* La primera seccion desplegable abre bloque nuevo: linea arriba. */
.lateral .grupo-desplegable[data-grupo="sueldos"] {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.lateral .grupo-desplegable > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin: 1px 0;
    border-radius: var(--radio-sm);
    color: rgba(255, 255, 255, .88);
    font-size: .875rem; font-weight: 570;
    cursor: pointer; list-style: none;
    transition: background .14s, color .14s;
}
.lateral .grupo-desplegable > summary::-webkit-details-marker { display: none; }
.lateral .grupo-desplegable > summary::marker { content: ''; }
.lateral .grupo-desplegable > summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lateral .grupo-desplegable > summary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55); outline-offset: -2px;
}

.lateral .grupo-desplegable > summary .rotulo { flex: 1; }
.lateral .grupo-desplegable > summary .flecha {
    display: inline-flex; color: rgba(255, 255, 255, .55);
    /* Mismo tiempo y misma curva que la altura del submenu (menu.js). */
    transition: transform .34s cubic-bezier(.33, .78, .28, 1);
}
.lateral .grupo-desplegable[open] > summary .flecha { transform: rotate(180deg); }

/* Los hijos van indentados, alineados con el texto del titulo. */
/* La altura la anima menu.js; el overflow lo pone y lo saca el script. */
.lateral .grupo-desplegable .submenu { padding: 2px 0 6px; }
.lateral .grupo-desplegable .submenu a {
    padding-left: 42px; font-size: .845rem;
    color: rgba(255, 255, 255, .72);
}
.lateral .grupo-desplegable .submenu a:hover { color: #fff; }
.lateral .grupo-desplegable .submenu a.activo { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .lateral .grupo-desplegable > summary .flecha { transition: none; }
}