/*
 * Portal: v2.enviocfdi.com — «mejora de app.factura-lo» (2026-10-06)
 *
 * Pedido: «una mejora de app.factura-lo: el header azul de arriba déjalo y
 * abajo mete los colores tipo v1». Por eso:
 *   · La barra superior es la del APP sin tocar: no se redefinen --navy*,
 *     --orange ni ninguna regla de .topbar / logo / folios / usuario, y la
 *     carpeta de imágenes no trae logo (el layout pinta el «factura·lo» del app).
 *   · Del menú hacia abajo, el estilo de v1 (webroot/css/portales/
 *     v1.enviocfdi.com.css): fondo cálido, menú en tarjeta con píldora,
 *     cabecera con icono en cuadro durazno, tabla con encabezado azul claro.
 *
 * ⛔ Prefijo `html body` en todo selector: las hojas de cada pantalla se cargan
 *    después y a igual especificidad ganaban (changelog #515).
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/*
 * ⛔ Todo selector va con prefijo `html body` (y `html body.dark` en oscuro):
 *    las hojas de cada pantalla (catalogos.css, cfdis.css…) se cargan DESPUÉS
 *    de ésta, dentro del <body>, y a igual especificidad ganaban ellas — la
 *    tabla seguía navy/teal. El prefijo suma (0,0,2): basta para ganarles y
 *    deja que sus `body.dark …` (0,1,1+) sigan ganándole al tema claro de aquí.
 */

:root {
  --ink-navy:   #0E2557;
  --gray-50:    #FAF9F8;
  --gray-500:   #6B7A90;
  --gray-700:   #2C3E55;

  --fl-peach:   #FEF3ED;
  --fl-peach-2: #FDE3D2;
  --fl-sky:     #EBF4FA;
  --fl-line:    #E8ECF1;
  --fl-green-bg:#DDF5E6;
  --fl-green:   #079849;
  --fl-radius:  16px;
  --fl-shadow:  0 1px 2px rgba(14,37,87,.04), 0 4px 18px rgba(14,37,87,.05);
}

/* ── Tipografía: Manrope en toda la UI (los iconos y lo monoespaciado se quedan) ── */
html, body { background: var(--gray-50); font-family: 'Manrope', system-ui, sans-serif; }
body *:not(i):not(code):not(pre):not(kbd):not(samp):not(.code-tag):not(.sat-ac-code):not([class*="fa-"]) {
  font-family: 'Manrope', system-ui, sans-serif;
}

