/* =====================================================================
   Campo Romero · Sistema de Gestión — hoja base (mobile-first)
   Identidad: indigo (#5568EA) + lavanda. Tipo: Montserrat.
   ===================================================================== */

:root {
    --brand:      #5568EA;
    --brand-2:    #4453D6;
    --accent:     #5568EA;
    --accent-2:   #7C8AF2;
    --ok:         #22A97D;
    --danger:     #E24C4C;
    --danger-bg:  #FCECEC;
    --info-bg:    #EEF0FE;

    --bg:         #F5F6FD;
    --surface:    #FFFFFF;
    --surface-2:  #F3F4FE;
    --border:     #E7E8F5;
    --text:       #2C2D48;
    --muted:      #83859E;
    --muted-2:    #B2B4CC;

    --font-brand: 'Montserrat', system-ui, sans-serif;
    --font-sans:  'Montserrat', system-ui, sans-serif;

    --radius:     14px;
    --radius-sm:  10px;
    --shadow:     0 6px 22px rgba(60, 70, 160, .09);
    --shadow-lg:  0 18px 50px rgba(50, 60, 150, .16);

    --sidebar-w:  264px;
    --topbar-h:   60px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

body { font-size: 15px; line-height: 1.45; }

a { color: inherit; text-decoration: none; }

.ico { display: inline-block; vertical-align: middle; flex: none; }

/* ===================== Botones ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, transform .05s ease;
    background: var(--surface-2);
    color: var(--text);
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
    opacity: .5; cursor: not-allowed; filter: none !important;
    transform: none !important; pointer-events: none;
}
/* Variante "se ve deshabilitado" SIN el atributo disabled real — para botones que necesitan
   seguir recibiendo el click y mostrar una advertencia (ej. "Elegí un cliente") en vez de no
   hacer nada en absoluto, que es lo que pasa con un <button disabled> de verdad. */
.btn.is-disabled { opacity: .5; filter: none !important; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { filter: brightness(1.12); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--ghost.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--ghost.is-active:hover { background: var(--brand-2); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--block { width: 100%; }

/* ===================== Campos / inputs ===================== */
.campo { display: block; margin-bottom: 16px; }
.campo .select, .campo .sb { width: 100%; }
.campo__label {
    display: block;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--muted);
    margin-bottom: 6px;
}
.campo__control { position: relative; display: flex; align-items: center; }
.campo__icono {
    position: absolute;
    left: 12px;
    display: inline-flex;
    color: var(--muted-2);
    pointer-events: none;
}
.campo__control .input { padding-left: 40px; }
.campo__toggle {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
}
.campo__toggle:hover { background: var(--surface-2); color: var(--text); }

.input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--muted-2); }
.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(85, 104, 234, .18);
}
select.input {
    padding-right: 38px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2383859E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer;
}

/* ===================== Alertas ===================== */
.alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 14px;
}
.alerta--error { background: var(--danger-bg); color: var(--danger); }
.alerta--info  { background: var(--info-bg);  color: var(--accent); }
.alerta .ico { flex: none; }

/* ===================== LOGIN ===================== */
body.login {
    min-height: 100dvh;
    background: radial-gradient(120% 120% at 50% 0%, #8A97F5 0%, var(--brand) 50%, #3A46B8 100%);
}
.login__wrap {
    min-height: 100dvh;
    padding: 40px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login__card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 30px 24px 22px;
}
.login__brand { text-align: center; margin-bottom: 14px; }
.login__logo { max-width: 190px; width: 70%; height: auto; }
.login__head { text-align: center; margin-bottom: 20px; }
.login__title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 24px;
    color: var(--brand);
    margin: 0 0 4px;
}
.login__sub { color: var(--muted); margin: 0; font-size: 14px; }
.login__form { margin-top: 6px; }
.login__form .btn { margin-top: 6px; height: 44px; }
.login__foot { text-align: center; color: var(--muted-2); font-size: 12px; margin: 18px 0 2px; }

/* ===================== APP SHELL ===================== */
body.app { min-height: 100dvh; }

.app__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 30, 74, .55);
    z-index: 40;
    opacity: 0;
    transition: opacity .2s ease;
}
body.menu-abierto .app__backdrop { opacity: 1; }

/* Sidebar (off-canvas en mobile) */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--brand) 0%, #3B47C4 100%);
    color: #E9EBFC;
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s ease;
}
body.menu-abierto .sidebar { transform: translateX(0); }

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sidebar__logo { height: 34px; width: auto; }
.sidebar__brand-txt {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    flex: 1;
}
.sidebar__close {
    display: inline-flex;
    border: none;
    background: transparent;
    color: #E9EBFC;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
}
.sidebar__close:hover { background: rgba(255, 255, 255, .12); }

.sidebar__nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu--n1 { margin: 2px 0 4px 12px; }
.menu__subtitulo {
    margin: 18px 12px 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #8A8FBE;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.menu--n0 > .menu__subtitulo:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.menu__separador { margin: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    color: #C9CDF3;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.menu__link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.menu__link--pronto { color: #8A8FBE; cursor: default; }
.menu__link--pronto:hover { background: transparent; color: #8A8FBE; }
.menu__pronto { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.menu__item.is-active > .menu__link {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent-2);
}

.sidebar__foot { padding: 12px 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sidebar__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    color: #C9CDF3;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 14px;
}
.sidebar__logout:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Main */
.app__main { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.topbar__burger {
    display: inline-flex;
    border: none;
    background: transparent;
    color: var(--brand);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
}
.topbar__burger:hover { background: var(--surface-2); }
.topbar__title {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    margin: 0;
    flex: 1;
}
.topbar__user { display: flex; align-items: center; gap: 8px; }
.topbar__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--brand);
}
.topbar__name {
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text);
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content { flex: 1; padding: 20px 16px 40px; }

/* ===================== Dashboard ===================== */
.dash__hero { margin-bottom: 20px; }
.dash__hello {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 22px;
    color: var(--brand);
    margin: 0 0 4px;
}
.dash__muted { color: var(--muted); margin: 0; }
.dash__empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px 20px;
    text-align: center;
    box-shadow: var(--shadow);
}
.dash__empty p { margin: 0 0 4px; }

/* ===================== 404 ===================== */
.error404 { text-align: center; padding: 60px 20px; }
.error404__code {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 64px;
    color: var(--brand);
    margin: 0;
}
.error404__msg { color: var(--muted); margin: 6px 0 20px; }

/* ===================== Desktop (>= 900px) ===================== */
@media (min-width: 900px) {
    .sidebar { transform: translateX(0); }
    .sidebar__close { display: none; }
    .app__main { margin-left: var(--sidebar-w); }
    .topbar__burger { display: none; }
    .app__backdrop { display: none; }
    .content { padding: 28px 32px 48px; }
    body { font-size: 15px; }
}

/* =====================================================================
   Módulos de datos: page head, toolbar, tabla responsive, pager, modales
   ===================================================================== */

.page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.page__title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 21px;
    color: var(--brand);
    margin: 0 0 2px;
}
.page__sub { color: var(--muted); margin: 0; font-size: 13.5px; }

/* ---------- Toolbar ---------- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.toolbar__buscar { position: relative; flex: 1 1 240px; min-width: 0; }
.toolbar__buscar-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted-2); pointer-events: none; display: inline-flex;
}
.toolbar__buscar .input { padding-left: 40px; height: 36px; }
.toolbar__acciones { display: flex; align-items: center; gap: 10px; }

/* Cobros CC: el filtro de Cliente es el principal, va ensanchado y al lado del buscador. */
[data-cc-cobros] .toolbar .field-inline { flex: 2 1 280px !important; width: auto !important; }
[data-cc-cobros] .toolbar .field-inline .sb { flex: 1 !important; min-width: 0 !important; width: auto !important; }
[data-cc-cobros] .toolbar .field-inline .sb__trigger { width: 100% !important; }
[data-cc-cobros] .toolbar__buscar { flex: 1 1 160px !important; min-width: 120px !important; }

