/* ==========================================================================
   Tema visual v2 — Facturador FEL Los Cuchumatanes
   Menú lateral + barra superior + vistas a todo lo ancho.
   Se carga DESPUÉS de bootstrap.min.css y style.css. Solo presentación.
   ========================================================================== */

:root {
  /* Marca */
  --pino: #123A22;
  --pino-2: #1B5631;
  --marca: #22A447;
  --marca-osc: #178037;

  /* Colores por estado / sección */
  --azul: #2F6FDB;      --azul-sua: #E8F0FD;
  --verde: #1F9D47;     --verde-sua: #E3F5E8;
  --turquesa: #0E9C8C;  --turquesa-sua: #DFF5F2;
  --ambar: #E39A0C;     --ambar-sua: #FDF2DC;
  --rojo: #DC4A33;      --rojo-sua: #FCE8E4;
  --pizarra: #64748B;   --pizarra-sua: #EEF1F5;
  --violeta: #7A4FD6;   --violeta-sua: #EFE9FC;

  /* Neutros */
  --tinta: #16211A;
  --tinta-2: #5B6B61;
  --fondo: #EEF2EE;
  --superficie: #FFFFFF;
  --linea: #DDE4DD;
  --linea-suave: #EDF1EC;

  --sb-w: 252px;
  --sb-mini: 78px;
  --tb-h: 68px;
  --radio: 14px;
  --radio-sm: 9px;
  --sombra: 0 1px 2px rgba(18,58,34,.06), 0 4px 16px -6px rgba(18,58,34,.12);
  --foco: rgba(34,164,71,.38);
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='160' viewBox='0 0 640 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M-10 150 C60 120 110 70 170 80 S260 140 330 100 S430 30 500 50 S600 120 650 90' opacity='.09'/%3E%3Cpath d='M-10 132 C60 104 110 58 170 66 S260 124 330 86 S430 18 500 36 S600 104 650 74' opacity='.08'/%3E%3Cpath d='M-10 114 C60 88 112 46 170 52 S262 108 330 72 S432 8 500 22 S602 88 650 58' opacity='.07'/%3E%3Cpath d='M-10 96 C62 72 114 34 172 38 S264 92 332 58 S434 -2 502 8 S604 72 650 42' opacity='.06'/%3E%3Cpath d='M210 160 C240 140 280 132 310 140 S370 160 390 160' opacity='.07'/%3E%3Cpath d='M440 160 C470 128 520 118 560 132 S620 160 650 150' opacity='.07'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, .h2, .h4 {
  font-family: var(--fuente);
  font-stretch: 72%;
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--pino);
}
h2 { font-size: 2rem; line-height: 1.05; margin: 0; }
h3 { font-size: 1.2rem; margin: 0; }
a { color: var(--pino-2); }

:focus { outline: none; }
.btn:focus, .btn.focus { box-shadow: none !important; }
:focus-visible,
.btn:focus-visible, .form-control:focus,
#filtros_estado > .btn:has(input:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px var(--foco) !important;
}

/* ==========================================================================
   Menú lateral
   ========================================================================== */
