/*
  estilos.css - Cartera App
  Corporativo tecnológico — paleta original restaurada + legibilidad máxima.
  Base: Inter / Segoe UI, azul SEH, sin serif editorial.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta original recuperada */
  --azul: #1d4ed8;
  --azul-osc: #1e3a8a;
  --azul-claro: #eff6ff;
  --azul-medio: #3b82f6;
  --verde: #15803d;
  --verde-soft: #dcfce7;
  --rojo: #b91c1c;
  --rojo-soft: #fee2e2;
  --fondo: #eef2f7;
  --card: #ffffff;
  --borde: #dde3ee;
  --borde-strong: #cbd5e1;
  --texto: #1f2937;
  --texto-soft: #334155;
  --gris: #6b7280;
  --muted: #64748b;
  /* Aliases para compat con ledger hero y JS inline */
  --paper: var(--fondo);
  --paper-2: #f8fafc;
  --rule: var(--borde);
  --border: var(--borde);
  --border-strong: var(--borde-strong);
  --ink: var(--texto);
  --ink-soft: var(--texto-soft);
  --brass: var(--azul);
  --brass-deep: var(--azul-osc);
  --brass-soft: var(--azul-claro);
  --teal: var(--verde);
  --teal-soft: var(--verde-soft);
  --rust: var(--rojo);
  --rust-soft: var(--rojo-soft);
  --sombra: 0 4px 24px rgba(15, 23, 42, .08);
  --sombra-card: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);
  --radius-card: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;
}

/* Base — Inter como primera opción, Segoe UI fallback, muy legible */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{
  margin:0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size:14.5px; line-height:1.55; letter-spacing:-.01em;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(29, 78, 216, .06), transparent 60%),
    radial-gradient(700px 300px at -10% 0%, rgba(59, 130, 246, .05), transparent 55%),
    var(--fondo);
  color:var(--texto);
}
a{color:var(--azul); text-underline-offset:3px}
a:hover{color:var(--azul-osc)}
:focus-visible{outline:2px solid var(--azul); outline-offset:2px; border-radius:2px}

/* ================= Header — corporativo tecnológico ================= */
.site-header{
  background: linear-gradient(135deg, var(--azul-osc) 0%, #1e40af 45%, var(--azul) 100%);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14);
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 24px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .2);
}
.site-header::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 200px at 20% 0%, rgba(255,255,255,.08), transparent 70%);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; position:relative; z-index:1}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:#fff; color:var(--azul-osc);
  display:grid; place-items:center;
  font-weight:800; font-size:14px; letter-spacing:-.02em;
  flex-shrink:0; box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.brand-text{line-height:1}