/* Cobros CC: el número de la card "Total cobrado" más grande, ocupando más espacio. */
[data-cc-cobros] .iva-stat--total { justify-content: center; padding: 22px 20px; }
[data-cc-cobros] .iva-stat--total .iva-stat__val { font-size: 38px; }
.toolbar__cant { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }

.select {
    height: 42px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2383859E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text);
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer;
}
.select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,130,96,.15); }

/* ---------- Select buscable (combobox con buscador, para listas largas) ---------- */
.sb { position: relative; }
.sb__native {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sb__trigger { width: 100%; text-align: left; display: flex; align-items: center; }
.sb__trigger-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.sb__trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,130,96,.15); }
.sb__trigger:disabled { opacity: .5; cursor: default; }
.sb__panel {
    /* fixed (no absolute): las coordenadas las calcula JS en cada apertura (ver
       select-buscable.js::posicionar()) — así el desplegable no queda recortado por el
       overflow-y:auto de .modal__body en modales largos. */
    position: fixed; z-index: 200; min-width: 220px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); padding: 8px;
    display: flex; flex-direction: column;
}
/* El selector de clase por sí solo le gana en cascada al [hidden] del UA stylesheet (misma
   especificidad, pero autor > user-agent) — sin esto, el panel "cerrado" se veía igual porque
   el atributo hidden dejaba de esconderlo. */
.sb__panel[hidden] { display: none; }
.sb__buscar { margin-bottom: 6px; flex: 0 0 auto; }
.sb__buscar-input {
    width: 100%; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--bg); padding: 0 12px; font-size: 13px; font-family: var(--font-sans); color: var(--text);
}
.sb__buscar-input:focus { outline: none; border-color: var(--accent); }
.sb__lista { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sb__opt {
    display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
    background: none; border: none; font-family: var(--font-sans); font-size: 13.5px; color: var(--text); cursor: pointer;
}
.sb__opt:hover { background: var(--bg); }
.sb__opt.is-activa { background: var(--surface-2); color: var(--accent); font-weight: 600; }
.sb__vacio { text-align: center; color: var(--muted); font-size: 13px; padding: 14px 0; margin: 0; }

/* ---------- Tabla (filas tipo tarjeta) ---------- */
.tabla-scroll { overflow-x: auto; padding: 2px 2px 4px; }
#usuariosTabla.is-loading { opacity: .55; pointer-events: none; transition: opacity .1s; }

.tabla { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 12px; }

/* Encabezado: barra contenedora que lo separa de las filas */
.tabla thead th {
    text-align: left; background: #E7E9F7; white-space: nowrap; vertical-align: middle;
    padding: 11px 14px;
    font-family: var(--font-brand); font-weight: 700; font-size: 12.5px; color: var(--muted);
}
/* Los sortables traen su padding en el botón interno → el th va sin padding */
.tabla thead th.th-orden { padding: 0; }
.tabla thead th.col-toggle { border-radius: 10px 0 0 10px; }
.tabla thead th.col-acc { border-radius: 0 10px 10px 0; }
/* Redondeo por defecto para tablas sin columnas col-toggle/col-acc (ej. Resumen). */
.tabla thead th:first-child { border-radius: 10px 0 0 10px; }
.tabla thead th:last-child { border-radius: 0 10px 10px 0; }
@media (min-width: 761px) {
    .tabla thead th.col-cod { border-radius: 10px 0 0 10px; }
}
.th-orden__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 14px;
    border: none; background: transparent; cursor: pointer;
    font-family: var(--font-brand); font-weight: 700; font-size: 12.5px;
    letter-spacing: .01em; color: var(--muted);
}
.th-orden__btn:hover { color: var(--brand); }
.th-orden.is-active .th-orden__btn { color: var(--brand); }
.th-orden__btn .ico { color: var(--muted-2); }
.th-orden.is-active .th-orden__btn .ico { color: var(--accent); }
.tabla th.col-acc {
    padding: 11px 16px; text-align: right;
    font-family: var(--font-brand); font-weight: 700; font-size: 12.5px;
    letter-spacing: .01em; color: var(--muted);
}

/* Fila = tarjeta separada */
.tabla tbody tr.fila { box-shadow: 0 1px 2px rgba(60, 70, 160, .05); transition: box-shadow .14s ease; }
.tabla tbody tr.fila td {
    padding: 13px 14px; vertical-align: middle;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
/* Esquinas redondeadas de la tarjeta según la primera/última celda VISIBLE */
.tabla tbody tr.fila td.col-toggle { border-left: 1px solid var(--border); border-radius: 12px 0 0 12px; }
.tabla tbody tr.fila td.col-acc { border-right: 1px solid var(--border); border-radius: 0 12px 12px 0; }
@media (min-width: 761px) {
    .tabla tbody tr.fila td.col-cod { border-left: 1px solid var(--border); border-radius: 12px 0 0 12px; }
}
/* Redondeo por defecto para tablas sin col-toggle/col-acc (ej. reportes de solo lectura). */
.tabla tbody tr.fila td:first-child { border-left: 1px solid var(--border); border-radius: 12px 0 0 12px; }
.tabla tbody tr.fila td:last-child { border-right: 1px solid var(--border); border-radius: 0 12px 12px 0; }
.tabla tbody tr.fila:hover { box-shadow: 0 8px 20px rgba(60, 70, 160, .13); }
.tabla tbody tr.fila.is-sel td { background: var(--info-bg); border-color: #D3D8FB; }

.tabla .col-acc { text-align: right; white-space: nowrap; }
.tabla .muted { color: var(--muted-2); }
.col-cod { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Que Código y Acciones se ajusten a su contenido (no se estiren) */
.tabla .col-cod, .tabla .col-acc { width: 1%; white-space: nowrap; }

.fila-vacia td {
    text-align: center; color: var(--muted); padding: 40px 14px !important;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.fila-vacia td .ico { display: block; margin: 0 auto 8px; color: var(--muted-2); }

/* Acciones */
.acciones { display: inline-flex; gap: 4px; justify-content: flex-end; }
.ico-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--muted); cursor: pointer;
    transition: background .12s, color .12s;
}
.ico-btn:hover { background: var(--surface-2); color: var(--brand); }
.ico-btn--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Chevron toggle (mobile) */
.col-toggle { width: 40px; }
.btn-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: var(--surface-2); color: var(--brand); cursor: pointer;
}
.btn-toggle .ico { transition: transform .2s ease; }
.fila.is-open .btn-toggle .ico { transform: rotate(90deg); }

/* Fila detalle (solo mobile) */
.fila-det > td { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px 14px !important; }
.det { margin: 0; display: grid; gap: 8px; }
.det > div { display: flex; gap: 8px; }
.det dt { margin: 0; min-width: 110px; color: var(--muted); font-weight: 600; font-size: 13px; }
.det dd { margin: 0; font-size: 13.5px; }

/* Pager */
.pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.pager__info { color: var(--muted); font-size: 13px; }
.pager__nav { display: flex; align-items: center; gap: 4px; }
.pager__btn {
    min-width: 36px; height: 36px; padding: 0 8px;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--text); cursor: pointer;
    font-family: var(--font-brand); font-weight: 600; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}
.pager__btn:hover:not(:disabled):not(.is-active) { background: var(--surface-2); }
.pager__btn.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pager__btn:disabled { opacity: .4; cursor: default; }
.flip { transform: rotate(180deg); }
.pager__dots { color: var(--muted-2); padding: 0 2px; }

