/* ============================================================
   EMSAN Contable — estilos base v0.1
   ============================================================ */

:root {
    /* Paleta institucional EMSAN Contable */
    --emsan-primary: #0F274E;        /* Azul marino */
    --emsan-primary-dark: #0B1D3A;   /* Navy hover */
    --emsan-accent: #108E8B;         /* Turquesa principal */
    --emsan-accent-dark: #0E7C79;    /* Turquesa hover */
    --emsan-accent-light: #39C5BB;   /* Turquesa claro */
    --emsan-sidebar: #0F274E;
    --emsan-sidebar-hover: #16335E;
    --emsan-sidebar-active: #108E8B;
    --emsan-text: #16233B;           /* Texto principal */
    --emsan-muted: #64748B;          /* Texto secundario */
    --emsan-border: #E7ECF3;         /* Gris borde */
    --emsan-bg: #F5F7FA;             /* Gris fondo */
    --emsan-ok: #108E8B;
    --emsan-info: #0F274E;
    --emsan-warn: #F59E0B;
    --emsan-err: #EF4444;
    --emsan-off: #9ca3af;
    /* Sombras suaves */
    --emsan-shadow-sm: 0 1px 2px rgba(15,39,78,.05);
    --emsan-shadow: 0 4px 16px rgba(15,39,78,.06);
    --emsan-shadow-lg: 0 12px 30px rgba(15,39,78,.10);
    --emsan-radius: 20px;
}

* { box-sizing: border-box; }

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/lib/fonts/inter-var.woff2') format('woff2');
}