/* ═══════════════ NAVBAR — tarjeta blanca con píldora activa ═══════════════ */
html body .navbar {
  background: white;
  border: 1px solid var(--fl-line);
  border-radius: 14px;
  margin: 4px 20px 0;
  height: 54px;
  padding: 0 10px;
  box-shadow: var(--fl-shadow);
  align-items: center;
}
html body .navbar-scroll { align-items: center; gap: 2px; }
html body .nav-item {
  height: 38px; padding: 0 13px; border-radius: 10px;
  border-bottom: none; margin-bottom: 0;
  color: #44546B; font-size: .95rem; font-weight: 600;
}
html body .nav-item > i { opacity: 1; color: #5A6B82; }
html body .nav-item:hover { background: #F5F6F8; color: var(--ink-navy); }
html body .nav-item.active { background: var(--fl-peach); color: var(--orange); border-bottom: none; }
html body .nav-item.active > i, html body .nav-item.active .nav-caret { color: var(--orange); opacity: 1; }

html body .btn-comprar-folios {
  height: 38px; padding: 0 18px; border-radius: 10px; margin: 0 6px;
  font-size: .95rem; font-weight: 800; letter-spacing: 0;
  background: var(--orange); border-color: var(--orange); color: white;
  box-shadow: 0 4px 12px rgba(251,107,19,.28);
}
html body .btn-comprar-folios:hover { background: var(--orange-hot); border-color: var(--orange-hot); color: white; }

html body .nav-logout {
  height: 38px; margin-left: 6px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--fl-line); border-bottom: 1px solid var(--fl-line); margin-bottom: 0;
  color: #E5484D; font-weight: 800; background: white;
}
html body .nav-logout:hover { background: #FFF5F5; color: #C9302C; }

html body .nav-dropdown { border-radius: 14px; border: 1px solid var(--fl-line); box-shadow: 0 12px 32px rgba(14,37,87,.12); }
html body .dd-item.active-item { color: var(--orange-hot); }
html body .nav-drawer-item > i { color: var(--orange); }

/* ═══════════════ CABECERA DE PÁGINA ═══════════════ */
html body .cat-wrap { padding: 22px 20px; }
html body .cat-header {
  border-radius: var(--fl-radius);
  border: 1px solid var(--fl-line);
  border-left: 4px solid var(--orange);
  padding: 22px 26px;
  box-shadow: var(--fl-shadow);
  background:
    radial-gradient(circle at 104% -30%, rgba(251,107,19,.07) 0 150px, transparent 151px),
    white;
}
/* El icono vive dentro del título: se saca a un cuadro durazno a la izquierda */
html body .cat-header > div:has(> .cat-header-title > i:first-child) { position: relative; padding-left: 74px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; }
html body .cat-header-title > i:first-child {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--fl-peach); color: var(--orange);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
html body .cat-header-title { font-size: 1.55rem; font-weight: 800; color: var(--ink-navy); letter-spacing: -.2px; }
html body .cat-header-sub { font-size: .95rem; font-weight: 500; color: #7888A4; letter-spacing: 0; margin-top: 4px; }
html body .cat-header-sub code { background: none; color: inherit; }

/* ═══════════════ BOTONES ═══════════════ */
html body .btn { border-radius: 10px; padding: 11px 20px; font-weight: 800; }
html body .btn-orange { background: var(--orange); box-shadow: 0 4px 12px rgba(251,107,19,.25); }
html body .btn-orange:hover { background: var(--orange-hot); transform: none; }
html body .btn-navy { background: var(--navy); box-shadow: 0 4px 12px rgba(17,53,103,.22); }
html body .btn-navy:hover { background: #0D2A52; transform: none; }
html body .btn-ghost { border: 1.5px solid #D9DFE7; color: var(--gray-700); }
html body .btn-ghost:hover { border-color: #B8C2CF; background: #FBFBFC; }

/* ═══════════════ FILTROS ═══════════════ */
html body .cfdi-filters { border-radius: var(--fl-radius); border-color: var(--fl-line); box-shadow: var(--fl-shadow); padding: 20px 22px; }
html body .cfdi-flbl { color: var(--ink-navy); font-weight: 800; letter-spacing: .6px; }
html body .cfdi-flbl i { color: var(--orange); font-size: .8rem; }
html body .fi, html body .fsel { border-radius: 10px; border-color: #DCE2EA; background: #FBFBFC; padding: 11px 14px; color: var(--ink-navy); }
html body .fsel { padding-right: 34px; }
html body .fi:focus, html body .fsel:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251,107,19,.12); background: white; }
html body .fl { color: var(--ink-navy); }

/* ═══════════════ TABLA ═══════════════ */
html body .tabla-card { border-radius: var(--fl-radius); box-shadow: var(--fl-shadow), 0 0 0 1px var(--fl-line); }
html body .tabla-topbar { background: white; padding: 18px 22px 14px; }
html body .tabla-topbar-title { color: var(--ink-navy); font-size: 1.15rem; font-weight: 800; }
html body .tabla-topbar-title i { color: var(--orange) !important; }
html body .tb-sep { color: #D5DBE3; }
html body .perpage-label { color: var(--gray-500); font-weight: 600; }
html body .perpage-select {
  background-color: white; border: 1.5px solid #DCE2EA; color: var(--ink-navy); border-radius: 10px; padding: 7px 30px 7px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230E2557' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html body .perpage-select option { background: white; color: var(--ink-navy); }
html body .search-box { background: white; border: 1.5px solid #DCE2EA; border-radius: 10px; padding: 9px 14px; }
html body .search-box i { color: var(--gray-500); }
html body .search-box input { color: var(--ink-navy); }
html body .search-box input::placeholder { color: #9AA6B8; }

html body .tabla-wrap { margin: 0 8px; }
html body .tbl thead tr { background: var(--fl-sky); }
html body .tbl thead th:first-child { border-radius: 10px 0 0 10px; }
html body .tbl thead th:last-child { border-radius: 0 10px 10px 0; }
html body .tbl th { color: #193969; font-weight: 800; padding: 13px 12px; }
html body .tbl th.sort:hover { background: #DDEBF6; }
html body .tbl td { padding: 13px 12px; color: var(--gray-700); border-bottom-color: #EEF1F4; }
html body .tbl tbody tr:hover { background: #FBFCFE; }
html body .tbl tbody tr.sel-row { background: rgba(251,107,19,.05); }

html body .pag-bar { padding: 14px 22px; border-top-color: #EEF1F4; }
html body .pag-btn { width: 36px; height: 36px; border-radius: 10px; border-color: #DCE2EA; }
html body .pag-btn.active { background: var(--navy); border-color: var(--navy); }
html body .pag-btn:hover { border-color: var(--orange); color: var(--orange); }

/* Checkboxes de la tabla en naranja (habilitado, seleccionar) */
html body .tbl input[type="checkbox"], html body .cat-actions input[type="checkbox"] { accent-color: var(--orange); width: 18px; height: 18px; }

/* Pestañas (Impuestos). Su estilo base vive en un <style> de la plantilla,
   que se carga DESPUÉS de este archivo: por eso el selector lleva el padre. */
html body .imp-tabs .imp-tab { border: none; border-radius: 10px; background: #F3F4F7; color: #44546B; font-weight: 700; padding: 11px 22px; }
html body .imp-tabs .imp-tab.active { background: var(--fl-peach); color: var(--orange); box-shadow: inset 0 -2px 0 var(--orange); }

/* ═══════════════ DASHBOARD ═══════════════ */
html body .dash-wrap { padding: 24px 20px; }
html body .dash-hero .dash-greeting { font-size: 1.85rem; font-weight: 800; color: var(--ink-navy); letter-spacing: -.3px; }
html body .dash-last { background: var(--fl-peach); color: var(--orange); }
html body .dash-cta { border-radius: 12px; padding: 12px 22px; font-size: 1rem; font-weight: 800; box-shadow: 0 6px 16px rgba(251,107,19,.28); }
html body .dash-year-btn { border-radius: 10px; width: 40px; height: 40px; padding: 0; justify-content: center; border-color: var(--fl-line); }
html body .dash-year-lbl { font-size: 1.25rem; font-weight: 800; }
html body .kpi-card { border-radius: var(--fl-radius); border-color: var(--fl-line); border-top-width: 3px; box-shadow: var(--fl-shadow); padding: 20px 22px; }
html body .kpi-label { color: #6B7A90; }
html body .kpi-value { font-size: 1.6rem; font-weight: 800; }
html body .dash-card { border-radius: var(--fl-radius); border-color: var(--fl-line); box-shadow: var(--fl-shadow); }
html body .dash-card-title { font-size: 1.05rem; font-weight: 800; }

/* ═══════════════ MODALES ═══════════════ */
html body .m-box { border-radius: 18px; }
html body .m-head { background: white; border-bottom: 1px solid var(--fl-line); border-radius: 18px 18px 0 0; }
html body .m-title { color: var(--ink-navy); font-weight: 800; }
html body .m-close { background: #F1F2F5; color: var(--ink-navy); }
html body .m-close:hover { background: #E8EAEF; }

/* ═══════════════ TEMA OSCURO — maquetas oscuras (2026-10-06) ═══════════════
 * Azul marino profundo, NO los grises del común (#1a1d27). Colores medidos:
 *   página #09121F · topbar #101E30 · menú #0E1A2A · tarjeta #101C2C
 *   cabecera #162133 · encabezado de tabla #1B283E · borde #233142
 *   texto #E5E6EA / #8496AE · activo naranja sobre #2E2524
 *   botón azul #0A3673 · secundario #1A2A48 · verdes #0C302F / #0F4635
 * ⛔ Los selectores llevan `html body.dark` (0,2,2): el común usa
 *    `body.dark .x` (0,2,1) y se carga DESPUÉS, dentro del <body>.
 */
html body.dark {
  --fd-bg: #09121F; --fd-top: #101E30; --fd-nav: #0E1A2A; --fd-card: #101C2C;
  --fd-head: #162133; --fd-thead: #1B283E; --fd-line: #233142; --fd-input: #111B2C;
  --fd-txt: #E5E6EA; --fd-sub: #8496AE; --fd-act: #2E2524; --fd-blue: #0A3673;
  --fd-blue-line: #1E4E8F; --fd-sec: #1A2A48; --fd-sec-line: #2A3D63;
  --ink-navy: #E5E6EA;
  background: var(--fd-bg); color: var(--fd-txt);
  /* Controles nativos (calendario, checkbox, scrollbar) en oscuro: sin esto
     el icono de fecha sale negro y los checkbox blancos. */
  color-scheme: dark;
}

html body.dark .navbar { background: var(--fd-nav); border-color: var(--fd-line); box-shadow: none; }
html body.dark .nav-item { color: #C9D2DE; }
html body.dark .nav-item > i { color: #8FA0B8; }
html body.dark .nav-item:hover { background: #16243A; color: #fff; }
html body.dark .nav-item.active { background: var(--fd-act); color: var(--orange); }
html body.dark .nav-item.active > i, html body.dark .nav-item.active .nav-caret { color: var(--orange); }
html body.dark .nav-logout { background: transparent; border-color: #5D2633; color: #E5666A; }
html body.dark .nav-logout:hover { background: rgba(229,72,77,.1); }
html body.dark .nav-dropdown { background: var(--fd-card); border-color: var(--fd-line); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
html body.dark .nav-drawer { background: var(--fd-nav); }
html body.dark .nav-drawer-item { color: var(--fd-txt); border-bottom-color: var(--fd-line); }
html body.dark .nav-drawer-item:hover { background: #16243A; }

/* Cabecera de página: tarjeta más clara con la curva naranja tenue a la derecha */
html body.dark .cat-header {
  border-color: var(--fd-line); border-left-color: var(--orange);
  background:
    radial-gradient(ellipse 260px 120px at 100% 100%, rgba(251,107,19,.09) 0 60%, transparent 61%),
    var(--fd-head);
}
html body.dark .cat-header-title { color: var(--fd-txt); }
html body.dark .cat-header-sub { color: var(--fd-sub); }
html body.dark .cat-header-title > i:first-child { background: var(--fd-act); color: var(--orange); }

/* Tarjetas: filtros, tabla, dashboard */
html body.dark .cfdi-filters, html body.dark .tabla-card, html body.dark .dash-card, html body.dark .kpi-card {
  background: var(--fd-card); border-color: var(--fd-line); box-shadow: none;
}
html body.dark .tabla-card { box-shadow: 0 0 0 1px var(--fd-line); }
html body.dark .kpi-card { border-top-width: 3px; }
html body.dark .kpi-card.kpi-ingreso { border-top-color: #22C55E; }
html body.dark .kpi-card.kpi-egreso  { border-top-color: #F05252; }
html body.dark .kpi-card.kpi-nomina  { border-top-color: #2B8CE6; }
html body.dark .kpi-card.kpi-pago    { border-top-color: #8B5CF6; }
html body.dark .kpi-card.kpi-hoy     { border-top-color: var(--orange); }
html body.dark .kpi-label, html body.dark .kpi-foot, html body.dark .dash-sub, html body.dark .legend-item { color: var(--fd-sub); }
html body.dark .kpi-value, html body.dark .dash-greeting, html body.dark .dash-card-title, html body.dark .dash-year-lbl { color: var(--fd-txt); }
html body.dark .dash-greeting span { color: var(--orange); }
html body.dark .dash-card-head { border-bottom-color: var(--fd-line); }
html body.dark .dash-year-btn { background: var(--fd-card); border-color: var(--fd-line); color: var(--fd-txt); }
html body.dark .dash-last { background: var(--fd-act); color: var(--orange); }
html body.dark .rec-item { border-bottom-color: var(--fd-line); }
html body.dark .rec-item:hover { background: #142236; }
html body.dark .rec-nombre, html body.dark .rec-monto { color: var(--fd-txt); }
html body.dark .rec-folio { color: var(--fd-sub); }

html body.dark .cfdi-flbl { color: #C9D2DE; }
html body.dark .fi, html body.dark .fsel, html body.dark .fta { background-color: var(--fd-input); border-color: var(--fd-line); color: #C4C9D1; }
html body.dark .fi::placeholder { color: #66758C; }
html body.dark .fi:focus, html body.dark .fsel:focus, html body.dark .fta:focus { background-color: #13213A; border-color: var(--orange); }

html body.dark .btn-ghost { background: var(--fd-sec); border-color: var(--fd-sec-line); color: #DCE4F0; }
html body.dark .btn-ghost:hover { border-color: #3B5482; }
html body.dark .btn-navy { background: var(--fd-blue); border: 1px solid var(--fd-blue-line); box-shadow: none; }
html body.dark .btn-navy:hover { background: #0D4289; }

html body.dark .tb-sep { color: var(--fd-line); }
html body.dark .perpage-label { color: var(--fd-sub); }
html body.dark .tabla-topbar { background: var(--fd-card); }
html body.dark .tabla-topbar-title { color: var(--fd-txt); }
html body.dark .perpage-select, html body.dark .search-box { background-color: var(--fd-input); border-color: var(--fd-line); color: var(--fd-txt); }
html body.dark .perpage-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C4C9D1' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html body.dark .perpage-select option { background: var(--fd-card); color: var(--fd-txt); }
html body.dark .search-box input { color: var(--fd-txt); }
html body.dark .search-box i { color: var(--fd-sub); }
html body.dark .tbl thead tr { background: var(--fd-thead); }
html body.dark .tbl th { color: #DCE4F0; }
html body.dark .tbl th.sort:hover { background: #223252; }
html body.dark .tbl td { color: #D5DCE6; border-bottom-color: #1C2A3C; }
html body.dark .tbl tbody tr:hover { background: #13213A; }
html body.dark .tbl tbody tr.sel-row { background: rgba(251,107,19,.08); }
html body.dark .td-empty td, html body.dark .tbl .td-empty td { color: #A9B6C8; }
/* Iconos de acción sin color propio (actualizar estatus…) quedaban NEGROS. */
html body.dark .btn-ic:not([class*="btn-ic-"]) { color: #C9D2DE; }
html body.dark .btn-teal-out { background: #0F2340; border-color: #2F5DA3; color: #DCE8FF; }
html body.dark .btn-teal-out:hover { background: #16305A; color: #fff; }
html body.dark .pag-bar { border-top-color: var(--fd-line); }
html body.dark .pag-info { color: var(--fd-sub); }
html body.dark .pag-btn { background: transparent; border-color: var(--fd-line); color: #C4C9D1; }
html body.dark .pag-btn.active { background: #072C65; border-color: #4C7DBF; color: #fff; }
html body.dark .pag-btn:hover { border-color: var(--orange); color: var(--orange); }
html body.dark .cfdi-total-banner { background: #0B382D; border-color: #105139; color: #61D4AC; }
html body.dark .cfdi-total-banner * { color: #61D4AC; }
/* El total de CADA fila va en blanco; el verde es sólo de la píldora de arriba. */
html body.dark .cfdi-total-v { color: var(--fd-txt); }
html body.dark .cfdi-vigente { background: #0F4635; color: #54D59C; }

html body.dark .imp-tabs .imp-tab { background: #172435; color: #A7B7CE; border: none; }
html body.dark .imp-tabs .imp-tab.active { background: #5C2D1D; color: #FFE4D4; box-shadow: inset 0 0 0 1.5px var(--orange); }

html body.dark .m-box, html body.dark .c-box { background: var(--fd-card); }
html body.dark .m-head { background: var(--fd-head); border-bottom-color: var(--fd-line); }
html body.dark .m-foot { background: var(--fd-card); border-top-color: var(--fd-line); }
html body.dark .m-title, html body.dark .c-title { color: var(--fd-txt); }
html body.dark .m-close { background: #1B2A44; color: var(--fd-txt); }

/* ═══════════════ MÓVIL ═══════════════ */
@media (max-width: 768px) {
  /* Topbar compacta: la del común se encoge aquí, pero estas reglas (con más
     especificidad) le ganaban y en 390 px la campana y el usuario quedaban fuera.
     El chip de usuario sólo lleva a «Datos del emisor», que también está en el
     menú lateral, así que en teléfono se oculta. */
  html body .navbar { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  html body .cat-wrap, html body .dash-wrap { padding: 14px 12px; }
  html body .cat-header { padding: 16px; }
  html body .cat-header > div:has(> .cat-header-title > i:first-child) { padding-left: 60px; min-height: 46px; }
  html body .cat-header-title > i:first-child { width: 46px; height: 46px; font-size: 1.2rem; border-radius: 12px; }
  html body .cat-header-title { font-size: 1.25rem; }
  html body .tabla-wrap { margin: 0; }
}