/* ---------- Modales ---------- */
body.modal-open { overflow: hidden; }
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(24,10,4,.5);
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
}
.modal-overlay[hidden] { display: none; }
.modal {
    width: 100%; max-width: 440px;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 36px); display: flex; flex-direction: column;
    animation: modalIn .16s ease;
}
.modal--sm { max-width: 380px; }
@keyframes modalIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.modal__title { font-family: var(--font-brand); font-weight: 700; font-size: 17px; color: var(--brand); margin: 0; }
.modal__close {
    display: inline-flex; border: none; background: transparent; color: var(--muted);
    cursor: pointer; padding: 4px; border-radius: 8px;
}
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__texto { margin: 0 0 12px; color: var(--text); }
.vp-det-info { margin-bottom: 14px; padding: 12px 14px; background: var(--surface-2); border-radius: 10px; }
.vp-det-info__fila { font-size: 13.5px; color: var(--text); line-height: 1.6; }
.modal__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 14px 18px; border-top: 1px solid var(--border);
}
.modal__foot .btn { margin-left: 0; }
.modal__foot .modal__msg { margin-right: auto; }
.modal__msg { font-size: 13px; color: var(--muted); }
.modal__msg.is-error { color: var(--danger); }
.campo__hint { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.check-row { display: flex; gap: 18px; flex-wrap: wrap; }
.check-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.check-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* Utilidades responsive */
.solo-desktop { display: none; }

/* ---------- Breakpoint tabla ---------- */
@media (max-width: 760px) {
    .tabla .col-sec { display: none; }
    .btn-toggle { display: inline-flex; }
    .tabla thead th.col-toggle { display: table-cell; }
    /* Encabezado fijo: .tabla-scroll ya es contenedor de scroll (overflow-x: auto fuerza
       overflow-y: auto), así que el sticky se ancla a top:0 de ESE contenedor, no a la página;
       por eso necesita su propia altura acotada con scroll vertical interno. */
    .tabla-scroll { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .tabla thead th { position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 var(--border); }
}
@media (min-width: 761px) {
    .col-toggle { display: none; }
    .fila-det { display: none; }
    .solo-desktop { display: inline; }
}

/* =====================================================================
   Módulo de FILTROS combinables (reutilizable)
   ===================================================================== */

/* Botón de filtros: badge con cantidad activa */
#usrFiltros { position: relative; }
.btn.tiene-filtros { border-color: var(--accent); color: var(--accent); }
.btn.is-open { background: var(--surface-2); }
.filtros-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
    background: var(--accent); color: #fff; border-radius: 9px;
    font-size: 11px; font-weight: 700;
}

/* Panel */
.filtros {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    margin-bottom: 12px;
}
.filtros[hidden] { display: none; }
.filtros__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros__lbl { font-family: var(--font-brand); font-weight: 600; font-size: 13px; color: var(--muted); }

/* Segmentado TODAS / CUALQUIERA */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.seg {
    border: none; background: transparent; cursor: pointer;
    padding: 6px 12px; border-radius: 7px;
    font-family: var(--font-brand); font-weight: 700; font-size: 11.5px;
    letter-spacing: .02em; color: var(--muted);
}
.seg.is-active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Lista de condiciones */
.filtros__lista { display: flex; flex-direction: column; gap: 8px; }
.filtro-row { display: grid; grid-template-columns: 170px 160px 1fr auto; gap: 8px; align-items: center; }
.filtro-row .select, .filtro-row .input { height: 40px; }
.filtro-valores { display: flex; align-items: center; gap: 6px; min-width: 0; }
.filtro-valores .input { flex: 1; min-width: 0; }
.filtro-y { color: var(--muted); font-size: 13px; }
.filtro-quitar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1;
}
.filtro-quitar:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }

.filtros__add {
    align-self: flex-start; margin-top: 10px;
    border: 1px dashed var(--border); background: transparent; color: var(--accent);
    padding: 8px 12px; border-radius: 9px; cursor: pointer;
    font-family: var(--font-brand); font-weight: 600; font-size: 13px;
}
.filtros__add:hover { background: var(--surface-2); }
.filtros__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.filtros__foot .btn { height: 36px; }