.sidebar {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--sb-w);
  z-index: 1045;
  display: flex;
  flex-direction: column;
  background-color: var(--pino);
  background-image: var(--topo), var(--topo), linear-gradient(180deg, #164628 0%, var(--pino) 55%, #0D2C19 100%);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-size: 640px 160px, 900px 225px, 100% 100%;
  background-position: left 96%, right 82%, 0 0;
  color: #fff;
  transition: width .2s ease, transform .25s ease;
  overflow: hidden;
}
.sb-brand { display: block; padding: 1.35rem 1.4rem .35rem; }
.sb-logo { height: 44px; width: auto; filter: brightness(0) invert(1); }
.sb-logo-mini { display: none; width: 38px; height: 38px; }
.sb-app {
  padding: 0 1.4rem 1.1rem;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: .75rem;
  white-space: nowrap;
}
.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 .75rem; }
.sb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .6rem;
  border-radius: 11px;
  color: rgba(255,255,255,.78);
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.sb-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-link.active { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; }
.sb-link.active::before {
  content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--marca);
}
.sb-ico {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .85rem;
}
.ico-verde    { background: linear-gradient(135deg, #34C45E, #1B8E3D); }
.ico-azul     { background: linear-gradient(135deg, #4C8BF0, #2559C2); }
.ico-turquesa { background: linear-gradient(135deg, #22BFAC, #0A8173); }
.ico-ambar    { background: linear-gradient(135deg, #F5B53A, #D2870A); }
.ico-violeta  { background: linear-gradient(135deg, #9873EC, #6339C4); }
.sb-badge {
  margin-left: auto;
  min-width: 26px;
  padding: .1rem .5rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}
.sb-badge:empty, .sb-badge[data-n="0"] { display: none; }
.sb-badge.tiene { background: #FFD25C; color: #3B2A00; }
.sb-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.sb-dot.ok { background: #4ADE80; } .sb-dot.warn { background: #FFC24B; } .sb-dot.bad { background: #FF6B57; }

.sb-foot { margin-top: auto; padding: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.sb-user { display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem .75rem; white-space: nowrap; }
.sb-user strong { display: block; font-size: .9rem; }
.sb-user small { color: rgba(255,255,255,.6); }
.sb-salir .sb-ico { background: rgba(255,255,255,.08); }
.sb-salir:hover .sb-ico { background: var(--rojo); }

.avatar {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD25C, #F09A1A);
  color: #3B2A00;
  font-weight: 800;
  font-size: .8rem;
}

/* Menú compacto (escritorio) */
@media (min-width: 992px) {
  html.sb-mini .sidebar { width: var(--sb-mini); }
  html.sb-mini .sb-text, html.sb-mini .sb-app, html.sb-mini .sb-logo { display: none; }
  html.sb-mini .sb-logo-mini { display: block; margin: 0 auto; }
  html.sb-mini .sb-brand { padding: 1.2rem 0 1rem; }
  html.sb-mini .sb-link { justify-content: center; }
  html.sb-mini .sb-badge {
    position: absolute; top: 0; right: 2px; margin: 0; min-width: 0;
    padding: 0 .3rem; font-size: .65rem;
  }
  html.sb-mini .sb-dot { position: absolute; margin: 0; width: 8px; height: 8px; top: 6px; right: 10px; }
  html.sb-mini .sb-user { justify-content: center; }
  html.sb-mini .app { margin-left: var(--sb-mini); }
}

/* Menú desplegable (tableta / móvil) */
.sb-overlay { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-102%); box-shadow: 0 0 40px rgba(0,0,0,.3); }
  html.sb-open .sidebar { transform: none; }
  html.sb-open .sb-overlay {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040;
    background: rgba(10,30,18,.45);
  }
}

/* ==========================================================================
   Barra superior
   ========================================================================== */
.app { margin-left: var(--sb-w); min-height: 100vh; transition: margin-left .2s ease; }
@media (max-width: 991.98px) { .app { margin-left: 0; } }

.topbar {
  position: sticky; top: 0; z-index: 1030;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--tb-h);
  padding: .6rem 1.5rem;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.tb-btn {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--pino);
  display: grid; place-items: center;
  cursor: pointer;
}
.tb-btn:hover { background: var(--fondo); }
.tb-titulo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tb-titulo strong { font-size: 1.02rem; color: var(--tinta); white-space: nowrap; }
.tb-titulo small { color: var(--tinta-2); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-titulo small .oi { font-size: .65rem; color: var(--rojo); }

.tb-buscar {
  flex: 1 1 320px;
  max-width: 560px;
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 0 .5rem;
  padding: 0 .85rem;
  height: 42px;
  border-radius: 12px;
  background: var(--fondo);
  border: 1px solid transparent;
  color: var(--tinta-2);
  cursor: text;
}
.tb-buscar:focus-within { background: var(--superficie); border-color: var(--marca); box-shadow: 0 0 0 3px var(--foco); }
.tb-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; color: var(--tinta); }
.tb-buscar input:focus { box-shadow: none !important; }
.tb-buscar-res { font-size: .78rem; font-weight: 600; color: var(--marca-osc); white-space: nowrap; }

.tb-derecha { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.tb-pendientes { display: flex; align-items: center; gap: .4rem; }
.tb-label { font-size: .78rem; color: var(--tinta-2); margin-right: .15rem; white-space: nowrap; }
.tb-pend, .tb-llave, .tb-reloj {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 38px;
  padding: 0 .8rem;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
}
.tb-pend .oi, .tb-llave .oi, .tb-reloj .oi { font-size: .75rem; }
.pend-azul { background: var(--azul-sua); color: var(--azul) !important; }
.pend-turquesa { background: var(--turquesa-sua); color: var(--turquesa) !important; }
.tb-pend:hover { filter: brightness(.96); }
.tb-pend b { font-weight: 800; }
.tb-llave { background: var(--pizarra-sua); color: var(--pizarra) !important; }
.tb-llave.ok   { background: var(--verde-sua); color: var(--verde) !important; }
.tb-llave.warn { background: var(--ambar-sua); color: #A86C00 !important; }
.tb-llave.bad  { background: var(--rojo-sua); color: var(--rojo) !important; }
.tb-reloj { color: var(--tinta-2); background: transparent; padding: 0 .4rem; font-weight: 500; }

.tb-usuario {
  display: flex; align-items: center; gap: .55rem;
  padding: .25rem .6rem .25rem .25rem;
  border: 1px solid var(--linea);
  border-radius: 30px;
  background: var(--superficie);
  color: var(--tinta);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
}
.tb-usuario .avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: .75rem; }
.tb-usuario .oi { font-size: .55rem; color: var(--tinta-2); }
.dropdown-menu {
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 14px 40px -12px rgba(18,58,34,.35);
  padding: .4rem;
  min-width: 250px;
  font-size: .9rem;
}
.dd-info { padding: .6rem .75rem; display: flex; flex-direction: column; line-height: 1.35; }
.dd-info span { color: var(--tinta-2); font-size: .82rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; }
.dropdown-item .oi { width: 1.2rem; font-size: .75rem; }
.dropdown-item:active { background: var(--marca); }

@media (max-width: 1399.98px) { .tb-pend-txt, .tb-label { display: none; } }
@media (max-width: 767.98px) { .tb-reloj { display: none; } }
@media (max-width: 767.98px) {
  .topbar { flex-wrap: wrap; padding: .6rem 1rem; gap: .6rem; }
  .tb-titulo small, .tb-usuario-txt, .tb-usuario .oi, .tb-pendientes { display: none; }
  .tb-buscar { order: 5; flex-basis: 100%; max-width: none; margin: 0; }
  .tb-llave { padding: 0 .6rem; }
}

/* ==========================================================================
   Estructura de página (todo lo ancho)
   ========================================================================== */
.app-main { padding: 1.75rem 1.75rem 3rem; width: 100%; }
@media (max-width: 767.98px) { .app-main { padding: 1.25rem 1rem 2.5rem; } }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head p { margin: .4rem 0 0; color: var(--tinta-2); max-width: 70ch; }
.page-head .acciones-head { display: flex; flex-wrap: wrap; gap: .5rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
}
.toolbar .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.toolbar .acciones .btn { margin: 0; }

.resumen-sel {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem;
  border-radius: 10px;
  font-size: .85rem;
  color: var(--tinta-2);
  background: var(--superficie);
  border: 1px dashed var(--linea);
}
.resumen-sel .oi { font-size: .7rem; }
.resumen-sel.activo { border-style: solid; border-color: #BFE3C9; background: var(--verde-sua); color: #145C2A; }
.resumen-sel .sep { width: 1px; height: 14px; background: currentColor; opacity: .3; }

.panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--linea-suave);
}
.panel-head h3 { display: flex; align-items: center; gap: .6rem; }
.panel-body { padding: 1.25rem; }
.panel .table { margin-bottom: 0; }
.mt-panel { margin-top: 1.5rem; }

.ico-titulo {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-grid; place-items: center;
  color: #fff; font-size: .75rem;
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  font-family: var(--fuente);
  font-weight: 600;
  border-radius: 10px;
  padding: .55rem 1.05rem;
  text-shadow: none;
  border-width: 1px;
  transition: transform .12s, box-shadow .15s, filter .15s, background-color .15s, color .15s, opacity .15s;
}
.btn-sm { padding: .38rem .8rem; font-size: .85rem; border-radius: 9px; }
.btn .oi { font-size: .78em; margin-right: .25rem; top: 0; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: none; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; box-shadow: none !important; }

.btn-success {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #34C45E 0%, #1A8F3E 100%);
  box-shadow: 0 6px 16px -6px rgba(31,157,71,.65);
}
.btn-success:not(:disabled):hover { filter: brightness(1.05); color: #fff; box-shadow: 0 8px 20px -6px rgba(31,157,71,.7); }
.btn-danger {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #F06A4F 0%, #C93520 100%);
  box-shadow: 0 6px 16px -6px rgba(220,74,51,.6);
}
.btn-danger:not(:disabled):hover { filter: brightness(1.05); color: #fff; }
.btn-warning {
  color: #3B2700 !important; border-color: transparent;
  background: linear-gradient(135deg, #FFC94D 0%, #E8960C 100%);
  box-shadow: 0 6px 16px -6px rgba(227,154,12,.6);
}
.btn-warning:not(:disabled):hover { filter: brightness(1.04); }
.btn-primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #2A7A47 0%, var(--pino) 100%);
  box-shadow: 0 6px 16px -6px rgba(18,58,34,.55);
}
.btn-primary:not(:disabled):hover { filter: brightness(1.12); color: #fff; }
.btn-outline-primary {
  color: var(--pino-2); background: var(--superficie);
  border-color: var(--linea);
  box-shadow: 0 1px 2px rgba(18,58,34,.06);
}
.btn-outline-primary:not(:disabled):hover, .btn-outline-primary:not(:disabled):active {
  color: var(--pino); background: var(--verde-sua); border-color: #BFE3C9;
}
.btn-outline-primary .oi { color: var(--marca); }

.btn .badge-light {
  background: rgba(255,255,255,.28);
  color: inherit;
  border-radius: 20px;
  min-width: 1.6em;
  padding: .22em .5em;
  margin-left: .3rem;
  font-weight: 800;
}
.btn .badge-light:empty { display: none; }

/* ==========================================================================
   Filtro por estado (pestañas de color)
   ========================================================================== */
#filtros_estado {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 13px;
  padding: 4px;
  box-shadow: var(--sombra);
}
#filtros_estado > .btn {
  --c: var(--pizarra);
  --c-sua: var(--pizarra-sua);
  display: inline-flex; align-items: center; gap: .45rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px !important;
  background: transparent;
  box-shadow: none;
  color: var(--tinta-2) !important;
  font-weight: 600;
  font-size: .88rem;
  padding: .45rem .8rem;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
}
#filtros_estado > [data-estado="E"]  { --c: var(--azul);    --c-sua: var(--azul-sua); }
#filtros_estado > [data-estado="F"]  { --c: var(--verde);   --c-sua: var(--verde-sua); }
#filtros_estado > [data-estado="C"]  { --c: var(--pizarra); --c-sua: var(--pizarra-sua); }
#filtros_estado > [data-estado="A"]  { --c: var(--rojo);    --c-sua: var(--rojo-sua); }
#filtros_estado > [data-estado="PA"] { --c: var(--ambar);   --c-sua: var(--ambar-sua); }
#filtros_estado > .btn::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c);
}
#filtros_estado > .btn:hover { background: var(--c-sua); color: var(--tinta) !important; }
#filtros_estado > .btn.active {
  background: var(--c);
  color: #fff !important;
  box-shadow: 0 6px 14px -6px var(--c);
}
#filtros_estado > .btn.active::before { background: #fff; }
.tab-count {
  min-width: 1.6em;
  padding: .05rem .45rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
  background: var(--c-sua);
  color: var(--c);
}
.tab-count:empty { display: none; }
#filtros_estado > .btn.active .tab-count { background: rgba(255,255,255,.25); color: #fff; }

/* ==========================================================================
   Tablas
   ========================================================================== */
.panel-tabla { --tono: var(--pino-2); }
body:has(#filtros_estado > [data-estado="E"].active)  .panel-tabla { --tono: var(--azul); }
body:has(#filtros_estado > [data-estado="F"].active)  .panel-tabla { --tono: var(--verde); }
body:has(#filtros_estado > [data-estado="C"].active)  .panel-tabla { --tono: var(--pizarra); }
body:has(#filtros_estado > [data-estado="A"].active)  .panel-tabla { --tono: var(--rojo); }
body:has(#filtros_estado > [data-estado="PA"].active) .panel-tabla { --tono: var(--ambar); }

.table { color: var(--tinta); }
.table thead tr {
  background: var(--tono, var(--pino-2));
  background: linear-gradient(90deg, var(--tono, var(--pino-2)), color-mix(in srgb, var(--tono, var(--pino-2)) 76%, #000));
}
.table thead th, .table thead td {
  background: transparent;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: 0 !important;
  white-space: nowrap;
  vertical-align: middle;
  padding: .8rem .9rem;
}
.table td, .table tbody th {
  padding: .75rem .9rem;
  vertical-align: middle;
  border-top: 1px solid var(--linea-suave);
}
.table-bordered, .table-bordered td, .table-bordered th { border-left: 0; border-right: 0; }
.table-bordered { border: 0; }
.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.table tbody tr:nth-of-type(even) { background-color: color-mix(in srgb, var(--tono, var(--pino-2)) 4%, #fff); }
.table tbody tr { transition: background-color .12s; }
.table tbody tr:hover { background-color: color-mix(in srgb, var(--tono, var(--pino-2)) 9%, #fff); }
.table-sm td, .table-sm th { padding: .6rem .8rem; }
.panel .table thead th:first-child, .panel .table thead td:first-child, .panel .table td:first-child, .panel .table tbody th:first-child { padding-left: 1.25rem; }
.panel .table thead th:last-child, .panel .table td:last-child, .panel .table tbody th:last-child { padding-right: 1.25rem; }

.trselected, .table tbody tr.trselected {
  background: color-mix(in srgb, var(--tono, var(--marca)) 14%, #fff) !important;
  box-shadow: inset 4px 0 0 var(--tono, var(--marca));
}
tr.oculto-busqueda { display: none; }

.checkbox-1x, .checkbox-2x {
  transform: none; -webkit-transform: none;
  width: 18px; height: 18px;
  accent-color: var(--tono, var(--pino-2));
  cursor: pointer;
  vertical-align: middle;
}
thead .checkbox-2x { accent-color: #fff; }

.col-check { width: 48px; }
.monto { text-align: right; white-space: nowrap; font-weight: 700; }
.doc-num { font-weight: 800; color: var(--tono, var(--pino)); }
.fecha { white-space: nowrap; color: var(--tinta-2); }
.cliente-cod { font-size: .8rem; font-weight: 600; color: var(--tinta-2); }
.cliente-cod span { background: var(--fondo); padding: .15rem .45rem; border-radius: 6px; }
.autorizacion { font-size: .8rem; color: var(--tinta-2); word-break: break-all; }
.tdautorizacion .text-danger { color: var(--rojo) !important; font-size: .85rem; font-weight: 500; }
.tabla-vacia td { text-align: center; color: var(--tinta-2); padding: 3rem 1rem !important; background: #fff; }
.tabla-vacia .oi { display: block; font-size: 1.6rem; margin-bottom: .5rem; color: var(--linea); }

#table-facturas { min-width: 920px; }
#table-llaves-anteriores { min-width: 560px; }
.stats-tabla .table { min-width: 420px; }

/* Etiquetas de estado */
.estado {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700;
  padding: .25rem .65rem .25rem .55rem;
  border-radius: 20px;
  white-space: nowrap;
}
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-E  { background: var(--azul-sua);    color: var(--azul); }
.estado-F  { background: var(--verde-sua);   color: var(--verde); }
.estado-C  { background: var(--pizarra-sua); color: var(--pizarra); }
.estado-A  { background: var(--rojo-sua);    color: var(--rojo); }
.estado-PA { background: var(--ambar-sua);   color: #A86C00; }

/* ==========================================================================
   Paginación
   ========================================================================== */
.paginations {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid var(--linea-suave);
}
.paginations .btn-pagination {
  margin: 0 !important;
  background: var(--superficie);
  border: 1px solid var(--linea);
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(18,58,34,.06);
  font-weight: 600;
  font-size: .85rem;
  padding: .42rem .9rem;
  border-radius: 30px;
}
.paginations .btn-pagination:not(:disabled):hover {
  background: var(--tono, var(--pino-2)); border-color: transparent; color: #fff; filter: none;
}
.paginations .btn-pagination .oi { font-size: .6rem; margin: 0 .05rem; }
#page-anterior { margin-right: .6rem !important; }
#status-pagination { color: var(--tinta-2) !important; font-size: .85rem; margin: .6rem 0 1.1rem; }

/* ==========================================================================
   Alertas y mensajes
   ========================================================================== */
.alert {
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .92rem;
  margin: 0;
}
.alert-danger  { background: var(--rojo-sua);  border-color: #F6CFC7; border-left-color: var(--rojo);  color: #8A2414; }
.alert-success { background: var(--verde-sua); border-color: #C8EBD2; border-left-color: var(--verde); color: #145C2A; }
#errores:empty, #error_llave:empty { display: none; }
#errores { margin: 0 0 1rem; }

.text-success { color: var(--verde) !important; }
.text-danger { color: var(--rojo) !important; }
.text-info { color: var(--tinta-2) !important; }

.parpadea { color: var(--rojo) !important; animation: fel-pulso 1.6s ease-in-out infinite; }
.estado.parpadea { color: inherit !important; animation: none; }
.estado-A.parpadea { color: var(--rojo) !important; }
.estado-PA.parpadea { color: #A86C00 !important; }
.estado.parpadea::before { animation: fel-pulso 1.6s ease-in-out infinite; }
#status-field .estado, #fecha .estado { margin-right: .5rem; }
@keyframes fel-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .parpadea, .estado.parpadea::before { animation: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   Formularios
   ========================================================================== */
.form-control { border-radius: 10px; border-color: var(--linea); color: var(--tinta); font-family: var(--fuente); }
.form-control:focus { border-color: var(--marca); }

/* ==========================================================================
   Indicadores (tarjetas de color)
   ========================================================================== */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1199.98px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .kpi { padding: 1rem; }
  .kpi::after { width: 80px; height: 80px; }
  .kpi-ico { width: 36px; height: 36px; margin-bottom: .6rem; }
  .kpi-valor { font-size: 1.7rem; }
  .kpi-label { font-size: .8rem; line-height: 1.3; }
  .kpi .kpi-nota { display: none; }
}
.kpi {
  --c: var(--azul);
  position: relative;
  display: block;
  padding: 1.2rem 1.3rem 1.15rem;
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-decoration: none !important;
  overflow: hidden;
}
.kpi::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--c); opacity: .08;
}
a.kpi { transition: transform .15s, box-shadow .15s; }
a.kpi:hover { transform: translateY(-2px); color: var(--tinta); box-shadow: 0 10px 24px -10px var(--c); }
.kpi-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  color: #fff; font-size: .95rem;
  background: var(--c);
  box-shadow: 0 6px 14px -6px var(--c);
  margin-bottom: .9rem;
}
.kpi-label { display: block; font-size: .85rem; color: var(--tinta-2); font-weight: 500; }
.kpi-valor {
  display: block;
  font-stretch: 72%;
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--tinta);
  margin: .15rem 0 .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-nota { display: block; font-size: .8rem; color: var(--tinta-2); min-height: 1.2em; }
.kpi-azul     { --c: var(--azul); }
.kpi-verde    { --c: var(--verde); }
.kpi-turquesa { --c: var(--turquesa); }
.kpi-ambar    { --c: var(--ambar); }
.kpi-rojo     { --c: var(--rojo); }
.kpi-violeta  { --c: var(--violeta); }
.kpi[data-llave-card].ok   { --c: var(--verde); }
.kpi[data-llave-card].warn { --c: var(--ambar); }
.kpi[data-llave-card].bad  { --c: var(--rojo); }

/* ==========================================================================
   Inicio (usuario de facturación)
   ========================================================================== */
.bienvenida {
  position: relative;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radio);
  color: #fff;
  background-color: var(--pino);
  background-image: var(--topo), var(--topo), linear-gradient(120deg, #1F6B3B 0%, var(--pino) 60%, #0E2E1A 100%);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-size: 640px 160px, 900px 225px, 100% 100%;
  background-position: right 120%, left 60%, 0 0;
  overflow: hidden;
}
.bienvenida h2 { color: #fff; font-size: 2.2rem; }
.bienvenida p { margin: .4rem 0 0; color: rgba(255,255,255,.75); max-width: 60ch; }
.accesos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 767.98px) { .accesos { grid-template-columns: 1fr; } }
.acceso {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-decoration: none !important;
  transition: transform .15s, border-color .15s;
}
.acceso:hover { transform: translateY(-2px); border-color: var(--marca); color: var(--tinta); }
.acceso .sb-ico { flex-basis: 46px; width: 46px; height: 46px; border-radius: 13px; font-size: 1rem; }
.acceso strong { display: block; font-size: 1.02rem; }
.acceso span.desc { display: block; color: var(--tinta-2); font-size: .85rem; }
.acceso .oi-chevron-right { margin-left: auto; color: var(--tinta-2); font-size: .7rem; }

/* ==========================================================================
   Estadísticas (administrador)
   ========================================================================== */
.mes-control { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
#selected_month {
  font-stretch: 72%;
  font-variation-settings: "wdth" 72;
  font-weight: 800;
  font-size: 2rem;
  color: var(--pino);
  line-height: 1.05;
}
#selected_month strong { display: none; }
.stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem;
  align-items: start;
}
.stats-grid + .stats-grid { margin-top: 1.5rem; }
@media (max-width: 1199.98px) { .stats-grid { grid-template-columns: 1fr; } }
.fecha-generacion p { margin: 0; padding: 0 1.25rem 1rem; font-size: .8rem; }
.panel-head select.form-control { width: auto; min-width: 220px; }

/* ==========================================================================
   Llave de acceso
   ========================================================================== */
.llave-grid {
  display: grid;
  grid-template-columns: minmax(320px, 4fr) minmax(0, 8fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1199.98px) { .llave-grid { grid-template-columns: 1fr; } }
.llave-hero {
  --c: var(--pizarra);
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex; align-items: center; gap: 1.1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, #fff), #fff 70%);
  border-bottom: 1px solid var(--linea-suave);
}
.llave-hero.ok   { --c: var(--verde); }
.llave-hero.warn { --c: var(--ambar); }
.llave-hero.bad  { --c: var(--rojo); }
.llave-dias {
  flex: 0 0 auto;
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--c); color: #fff;
  box-shadow: 0 10px 24px -10px var(--c);
  line-height: 1;
}
.llave-dias b { font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 2.3rem; font-weight: 800; }
.llave-dias small { font-size: .78rem; opacity: .9; }
.llave-hero p { margin: .25rem 0 0; color: var(--tinta-2); font-size: .9rem; }
.llave-actual { margin: 0; }
.llave-dato {
  display: grid; grid-template-columns: 110px 1fr; gap: 1rem;
  padding: .8rem 1.25rem;
  border-top: 1px solid var(--linea-suave);
  margin: 0;
}
.llave-dato:first-child { border-top: 0; }
.llave-dato dt { color: var(--tinta-2); font-weight: 500; font-size: .88rem; }
.llave-dato dd { margin: 0; }
#token-field {
  font-size: .78rem; line-height: 1.55; color: var(--tinta-2);
  background: var(--fondo); border-radius: 9px;
  padding: .6rem .75rem; max-height: 7.5rem; overflow: auto;
}
.llave-acciones { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--linea-suave); }
.llave-acciones .btn { width: 100%; }
@media (max-width: 575.98px) { .llave-dato { grid-template-columns: 1fr; gap: .25rem; } }
#table-llaves-anteriores .text-ellipsis { max-width: 420px; }
#table-llaves-anteriores .force-wrap div { font-size: .8rem; color: var(--tinta-2); }
button.contraer-token, button.expandir-token { padding: .1rem .4rem; margin-right: .6rem; }

/* ==========================================================================
   Login
   ========================================================================== */
body.login {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr);
  min-height: 100vh;
  padding: 0;
  background: var(--fondo);
  text-align: left !important;
}
.login-arte {
  position: relative;
  background-color: var(--pino);
  background-image: var(--topo), var(--topo), var(--topo), linear-gradient(150deg, #1F6B3B 0%, var(--pino) 55%, #0B2715 100%);
  background-repeat: repeat-x, repeat-x, repeat-x, no-repeat;
  background-size: 640px 160px, 900px 225px, 1200px 300px, 100% 100%;
  background-position: left 92%, right 70%, center 45%, 0 0;
  color: #fff;
  padding: 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-arte img { width: 280px; max-width: 70%; filter: brightness(0) invert(1); }
.login-arte h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.02; max-width: 12ch; margin: 0 0 .75rem; }
.login-arte p { color: rgba(255,255,255,.75); max-width: 40ch; margin: 0; }
.login-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.login-chips span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: 20px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  font-size: .82rem; color: #fff;
}
.login-chips .oi { font-size: .7rem; color: #FFD25C; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.form-login {
  width: 100%; max-width: 400px; margin: 0;
  padding: 2.25rem 2rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 18px;
  box-shadow: 0 24px 60px -28px rgba(18,58,34,.45);
}
.form-login h2 { font-size: 1.8rem; margin-bottom: .3rem; }
.form-login .sub { color: var(--tinta-2); margin-bottom: 1.6rem; }
.form-login label:not(.sr-only) { font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.campo { position: relative; }
.campo .oi { position: absolute; left: .9rem; top: .95rem; font-size: .8rem; color: var(--tinta-2); }
.form-login .form-control { height: auto; padding: .72rem .85rem .72rem 2.4rem; font-size: 1rem; margin-bottom: 1rem; border-radius: 11px !important; background: var(--fondo); border-color: transparent; }
.form-login .form-control:focus { background: #fff; border-color: var(--marca); }
.form-login .btn-lg { padding: .8rem 1rem; font-size: 1rem; border-radius: 11px; margin-top: .4rem; }
.form-login #mensaje br { display: none; }
.form-login #mensaje .alert { margin-top: 1rem; }
.form-login .pie { margin: 1.75rem 0 0; color: var(--tinta-2); font-size: .8rem; text-align: center; }
@media (max-width: 767.98px) {
  body.login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-arte { padding: 1.75rem 1.5rem 2rem; }
  .login-arte .login-nota { display: none; }
  .login-panel { align-items: flex-start; padding: 1.5rem 1rem 2.5rem; }
  .form-login { padding: 1.75rem 1.25rem; }
}

/* Resaltado de coincidencias del buscador */
mark.hl { background: #FFE58A; color: inherit; padding: 0 .1em; border-radius: 3px; }
.tb-buscar-res:empty { display: none; }

/* ==========================================================================
   Barra de filtros: rango de fechas + exportar a Excel
   ========================================================================== */
.filtros-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.filtros-bar.con-fechas { border-color: #B9D3F6; box-shadow: 0 0 0 3px rgba(47,111,219,.10), var(--sombra); }
.rango { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rango-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #4C8BF0, #2559C2); color: #fff; font-size: .8rem;
}
.rango-campo { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .85rem; font-weight: 600; color: var(--tinta-2); }
.rango-campo .form-control { width: 152px; height: 36px; font-size: .9rem; background: var(--fondo); border-color: transparent; }
.rango-campo .form-control:focus { background: #fff; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(47,111,219,.2) !important; }
.presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--tinta-2);
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .32rem .75rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--azul); color: var(--azul); }
.chip.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip-limpiar { color: var(--rojo); border-color: #F6CFC7; background: var(--rojo-sua); }
.chip-limpiar:hover { color: #fff; background: var(--rojo); border-color: var(--rojo); }
.chip-limpiar .oi { font-size: .6rem; margin-right: .2rem; }

.btn-excel {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #2E9A5C 0%, #1D6F42 100%);
  box-shadow: 0 6px 16px -6px rgba(29,111,66,.65);
}
.btn-excel:not(:disabled):hover { color: #fff; filter: brightness(1.08); }
.girar { display: inline-block; animation: fel-girar .9s linear infinite; }
@keyframes fel-girar { to { transform: rotate(360deg); } }

.alert-warning { background: var(--ambar-sua); border-color: #F5DDA8; border-left-color: var(--ambar); color: #6B4500; }

@media (max-width: 767.98px) {
  .rango-campo .form-control { width: 140px; }

}
@media (prefers-reduced-motion: reduce) { .girar { animation: none; } }

/* Buscador dentro de la barra de filtros */
.filtro-buscar {
  flex: 1 1 300px;
  display: flex; align-items: center; gap: .55rem;
  margin: 0;
  padding: 0 .85rem;
  height: 40px;
  border-radius: 11px;
  background: var(--fondo);
  border: 1px solid transparent;
  color: var(--tinta-2);
  cursor: text;
}
.filtro-buscar:focus-within { background: var(--superficie); border-color: var(--marca); box-shadow: 0 0 0 3px var(--foco); }
.filtro-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: .92rem; color: var(--tinta); }
.filtro-buscar input:focus { box-shadow: none !important; }
.filtros-bar:has(#buscar-tabla:not(:placeholder-shown)) { border-color: #B9D3F6; box-shadow: 0 0 0 3px rgba(47,111,219,.10), var(--sombra); }
@media (max-width: 767.98px) { .filtro-buscar { flex-basis: 100%; } }