html, body {
    margin: 0;
    font-family: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--emsan-text);
    background: var(--emsan-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h1:focus { outline: none; }

a { color: var(--emsan-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout principal ---------- */
.app-shell { display: flex; min-height: 100vh; }

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

/* Barra superior: navy corporativo, marco oscuro unificado con el sidebar. */
.app-header {
    height: 56px;
    background: var(--emsan-primary);
    border-bottom: 1px solid #073D65;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
}
.app-empresa { color: #fff; }
.app-empresa-label { color: #9FB3C8; margin-right: .35rem; font-size: .9rem; }
.app-user { display: flex; align-items: center; gap: .85rem; }
.app-user-name { color: #9FB3C8; font-size: .9rem; }
.app-logout-form { margin: 0; }
.app-logout-btn {
    background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
    padding: .35rem .7rem; border-radius: 6px; cursor: pointer; font-size: .85rem;
}
.app-logout-btn:hover { background: rgba(255,255,255,.12); }

.app-content { padding: 1.5rem; flex: 1; }

/* ---------- Menú lateral ---------- */
.app-nav {
    width: 250px;
    background: var(--emsan-sidebar);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.app-nav-brand {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #073D65;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Logo oficial EMSAN (recurso único; sin fondo, borde ni sombra) ----------
   El logo es transparente y de tinta clara: se muestra sobre superficies oscuras.
   Cada contexto tiene su propio tamaño; nunca se estira (height:auto conserva proporción). */
.emsan-logo { display: block; height: auto; max-width: 100%; margin-left: auto; margin-right: auto; }
.emsan-logo--sidebar { width: 190px; }
.emsan-logo--login   { width: 230px; }

.app-nav-list { list-style: none; margin: 0; padding: .5rem .6rem 1rem; flex: 1; overflow-y: auto; }
.app-nav-list li { margin: 0; }

.app-nav-section {
    padding: 1.1rem .9rem .35rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: #7C8CA6;
}

.app-nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .8rem; margin: .12rem 0; border-radius: 12px;
    color: #C4D0E2; font-size: .9rem; font-weight: 500;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.app-nav-link:hover { background: var(--emsan-sidebar-hover); text-decoration: none; color: #fff; }
.app-nav-link.active { background: var(--emsan-sidebar-active); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(16,142,139,.35); }
.app-nav-link.active .app-nav-icon svg { color: #fff; }
.app-nav-link.disabled { color: #475569; cursor: not-allowed; }
.app-nav-link.disabled em {
    margin-left: auto; font-style: normal; font-size: .65rem;
    background: #1e293b; color: #64748b; padding: .05rem .4rem; border-radius: 4px;
}
.app-nav-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-nav-icon svg { width: 18px; height: 18px; stroke-width: 2; color: #93A4C0; }
.app-nav-link:hover .app-nav-icon svg { color: #fff; }
.app-nav-footer { padding: .9rem 1.25rem; font-size: .72rem; color: #5A6B87; border-top: 1px solid #1B335C; }

/* ---------- Grupos plegables del menú (UI-FE-003) ---------- */
.app-nav-group { margin: 0; }
.app-nav-summary {
    display: flex; align-items: center; gap: .7rem; list-style: none; cursor: pointer;
    padding: .6rem .8rem; margin: .12rem 0; border-radius: 12px;
    color: #C4D0E2; font-size: .9rem; font-weight: 500;
    transition: background .16s ease, color .16s ease;
}
.app-nav-summary::-webkit-details-marker { display: none; }
.app-nav-summary:hover { background: var(--emsan-sidebar-hover); color: #fff; }
.app-nav-summary-text { flex: 1; min-width: 0; }
.app-nav-caret { display: inline-flex; align-items: center; transition: transform .18s ease; color: #7C8CA6; }
.app-nav-caret svg { width: 15px; height: 15px; }
.app-nav-group[open] > .app-nav-summary { color: #fff; }
.app-nav-group[open] > .app-nav-summary .app-nav-caret { transform: rotate(180deg); color: #C4D0E2; }

.app-nav-sub { list-style: none; margin: .1rem 0 .35rem; padding: 0; }
.app-nav-sublink {
    display: flex; align-items: center; position: relative;
    padding: .42rem .8rem .42rem 2.55rem; margin: .1rem 0; border-radius: 10px;
    color: #A9B8D0; font-size: .855rem; font-weight: 500;
    transition: background .16s ease, color .16s ease;
}
.app-nav-sublink::before {
    content: ""; position: absolute; left: 1.65rem; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: #4A5B7A; transition: background .16s ease;
}
.app-nav-sublink:hover { background: var(--emsan-sidebar-hover); color: #fff; text-decoration: none; }
.app-nav-sublink:hover::before { background: #93A4C0; }
.app-nav-sublink.active { background: var(--emsan-sidebar-active); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(16,142,139,.30); }
.app-nav-sublink.active::before { background: #fff; }

/* ---------- Página placeholder "Pendiente de implementación" (UI-FE-003) ---------- */
.ec-card {
    background: #fff; border: 1px solid var(--emsan-border); border-radius: var(--emsan-radius);
    box-shadow: var(--emsan-shadow); padding: 2.6rem 2rem; max-width: 640px; text-align: center;
}
.ec-ico {
    width: 64px; height: 64px; border-radius: 18px; background: #E4F4F3; color: var(--emsan-accent);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.ec-ico svg { width: 30px; height: 30px; }
.ec-card h2 { margin: .8rem 0 .4rem; font-size: 1.25rem; letter-spacing: -.01em; }
.ec-card > p { color: var(--emsan-muted); margin: 0 auto 1.4rem; max-width: 460px; }
.ec-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Página ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; }
.page-subtitle { color: var(--emsan-muted); margin: .25rem 0 1.25rem; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card-tile { background: #fff; border: 1px solid var(--emsan-border); border-radius: 10px; padding: 1.1rem; }
.card-tile.muted { opacity: .6; }
.card-tile-icon { font-size: 1.6rem; }
.card-tile h3 { margin: .5rem 0 .35rem; font-size: 1.05rem; }
.card-tile p { color: var(--emsan-muted); font-size: .9rem; margin: 0 0 .5rem; }
.card-tile-link { font-weight: 600; }

.info-box {
    margin-top: 1.5rem; background: #E7F6F5; border: 1px solid #B8E5E1;
    border-radius: 8px; padding: .9rem 1.1rem; color: #0F766E; font-size: .92rem;
}

/* ---------- Tablas ---------- */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--emsan-border); border-radius: 10px; overflow: hidden; }
.data-table th, .data-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--emsan-border); font-size: .92rem; }
.data-table th { background: #f9fafb; color: var(--emsan-muted); font-weight: 600; }
.data-table tr:last-child td { border-bottom: none; }
.row-active { background: #E7F6F5; }
.text-right { text-align: right; }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; margin-left: .4rem; }
.badge-active { background: var(--emsan-accent); color: #fff; }
.badge-on { background: #dcfce7; color: #166534; margin-left: 0; }
.badge-off { background: #f3f4f6; color: #6b7280; margin-left: 0; }

.empty-state { background: #fff; border: 1px dashed var(--emsan-border); border-radius: 10px; padding: 2rem; text-align: center; color: var(--emsan-muted); }

/* ---------- Botones ---------- */
.btn { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--emsan-border); border-radius: 7px; background: #fff; cursor: pointer; font-size: .9rem; color: var(--emsan-text); }
.btn:hover { background: var(--emsan-bg); text-decoration: none; }
.btn-primary { background: var(--emsan-primary); border-color: var(--emsan-primary); color: #fff; }
.btn-primary:hover { background: var(--emsan-primary-dark); color: #fff; }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.btn-link { border-color: transparent; color: var(--emsan-primary); }
.inline-form { display: inline; margin: 0; }

/* ---------- Formularios ---------- */
.form-card { background: #fff; border: 1px solid var(--emsan-border); border-radius: 10px; padding: 1.5rem; max-width: 720px; }
.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.form-input { width: 100%; padding: .5rem .65rem; border: 1px solid var(--emsan-border); border-radius: 7px; font-size: .92rem; }
.form-input:focus { outline: 2px solid var(--emsan-accent); border-color: var(--emsan-accent); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-check-row { display: flex; align-items: center; }
.form-check { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.form-actions { margin-top: 1rem; display: flex; gap: .6rem; }
.req { color: #dc2626; }

.validation-message, .invalid { color: #dc2626; font-size: .82rem; }

/* ---------- Login ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #031F45 0%, #073D65 55%, #0F766E 100%); padding: 1rem; }
.auth-card { background: #fff; border-radius: 14px; padding: 0 2.25rem 2.25rem; width: 100%; max-width: 390px; box-shadow: 0 20px 50px rgba(3,31,69,.35); overflow: hidden; }
.auth-brand { margin: 0 -2.25rem 1.5rem; padding: 1.7rem 1rem 1.6rem; background: var(--emsan-primary); text-align: center; }
.auth-title { text-align: center; font-size: 1.2rem; margin: 0 0 1.25rem; }
.auth-label { display: block; font-size: .82rem; font-weight: 600; margin: .75rem 0 .3rem; }
.auth-input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--emsan-border); border-radius: 8px; font-size: .95rem; }
.auth-input:focus { outline: 2px solid var(--emsan-accent); border-color: var(--emsan-accent); }
.auth-check { display: flex; align-items: center; gap: .4rem; margin: .9rem 0; font-size: .85rem; color: var(--emsan-muted); }
.auth-btn { width: 100%; padding: .6rem; background: var(--emsan-primary); color: #fff; border: none; border-radius: 8px; font-size: .98rem; font-weight: 600; cursor: pointer; }
.auth-btn:hover { background: var(--emsan-primary-dark); }
.auth-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: .6rem .8rem; border-radius: 8px; font-size: .85rem; margin-bottom: .75rem; }
.auth-hint { text-align: center; color: var(--emsan-muted); font-size: .78rem; margin-top: 1rem; }

/* Texto y acción para pantallas de estado (error / no encontrado) sobre la tarjeta de marca. */
.state-text { text-align: center; color: var(--emsan-muted); font-size: .9rem; margin: .4rem 0; }
.state-btn { display: block; text-align: center; text-decoration: none; margin-top: 1.15rem; }
.state-btn:hover { text-decoration: none; }

/* ---------- Botones / filas extra ---------- */
.btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.row-grupo { background: #f9fafb; }
.row-anulado { color: var(--emsan-muted); text-decoration: line-through; }

/* ---------- Tarjetas con enlace ---------- */
.card-link { display: block; color: inherit; }
.card-link:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.08); border-color: var(--emsan-primary); }
.card-link h3 { color: var(--emsan-text); }

/* ---------- Reportes ---------- */
.rep-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var(--emsan-border); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.rep-filtro-form { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin: 0; }
.rep-filtro-form label { display: flex; flex-direction: column; font-size: .8rem; font-weight: 600; gap: .25rem; }
.rep-filtro-export { display: flex; gap: .5rem; }
.rep-asiento { margin-bottom: 1rem; }
.rep-asiento-head { font-weight: 600; background: #E7F6F5; padding: .5rem .75rem; border: 1px solid var(--emsan-border); border-bottom: none; border-radius: 8px 8px 0 0; }
.rep-asiento .data-table { border-radius: 0 0 8px 8px; }
.rep-total { background: var(--emsan-primary); color: #fff; padding: .7rem 1rem; border-radius: 8px; font-weight: 600; text-align: right; }
.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .bg-grid { grid-template-columns: 1fr; } }

/* ---------- Dashboard inicial ---------- */
.dash-hello { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.dash-hello h1 { margin: 0; }
.dash-periodo { background: #fff; border: 1px solid var(--emsan-border); border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; color: var(--emsan-muted); text-transform: capitalize; white-space: nowrap; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .85rem; margin-bottom: 1.1rem; }
.stat { background: #fff; border: 1px solid var(--emsan-border); border-radius: 12px; padding: .9rem 1rem; display: flex; align-items: center; gap: .8rem; box-shadow: 0 1px 2px rgba(3,31,69,.04); }
.stat-ico { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.si-1 { background: #E7F0FA; } .si-2 { background: #E7F6F5; } .si-3 { background: #FEF2F2; }
.si-4 { background: #ECFDF5; } .si-5 { background: #FFF7ED; } .si-6 { background: #EFF6FF; }
.stat-lbl { color: var(--emsan-muted); font-size: .78rem; }
.stat-val { font-size: 1.2rem; font-weight: 700; color: var(--emsan-primary); margin-top: .1rem; }
.stat-val.neg { color: var(--emsan-err); }

.dash-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid var(--emsan-border); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.panel-head h2 { font-size: 1.02rem; margin: 0; }

/* Donut de distribución (CSS puro) */
.donut-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.donut { width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.donut-hole { width: 96px; height: 96px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-total { font-weight: 700; color: var(--emsan-primary); font-size: .95rem; }
.donut-cap { font-size: .72rem; color: var(--emsan-muted); }
.donut-leg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; }
.donut-leg li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .88rem; }
.donut-leg strong { margin-left: auto; }

/* Actividad reciente */
.act-list { list-style: none; margin: 0; padding: 0; }
.act-list li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--emsan-border); }
.act-list li:last-child { border-bottom: none; }
.act-ico { width: 34px; height: 34px; border-radius: 9px; background: #E7F6F5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.act-body { flex: 1; min-width: 0; }
.act-tit { font-size: .9rem; font-weight: 600; }
.act-sub { font-size: .8rem; color: var(--emsan-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-time { font-size: .78rem; color: var(--emsan-muted); white-space: nowrap; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .85rem; }
.dash-card { background: #fff; border: 1px solid var(--emsan-border); border-radius: 10px; padding: 1rem; border-left: 4px solid var(--emsan-primary); }
.dash-card.dash-ok { border-left-color: var(--emsan-ok); }
.dash-card.dash-bad { border-left-color: #dc2626; }
.dash-label { color: var(--emsan-muted); font-size: .8rem; }
.dash-value { font-size: 1.25rem; font-weight: 700; margin-top: .25rem; }
.dash-foot { margin-top: 1rem; color: var(--emsan-muted); font-size: .85rem; }

.chart { display: flex; align-items: flex-end; gap: .4rem; height: 180px; background: #fff; border: 1px solid var(--emsan-border); border-radius: 10px; padding: 1rem .75rem 0; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.chart-bar { width: 42%; border-radius: 3px 3px 0 0; min-height: 1px; }
.bar-ing { background: var(--emsan-accent); }
.bar-gas { background: var(--emsan-primary); }
.chart-mes { font-size: .68rem; color: var(--emsan-muted); padding: .25rem 0; text-transform: capitalize; }
.chart-legend { margin-top: .5rem; font-size: .82rem; color: var(--emsan-muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 .25rem 0 .75rem; }
.dot-ing { background: var(--emsan-accent); }
.dot-gas { background: var(--emsan-primary); }

/* ---------- Documentos adjuntos ---------- */
.adjuntos-lista { list-style: none; margin: 0 0 .75rem; padding: 0; }
.adjuntos-lista li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--emsan-border); }
.adjuntos-meta { color: var(--emsan-muted); font-size: .8rem; }
.adjuntos-form { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.adjuntos-form .form-input { max-width: 320px; }

/* ---------- Cheque imprimible ---------- */
.cheque-print-wrapper { padding: 2rem; }
.cheque { width: 17cm; max-width: 100%; border: 1px solid #999; border-radius: 6px; padding: 1.25rem 1.5rem; background: #fff; font-family: 'Courier New', monospace; }
.cheque-fecha { text-align: right; letter-spacing: 2px; margin-bottom: 1rem; }
.cheque-row { display: flex; align-items: baseline; gap: .75rem; }
.cheque-label { color: #555; }
.cheque-benef { flex: 1; border-bottom: 1px solid #333; font-weight: 700; padding: 0 .5rem; }
.cheque-monto { border: 1px solid #333; padding: .25rem .75rem; font-weight: 700; }
.cheque-letras { border-bottom: 1px solid #333; margin: 1rem 0; padding-bottom: .25rem; text-transform: uppercase; min-height: 1.4rem; }
.cheque-pie { display: flex; justify-content: space-between; margin-top: 1.5rem; font-size: .85rem; color: #333; }
.cheque-actions { margin-top: 1.5rem; display: flex; gap: .5rem; }
@media print { .no-print { display: none !important; } .cheque-print-wrapper { padding: 0; } .cheque { border: none; } }

/* ---------- Errores Blazor (plantilla) ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Ha ocurrido un error."; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ============================================================
   DASHBOARD EJECUTIVO PREMIUM (v1.1) — sólo presentación
   ============================================================ */

/* Barra superior renovada */
.app-header { height: 64px; box-shadow: 0 1px 0 rgba(255,255,255,.04); }
.hdr-left { display: flex; align-items: center; gap: .9rem; }
.hdr-burger {
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04); color: #C4D0E2; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .16s ease;
}
.hdr-burger:hover { background: rgba(255,255,255,.10); }
.hdr-burger svg { width: 20px; height: 20px; }
.hdr-right { display: flex; align-items: center; gap: .9rem; }
.hdr-emp {
    display: flex; align-items: center; gap: .6rem; padding: .4rem .8rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
}
.hdr-emp svg { width: 18px; height: 18px; color: var(--emsan-accent-light); }
.hdr-emp-lbl { color: #9FB3C8; font-size: .68rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.hdr-emp-name { color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.hdr-emp-form { margin: 0; display: flex; }
.hdr-emp-select {
    background: transparent; border: none; color: #fff; font-weight: 600; font-size: .9rem; cursor: pointer;
    max-width: 180px;
}
.hdr-emp-select option { color: #16233B; }
.hdr-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--emsan-accent) 0%, var(--emsan-accent-light) 100%);
    color: #fff; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(16,142,139,.4); letter-spacing: .02em;
}
.hdr-logout {
    background: transparent; border: 1px solid rgba(255,255,255,.16); color: #C4D0E2;
    width: 40px; height: 40px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .16s ease, color .16s ease;
}
.hdr-logout:hover { background: rgba(255,255,255,.10); color: #fff; }
.hdr-logout svg { width: 18px; height: 18px; }

.app-content { padding: 1.75rem 1.9rem; }

/* Encabezado del dashboard */
.dx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.dx-hello h1 { font-size: 1.72rem; font-weight: 800; letter-spacing: -.02em; color: var(--emsan-text); margin: 0; }
.dx-hello p { color: var(--emsan-muted); margin: .3rem 0 0; font-size: .95rem; }
.dx-head-tools { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.dx-chip {
    display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--emsan-border);
    border-radius: 12px; padding: .55rem .85rem; font-size: .88rem; color: var(--emsan-text); box-shadow: var(--emsan-shadow-sm);
}
.dx-chip svg { width: 17px; height: 17px; color: var(--emsan-accent); }
.dx-chip.select { padding-right: .5rem; }
.dx-chip select { border: none; background: transparent; font-size: .88rem; color: var(--emsan-text); font-weight: 600; cursor: pointer; font-family: inherit; }

/* KPIs: 7 tarjetas iguales */
.dx-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.dx-kpi {
    background: #fff; border: 1px solid var(--emsan-border); border-radius: var(--emsan-radius);
    padding: 1.15rem 1.15rem 1.05rem; box-shadow: var(--emsan-shadow);
    display: flex; flex-direction: column; gap: .55rem; min-height: 152px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dx-kpi:hover { transform: translateY(-3px); box-shadow: var(--emsan-shadow-lg); }
.dx-kpi-ico { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.dx-kpi-ico svg { width: 22px; height: 22px; }
.ico-teal { background: #E4F4F3; color: var(--emsan-accent); }
.ico-navy { background: #E7ECF5; color: var(--emsan-primary); }
.ico-tealL { background: #E9F8F6; color: #0E7C79; }
.dx-kpi-val { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; color: var(--emsan-text); line-height: 1.1; }
.dx-kpi-val.neg { color: var(--emsan-err); }
.dx-kpi-lbl { font-size: .82rem; color: var(--emsan-muted); font-weight: 500; }
.dx-kpi-foot { margin-top: auto; display: flex; align-items: center; gap: .35rem; font-size: .78rem; }
.dx-delta { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; }
.dx-delta svg { width: 14px; height: 14px; }
.dx-delta.up { color: #0E7C79; }
.dx-delta.down { color: var(--emsan-err); }
.dx-kpi-foot .muted { color: var(--emsan-muted); font-weight: 500; }

/* Filas de paneles */
.dx-row { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
.dx-row-2 { grid-template-columns: 1.75fr 1.15fr 1.1fr; }
.dx-row-3 { grid-template-columns: 1.4fr 1.25fr 1fr; }
.dx-row-4 { grid-template-columns: repeat(4, 1fr); }

.dx-card {
    background: #fff; border: 1px solid var(--emsan-border); border-radius: var(--emsan-radius);
    padding: 1.35rem 1.45rem; box-shadow: var(--emsan-shadow);
}
.dx-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.dx-card-head h2 { font-size: 1.06rem; font-weight: 700; margin: 0; color: var(--emsan-text); letter-spacing: -.01em; }
.dx-card-head .dx-more { font-size: .82rem; color: var(--emsan-accent); font-weight: 600; display: inline-flex; align-items: center; gap: .2rem; }
.dx-card-head .dx-more svg { width: 14px; height: 14px; }
.dx-legend { display: flex; gap: 1rem; }
.dx-legend span { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--emsan-muted); }
.dx-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dx-dot.ing { background: var(--emsan-accent); }
.dx-dot.gas { background: var(--emsan-primary); }

/* Contenedores de gráficos */
.dx-chart-box { height: 260px; position: relative; }
.dx-donut-wrap { display: flex; align-items: center; gap: 1.25rem; }
.dx-donut-box { position: relative; width: 175px; height: 175px; flex-shrink: 0; }
.dx-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dx-donut-total { font-size: 1.15rem; font-weight: 800; color: var(--emsan-text); }
.dx-donut-cap { font-size: .74rem; color: var(--emsan-muted); }
.dx-donut-leg { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.dx-donut-leg li { display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: var(--emsan-text); }
.dx-donut-leg .dx-dot { border-radius: 50%; }
.dx-donut-leg strong { margin-left: auto; color: var(--emsan-muted); font-weight: 700; }

/* Alertas */
.dx-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.dx-alert { display: flex; align-items: center; gap: .8rem; padding: .7rem .35rem; border-bottom: 1px solid var(--emsan-border); }
.dx-alert:last-child { border-bottom: none; }
.dx-alert-ico { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dx-alert-ico svg { width: 18px; height: 18px; }
.a-red { background: #FDECEC; color: var(--emsan-err); }
.a-amber { background: #FEF4E6; color: #C77700; }
.a-teal { background: #E4F4F3; color: var(--emsan-accent); }
.a-navy { background: #E7ECF5; color: var(--emsan-primary); }
.dx-alert-body { flex: 1; min-width: 0; }
.dx-alert-tit { font-size: .88rem; font-weight: 600; color: var(--emsan-text); }
.dx-alert-sub { font-size: .76rem; color: var(--emsan-muted); }
.dx-alert-val { font-size: .9rem; font-weight: 700; white-space: nowrap; }
.dx-badge-ok { background: #E4F4F3; color: var(--emsan-accent); font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }

/* Actividad reciente */
.dx-act { list-style: none; margin: 0; padding: 0; }
.dx-act li { display: flex; align-items: center; gap: .85rem; padding: .7rem .25rem; border-bottom: 1px solid var(--emsan-border); transition: background .14s ease; border-radius: 10px; }
.dx-act li:last-child { border-bottom: none; }
.dx-act li:hover { background: #F7F9FC; }
.dx-act-ico { width: 38px; height: 38px; border-radius: 11px; background: #E4F4F3; color: var(--emsan-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dx-act-ico svg { width: 18px; height: 18px; }
.dx-act-body { flex: 1; min-width: 0; }
.dx-act-tit { font-size: .88rem; font-weight: 600; color: var(--emsan-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-act-sub { font-size: .77rem; color: var(--emsan-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-act-meta { text-align: right; flex-shrink: 0; }
.dx-act-user { font-size: .78rem; font-weight: 600; color: var(--emsan-text); }
.dx-act-time { font-size: .73rem; color: var(--emsan-muted); }

/* Resumen financiero: 4 mini tarjetas */
.dx-fin { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.dx-fin-card { border: 1px solid var(--emsan-border); border-radius: 14px; padding: .9rem 1rem; background: #fff; }
.dx-fin-lbl { font-size: .78rem; color: var(--emsan-muted); }
.dx-fin-val { font-size: 1.12rem; font-weight: 800; color: var(--emsan-text); margin-top: .15rem; letter-spacing: -.01em; }
.dx-fin-val.neg { color: var(--emsan-err); }

/* Accesos rápidos */
.dx-quick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; }
.dx-quick a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    padding: 1rem .5rem; border: 1px solid var(--emsan-border); border-radius: 14px; background: #fff;
    color: var(--emsan-text); font-size: .78rem; font-weight: 600; text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.dx-quick a:hover { transform: translateY(-2px); box-shadow: var(--emsan-shadow); border-color: var(--emsan-accent); background: #FBFDFD; text-decoration: none; }
.dx-quick-ico { width: 40px; height: 40px; border-radius: 12px; background: #E4F4F3; color: var(--emsan-accent); display: inline-flex; align-items: center; justify-content: center; }
.dx-quick-ico svg { width: 20px; height: 20px; }

/* Tablas top */
.dx-mini-table { width: 100%; border-collapse: collapse; }
.dx-mini-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--emsan-muted); font-weight: 700; padding: 0 0 .6rem; }
.dx-mini-table th.text-right, .dx-mini-table td.text-right { text-align: right; }
.dx-mini-table td { padding: .55rem 0; font-size: .86rem; border-top: 1px solid var(--emsan-border); color: var(--emsan-text); }
.dx-mini-table tbody tr:hover td, .dx-mini-table tr:hover td { background: transparent; }
.dx-mini-table td.name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.dx-mini-table td.amount { font-weight: 700; white-space: nowrap; }
.dx-card-foot { margin-top: .9rem; }
.dx-card-foot a { font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .2rem; }
.dx-card-foot a svg { width: 14px; height: 14px; }
.dx-empty { color: var(--emsan-muted); font-size: .86rem; padding: 1rem 0; text-align: center; }

/* Responsive */
@media (max-width: 1400px) {
    .dx-kpis { grid-template-columns: repeat(4, 1fr); }
    .dx-row-2, .dx-row-3 { grid-template-columns: 1fr 1fr; }
    .dx-row-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .dx-kpis { grid-template-columns: repeat(2, 1fr); }
    .dx-row-2, .dx-row-3, .dx-row-4 { grid-template-columns: 1fr; }
    .dx-quick { grid-template-columns: 1fr 1fr 1fr; }
    .app-content { padding: 1.1rem; }
}
@media (max-width: 560px) {
    .dx-kpis { grid-template-columns: 1fr; }
    .dx-donut-wrap { flex-direction: column; }
}

/* Modal obligatorio de tipo de cambio del día */
.tc-modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.tc-modal {
    background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
    padding: 1.75rem; width: 100%; max-width: 520px;
}
.tc-modal-title { margin: 0 0 .35rem; font-size: 1.15rem; }
.tc-modal-form { margin-top: 1rem; }

/* ============================================================
   EMSAN DESIGN SYSTEM v1 (UI-FE-001) — sólo presentación
   Notificaciones (toast), tooltips informativos, tarjetas,
   botones y espaciado. Punto de partida del estándar visual.
   ============================================================ */

/* ---------- Notificaciones (toast / snackbar) ----------
   El host es un contenedor fijo que crea/gestiona emsan-ui.js. Los <EmsanToast>
   se renderizan en el flujo de la página (SSR) y el JS los reubica en el host,
   los apila, los cierra a los 6 s y permite cerrarlos manualmente. */
#emsan-toast-host {
    position: fixed; top: 1rem; right: 1rem; z-index: 3000;
    display: flex; flex-direction: column; gap: .65rem;
    width: min(380px, calc(100vw - 2rem)); pointer-events: none;
}
.emsan-toast {
    display: flex; align-items: flex-start; gap: .7rem;
    background: #fff; border: 1px solid var(--emsan-border); border-left: 4px solid var(--emsan-muted);
    border-radius: 14px; padding: .85rem .95rem; box-shadow: var(--emsan-shadow-lg);
    pointer-events: auto; opacity: 0; transform: translateY(-8px) scale(.98);
    transition: opacity .22s ease, transform .22s ease;
}
.emsan-toast.emsan-toast--in { opacity: 1; transform: translateY(0) scale(1); }
.emsan-toast.emsan-toast--out { opacity: 0; transform: translateY(-8px) scale(.98); }
.emsan-toast-ico {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 800; line-height: 1; color: #fff;
}
.emsan-toast-body { flex: 1; min-width: 0; }
.emsan-toast-title { font-size: .86rem; font-weight: 700; color: var(--emsan-text); }
.emsan-toast-msg { font-size: .85rem; color: var(--emsan-muted); margin-top: .1rem; word-wrap: break-word; }
.emsan-toast-close {
    flex-shrink: 0; border: none; background: transparent; cursor: pointer;
    color: var(--emsan-muted); font-size: 1rem; line-height: 1; padding: .1rem .2rem; border-radius: 6px;
}
.emsan-toast-close:hover { background: var(--emsan-bg); color: var(--emsan-text); }
.emsan-toast--exito { border-left-color: var(--emsan-accent); }
.emsan-toast--exito .emsan-toast-ico { background: var(--emsan-accent); }
.emsan-toast--error { border-left-color: var(--emsan-err); }
.emsan-toast--error .emsan-toast-ico { background: var(--emsan-err); }
.emsan-toast--advertencia { border-left-color: var(--emsan-warn); }
.emsan-toast--advertencia .emsan-toast-ico { background: var(--emsan-warn); }
.emsan-toast--info { border-left-color: #2563EB; }
.emsan-toast--info .emsan-toast-ico { background: #2563EB; }

/* ---------- Icono informativo con tooltip (ⓘ) ----------
   Libera espacio: reemplaza párrafos largos por un icono que revela la
   explicación al pasar el mouse o enfocar con teclado. */
.emsan-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; margin-left: .35rem;
    color: var(--emsan-muted); cursor: help; position: relative; vertical-align: middle;
    font-size: .78rem; line-height: 1;
}
.emsan-info:hover, .emsan-info:focus-visible { color: var(--emsan-accent); outline: none; }
.emsan-info svg { width: 15px; height: 15px; }
.emsan-info::after {
    content: attr(data-tooltip);
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 280px; white-space: normal; text-align: left;
    background: var(--emsan-primary); color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.35;
    padding: .5rem .65rem; border-radius: 9px; box-shadow: var(--emsan-shadow-lg);
    opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 40;
}
.emsan-info::before {
    content: ""; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-bottom-color: var(--emsan-primary);
    opacity: 0; pointer-events: none; transition: opacity .16s ease; z-index: 41;
}
.emsan-info:hover::after, .emsan-info:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.emsan-info:hover::before, .emsan-info:focus-visible::before { opacity: 1; }
/* Tooltip alineado a la derecha para iconos cercanos al borde de la pantalla. */
.emsan-info.emsan-info--left::after { left: auto; right: -4px; transform: translateY(4px); }
.emsan-info.emsan-info--left:hover::after, .emsan-info.emsan-info--left:focus-visible::after { transform: translateY(0); }
.emsan-info.emsan-info--left::before { left: auto; right: 4px; transform: none; }

/* ---------- Tarjetas de sección (estándar FE) ----------
   Superficie limpia y consistente para Configuración Hacienda, Correo SMTP,
   Herramientas SMTP y Certificado. Reemplaza cajas sueltas por una tarjeta única. */
.fe-panel {
    background: #fff; border: 1px solid var(--emsan-border); border-radius: var(--emsan-radius);
    box-shadow: var(--emsan-shadow); padding: 1.5rem 1.6rem; margin-bottom: 1.15rem; max-width: 880px;
}
.fe-panel-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.fe-panel-ico {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: #E4F4F3; color: var(--emsan-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.fe-panel-ico svg { width: 20px; height: 20px; }
.fe-panel-titles { min-width: 0; }
.fe-panel-titles h2 { font-size: 1.06rem; font-weight: 700; margin: 0; letter-spacing: -.01em; color: var(--emsan-text); }
.fe-panel-titles p { margin: .12rem 0 0; font-size: .82rem; color: var(--emsan-muted); }
.fe-panel-head .badge { margin-left: auto; }

/* ---------- Cabecera de página FE con acción a la derecha ---------- */
.fe-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.fe-page-head h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fe-page-head p { margin: .3rem 0 0; color: var(--emsan-muted); font-size: .92rem; max-width: 720px; }

/* Subgrupos dentro de un mismo formulario (una sola acción de guardado). */
.fe-subsection { margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid var(--emsan-border); }
.fe-subsection:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.fe-subsection-title { display: flex; align-items: center; gap: .55rem; font-size: .98rem; font-weight: 700; margin: 0 0 .3rem; color: var(--emsan-text); letter-spacing: -.01em; }
.fe-subsection-sub { margin: 0 0 1rem; font-size: .82rem; color: var(--emsan-muted); }
.fe-status-line { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- Botones: estilo unificado (altura, borde, alineación) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 40px; line-height: 1.1; font-weight: 600; vertical-align: middle; white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { box-shadow: 0 6px 16px rgba(15,39,78,.18); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(15,39,78,.24); }
.btn-accent { background: var(--emsan-accent); border-color: var(--emsan-accent); color: #fff; box-shadow: 0 6px 16px rgba(16,142,139,.22); }
.btn-accent:hover { background: var(--emsan-accent-dark); border-color: var(--emsan-accent-dark); color: #fff; }
.btn-sm { min-height: 32px; padding: .3rem .7rem; font-size: .82rem; }
.btn-icon svg { width: 16px; height: 16px; }

/* ---------- Indicadores rápidos (tarjetas de resumen, reutilizables) ---------- */
.emsan-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; margin-bottom: 1.25rem; }
.emsan-stat {
    background: #fff; border: 1px solid var(--emsan-border); border-radius: 16px; padding: .95rem 1.1rem;
    box-shadow: var(--emsan-shadow-sm); display: flex; flex-direction: column; gap: .4rem; border-top: 3px solid var(--emsan-muted);
}
.emsan-stat-val { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--emsan-text); line-height: 1; }
.emsan-stat-lbl { font-size: .78rem; color: var(--emsan-muted); font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.emsan-stat-lbl svg { width: 14px; height: 14px; }
.emsan-stat.s-total { border-top-color: var(--emsan-primary); }
.emsan-stat.s-ok    { border-top-color: #22c55e; }
.emsan-stat.s-pend  { border-top-color: #f59e0b; }
.emsan-stat.s-rej   { border-top-color: #ef4444; }
.emsan-stat.s-mail  { border-top-color: #2563eb; }

/* ---------- Barra de herramientas: buscador + chips de filtro (reutilizable) ---------- */
.emsan-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.emsan-search { position: relative; flex: 1 1 300px; max-width: 440px; }
.emsan-search > svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--emsan-muted); pointer-events: none; }
.emsan-search input { width: 100%; padding: .58rem .8rem .58rem 2.2rem; border: 1px solid var(--emsan-border); border-radius: 12px; font-size: .9rem; background: #fff; color: var(--emsan-text); }
.emsan-search input:focus { outline: 2px solid var(--emsan-accent); border-color: var(--emsan-accent); }

.emsan-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.emsan-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border: 1px solid var(--emsan-border);
    border-radius: 999px; background: #fff; color: var(--emsan-muted); font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.emsan-chip:hover { border-color: var(--emsan-accent); color: var(--emsan-text); }
.emsan-chip.is-active { background: var(--emsan-primary); border-color: var(--emsan-primary); color: #fff; }
.emsan-chip .chip-count {
    font-size: .7rem; font-weight: 700; background: var(--emsan-bg); color: var(--emsan-muted);
    border-radius: 999px; padding: .02rem .4rem; min-width: 1.1rem; text-align: center;
}
.emsan-chip.is-active .chip-count { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Badges de estado / correo (canónicos, con punto de color) ---------- */
.estado-badge, .correo-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.estado-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.estado-badge.estado-pendiente { background: #fef3c7; color: #92400e; } .estado-badge.estado-pendiente::before { background: #f59e0b; }
.estado-badge.estado-enviado, .estado-badge.estado-recibido { background: #dbeafe; color: #1e40af; }
.estado-badge.estado-enviado::before, .estado-badge.estado-recibido::before { background: #3b82f6; }
.estado-badge.estado-aceptado { background: #dcfce7; color: #166534; } .estado-badge.estado-aceptado::before { background: #22c55e; }
.estado-badge.estado-rechazado { background: #fee2e2; color: #991b1b; } .estado-badge.estado-rechazado::before { background: #ef4444; }
.estado-badge.estado-error { background: #f3f4f6; color: #6b7280; } .estado-badge.estado-error::before { background: #9ca3af; }
.correo-badge svg { width: 13px; height: 13px; }
.correo-badge.correo-enviado { background: #dcfce7; color: #166534; }
.correo-badge.correo-error { background: #fee2e2; color: #991b1b; }
/* BUG-002: «esperando aceptación» (aún no enviado, azul informativo) vs «sin correo» (gris neutro). */
.correo-badge.correo-noenviado { background: #eff6ff; color: #1d4ed8; }
.correo-badge.correo-sindestinatario { background: #f3f4f6; color: #6b7280; }

/* ---------- Tabla moderna (modificadores; no altera otras tablas) ---------- */
.data-table.is-modern { border-radius: 14px; }
.data-table.is-modern th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .7rem .95rem; }
.data-table.is-modern td { padding: .8rem .95rem; vertical-align: middle; }
.data-table.is-modern tbody tr { transition: background .12s ease; }
.data-table.is-modern tbody tr:hover td { background: #F7F9FC; }
.mono { font-family: 'Courier New', monospace; font-size: .86rem; color: var(--emsan-text); }
.cell-muted { color: var(--emsan-muted); font-size: .82rem; }

/* ---------- Acciones con iconos (agrupadas) ---------- */
.hist-actions { display: inline-flex; align-items: center; gap: .1rem; }
.hist-actions form { margin: 0; display: inline-flex; }
.hist-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid transparent; background: transparent; color: var(--emsan-muted); cursor: pointer; text-decoration: none;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.hist-icon-btn:hover { background: var(--emsan-bg); color: var(--emsan-primary); border-color: var(--emsan-border); text-decoration: none; }
.hist-icon-btn svg { width: 16px; height: 16px; }
.hist-icon-btn.disabled { opacity: .35; pointer-events: none; }

/* Estado de carga por acción (BUG-001): spinner mientras la acción se ejecuta; evita doble ejecución. */
@keyframes emsan-spin { to { transform: rotate(360deg); } }
.hist-icon-btn.is-busy, .btn.is-busy { position: relative; pointer-events: none; }
.hist-icon-btn.is-busy svg, .btn.is-busy .btn-icon, .btn.is-busy > svg { visibility: hidden; }
.btn.is-busy { color: transparent; }
.hist-icon-btn.is-busy::after, .btn.is-busy::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border: 2px solid var(--emsan-border); border-top-color: var(--emsan-primary); border-radius: 50%;
    animation: emsan-spin .6s linear infinite;
}

/* Estado vacío del filtro local (lo controla emsan-historial.js) */
.hist-empty-filtro { display: none; }

@media (max-width: 1100px) { .emsan-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
    .emsan-stats { grid-template-columns: repeat(2, 1fr); }
    .emsan-toolbar { flex-direction: column; align-items: stretch; }
    .emsan-search { max-width: none; }
}