.brand-title{
  font-size:17px; font-weight:750; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:8px;
}
.brand-title small{
  font-weight:500; font-size:12px; letter-spacing:.02em; color:#dbeafe; opacity:.92;
}
.brand-sub{font-size:11.5px; color:#bfdbfe; letter-spacing:.02em; margin-top:2px; font-weight:500}
.header-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:relative; z-index:1}
.empresa-wrap{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-pill); padding:4px 4px 4px 12px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.empresa-wrap label{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.92); white-space:nowrap}
.empresa-select{
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid rgba(255,255,255,.55); border-radius:8px; padding:7px 30px 7px 12px;
  font-size:13px; font-weight:600; color:var(--texto); cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08); min-width:220px; max-width:300px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition: background .15s, border-color .15s;
}
.empresa-select:hover{background:rgba(255,255,255,.96); border-color:#fff}
.empresa-select:focus{background:#fff; border-color:#fff}
.empresa-select:focus-visible{outline:2px solid #fff; outline-offset:2px}
.chip{font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.16); color:#fff; display:inline-flex; align-items:center; gap:8px; backdrop-filter:blur(4px)}
.chip.ok{background:#16a34a; border-color:#16a34a; box-shadow:0 1px 8px rgba(22,163,74,.35)}
.chip.mal{background:#dc2626; border-color:#dc2626; box-shadow:0 1px 8px rgba(220,38,38,.35)}
.chip-usuario{background:#eef2ff; border-color:#c7d2fe; color:#3730a3; font-weight:600; box-shadow:0 1px 4px rgba(99,102,241,.15)}
.avatar{width:22px; height:22px; border-radius:50%; background:var(--azul); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700}

/* ================= Nav — tabs corporativos (sticky transparente armonioso) ================= */
.tabs{
  position:sticky; top:60px; z-index:19;
  display:flex; gap:2px; padding:0 24px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(221,227,238,.7);
  box-shadow:0 1px 8px rgba(15,23,42,.04);
}
.tabs button{
  appearance:none; border:none; background:transparent;
  padding:13px 18px; cursor:pointer;
  font-size:13.5px; font-weight:600; letter-spacing:.01em; color:var(--gris);
  border-bottom:3px solid transparent; margin-bottom:-1px; border-radius:7px 7px 0 0;
  transition: color .16s, border-color .16s, background .16s;
}
.tabs button:hover{color:var(--texto); background:#f8fafc}
.tabs button.activo{color:var(--azul); border-bottom-color:var(--azul); background:var(--azul-claro)}

/* ================= Main ================= */
main{max-width:1360px; margin:0 auto; padding:22px 24px 36px}
section.tab{display:none}
section.tab.activa{display:block; animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ section.tab.activa{animation:none} }

/* ================= Hero — métricas corporativas (tech, limpio) ================= */
.ledger-hero{
  display:grid; grid-template-columns: 1.35fr .9fr .9fr;
  gap:0; margin-bottom:16px;
  background:var(--card); border:1px solid var(--borde);
  border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--sombra-card);
}
.ledger-hero .hero-main, .ledger-hero .hero-stat{
  padding:18px 20px; border-right:1px solid var(--borde); position:relative;
}
.ledger-hero .hero-stat:last-child{border-right:none}
.hero-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.hero-main p{
  font-size:15px; line-height:1.45; color:var(--texto-soft); margin:0; max-width:52ch; font-weight:500;
}
.hero-main p strong{color:var(--texto); font-weight:700}
.hero-number{
  font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--texto);
  font-variant-numeric:tabular-nums;
}
.hero-number small{font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.01em}
.hero-stat .mini{margin-top:4px; font-size:12px; color:var(--muted)}

/* ================= Toolbar ================= */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.toolbar .espacio{flex:1}
.stat{font-size:13px; color:var(--muted)}
.stat b{color:var(--texto)}
#buscar{
  border-radius:var(--radius-pill);
  background:#fff 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='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20L16 16'/%3E%3C/svg%3E") no-repeat 12px center;
  padding-left:34px; min-width:280px;
}

/* ================= Inputs — más legibles (16px base, alto contraste) ================= */
input[type=text], input[type=number], input[type=password], input[type=date], select, textarea{
  padding:9px 12px; border:1px solid var(--borde); border-radius:var(--radius-input);
  font-size:13.5px; background:#fff; color:var(--texto); font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(29,78,216,.14)}
.ayuda{font-size:12px; color:var(--gris); margin-top:4px; font-weight:400}
.mini{font-size:12.5px; color:var(--gris)}

/* ================= Botones — tech, alto contraste ================= */
.btn{
  border:none; border-radius:10px; padding:9px 16px;
  font-size:13px; font-weight:700; cursor:pointer;
  background:var(--azul); color:#fff;
  box-shadow:0 1px 3px rgba(29,78,216,.28), 0 1px 2px rgba(0,0,0,.06);
  transition: filter .15s, transform .12s, box-shadow .15s;
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
}
.btn:hover{filter:brightness(1.06); box-shadow:0 4px 14px rgba(29,78,216,.30)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none; transform:none}
.btn.sec{background:#fff; color:var(--texto); border:1px solid var(--borde); box-shadow:0 1px 2px rgba(15,23,42,.06); font-weight:600}
.btn.sec:hover{background:#f8fafc; border-color:var(--borde-strong); box-shadow:0 3px 10px rgba(15,23,42,.08)}
.btn.peligro{background:var(--rojo)}
.btn.exito{background:var(--verde)}
.btn-brass{background:var(--azul); color:#fff; border:1px solid var(--azul-osc)}
.btn-brass:hover{background:#1e40af}

/* ================= Cards — limpias, borde sutil azul ================= */
.card{
  background:var(--card); border:1px solid var(--borde); border-radius:var(--radius-card);
  padding:22px; margin-bottom:16px; box-shadow:var(--sombra-card); position:relative;
}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--azul); opacity:.9; border-radius:var(--radius-card) 0 0 var(--radius-card)}
.card h3{font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--texto); margin:0 0 6px; display:flex; align-items:center; gap:8px}
.card .card-desc{font-size:13px; color:var(--gris); margin:0 0 14px; line-height:1.5; max-width:72ch}

/* ================= Tablas — corporativas, alta legibilidad ================= */
.tabla-wrap{border:1px solid var(--borde); border-radius:12px; background:#fff; box-shadow:var(--sombra-card); overflow:hidden; max-height:62vh; overflow-y:auto}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; background:#fff; table-layout:fixed; min-width:0}
thead th{
  position:sticky; top:0; z-index:1; background:rgba(248,250,252,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--borde);
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#475569; line-height:1.3;
}
tbody td{padding:10px 14px; border-bottom:1px solid #eef2f7; vertical-align:middle; overflow-wrap:anywhere; line-height:1.4; background:#fff}
tbody tr:nth-child(even) td{background:#fbfdff}
tbody tr{transition: none}
tbody tr:last-child td{border-bottom:none}
td.num, th.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600}
.empty-state{padding:34px 20px; text-align:center; color:var(--gris)}
.empty-state b{color:var(--texto)}
.badge{
  display:inline-grid; place-items:center; min-width:36px; height:26px; padding:0 10px;
  border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:-.01em;
  border:1px solid transparent; font-variant-numeric:tabular-nums;
}
.badge.rojo{background:var(--rojo-soft); color:var(--rojo); border-color:#fecaca}
.badge.verde{background:var(--verde-soft); color:var(--verde); border-color:#bbf7d0}
.badge.ambar{background:#fef9c3; color:#854d0e; border-color:#fde047}
input[readonly], textarea[readonly]{background:#f1f5f9; color:#475569; cursor:not-allowed}
.acciones{text-align:right; white-space:normal}
.acciones .btn{display:inline-flex; padding:6px 10px; font-size:12px; font-weight:700; border-radius:8px; min-width:58px; justify-content:center; margin:2px; line-height:1}
.acciones .btn[data-editar]{background:var(--azul-claro); color:var(--azul); border:1px solid #c7d2fe}
.acciones .btn[data-editar]:hover{background:#dbeafe; border-color:#93c5fd}
.acciones .btn[data-borrar]{background:#fff; color:var(--rojo); border:1px solid #fecaca}
.acciones .btn[data-borrar]:hover{background:var(--rojo-soft)}
.btnPrevia{background:#fff; color:var(--texto); border:1px solid var(--borde)}
.btnPrevia:hover{background:#f8fafc}
/* Anchos */
#tab-facturas th:nth-child(1), #tab-facturas td:nth-child(1){width:15%}
#tab-facturas th:nth-child(2), #tab-facturas td:nth-child(2){width:9%}
#tab-facturas th:nth-child(3), #tab-facturas td:nth-child(3){width:7%}
#tab-facturas th:nth-child(4), #tab-facturas td:nth-child(4){width:8%}
#tab-facturas th:nth-child(5), #tab-facturas td:nth-child(5){width:6%; text-align:center}
#tab-facturas th:nth-child(6), #tab-facturas td:nth-child(6){width:9%}
#tab-facturas th:nth-child(7), #tab-facturas td:nth-child(7){width:9%}
#tab-facturas th:nth-child(8), #tab-facturas td:nth-child(8){width:16%}
#tab-facturas th:nth-child(9), #tab-facturas td:nth-child(9){width:9%}
#tab-facturas th:nth-child(10), #tab-facturas td:nth-child(10){width:12%}
#tab-enviar th:nth-child(1), #tab-enviar td:nth-child(1){width:4%; text-align:center}
#tab-enviar th:nth-child(2), #tab-enviar td:nth-child(2){width:18%}
#tab-enviar th:nth-child(3), #tab-enviar td:nth-child(3){width:24%}
#tab-enviar th:nth-child(4), #tab-enviar td:nth-child(4){width:16%}
#tab-enviar th:nth-child(5), #tab-enviar td:nth-child(5){width:7%; text-align:center}
#tab-enviar th:nth-child(6), #tab-enviar td:nth-child(6){width:13%}
#tab-enviar th:nth-child(7), #tab-enviar td:nth-child(7){width:18%}
#tab-facturas td:nth-child(8), #tab-facturas td:nth-child(9), #tab-enviar td:nth-child(3), #tab-enviar td:nth-child(4){font-size:12px; line-height:1.35; overflow-wrap:anywhere; word-break:break-word}

/* ================= Dialogs ================= */
dialog{border:none; border-radius:14px; padding:0; max-width:920px; width:92%; box-shadow:0 28px 70px rgba(15,23,42,.32); background:#fff}
dialog::backdrop{background:rgba(15,23,42,.48); backdrop-filter:blur(3px)}
.dlg-head{display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:1px solid var(--borde); background:linear-gradient(180deg,#f8fafc,#fff); border-radius:14px 14px 0 0}
.dlg-head h3{margin:0; font-size:16px; font-weight:750; letter-spacing:-.015em}
.dlg-body{padding:22px}
.dlg-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--borde); background:#f8fafc; border-radius:0 0 14px 14px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px}
.grid label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:#334155}
.grid .completo{grid-column:1/-1}

/* Log / preview */
#log{background:#0f172a; color:#e2e8f0; font-family:Consolas, monospace; font-size:12.5px; border-radius:10px; padding:16px; min-height:110px; white-space:pre-wrap; display:none; border:1px solid #1e293b}
#log .ok{color:#4ade80} #log .mal{color:#f87171}
iframe.preview{width:100%; height:56vh; border:1px solid var(--borde); border-radius:10px; background:#fff; box-shadow:var(--sombra-card)}
/* Editor de plantilla — toolbar tech + área legible Inter */
.editor-wrap{
  border:1px solid var(--borde); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:var(--sombra-card);
}
.editor-toolbar{
  display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px;
  background:#f8fafc; border-bottom:1px solid var(--borde);
  position:sticky; top:0; z-index:1;
}
.editor-toolbar .tb-group{
  display:flex; gap:4px; padding-right:8px; margin-right:8px;
  border-right:1px solid var(--borde); align-items:center;
}
.editor-toolbar .tb-group:last-child{border-right:none; margin-right:0; padding-right:0}
.editor-toolbar button{
  width:32px; height:32px; border:1px solid var(--borde); background:#fff;
  border-radius:7px; cursor:pointer; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:var(--texto); line-height:1;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.editor-toolbar button:hover{background:var(--azul-claro); border-color:#c7d2fe; color:var(--azul-osc)}
.editor-toolbar button:active{transform:translateY(1px)}
.editor-toolbar button.activo{background:var(--azul); border-color:var(--azul); color:#fff}
.editor-toolbar button.tb-wide{width:auto; padding:0 10px; font-size:12px; font-weight:600}
.editor-toolbar select{
  height:32px; border:1px solid var(--borde); border-radius:7px; background:#fff;
  font-size:12.5px; font-weight:600; color:var(--texto); padding:0 8px;
}
.editor-content{
  min-height:320px; max-height:520px; overflow-y:auto;
  padding:16px 18px; outline:none;
  font-family:"Inter", "Segoe UI", system-ui, sans-serif;
  font-size:14px; line-height:1.65; color:var(--texto);
  background:#fff;
}
.editor-content:empty:before{
  content:attr(data-placeholder); color:#94a3b8; pointer-events:none;
}
.editor-content p{margin:0 0 10px}
.editor-content h2{font-size:18px; font-weight:800; letter-spacing:-.02em; margin:14px 0 8px; color:var(--texto)}
.editor-content h3{font-size:15px; font-weight:700; margin:12px 0 6px; color:var(--texto)}
.editor-content ul, .editor-content ol{margin:8px 0 12px 22px}
.editor-content a{color:var(--azul); text-decoration:underline}
.editor-content .var-tag{
  display:inline-flex; align-items:center; padding:1px 7px; border-radius:999px;
  background:var(--azul-claro); border:1px solid #c7d2fe; color:var(--azul-osc);
  font-size:12px; font-weight:700; letter-spacing:.02em; user-select:none;
}
.editor-content blockquote{
  border-left:3px solid var(--azul); margin:12px 0; padding:8px 12px;
  background:#f8fafc; border-radius:0 8px 8px 0; color:var(--texto-soft);
}
textarea#plantillaTxt{display:none !important}
.preview-meta{font-family:"Inter", system-ui, sans-serif; font-size:13px}
#previewFrame{font-family:"Inter", "Segoe UI", Arial, sans-serif}
.aviso{background:#fef9c3; border:1px solid #fde047; color:#854d0e; padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:14px; display:none}
.toast{position:fixed; right:20px; bottom:20px; background:#0f172a; color:#fff; padding:12px 18px; border-radius:10px; font-size:13.5px; opacity:0; transform:translateY(12px); transition:.25s; pointer-events:none; z-index:99; max-width:420px; box-shadow:0 10px 28px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08)}
.toast.visible{opacity:1; transform:none}
.toast.error{background:var(--rojo)}
.segmentos{display:flex; background:#f1f5f9; border-radius:10px; padding:4px; gap:4px; border:1px solid var(--borde)}
.segmentos button{flex:1; border:none; background:transparent; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:.15s}
.segmentos button.activo{background:#fff; color:var(--texto); box-shadow:0 1px 4px rgba(0,0,0,.10); border:1px solid var(--borde)}
textarea#impTexto{width:100%; box-sizing:border-box; font-family:Consolas, monospace; font-size:12.5px; line-height:1.5}
.oculto{display:none !important}

/* ================= Login ================= */
.body-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 60%); padding:20px;
}
.login-card{
  background:#fff; border:1px solid var(--borde); border-radius:16px;
  box-shadow:0 20px 56px rgba(15,23,42,.13); padding:36px 36px 28px;
  width:min(440px,92vw); text-align:center; position:relative; overflow:hidden;
}
.login-card::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--azul)}
.login-logo{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.login-card h1{margin:0 0 4px; font-size:24px; font-weight:800; letter-spacing:-.02em}
.login-sub{margin:0 0 22px; color:var(--muted); font-size:13.5px; line-height:1.5}
.login-etiqueta{font-size:13.5px; color:#334155; line-height:1.6; margin:0 0 14px; text-align:left}
.login-form{display:flex; flex-direction:column; gap:9px; text-align:left}
.login-form label{font-size:12.5px; font-weight:600; color:#374151}
.login-form input{width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--borde); border-radius:10px; font-size:13.5px}
.login-form input:focus{outline:2px solid #c7d2fe; border-color:var(--azul)}
.btn-ancho{width:100%; justify-content:center; padding:11px 16px}
.login-detalle{text-align:left; margin-top:16px; font-size:12.5px; color:var(--muted)}
.login-detalle summary{cursor:pointer; user-select:none; color:var(--texto-soft); font-weight:600}
.login-pasos{text-align:left; font-size:13px; line-height:1.65; color:#334155; padding-left:18px; margin:10px 0}
.login-pasos code{background:#f1f5f9; border-radius:6px; padding:1px 6px; font-size:12px; border:1px solid var(--borde)}
.login-footer{margin-top:22px; font-size:11.5px; color:#94a3b8; border-top:1px solid var(--borde); padding-top:14px}
.aviso-error{display:block; background:var(--rojo-soft); border:1px solid #fecaca; color:#991b1b; text-align:left; margin-bottom:12px; border-radius:10px; padding:10px 12px}
.aviso-info{display:block; background:var(--azul-claro); border:1px solid #bfdbfe; color:#1e40af; text-align:left; margin-bottom:6px; border-radius:10px; padding:10px 12px}
.enlace{background:none; border:none; color:var(--azul); cursor:pointer; font-size:12.5px; text-decoration:underline; padding:0; margin-top:14px}
.login-zona-btn{min-height:44px; display:flex; justify-content:center; align-items:center}
#btnGoogle{display:flex; justify-content:center; margin-bottom:14px}
.btn-salir{padding:6px 12px; font-size:12.5px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--texto); border:1px solid rgba(255,255,255,.6)}
.btn-salir:hover{background:#fff}

/* Responsive */
@media (max-width:980px){
  .site-header{padding:12px 16px}
  .tabs{padding:0 12px; overflow-x:auto; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  main{padding:16px}
  .ledger-hero{grid-template-columns:1fr}
  .ledger-hero .hero-main, .ledger-hero .hero-stat{border-right:none; border-bottom:1px solid var(--borde)}
  .ledger-hero .hero-stat:last-child{border-bottom:none}
  .grid{grid-template-columns:1fr}
  .tabla-wrap{max-height:none}
}
@media (max-width:780px){
  .empresa-wrap{padding:3px 3px 3px 10px}
  .empresa-select{min-width:150px; max-width:52vw}
  .tabla-wrap{overflow:visible; max-height:none; border:none; box-shadow:none; background:transparent}
  table, thead, tbody, th, td, tr{display:block; width:100% !important}
  thead{display:none}
  tbody tr{display:block; background:#fff; border:1px solid var(--borde); border-radius:12px; margin-bottom:12px; box-shadow:var(--sombra-card); overflow:hidden}
  tbody tr:hover td{box-shadow:none; background:inherit}
  tbody td{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 14px; border-bottom:1px solid #f1f5f9; text-align:left !important; white-space:normal !important}
  td::before{content:attr(data-label); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#64748b; flex-shrink:0; min-width:92px}
  td:last-child{border-bottom:none}
  td.num{justify-content:space-between}
  .acciones{justify-content:flex-end}
  .acciones::before{display:none}
  .brand-sub{display:none}
}