/* #4589 CONTATIC - Sistema de diseno del modulo Contabilidad.
   Espejo del lenguaje visual del dashboard de Informes/Ventas (report-page / dashboard-*):
   hero degradado azul marino, tarjetas metrica grandes y aireadas, paneles blancos de radio
   amplio, tablas anchas con cabecera en mayusculas y toolbar tipo report-card.
   Reutiliza las variables globales --tudetic-* de EstilosTudetic.css.
   Solo ASCII en este fichero (sin acentos ni enie). */

/* ===== Contenedor de pagina (como .report-page: columna aireada, sin caja) ===== */
.conta-wrap {
    /* variables locales que ya consumen las paginas y el HTML generado desde code-behind */
    --brand:#4f46e5; --brand-dark:#4338ca; --brand-50:#eef2ff; --brand-100:#e0e7ff;
    --ink:#0f172a; --text:#334155; --muted:#64748b; --dim:#94a3b8;
    --line:#e2e8f0; --line-soft:#f1f5f9; --bg:#f6f7fb; --surface:#ffffff;
    --ok:#16a34a; --ok-bg:#dcfce7; --ok-ink:#15803d;
    --bad:#dc2626; --bad-bg:#fee2e2; --bad-ink:#b91c1c;
    --warn:#ea580c; --warn-bg:#ffedd5; --warn-ink:#c2410c;
    --info:#0284c7; --info-bg:#e0f2fe; --info-ink:#0369a1;
    --amber:#d97706; --amber-bg:#fef3c7; --amber-ink:#b45309;
    --simulado-bg:#fffbeb; --simulado-line:#fde68a;
    --shadow:var(--tudetic-shadow, 0 18px 40px rgba(15,23,42,.08));
    --shadow-h:0 24px 48px rgba(15,23,42,.12);
    --radius:18px; --radius-lg:24px;

    display:flex; flex-direction:column; gap:20px;
    max-width:1440px; margin:0 auto;
    color:var(--text);
    font-family:"Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
}
.conta-wrap * { box-sizing:border-box; }