/* Chips de filtros activos */
.chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chips[hidden] { display: none; }
.chips__comb { font-family: var(--font-brand); font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--info-bg); color: var(--accent);
    padding: 5px 6px 5px 11px; border-radius: 20px; font-size: 13px; font-weight: 500;
}
.chip__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; border-radius: 50%;
    background: rgba(0,130,96,.15); color: var(--accent); cursor: pointer; font-size: 14px; line-height: 1;
}
.chip__x:hover { background: var(--accent); color: #fff; }
.chip-btn {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    background: var(--info-bg); color: var(--accent); border: none;
    padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
    font-family: var(--font-sans); cursor: pointer; margin-top: 2px;
}
.chip-btn:hover { background: var(--accent); color: #fff; }
.iva-stat--total .chip-btn { background: rgba(255,255,255,.2); color: #fff; }
.iva-stat--total .chip-btn:hover { background: #fff; color: var(--brand); }
.chips__limpiar { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12.5px; text-decoration: underline; }
.chips__limpiar:hover { color: var(--danger); }

@media (max-width: 640px) {
    .filtro-row { grid-template-columns: 1fr 1fr; }
    .filtro-row .filtro-campo { grid-column: 1 / 2; }
    .filtro-row .filtro-op { grid-column: 2 / 3; }
    .filtro-row .filtro-valores { grid-column: 1 / 2; }
    .filtro-row .filtro-quitar { grid-column: 2 / 3; justify-self: end; }
}

/* ---------- Header: espaciador (título quitado, se repite en la página) ---------- */
.topbar__spacer { flex: 1; }

/* ---------- Sidebar: marca de agua (logo translúcido, cortado, abajo) ---------- */
/* El sidebar ya es position:fixed (contexto para el absolute); solo recortamos. */
.sidebar { overflow: hidden; }
.sidebar__brand, .sidebar__nav, .sidebar__foot { position: relative; z-index: 1; }
.sidebar__marca {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    width: 230px;
    max-width: 90%;
    opacity: .07;
    filter: brightness(0) invert(1);   /* fuerza blanco sobre el verde */
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ---------- Tabla: avatar, celda usuario, contador, pill de estado ---------- */
.page__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 24px; padding: 0 9px; margin-left: 8px;
    background: var(--brand); color: #fff;
    border-radius: 12px; font-size: 12.5px; font-weight: 700;
    vertical-align: middle; box-shadow: 0 3px 8px rgba(85, 104, 234, .35);
}
.usuario-cell { display: flex; align-items: center; gap: 10px; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
}
/* Dos colores tenues de la paleta (índigo / violeta) */
.avatar--a { background: #E4E7FB; color: #5568EA; }
.avatar--b { background: #ECE6FA; color: #8155D8; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* Pill de estado (reutilizable) */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 20px;
    font-size: 12.5px; font-weight: 600; line-height: 1;
    background: var(--surface-2); color: var(--muted);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--ok    { background: #E7F6F0; color: #159968; }
.pill--warn  { background: #FEF3E2; color: #D98324; }
.pill--info  { background: var(--info-bg); color: var(--brand); }
.pill--danger{ background: var(--danger-bg); color: var(--danger); }

/* =====================================================================
   Dashboard: hero de bienvenida + tarjetas de accesos
   ===================================================================== */
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(115deg, var(--brand) 0%, #6E7CF1 55%, #8B98F6 100%);
    color: #fff; border-radius: 18px;
    padding: 28px 30px; margin-bottom: 24px;
    box-shadow: 0 12px 30px rgba(85, 104, 234, .28);
}
.hero__content { position: relative; z-index: 1; max-width: 560px; }
.hero__fecha { opacity: .85; font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.hero__hello { font-family: var(--font-brand); font-weight: 800; font-size: 26px; margin: 0 0 8px; }
.hero__sub { opacity: .92; margin: 0; font-size: 14.5px; line-height: 1.5; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; }
.hero::before { width: 230px; height: 230px; right: -60px; top: -90px; background: rgba(255,255,255,.10); }
.hero::after  { width: 170px; height: 170px; right: 90px; bottom: -110px; background: rgba(255,255,255,.07); }

.dash__seccion { font-family: var(--font-brand); font-weight: 700; font-size: 15px; color: var(--text); margin: 0 0 14px; }

.resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.tarjeta {
    position: relative; display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 16px 18px; box-shadow: var(--shadow); color: inherit;
    transition: transform .1s ease, box-shadow .14s ease;
}
a.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(60, 70, 160, .15); }
.tarjeta__icono {
    width: 48px; height: 48px; border-radius: 13px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--c, var(--brand));
}
.tarjeta__data { display: flex; flex-direction: column; min-width: 0; }
.tarjeta__valor { font-family: var(--font-brand); font-weight: 800; font-size: 22px; color: var(--text); line-height: 1.1; }
.tarjeta__label { color: var(--muted); font-size: 13px; }
.tarjeta__ir { margin-left: auto; color: var(--muted-2); }
a.tarjeta:hover .tarjeta__ir { color: var(--brand); }
.tarjeta--pronto { opacity: .72; }
.tarjeta--pronto .tarjeta__icono { filter: grayscale(.15); }
.tarjeta__tag {
    position: absolute; top: 10px; right: 10px;
    font-size: 10.5px; font-weight: 700; color: var(--muted);
    background: var(--surface-2); padding: 2px 7px; border-radius: 8px;
}

/* ---------- Pager: "Ver" (cant por página) junto a la info ---------- */
.pager__right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pager__cant { white-space: nowrap; }
.pager__info { white-space: nowrap; }
.pager__cant { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.select--sm { height: 34px; padding: 0 32px 0 10px; font-size: 13px; background-position: right 12px center; }

/* Email debajo del usuario en la celda */
.usuario-cell__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.usuario-cell__mail { font-size: 11px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.campo__opt { color: var(--muted-2); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* =====================================================================
   IVA Ventas: selector de período, tarjetas de totales, tabla numérica
   ===================================================================== */
.field-inline { display: inline-flex; align-items: center; gap: 8px; }
.field-inline__label { font-size: 13px; color: var(--muted); font-weight: 600; }
.toolbar__right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Tarjetas de totales del mes */
.iva-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.iva-stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    padding: 15px 18px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 6px;
}
.iva-stat__label { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.iva-stat__val { font-family: var(--font-brand); font-weight: 800; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.iva-stat__sub { color: var(--muted-2); font-size: 11.5px; }
.iva-stat--total { background: linear-gradient(120deg, var(--brand) 0%, #6E7CF1 100%); border: none; box-shadow: 0 8px 22px rgba(85,104,234,.28); }
.fp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.fp-lista li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.fp-lista li span { color: var(--muted); }
.fp-lista li strong { font-family: var(--font-brand); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-lista__vacio { color: var(--muted-2) !important; font-size: 12.5px; }
.iva-stat--total .iva-stat__label { color: rgba(255,255,255,.85); }
.iva-stat--total .iva-stat__val { color: #fff; }
.iva-stat--pronto { opacity: .8; border-style: dashed; }

/* Columnas numéricas (derecha, tabular) */
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla th.num { text-align: right; }
.num--fuerte { font-weight: 700; color: var(--text); }

/* ---------- Saldo Cliente (Cuentas Corrientes) ---------- */
.saldo-positivo { color: var(--danger); font-weight: 700; }
.saldo-negativo { color: var(--ok); font-weight: 700; }
/* Para caja (no cuenta corriente de cliente): positivo=bueno=verde, al revés que saldo-positivo/negativo de arriba. */
.money-in { color: var(--ok); font-weight: 700; }
.money-out { color: var(--danger); font-weight: 700; }
.banner-aviso {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #FEF3E2; border-left: 3px solid #D98324; border-radius: var(--radius-sm);
    padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text);
}
.banner-aviso__ico { color: #D98324; display: inline-flex; flex: 0 0 auto; }
.banner-aviso .btn { margin-left: auto; }
.fila--si td { background: #FFF9E9; }

/* ---------- Consolidado Mensual (Cuentas Corrientes) ---------- */
.tabla tbody tr.fila--clickeable { cursor: pointer; }
.tabla tbody tr.fila--clickeable:hover td { background: var(--surface-2); }
.panel-excluidos { margin-top: 16px; }
.panel-excluidos__toggle {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left;
    background: var(--danger-bg); border: none; border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: var(--text); cursor: pointer;
}
.panel-excluidos__toggle svg:last-child { margin-left: auto; }
#cmPanelExcl { margin-top: 8px; }
[data-saldo-cliente] .toolbar .sc-cliente,
[data-saldos-iniciales-cc] .toolbar .sc-cliente,
[data-carga-datos] .toolbar .sc-cliente,
[data-carga-lector] .toolbar .sc-cliente { flex: 2 1 260px !important; width: auto !important; }
[data-saldo-cliente] .toolbar .sc-cliente .sb,
[data-saldos-iniciales-cc] .toolbar .sc-cliente .sb,
[data-carga-datos] .toolbar .sc-cliente .sb,
[data-carga-lector] .toolbar .sc-cliente .sb { flex: 1 !important; min-width: 0 !important; width: auto !important; }
[data-saldo-cliente] .toolbar .sc-cliente .sb__trigger,
[data-saldos-iniciales-cc] .toolbar .sc-cliente .sb__trigger,
[data-carga-datos] .toolbar .sc-cliente .sb__trigger,
[data-carga-lector] .toolbar .sc-cliente .sb__trigger { width: 100% !important; }

[data-facturas-carni] .toolbar .fac-proveedor { flex: 1 1 100% !important; width: auto !important; order: -1; }
[data-facturas-carni] .toolbar .fac-proveedor .sb { flex: 1 !important; min-width: 0 !important; width: auto !important; }
[data-facturas-carni] .toolbar .fac-proveedor .sb__trigger { width: 100% !important; }

/* Celda Día */
.iva-dia { display: inline-flex; align-items: baseline; gap: 6px; }
.iva-dia strong { font-size: 15px; color: var(--text); }
.iva-dia__sem { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }

/* Modal grande + cabecera de detalle */
.modal--lg { max-width: 760px; }
.det-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.det-head__fecha { font-family: var(--font-brand); font-weight: 700; font-size: 16px; color: var(--brand); }
.det-head__cant { color: var(--muted); font-size: 13px; }
.det-head__total { margin-left: auto; font-size: 14px; color: var(--text); }

/* Pie de tabla (caption al final) + selector de período más largo */
.tabla-pie { margin: 12px 2px 0; color: var(--muted); font-size: 12.5px; }
.tabla-pie strong { color: var(--text); font-variant-numeric: tabular-nums; }
#ivaPeriodo { width: 200px; max-width: 100%; }

/* Columna centrada en tablas */
.tabla .center { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla th.center { text-align: center; }

/* IVA: TODAS las columnas centradas (mes y detalle) */
.tabla--iva.tabla th, .tabla--iva.tabla td,
.tabla--iva-det.tabla th, .tabla--iva-det.tabla td { text-align: center; }
.tabla--iva .iva-dia { justify-content: center; }

/* =====================================================================
   Pestañas subrayadas (tabs) + grilla de formulario
   ===================================================================== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tab {
    border: none; background: transparent; cursor: pointer;
    padding: 10px 16px; margin-bottom: -1px;
    font-family: var(--font-brand); font-weight: 700; font-size: 14px;
    color: var(--muted); border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover:not(:disabled):not(.tab--pronto) { color: var(--text); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tab--pronto { color: var(--muted-2); cursor: default; }
.tab__tag { font-size: 10px; font-weight: 700; background: var(--surface-2); color: var(--muted); padding: 1px 6px; border-radius: 8px; }

/* Presets de rango de fechas (Planillas PC · Resumen) */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.preset-btn {
    height: 34px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 13px;
    cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.preset-btn:hover { border-color: var(--accent-2); }
.preset-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.plr-rango { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.plr-rango .input { width: auto; height: 40px; }

@media (max-width: 640px) {
    .preset-btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
    .plr-rango { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .plr-rango .field-inline { flex-direction: column; align-items: stretch; gap: 5px; }
    .plr-rango .field-inline .input { width: 100%; }
    .plr-rango .btn { width: 100%; }
}

/* Grilla de formulario (modales) */
.form-grid { display: grid; gap: 14px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid .campo { margin-bottom: 0; }
.form-grid .campo--2 { grid-column: 1 / -1; }
@media (max-width: 560px) {
    .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
}

/* Detalle de solo lectura (modal "Ver") */
.det-tit { font-family: var(--font-brand); font-weight: 700; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 8px; }
.det-tit:first-of-type { margin-top: 2px; }
.det-grupo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.detcampo { display: flex; flex-direction: column; gap: 3px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; min-width: 0; }
.detcampo__label { font-size: 11px; color: var(--muted); }
.detcampo__val { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: break-word; }
@media (max-width: 600px) { .det-grupo { grid-template-columns: 1fr 1fr; } }

/* Feedback en modales como chip + botones agrupados (no se rompen de línea) */
.modal__acciones { display: flex; gap: 10px; margin-left: auto; }
.modal__msg.is-ok:not(:empty), .modal__msg.is-error:not(:empty) {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px; font-weight: 600; font-size: 12.5px;
}
.modal__msg.is-ok:not(:empty)    { background: #E7F6F0; color: #159968; }
.modal__msg.is-error:not(:empty) { background: var(--danger-bg); color: var(--danger); }

/* Chip de feedback centrado en su propia fila (multi-carga), más chico */
/* min-width:0 es necesario: por default un flex item no encoge por debajo del ancho de su
   contenido ("min-width: auto" implícito), así que con un mensaje largo el chip se salía del
   modal en vez de centrarse/achicarse. */
.modal__foot .modal__msg--chip { flex-basis: 100%; min-width: 0; order: -1; text-align: center; margin: 0 0 6px; }
.pill-msg {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 14px; font-weight: 600; font-size: 11px;
}
.pill-msg--ok    { background: #E7F6F0; color: #159968; }
.pill-msg--error { background: var(--danger-bg); color: var(--danger); }

/* =====================================================================
   Resumen de Egresos: paneles, ranking, dona, evolución mensual
   ===================================================================== */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.iva-stat__label .dot { margin-right: 5px; }

.resumen-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 820px) { .resumen-grid { grid-template-columns: 1fr; } }

.panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.panel-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-card__t { font-family: var(--font-brand); font-weight: 700; font-size: 14px; color: var(--text); margin: 0 0 14px; }
.panel-card__head .panel-card__t { margin-bottom: 0; }

/* Ranking (barras horizontales) */
.rank { display: flex; flex-direction: column; gap: 12px; }
.rank-info { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.rank-name { font-size: 13px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-track { height: 8px; background: #EDEEF7; border-radius: 6px; overflow: hidden; }
.rank-bar { height: 100%; border-radius: 6px; min-width: 3px; transition: width .4s ease; }

/* Dona */
.dona { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dona-pct { font-family: var(--font-brand); font-weight: 800; font-size: 20px; fill: var(--text); }
.dona-pct--monto { font-size: 11px; }
.dona-sub { font-size: 9px; fill: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dona-leg { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); width: 100%; }
.dona-leg strong { color: var(--text); float: right; font-variant-numeric: tabular-nums; }
.dona-seg { cursor: pointer; }
.dona-leg .dona-seg { border-radius: 6px; padding: 3px 6px; margin: -3px -6px; transition: background .12s ease; }
.dona-leg .dona-seg:hover { background: var(--surface-2); }

/* Evolución mensual (barras verticales apiladas) */
.chart-leg { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.panel-card__acciones { display: flex; gap: 8px; flex-shrink: 0; }

/* Botón "Exportar" con menú desplegable (PDF/Excel/etc.) — mismo botón .btn--ghost que el resto
   del sistema usa para exportar, solo que acá despliega un menú chico en vez de descargar directo. */
.export-dd { position: relative; }
.export-dd__menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 150px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 6px;
}
.export-dd__menu[hidden] { display: none; }
.export-dd__item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
    background: none; border: none; border-radius: 6px; cursor: pointer;
    font-family: var(--font-sans); font-size: 13px; color: var(--text); text-align: left;
}
.export-dd__item:hover { background: var(--surface-2); }
.mchart { display: flex; align-items: flex-end; gap: 8px; height: 200px; padding-top: 10px; }
.mcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mbar { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; background: #F3F4FB; border-radius: 6px 6px 0 0; overflow: hidden; }
.mseg:first-child { border-radius: 6px 6px 0 0; }
.mlab { margin-top: 6px; font-size: 11px; color: var(--muted); }
.mval { display: none; font-weight: 700; color: var(--text); }
@media (max-width: 640px) {
    .mchart { gap: 4px; height: 220px; }
    .mval { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: -.2px; margin-bottom: 3px; white-space: nowrap; }
    .mlab { font-size: 9px; }
    .mbar { max-width: 22px; }
}
.resumen-grid--full { grid-template-columns: 1fr; }

/* Ingresos › Resumen: serie única (no apilada) → el monto entra arriba de cada barra también en desktop. */
@media (min-width: 641px) {
    [data-ingresos-resumen] .mval { display: block; font-size: 9.5px; margin-bottom: 4px; white-space: nowrap; }
}
/* Clic en una columna muestra el monto exacto en un tooltip (.ddtooltip, mismo componente que
   Estadísticas) — el valor de arriba de la barra ya está abreviado ($1,2M). */
[data-ingresos-resumen] .mcol { cursor: pointer; }

/* Resumen: cuando queda una sola tarjeta (filtrado por rubro), tamaño fijo (no se estira) */
.iva-stats--solo { grid-template-columns: minmax(0, 340px); }

/* Día a Día: gráfico diario (Ventas Realizadas vs Ticket Z), scrollable horizontal por rango variable de días */
.ddchart-scroll { overflow-x: auto; }
.ddchart { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 10px; min-width: min-content; }
.ddcol { flex: 0 0 auto; width: 34px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ddbars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.ddbar { width: 12px; border-radius: 4px 4px 0 0; min-height: 2px; }
.ddbar--ventas { background: #5568EA; }
.ddbar--z { background: #B2B4CC; }
.ddlab { margin-top: 6px; font-size: 10px; line-height: 1.3; color: var(--muted); text-align: center; }
.ddcol { cursor: default; }

/* Tooltip propio al pasar el mouse sobre una columna (el título nativo del navegador tarda en
   aparecer y muchos usuarios no lo descubren solos — pedido explícito de mostrar el monto). */
.ddtooltip {
    position: fixed; z-index: 300; pointer-events: none;
    background: var(--text); color: #fff; font-size: 12px; line-height: 1.5;
    padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-lg);
    white-space: nowrap; transform: translate(-50%, -100%); margin-top: -10px;
}
.ddtooltip strong { font-weight: 700; }
.ddtooltip[hidden] { display: none; }

/* Estadísticas: "Detalle por Producto" — lista de tarjetas por día, siempre desplegada (sin
   toggle exterior), cada día colapsable/expandible para ver sus productos. */
.prod-cabecera {
    display: flex; align-items: center; gap: 12px; padding: 0 16px 8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.prod-cabecera span:first-child { flex: 1 1 auto; padding-left: 24px; }
.prod-cabecera span:nth-child(2) { width: 160px; flex-shrink: 0; }
.prod-cabecera .num { width: 90px; flex-shrink: 0; text-align: right; }
.prod-cabecera .num:last-child { width: 130px; }

.prod-lista { display: flex; flex-direction: column; gap: 8px; }
.prod-dia {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(60, 70, 160, .05); overflow: hidden;
}
.prod-dia__head {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-sans);
}
.prod-dia__caret { color: var(--muted); flex-shrink: 0; transition: transform .15s ease; }
.prod-dia.is-open .prod-dia__caret { transform: rotate(90deg); }
.prod-dia__fecha { font-weight: 700; color: var(--text); font-size: 13.5px; }
.prod-dia__badge { color: var(--muted); font-size: 12px; flex: 1 1 auto; }
.prod-dia__num { width: 90px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; white-space: nowrap; }
.prod-dia__num--fuerte { width: 130px; font-weight: 700; color: var(--text); }
.prod-dia__body { border-top: 1px solid var(--border); background: var(--surface-2); }
.prod-fila {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 40px;
    font-size: 13px; border-top: 1px solid var(--border);
}
.prod-fila:first-child { border-top: none; }
.prod-fila__nombre { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; color: var(--text); min-width: 0; }
.prod-fila__cliente { width: 160px; flex-shrink: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-fila__num { width: 90px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.prod-fila__num--fuerte { width: 130px; font-weight: 600; color: var(--text); }
.prod-total {
    display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 16px;
    background: var(--info-bg); border-radius: 10px; font-weight: 700; color: var(--text);
}
.prod-total span:first-child { flex: 1 1 auto; }
.prod-total span:not(:first-child) { width: 90px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-total span:last-child { width: 130px; }
.pill-rubro { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700; color: #fff; flex-shrink: 0; }
@media (max-width: 640px) {
    .prod-cabecera, .prod-dia__badge, .prod-fila__cliente { display: none; }
    .prod-dia__head, .prod-fila { flex-wrap: wrap; }
}

/* Libro Caja reusa el acordeón .prod-dia (Estadísticas) para agrupar por mes, pero sus montos
   (ingresos/egresos de caja, varios dígitos) no entran en los 90px/130px pensados para los montos
   más chicos de Detalle por Producto — se superponían las dos columnas de número del header. */
[data-libro] .prod-dia__num { width: 130px; }
[data-libro] .prod-dia__num--fuerte { width: 150px; }

/* Selectores de toolbar con ancho FIJO (no cambian según lo seleccionado) */
.field-inline .select { text-overflow: ellipsis; }
#reAnio { width: 92px; }
#reRubro, #reProveedor { width: 210px; }
#reMes { width: 150px; }
#egRubro { width: 220px; }
#egPeriodo, #efPeriodo { width: 160px; }
#efCat { width: 220px; }
#ivaPeriodo { width: 190px; }
.field-inline .select { max-width: 100%; }
#lcAnio { width: 92px; }
#lcMes { width: 150px; }
#ceCat { width: 220px; }
#cePeriodo { width: 160px; }

/* Toolbar de Egresos carni en mobile: buscador full, selects 50/50 que llenan, botones full. */
@media (max-width: 640px) {
    [data-cegresos] .toolbar { gap: 8px; }
    [data-cegresos] .toolbar__buscar { flex: 1 1 100%; }
    [data-cegresos] .toolbar .field-inline { flex: 1 1 calc(50% - 4px); min-width: 0; }
    [data-cegresos] .toolbar .field-inline__label { white-space: nowrap; }
    [data-cegresos] .toolbar .field-inline .select { flex: 1; width: auto !important; min-width: 0; }
    [data-cegresos] .toolbar__right { flex: 1 1 100%; margin-left: 0; gap: 8px; }
    [data-cegresos] .toolbar__right .btn { flex: 1; justify-content: center; }
    [data-cegresos] .toolbar__right .solo-desktop { display: inline; }
}

/* Edición inline (Egresos carni, desktop) */
.input--inline { width: 100%; min-width: 64px; height: 32px; padding: 3px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-family: inherit; color: var(--text); }
.input--inline:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(85, 104, 234, .15); }
.ci-fecha { min-width: 132px; }
.ci-imp, .ci-sf { text-align: right; }
.tabla tbody tr.fila.fila--editando td { background: var(--info-bg); }
.ico-btn--ok { color: var(--ok); }
.ico-btn--ok:hover { background: rgba(34, 169, 125, .12); }
.ci-msg { display: block; color: var(--danger); font-size: 11px; margin-top: 3px; }

/* Planillas PC — formulario de caja diaria */
.plc-out { background: var(--surface-2); color: var(--text); font-weight: 700; cursor: default; }
.plc-out:focus { box-shadow: none; border-color: var(--border); }
.plc-out--alerta { color: var(--danger); border-color: var(--danger); background: #FCEDED; }
[data-plform] .panel-card { margin-bottom: 16px; }
[data-plform] .panel-card__t { margin-top: 0; margin-bottom: 14px; }
.plform__foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.plform__acciones { display: flex; gap: 10px; }
.aviso-inline { display: flex; align-items: center; gap: 10px; background: var(--info-bg); border: 1px solid #D3D8FB; color: var(--brand-2); border-radius: 12px; padding: 12px 16px; font-size: 13px; margin: 4px 0; }
.aviso-inline .ico { flex: none; color: var(--brand); }

/* Tooltip de info: ícono "!" que muestra un texto largo al hacer hover/foco. */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.info-tip__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--accent-2); padding: 0;
    background: var(--surface); color: var(--brand); cursor: help;
    font-family: var(--font-brand); font-weight: 700; font-size: 12px; line-height: 1;
}
.info-tip__btn:hover, .info-tip__btn:focus-visible { background: var(--brand); color: #fff; outline: none; }
.info-tip__bubble {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
    width: 300px; max-width: 80vw; padding: 10px 12px; border-radius: 10px;
    background: var(--text); color: #fff; font-family: var(--font-sans); font-weight: 400;
    font-size: 12.5px; line-height: 1.5; text-transform: none; letter-spacing: normal;
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}
.info-tip__bubble strong { color: #fff; }
.info-tip:hover .info-tip__bubble, .info-tip:focus-within .info-tip__bubble {
    opacity: 1; visibility: visible; transform: translateY(0);
}
@media (max-width: 560px) { .info-tip__bubble { left: auto; right: 0; } }
/* Sección inline de egresos del día */
.eg-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.eg-add .input { font-size: 11px; }
.eg-add #plEgRubro { flex: 1 1 190px; min-width: 0; }
.eg-add #plEgImporte, .eg-add #plEgSf { flex: 0 1 120px; }
.eg-add #plEgObs { flex: 2 1 180px; min-width: 0; }
.eg-add .btn { flex: 0 0 auto; }
.cc-add #plCcCliente { flex: 1 1 170px; min-width: 0; }
.cc-add #plCcFp { flex: 0 1 140px; }
.cc-add #plCcImporte { flex: 0 1 110px; }
.cc-add #plCcDesc, .cc-add #plCcObs { flex: 1 1 150px; min-width: 0; }
.tabla--eginline { font-size: 12px; }
.tabla tfoot .tabla-tfoot td { font-weight: 700; color: var(--text); padding: 10px 12px; border-top: 2px solid var(--border); background: var(--surface-2); }

/* Fichadas: cabecera agrupada Mañana/Tarde + fila roja para domingos (sin fichada nocturna cruzando medianoche) */
.tabla--fichadas thead th { text-align: center; }
.tabla--fichadas .col-cod { text-align: left; }
.tabla--fichadas thead tr:first-child th { border-bottom: 1px solid var(--border); }
.tabla--fichadas thead th.grupo-borde { border-left: 1px solid var(--border); }
.tabla--fichadas thead tr:last-child th { border-radius: 0; } /* la 2da fila no toca ninguna esquina real (Día/Horas la ocupan por el rowspan) */
.tabla--fichadas tbody tr.fila--roja td { color: var(--danger); }

/* ============ Menú: submenús desplegables (acordeón) ============ */
.menu--n2 { margin: 2px 0 6px 22px; }
.menu__caret { margin-left: auto; display: inline-flex; opacity: .7; transition: transform .18s ease; }
.menu__toggle + .menu { display: none; }
.menu__item.is-open > .menu { display: block; }
.menu__item.is-open > .menu__toggle { color: #fff; }
.menu__item.is-open > .menu__toggle .menu__caret { transform: rotate(180deg); }

/* ============ Libro Caja ============ */
@media (min-width: 761px) { .iva-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .iva-stats--3 { grid-template-columns: 1fr; } }
.iva-stat__val--ok { color: var(--ok); }
.iva-stat__val--danger { color: var(--danger); }
.tabla--libro .col-fecha { width: 1%; white-space: nowrap; color: var(--muted); }
.lc-desc { display: block; font-weight: 600; }
.lc-desc--in { color: var(--ok); }
.lc-desc--out { color: var(--text); }
.lc-obs { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.lc-debe { color: var(--ok); font-weight: 700; }
.lc-haber { color: var(--danger); font-weight: 700; }
.tabla-pie { margin: 4px 2px 0; color: var(--muted); font-size: 12px; }

.iva-stat__label .ico { vertical-align: -2px; margin-right: 3px; }
@media (min-width: 900px) { .iva-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .iva-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Selector de meses (multi-select desplegable) */
.mespicker { position: relative; }
/* min-width fijo: el texto del botón cambia ("Elegí mes/es" -> "3 meses") según cuántos meses
   hay tildados — sin esto, el botón angostaba/ensanchaba, el buscador de al lado (flexible) se
   reacomodaba para compensar, y el desplegable (anclado a este botón) se corría para el costado
   en cada click de checkbox. */
.mespicker__btn { height: 38px; gap: 8px; min-width: 150px; justify-content: space-between; }
.mespicker__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    width: 240px; max-width: 80vw; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(40, 45, 120, .18);
    overflow: hidden;
}
.mespicker__list { max-height: 260px; overflow-y: auto; padding: 8px; }
.mespicker__anio { font-family: var(--font-brand); font-weight: 700; font-size: 12px; color: var(--muted); padding: 8px 8px 4px; }
.mespicker__opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.mespicker__opt:hover { background: var(--surface-2); }
.mespicker__opt input { width: 16px; height: 16px; accent-color: var(--brand); }
.mespicker__foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-top: 1px solid var(--border); background: var(--surface-2); }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* Libro Caja en mobile: fila compacta de 2 líneas (desc+monto / fecha+saldo). */
@media (max-width: 760px) {
    .tabla--libro { border-spacing: 0; display: block; width: 100%; }
    .tabla--libro thead { display: none; }
    .tabla--libro tbody { display: block; }
    .tabla--libro tr.fila-vacia, .tabla--libro tr.fila-vacia td { display: block; }
    .tabla--libro tr.fila {
        display: grid; grid-template-columns: 1fr auto;
        grid-template-areas: "desc monto" "fecha saldo";
        column-gap: 10px; row-gap: 1px; align-items: center;
        background: var(--surface); border-radius: 9px;
        box-shadow: 0 1px 2px rgba(60, 70, 160, .06);
        margin-bottom: 5px; padding: 8px 12px;
    }
    .tabla--libro tr.fila td {
        display: block; min-width: 0; padding: 0; border: none !important;
        background: transparent !important; border-radius: 0 !important;
    }
    .tabla--libro tr.fila td::before { content: none !important; }
    .tabla--libro td.lc-td-desc { grid-area: desc; overflow: hidden; }
    .tabla--libro td.lc-td-desc .lc-desc { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .tabla--libro td.lc-td-desc .lc-obs { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tabla--libro td.lc-td-fecha { grid-area: fecha; color: var(--muted); font-size: 11px; }
    .tabla--libro td.lc-monto { grid-area: monto; text-align: right; font-size: 13px; white-space: nowrap; }
    .tabla--libro td.lc-monto.is-empty { display: none; }
    .tabla--libro td.lc-td-saldo { grid-area: saldo; text-align: right; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
    .tabla--libro td.lc-td-saldo::before { content: "Saldo " !important; color: var(--muted-2); font-weight: 500; }
    /* Red de seguridad anti-overflow horizontal en mobile. */
    .app__main, .content, .page, #lcTabla, .tabla-scroll, .tabla--libro { min-width: 0; max-width: 100%; }
}

/* =====================================================================
   Kiosko de fichada (pantalla táctil compartida, sin sidebar/topbar)
   ===================================================================== */
body.kiosko { background: var(--bg); min-height: 100dvh; }
.kio { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; }
.kio__head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.kio__logo { width: 48px; height: 48px; object-fit: contain; }
.kio__tit { flex: 1; min-width: 0; }
.kio__tit h1 { font-family: var(--font-brand); font-weight: 800; font-size: 22px; color: var(--brand); margin: 0; }
.kio__tit p { color: var(--muted); margin: 2px 0 0; font-size: 14px; }
.kio__reloj {
    font-family: var(--font-brand); font-weight: 800; font-size: 30px; color: #fff;
    background: linear-gradient(120deg, var(--brand) 0%, #6E7CF1 100%);
    border-radius: var(--radius-sm); padding: 8px 18px; font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 20px rgba(85,104,234,.25);
}
.kio__reloj--panel { font-size: 20px; padding: 6px 14px; }

.kio__buscar { position: relative; margin-bottom: 22px; }
.kio__buscar-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.kio__buscar input {
    width: 100%; height: 56px; border-radius: 16px; border: 1px solid var(--border);
    background: var(--surface); padding: 0 18px 0 52px; font-size: 18px; font-family: var(--font-sans);
    color: var(--text); box-shadow: var(--shadow);
}
.kio__buscar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(85,104,234,.15); }
.kio__buscar--panel { margin-bottom: 16px; max-width: 320px; }
.kio__buscar--panel input { height: 36px; border-radius: var(--radius-sm); font-size: 14px; padding: 0 12px 0 38px; box-shadow: none; }
.kio__buscar--panel .kio__buscar-ico { left: 12px; }

.kio__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.kio-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    padding: 20px 10px; cursor: pointer; box-shadow: var(--shadow);
    transition: transform .1s ease, box-shadow .1s ease;
}
.kio-card:active { transform: scale(.96); box-shadow: var(--shadow-lg); }
.kio-card__ini {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-brand); font-weight: 800; font-size: 22px;
}
.kio-card__nom { font-family: var(--font-brand); font-weight: 700; font-size: 15px; color: var(--text); text-align: center; }
.kio__vacio { text-align: center; color: var(--muted); margin-top: 40px; font-size: 16px; }

/* Paleta de acento cíclica para los avatares del kiosko. */
.kio-c0 { background: #E4E7FB; color: #5568EA; }
.kio-c1 { background: #FFE7DC; color: #FA8053; }
.kio-c2 { background: #FCE3EC; color: #F081A2; }
.kio-c3 { background: #DEF5F5; color: #3FBAC2; }
.kio-c4 { background: #ECE6FA; color: #9B6BF0; }
.kio-c5 { background: #E1F5EC; color: #22A97D; }
.kio-c6 { background: #FCF3D6; color: #B8860B; }

/* Overlays: confirmar / aviso / éxito */
.kio-overlay {
    position: fixed; inset: 0; background: rgba(44,45,72,.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.kio-overlay[hidden] { display: none; }
.kio-modal {
    background: var(--surface); border-radius: 24px; padding: 36px 28px; max-width: 420px; width: 100%;
    text-align: center; box-shadow: var(--shadow-lg);
}
.kio-modal h2 { font-family: var(--font-brand); font-weight: 800; font-size: 22px; color: var(--text); margin: 14px 0 6px; }
.kio-modal p { color: var(--muted); font-size: 15px; margin: 0; }
.kio-modal__ini {
    display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px;
    border-radius: 50%; font-family: var(--font-brand); font-weight: 800; font-size: 28px;
}
.kio-modal__ico { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; }
.kio-modal__ico--ok { background: #E1F5EC; color: var(--ok); }
.kio-modal__ico--warn { background: #FEF3E2; color: #D98324; }
.kio-modal--exito h2 { color: var(--ok); }
.kio-modal__acciones { display: flex; gap: 12px; margin-top: 26px; }
.kio-btn {
    flex: 1; height: 56px; border-radius: 14px; border: none; cursor: pointer;
    font-family: var(--font-brand); font-weight: 700; font-size: 16px;
}
.kio-btn--primary { background: var(--brand); color: #fff; }
.kio-btn--primary:active { filter: brightness(.92); }
.kio-btn--ghost { background: var(--surface-2); color: var(--text); }
.kio-btn--ghost:active { background: var(--border); }

@media (max-width: 480px) {
    .kio__reloj { font-size: 22px; padding: 6px 12px; }
    .kio__tit h1 { font-size: 18px; }
    .kio__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
    .kio-card__ini { width: 52px; height: 52px; font-size: 18px; }
}

/* ===== Carga Lector (Cuentas Corrientes) ===== */
.cl-buscar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cl-buscar__codigo { flex: 1 1 260px; margin-bottom: 0; }
.cl-buscar .btn { height: 44px; }
.cl-producto {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 14px; margin: 14px 0;
}
.cl-producto strong { display: block; color: var(--text); font-size: 15px; }
.cl-producto .muted { font-size: 13px; }
[data-carga-lector] { padding-bottom: 76px; }
.cl-guardar-row {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    padding: 14px 16px; margin-top: 0;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(28, 30, 74, .08);
}
@media (min-width: 900px) { .cl-guardar-row { left: var(--sidebar-w); padding: 16px 32px; } }
.cl-guardar-row .modal__msg { flex: 1; text-align: right; }
.cl-guardar-row .modal__msg:empty { flex: 0; }
.cl-resultados { list-style: none; margin: 12px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.cl-resultados li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.cl-resultados li:hover { background: var(--surface-2); }
.cl-resultados li .cl-res-nombre { font-weight: 600; color: var(--text); }
.cl-resultados li .cl-res-precio { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cl-resultados__vacio { color: var(--muted); font-size: 14px; text-align: center; padding: 16px 0; }

/* ===== Agricultura Egresos (modal) ===== */
/* Cultivo/Socio/Lote en una fila de 3 (form-grid--3) con nombres largos ("Manu Lote 2") que
   envolvían a 2 líneas con el tamaño base de .select (14px) — texto 2px más chico para que
   entren cómodos en una sola línea. Aplica a todos los selects del modal (nativos y buscables)
   para que no quede un tamaño distinto entre campos del mismo formulario. */
#modalAgriEgreso .select { font-size: 12px; }

/* ============ Carnicería › Cierre Mes ============ */
.cme-periodo { display: flex; align-items: center; gap: 6px; }
.cme-periodo .ico-btn { border: 1px solid var(--border); }

/* Selector de período (mes/año) con popover propio — reemplaza el <input type="month"> nativo,
   cuyo picker del navegador (lista de años para scrollear) el usuario encontró poco intuitivo. */
.periodo-dd { position: relative; }
.periodo-dd__btn {
    display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.periodo-dd__btn:hover { background: var(--surface-2); }
.periodo-dd__btn .ico-chevron-down { margin-left: 2px; color: var(--muted); }
.periodo-dd__pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 240px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: 10px;
}
.periodo-dd__pop[hidden] { display: none; }
.periodo-dd__anio {
    display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px;
    margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.periodo-dd__anio strong { font-family: var(--font-brand); font-size: 15px; color: var(--text); }
.periodo-dd__meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.periodo-dd__mes {
    padding: 9px 4px; background: var(--surface-2); border: none; border-radius: 8px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.periodo-dd__mes:hover { background: #E7E9FC; }
.periodo-dd__mes.is-active { background: var(--brand); color: #fff; }
.cme-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .cme-cols { grid-template-columns: 1fr; } }
.cme-panel__head {
    display: grid; grid-template-columns: 1fr 150px 150px; gap: 8px; align-items: center;
    font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: .02em; padding: 0 0 8px; border-bottom: 2px solid var(--border);
}
.cme-panel__head span { text-align: right; }
.cme-panel__head span:first-child { text-align: left; }
.cme-fila {
    display: grid; grid-template-columns: 1fr 150px 150px; gap: 8px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.cme-fila__label { display: flex; align-items: center; gap: 5px; color: var(--text); }
.cme-fila__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.cme-fila__num--vacio { color: var(--muted-2); }
.cme-subtotal { background: var(--surface-2); font-weight: 700; border-radius: 8px; padding: 8px 10px; margin-top: 2px; }
.cme-subtotal .cme-fila__label { color: var(--text); }
.cme-total {
    display: grid; grid-template-columns: 1fr 150px 150px; gap: 8px; align-items: center;
    background: var(--surface-2); font-weight: 700; border-radius: 8px; padding: 9px 10px; margin-top: 6px;
    font-size: 13.5px;
}
.cme-total .cme-fila__num { color: var(--text); }
.cme-final {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--brand); color: #fff; border-radius: 10px; padding: 12px 14px; margin-top: 10px;
    font-weight: 700; font-size: 14.5px;
}
.cme-final strong { font-size: 18px; }
.cme-excluido {
    display: flex; width: 100%; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px;
    background: var(--danger-bg); border: 1px solid #f2cfc8; border-left: 3px solid var(--danger);
    border-radius: 8px; font-family: var(--font-sans); font-size: 12px; color: #a03225; cursor: pointer; text-align: left;
}
.cme-excluido:hover { filter: brightness(0.97); }
.cme-info { position: relative; display: inline-flex; color: var(--muted-2); cursor: default; }
.cme-info__tip {
    display: none; position: absolute; left: 20px; top: -6px; z-index: 30;
    background: var(--text); color: #fff; padding: 7px 11px; border-radius: 8px;
    font-size: 11.5px; line-height: 1.4; white-space: nowrap; box-shadow: var(--shadow);
}
.cme-info:hover .cme-info__tip, .cme-info:hover { color: var(--brand); }
.cme-info:hover .cme-info__tip { display: block; }
.cme-resultado {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-radius: 12px; padding: 16px 18px; margin-top: 18px; color: #fff; font-weight: 700;
}
.cme-resultado--ok { background: var(--ok); }
.cme-resultado--mal { background: var(--danger); }
.cme-resultado__label { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cme-resultado__montos { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cme-resultado__val { font-size: 22px; }
.cme-resultado__usd { font-size: 12px; font-weight: 600; opacity: .85; }
.cme-admin-link { margin-left: 5px; color: var(--muted-2); display: inline-flex; }
.cme-admin-link:hover { color: var(--text); }