/* =========================================================
   Facturador FEL · Importaciones Rivas
   Sistema visual: grafito + rojo del logo, Barlow
   ========================================================= */
:root {
  --ink: #1E2228;          /* texto principal / estructura */
  --ink-2: #3A414B;
  --muted: #5F6773;        /* texto secundario */
  --line: #DCE0E5;         /* bordes */
  --line-soft: #ECEEF1;
  --bg: #EEF0F3;           /* fondo de la aplicación */
  --surface: #FFFFFF;
  --red: #D10A0A;          /* rojo del logo (ajustado para contraste) */
  --red-soft: #FDECEC;

  --ok: #1D7A46;   --ok-soft: #E3F3EA;     /* firmada */
  --warn: #8A5800; --warn-soft: #FDF1DA;   /* emitida */
  --bad: #B42318;  --bad-soft: #FDE7E5;    /* anulada / por anular */
  --off: #5F6773;  --off-soft: #ECEEF1;    /* cancelada */

  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --sidebar: 248px;
  --radius: 10px;
  --radius-sm: 6px;
}

/* ---------- Base ---------- */
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: .005em; }
a { color: var(--ink); }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid rgba(209,10,10,.35); outline-offset: 2px; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(209,10,10,.25); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 1040;
}
.app-main {
  margin-left: var(--sidebar);
  padding: 32px 40px 48px;
  min-height: 100vh;
  max-width: calc(1400px + var(--sidebar));
}

.app-brand {
  display: block;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none !important;
}
.app-brand img { display: block; width: 150px; height: auto; }
.app-brand span { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--muted); }

.app-nav { list-style: none; margin: 0; padding: 16px 12px; flex: 1; }
.app-nav .nav-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}
.app-nav .nav-link .oi { width: 16px; text-align: center; color: var(--muted); top: 0; }
.app-nav .nav-link:hover { background: var(--line-soft); color: var(--ink); }
.app-nav .nav-item.active .nav-link { background: var(--red-soft); color: var(--ink); font-weight: 600; }
.app-nav .nav-item.active .nav-link .oi { color: var(--red); }
.app-nav .nav-item.active .nav-link::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--red);
}

.app-user {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line-soft);
}
.app-user-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 14px;
}
.app-user-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-logout { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; padding: 6px 8px; border-radius: var(--radius-sm); text-decoration: none !important; }
.app-logout:hover { background: var(--line-soft); color: var(--red); }

.app-topbar { display: none; }
.app-backdrop { position: fixed; inset: 0; background: rgba(30,34,40,.45); z-index: 1030; }

@media (max-width: 991.98px) {
  .app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1020;
    height: 60px; padding: 0 16px;
    background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .app-topbar-brand img { height: 40px; width: auto; display: block; }
  .app-menu-toggle { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); width: 42px; height: 42px; color: var(--ink); }
  .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  body.menu-abierto .app-sidebar { transform: none; box-shadow: 0 0 40px rgba(30,34,40,.25); }
  .app-main { margin-left: 0; padding: 24px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none; } }