/* ===== Cabecera hero (mismo lenguaje que .dashboard-hero de Ventas) ===== */
.conta-wrap .conta-header {
    display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
    padding:28px; border-radius:28px; color:#f8fafc;
    background:
        radial-gradient(circle at top left, rgba(96,165,250,.30), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37,99,235,.22), transparent 36%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #1d4ed8 100%);
    box-shadow:0 24px 56px rgba(15,23,42,.18);
    border:none; margin:0;
}
.conta-wrap .conta-header .accent { display:none; }   /* la barrita lateral antigua ya no se usa */
.conta-wrap .conta-header h1 {
    margin:0; font-size:clamp(1.7rem, 3.2vw, 2.5rem); font-weight:800; color:#f8fafc;
    letter-spacing:-.01em;
}
.conta-wrap .conta-header p {
    margin:10px 0 0; max-width:680px; color:rgba(248,250,252,.82); font-size:1rem; line-height:1.5;
}
.conta-kicker {
    display:inline-flex; margin-bottom:12px; padding:6px 12px; border-radius:999px;
    background:rgba(255,255,255,.14); color:#f8fafc;
    font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.conta-header-side { display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex:0 0 auto; }
.conta-header-side .conta-date { font-size:.95rem; color:rgba(255,255,255,.78); }
/* boton claro dentro del hero (como .dashboard-refresh) */
.conta-header-side .conta-btn,
.conta-header-side .conta-btn.primary {
    background:#f8fafc; color:#0f172a; border:none; font-weight:700; min-width:150px;
    justify-content:center; box-shadow:0 8px 18px rgba(15,23,42,.25);
}
.conta-header-side .conta-btn:hover { background:#e2e8f0; }

/* ===== Bloques de seccion (como .dashboard-block-header) ===== */
.conta-section-title {
    display:inline-flex; align-items:center; gap:8px; margin:6px 0 -6px;
    color:#1d4ed8; font-size:.82rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase;
}
.conta-section-title::before { content:none; }
.conta-block-header { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin:6px 0 -4px; }
.conta-block-header .conta-section-title { margin:0; }
.conta-block-header h2 { margin:4px 0 0; font-size:1.45rem; font-weight:800; color:var(--ink); }
.conta-block-header p { margin:0; max-width:460px; color:var(--muted); font-size:.95rem; line-height:1.45; text-align:right; }

/* ===== Toolbar de filtros (como .report-card .report-filters) ===== */
.conta-toolbar {
    display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px;
    background:var(--surface); border:1px solid var(--tudetic-border, #e2e8f0);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
    margin:0;
}
.conta-toolbar label {
    display:block; font-size:.78rem; font-weight:600; color:var(--muted);
    letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px;
}
.conta-toolbar input, .conta-toolbar select {
    background:var(--surface); border:1px solid #cbd5e1; color:var(--ink); font-family:inherit;
    font-size:.95rem; padding:9px 14px; border-radius:12px; outline:none; min-height:42px;
    transition:border-color .15s, box-shadow .15s;
}
.conta-toolbar input:focus, .conta-toolbar select:focus {
    border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,70,229,.14);
}
.conta-toolbar .conta-toolbar-spacer { margin-left:auto; color:var(--muted); font-size:.9rem; align-self:center; }

/* ===== Botones ===== */
.conta-btn {
    font-family:inherit; font-weight:600; font-size:.92rem;
    padding:10px 20px; border-radius:12px; cursor:pointer; min-height:42px;
    display:inline-flex; align-items:center; gap:8px;
    background:var(--surface); color:var(--ink); border:1px solid #cbd5e1;
    transition:background .15s, box-shadow .15s, transform .05s;
}
.conta-btn:hover { background:var(--line-soft); }
.conta-btn:active { transform:translateY(1px); }
.conta-btn.primary {
    background:var(--brand); color:#fff; border-color:var(--brand);
    box-shadow:0 10px 24px rgba(79,70,229,.28); font-weight:700;
}
.conta-btn.primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.conta-btn.danger { background:var(--bad); color:#fff; border-color:var(--bad); box-shadow:0 10px 24px rgba(220,38,38,.22); }
.conta-btn.danger:hover { background:var(--bad-ink); border-color:var(--bad-ink); }
.conta-btn:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.conta-btn.small { padding:6px 12px; min-height:32px; font-size:.82rem; border-radius:10px; }

/* ===== Tarjetas metrica (como .dashboard-metric) ===== */
.conta-cards {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(208px, 1fr)); gap:16px; margin:0;
}
.conta-card {
    display:flex; flex-direction:column; gap:10px; min-height:136px;
    padding:22px; border-radius:22px;
    border:1px solid rgba(148,163,184,.18);
    background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:var(--shadow);
    transition:box-shadow .2s, transform .2s;
}
.conta-card:hover { box-shadow:var(--shadow-h); transform:translateY(-2px); }
.conta-card .titulo {
    color:var(--muted); font-size:.9rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.08em;
}
.conta-card .valor {
    font-size:clamp(1.55rem, 2.6vw, 2.3rem); line-height:1.05; font-weight:800;
    color:var(--ink); letter-spacing:-.015em; margin:0;
}
.conta-card .sub { color:var(--muted); font-size:.92rem; line-height:1.45; }
.conta-card.destacada { background:linear-gradient(180deg, #eff6ff 0%, #ffffff 100%); border-color:rgba(30,64,175,.18); }
.conta-card.ok   { background:linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%); border-color:rgba(22,163,74,.22); }
.conta-card.ok .valor { color:var(--ok-ink); }
.conta-card.warn { background:linear-gradient(180deg, #fff7ed 0%, #ffffff 100%); border-color:rgba(234,88,12,.22); }
.conta-card.warn .valor { color:var(--warn-ink); }
.conta-card.bad  { background:linear-gradient(180deg, #fef2f2 0%, #ffffff 100%); border-color:rgba(220,38,38,.22); }
.conta-card.bad .valor { color:var(--bad-ink); }

/* ===== Paneles (como .dashboard-panel) ===== */
.conta-panel {
    background:var(--surface); border:1px solid var(--tudetic-border, #e2e8f0);
    border-radius:var(--radius-lg); box-shadow:var(--shadow);
    margin:0; overflow:hidden;
}
.conta-panel > .conta-panel-head {
    display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    padding:18px 24px 14px; background:var(--surface); border-bottom:1px solid var(--line-soft);
    font-weight:700; font-size:1.15rem; color:var(--ink); letter-spacing:-.01em;
}
.conta-panel > .conta-panel-head .tag {
    background:rgba(30,64,175,.10); color:#1d4ed8; font-size:.74rem; font-weight:700;
    padding:4px 12px; border-radius:999px; margin-left:4px; letter-spacing:.02em;
}
.conta-panel > .conta-panel-head .sub, .conta-panel-sub {
    flex-basis:100%; font-weight:400; font-size:.92rem; color:var(--muted); margin:0;
}
.conta-panel-body { padding:20px 24px; }

/* ===== Tablas (como .dashboard-table) ===== */
.conta-table-wrap { overflow-x:auto; }
table.conta-table { width:100%; border-collapse:collapse; font-size:.95rem; margin:0; background:var(--surface); }
table.conta-table th {
    text-align:left; padding:14px 16px; background:rgba(30,64,175,.08); color:var(--ink);
    font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em;
    border-bottom:none; position:sticky; top:0; white-space:nowrap;
}
table.conta-table td {
    padding:12px 16px; border-bottom:1px solid var(--tudetic-border, #e2e8f0);
    color:var(--text); vertical-align:middle;
}
table.conta-table tbody tr:hover td { background:rgba(30,64,175,.05); }
table.conta-table td.num, table.conta-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.conta-table td.money {
    text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600;
}
table.conta-table td.neg { color:var(--bad-ink); }
/* Fila de totales */
table.conta-table tr.conta-total td, .conta-total {
    font-weight:700; color:var(--ink); border-top:2px solid rgba(30,64,175,.35);
    background:rgba(30,64,175,.05);
}
/* Version compacta para tablas muy largas (libros) */
table.conta-table.compacta th { padding:10px 12px; }
table.conta-table.compacta td { padding:8px 12px; font-size:.88rem; }

/* Lineas expandibles (drill-down PyG/Balance/Mayor) */
.conta-drill { cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; color:var(--brand); font-weight:600; }
.conta-drill:hover { color:var(--brand-dark); }

/* Asientos SIMULADO: nunca suman en libros, se distinguen en ambar palido */
tr.conta-simulado td, .conta-simulado { background:var(--simulado-bg) !important; }
tr.conta-simulado td:first-child { border-left:3px solid var(--simulado-line); }

/* ===== Badges de estado ===== */
.conta-badge {
    display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:700;
    padding:4px 12px; border-radius:999px; white-space:nowrap; letter-spacing:.01em;
}
.conta-badge.ok { background:var(--ok-bg); color:var(--ok-ink); }
.conta-badge.warn { background:var(--warn-bg); color:var(--warn-ink); }
.conta-badge.bad { background:var(--bad-bg); color:var(--bad-ink); }
.conta-badge.info { background:var(--info-bg); color:var(--info-ink); }
.conta-badge.neutro { background:var(--line-soft); color:var(--muted); }

/* ===== Notas / avisos (callouts) ===== */
.conta-note, .conta-verif-note, .conta-resultado {
    padding:14px 18px; border-radius:14px; font-size:.92rem; line-height:1.5;
    background:var(--info-bg); color:var(--info-ink); border:1px solid rgba(2,132,199,.18);
}
.conta-note.ok, .conta-resultado.ok { background:var(--ok-bg); color:var(--ok-ink); border-color:rgba(22,163,74,.2); }
.conta-note.warn { background:var(--warn-bg); color:var(--warn-ink); border-color:rgba(234,88,12,.2); }
.conta-note.bad, .conta-resultado.bad { background:var(--bad-bg); color:var(--bad-ink); border-color:rgba(220,38,38,.2); }

/* ===== Pestanas (ModelosFiscales, LibrosIVA) ===== */
.conta-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.conta-tabs a, .conta-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 18px; border-radius:999px; font-weight:600; font-size:.9rem;
    color:var(--muted); background:var(--surface); border:1px solid var(--tudetic-border, #e2e8f0);
    text-decoration:none; transition:all .15s ease; box-shadow:var(--shadow);
}
.conta-tabs a:hover, .conta-tab:hover { color:var(--brand-dark); border-color:var(--brand-100); background:var(--brand-50); }
.conta-tabs a.activa, .conta-tab.activa {
    background:var(--brand); border-color:var(--brand); color:#fff;
    box-shadow:0 10px 24px rgba(79,70,229,.28);
}

/* ===== Accesos directos (Default y similares) ===== */
.conta-quick { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; }
.conta-quick a {
    display:block; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border:1px solid rgba(148,163,184,.18); border-radius:22px;
    padding:20px 22px; text-decoration:none; color:var(--ink); font-weight:700; font-size:.98rem;
    box-shadow:var(--shadow); transition:box-shadow .2s, transform .2s;
}
.conta-quick a:hover { box-shadow:var(--shadow-h); transform:translateY(-2px); color:var(--brand-dark); }
.conta-quick a .sub { display:block; font-weight:400; color:var(--muted); font-size:.85rem; margin-top:6px; line-height:1.4; }

/* ===== Formularios (asientos, configuracion, reglas...) ===== */
.conta-form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px 18px; }
.conta-form-grid.cols-2 { grid-template-columns:repeat(2, 1fr); }
.conta-form-grid.cols-3 { grid-template-columns:repeat(3, 1fr); }
.conta-form-grid.cols-4 { grid-template-columns:repeat(4, 1fr); }
.conta-form-grid label {
    display:block; font-size:.78rem; font-weight:600; color:var(--muted);
    letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px;
}
.conta-form-grid input, .conta-form-grid select, .conta-form-grid textarea {
    width:100%; background:var(--surface); border:1px solid #cbd5e1; color:var(--ink); font-family:inherit;
    font-size:.95rem; padding:9px 14px; border-radius:12px; outline:none; min-height:42px;
    transition:border-color .15s, box-shadow .15s;
}
.conta-form-grid textarea { min-height:74px; }
.conta-form-grid input:focus, .conta-form-grid select:focus, .conta-form-grid textarea:focus {
    border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,70,229,.14);
}

/* ===== Editor de asientos (tabla con inputs dentro) ===== */
table.conta-editor-table { width:100%; border-collapse:collapse; font-size:.92rem; }
table.conta-editor-table th {
    text-align:left; padding:10px 12px; background:rgba(30,64,175,.08); color:var(--ink);
    font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
}
table.conta-editor-table td { padding:6px 8px; border-bottom:1px solid var(--line-soft); }
table.conta-editor-table input, table.conta-editor-table select {
    width:100%; background:var(--surface); border:1px solid #cbd5e1; color:var(--ink);
    font-family:inherit; font-size:.9rem; padding:7px 10px; border-radius:10px; outline:none;
    transition:border-color .15s, box-shadow .15s;
}
table.conta-editor-table input:focus, table.conta-editor-table select:focus {
    border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.14);
}
table.conta-editor-table input.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ===== Log de procesos (sincronizacion, importaciones) ===== */
.conta-log {
    background:#0f172a; color:#e2e8f0; border-radius:16px; padding:18px 20px;
    font-family:"Cascadia Code","Consolas",monospace; font-size:.82rem; line-height:1.6;
    max-height:420px; overflow:auto; white-space:pre-wrap; word-break:break-word;
}

/* ===== Icono de ayuda con tooltip nativo (title) ===== */
.conta-help {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; background:var(--brand-100); color:var(--brand-dark);
    font-size:.72rem; font-weight:700; font-style:normal; cursor:help; user-select:none; margin-left:5px;
    vertical-align:middle; line-height:1;
}
.conta-help:hover { background:var(--brand); color:#fff; }

/* ===== Estados vacios (como .dashboard-empty) ===== */
.conta-empty {
    padding:20px; border-radius:16px; background:rgba(148,163,184,.1);
    color:var(--muted); text-align:center; font-style:normal;
}
.conta-muted { color:var(--dim); }

/* ===== Responsive ===== */
@media (max-width:900px) {
    .conta-wrap .conta-header { flex-direction:column; align-items:flex-start; padding:22px; border-radius:22px; }
    .conta-header-side { align-items:flex-start; width:100%; }
    .conta-block-header { flex-direction:column; align-items:flex-start; gap:8px; }
    .conta-block-header p { text-align:left; }
}
@media (max-width:768px) {
    .conta-wrap .conta-header h1 { font-size:1.5rem; }
    .conta-cards { grid-template-columns:1fr 1fr; }
    .conta-form-grid.cols-2, .conta-form-grid.cols-3, .conta-form-grid.cols-4 { grid-template-columns:1fr; }
    .conta-panel-body { padding:16px; }
}
@media (max-width:520px) {
    .conta-cards { grid-template-columns:1fr; }
}

/* ===== Impresion: fuera hero/toolbar/nav, tablas limpias para el PDF del navegador ===== */
@media print {
    .conta-toolbar, .conta-header-side, nav, .app-navbar, .app-header, .app-footer,
    .conta-btn, .conta-tabs, .conta-quick { display:none !important; }
    .conta-wrap { max-width:none; gap:12px; }
    .conta-wrap .conta-header {
        background:none; color:#000; box-shadow:none; padding:0 0 10px; border-radius:0;
        border-bottom:2px solid #000;
    }
    .conta-wrap .conta-header h1, .conta-wrap .conta-header p { color:#000; }
    .conta-kicker { display:none; }
    .conta-panel, .conta-card { box-shadow:none; border:1px solid #94a3b8; border-radius:6px; }
    table.conta-table th { position:static; background:#eee; color:#000; }
}