/* ---------- Encabezado de página ---------- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.page-head h1 { font-size: 30px; line-height: 1.15; margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 60ch; }

/* ---------- Panel ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel + .panel { margin-top: 24px; }
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 20px; margin: 0; }
.panel-body { padding: 20px; }
.panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

/* ---------- Botones ---------- */
.btn { font-weight: 600; border-radius: var(--radius-sm); padding: .45rem .95rem; }
.btn .oi { top: 1px; margin-right: 4px; }
.btn .badge { margin-left: 4px; font-variant-numeric: tabular-nums; }
.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ink:hover, .btn-ink:focus { background: #000; border-color: #000; color: #fff; }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-success:hover { background: #166239; border-color: #166239; }
.btn-danger { background: var(--surface); border-color: #E7B4AF; color: var(--bad); }
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger .badge-light { background: var(--bad-soft); color: var(--bad); }
.btn-danger:disabled, .btn-danger.disabled { background: var(--surface); border-color: #E7B4AF; color: var(--bad); }
.btn-success:disabled, .btn-success.disabled { background: var(--ok); border-color: var(--ok); }
.btn-anular { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-anular:hover { background: #8F1B12; border-color: #8F1B12; color: #fff; }
.btn:disabled, .btn.disabled { opacity: .45; }

/* ---------- Selector de estados (segmentado) ---------- */
.estados {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 4px;
  background: var(--line-soft);
  border-radius: 8px;
}
.estados.btn-group > .btn { flex: none; }
.estados .btn-estados,
.estados .btn-estados.btn-secondary,
.estados .btn-estados.btn-warning {
  background: transparent; border: 0; border-radius: var(--radius-sm) !important;
  color: var(--muted); font-weight: 500; padding: .4rem .85rem; box-shadow: none;
  margin: 0 !important;
}
.estados .btn-estados:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.estados .btn-estados.active,
.estados .btn-estados.btn-warning.active {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(30,34,40,.12), 0 0 0 1px var(--line);
}
.estados .btn-estados .punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.punto-e { background: #D99A1E; } .punto-f { background: var(--ok); } .punto-c { background: #9AA1AB; }
.punto-a { background: var(--bad); } .punto-pa { background: #E2622B; }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tabla ---------- */
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-wrap #table-facturas, .tabla-wrap #table-notas { min-width: 900px; }
.tabla-wrap #table-llaves-anteriores { min-width: 620px; }
.tabla {
  width: 100%; margin: 0;
  border-collapse: separate; border-spacing: 0;
  font-size: 14.5px;
}
.tabla thead th, .tabla thead td {
  position: sticky; top: 0; z-index: 1;
  background: #F7F8FA;
  color: var(--muted); font-weight: 600; font-size: 13px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}
.tabla tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #FAFBFC; }
.tabla .col-check { width: 44px; padding-right: 0; }
.tabla .col-doc { font-weight: 600; font-variant-numeric: tabular-nums; }
.tabla .col-fecha { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .col-codigo { color: var(--muted); font-variant-numeric: tabular-nums; }
.tabla .col-total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .tdautorizacion { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; max-width: 340px; }
.tabla .tdautorizacion .text-danger { color: var(--bad) !important; }
.tabla .sin-autorizacion { color: var(--muted); }
.tabla .fila-info td { text-align: center; color: var(--muted); padding: 48px 16px; }
.tabla .fila-info strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }

.tabla input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); cursor: pointer; vertical-align: middle; }
.checkbox-1x, .checkbox-2x { transform: none; -webkit-transform: none; }

.trselected td, .tabla tbody tr.trselected:hover td { background: #FFF6F6 !important; }
.trselected td:first-child { box-shadow: inset 3px 0 0 var(--red); }

/* Estados */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-e  { background: var(--warn-soft); color: var(--warn); }
.estado-f  { background: var(--ok-soft);   color: var(--ok); }
.estado-c  { background: var(--off-soft);  color: var(--off); }
.estado-a  { background: var(--bad-soft);  color: var(--bad); }
.estado-pa { background: #FDEBDF;          color: #A5410F; }

/* ---------- Paginación ---------- */
.paginations { display: flex; flex-wrap: wrap; gap: 6px; }
.paginations .btn { margin: 0 !important; }
#status-pagination { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- Mensajes ---------- */
#errores:empty, #error_llave:empty { display: none; }
#errores { margin: 0 0 16px; }
.alert { border-radius: var(--radius-sm); border: 1px solid transparent; margin: 0; }
.alert-danger { background: var(--bad-soft); border-color: #F4C7C2; color: var(--bad); }
.alert-success { background: var(--ok-soft); border-color: #BFE2CE; color: var(--ok); }
.alert .oi { margin-right: 6px; }

/* ---------- Inicio: medidor de la llave ---------- */
.inicio-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.inicio-grid .panel + .panel { margin-top: 0; }
@media (max-width: 1199.98px) { .inicio-grid { grid-template-columns: 1fr; } }

.medidor { display: grid; grid-template-columns: minmax(220px, 300px) minmax(220px, 1fr); gap: 36px; align-items: center; padding: 28px 32px; }
@media (max-width: 640px) { .medidor { grid-template-columns: 1fr; gap: 20px; padding: 20px; } .medidor-svg { max-width: 240px; } .page-head h1 { font-size: 26px; } }
.medidor-svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.medidor-svg .pista { stroke: var(--line-soft); }
.medidor-svg .zona-roja { stroke: var(--red); }
.medidor-svg .zona-texto { font-family: var(--font); font-size: 12px; fill: var(--red); font-weight: 600; }
.medidor-svg .valor { stroke: var(--ink); transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); }
.medidor-svg .marca { stroke: var(--ink-2); }
.medidor-svg .aguja { transform-origin: 160px 150px; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.medidor-svg .aguja line { stroke: var(--red); }
.medidor-svg .aguja circle { fill: var(--ink); }
.medidor-svg .dias { font-family: var(--font-display); font-weight: 700; font-size: 56px; fill: var(--ink); }
.medidor-svg .dias-label { font-family: var(--font); font-size: 15px; fill: var(--muted); }
.medidor.vencida .medidor-svg .dias { fill: var(--red); }
@media (prefers-reduced-motion: reduce) { .medidor-svg .valor, .medidor-svg .aguja { transition: none; } }

.medidor-info h2 { font-size: 22px; margin: 0 0 6px; }
.medidor-info p { color: var(--muted); margin: 0 0 16px; }
.medidor-info dl { margin: 0 0 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.medidor-info dt { color: var(--muted); font-weight: 400; }
.medidor-info dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.pendientes { list-style: none; margin: 0; padding: 0; }
.pendientes li + li { border-top: 1px solid var(--line-soft); }
.pendientes a {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; text-decoration: none !important; color: var(--ink);
}
.pendientes a:hover { background: #FAFBFC; }
.pendientes .cifra { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; min-width: 64px; font-variant-numeric: tabular-nums; }
.pendientes .cifra.hay { color: var(--warn); }
.pendientes .texto { flex: 1; }
.pendientes .texto strong { display: block; font-weight: 600; }
.pendientes .texto span { color: var(--muted); font-size: 14px; }
.pendientes .oi { color: var(--muted); }

/* ---------- Llave de acceso ---------- */
.ficha { margin: 0; display: grid; grid-template-columns: 150px 1fr; }
.ficha dt, .ficha dd { padding: 12px 20px; border-bottom: 1px solid var(--line-soft); margin: 0; }
.ficha dt { color: var(--muted); font-weight: 400; }
.ficha dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha dt:last-of-type, .ficha dd:last-of-type { border-bottom: 0; }
@media (max-width: 575.98px) { .ficha { grid-template-columns: 1fr; } .ficha dt { border-bottom: 0; padding-bottom: 0; } }
#token-field { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
#status-field .text-success { color: var(--ok) !important; }
#status-field .text-danger { color: var(--bad) !important; }

/* ---------- Login ---------- */
.login-body {
  min-height: 100%;
  display: grid; place-items: center;
  padding: 32px 16px;
  background: var(--bg);
}
.login {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.login-franja { height: 6px; background: repeating-linear-gradient(-60deg, var(--red) 0 14px, var(--ink) 14px 28px); }
.login-cuerpo { padding: 32px 32px 28px; }
.login img { width: 190px; height: auto; display: block; margin: 0 auto 8px; }
.login h1 { font-size: 24px; text-align: center; margin: 0 0 4px; }
.login .sub { text-align: center; color: var(--muted); margin: 0 0 24px; }
.login label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.login .form-control { height: 46px; border-radius: var(--radius-sm); border-color: var(--line); font-size: 16px; }
.login .form-control:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,34,40,.12); }
.login .btn-ink { height: 48px; font-size: 16px; margin-top: 8px; }
.login #mensaje .alert { margin-top: 16px; }
.login-pie { text-align: center; color: var(--muted); font-size: 13px; padding: 14px; border-top: 1px solid var(--line-soft); }

/* ---------- Utilidades heredadas ---------- */
.parpadea {
  color: var(--red) !important;
  animation: parpadeo 1.2s ease-in-out infinite;
}
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .parpadea { animation: none; } }

.force-wrap { overflow-wrap: anywhere; word-break: break-word; }
.text-ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 420px; }
button.contraer-token, button.expandir-token { margin-right: 10px; padding: 2px 8px; }
.btn-outline-success { color: var(--ink-2); border-color: var(--line); }
.btn-outline-success:hover { background: var(--line-soft); border-color: var(--line); color: var(--ink); }