/* ── Light theme (default) ─────────────────────────────────────────────── */
    :root, :root[data-theme="light"] {
      --bg:        #F5F5F5;
      --bg-2:      #FAFAFA;
      --bg-3:      #ffffff;
      --bg-4:      #F0F0F0;
      --border:    #E8E8E8;
      --border-2:  #D4D4D4;
      --text:      #1A1A1A;
      --text-2:    #6B6B6B;
      --text-3:    #9E9E9E;
      --accent:    #E63946;
      --accent-2:  #C62828;
      --danger:    #dc2626;
      --danger-2:  #991b1b;
      --warn:      #d97706;
      --warn-2:    #92400e;
      --green:     #16a34a;
      --info:      #4f8ef7;
      --red-dim:   rgba(230,57,70,0.10);
      --green-dim: rgba(22,163,74,0.10);
      --amber-dim: rgba(217,119,6,0.10);
      --info-dim:  rgba(79,142,247,0.10);
      --mono:      'IBM Plex Mono', monospace;
      --ui:        'Inter', system-ui, sans-serif;
      --r:         6px;
      --r-lg:      12px;
      --sidebar-bg: #ffffff;
      --sidebar-w:  220px;
      --sidebar-w-collapsed: 64px;
      --shadow-row: 0 1px 4px rgba(0,0,0,0.06);
      --shadow-card: 0 8px 40px rgba(0,0,0,0.08);
      --gap: 16px;
      --header-h: 56px;
    }

    /* ── Dark theme ─────────────────────────────────────────────────────────── */
    :root[data-theme="dark"] {
      --bg:        #0a0a0a;
      --bg-2:      #111111;
      --bg-3:      #1a1a1a;
      --bg-4:      #222222;
      --border:    #2a2a2a;
      --border-2:  #333333;
      --text:      #e2e2e2;
      --text-2:    #a0a0a0;
      --text-3:    #555555;
      --accent:    #E63946;
      --accent-2:  #FF4D5A;
      --danger:    #dc2626;
      --danger-2:  #991b1b;
      --warn:      #d97706;
      --warn-2:    #92400e;
      --green:     #3fcf8e;
      --info:      #4f8ef7;
      --red-dim:   rgba(230,57,70,0.14);
      --green-dim: rgba(63,207,142,0.12);
      --amber-dim: rgba(217,119,6,0.14);
      --info-dim:  rgba(79,142,247,0.12);
      --sidebar-bg: #111111;
      --sidebar-w:  220px;
      --shadow-row: 0 1px 3px rgba(0,0,0,0.3);
      --shadow-card: 0 4px 20px rgba(0,0,0,0.5);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--ui); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.5; }

    /* ── Login ──────────────────────────────────────────────────────────────── */
    #login-screen {
      display: flex; align-items: center; justify-content: center; min-height: 100vh;
      background: radial-gradient(ellipse at 30% 40%, rgba(230,57,70,0.07) 0%, transparent 65%), var(--bg);
    }
    .card {
      background: var(--bg-3); border: 1px solid var(--border); border-radius: 16px;
      padding: 2.5rem 2rem; width: 100%; max-width: 360px;
      box-shadow: var(--shadow-card); animation: cardIn 0.35s ease both;
    }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .logo-mark { text-align: center; margin-bottom: 1.75rem; }
    .logo-mono-wrap {
      width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 1.2rem; margin-bottom: 10px;
    }
    .logo-name { font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
    .logo-sub  { font-family: var(--mono); font-size: 0.62rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 3px; }
    .card input {
      width: 100%; padding: .7rem 1rem; margin-bottom: .75rem;
      background: var(--bg-4); border: 1px solid var(--border-2); border-radius: var(--r);
      color: var(--text); font-size: .9rem; font-family: var(--ui); transition: border-color 0.15s;
    }
    .card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,57,70,0.10); }
    :root[data-theme="dark"] .card input:focus { box-shadow: 0 0 0 3px rgba(230,57,70,0.10); }
    .btn-primary {
      width: 100%; padding: .75rem; background: var(--accent); color: #fff;
      border: none; border-radius: var(--r); font-size: .95rem; font-weight: 600;
      cursor: pointer; transition: background 0.15s; font-family: var(--ui);
    }
    .btn-primary:hover { background: var(--accent-2); }
    #login-error { color: #ef4444; font-size: .8rem; margin-top: .6rem; text-align: center; min-height: 1.2em; }

    /* ── App layout ─────────────────────────────────────────────────────────── */
    .app-layout { display: none; min-height: 100vh; }

    /* ── Global header (Finexy-style rounded bar) ─────────────────────────── */
    .global-header {
      position: fixed; top: var(--gap); left: var(--gap); right: var(--gap);
      height: var(--header-h); background: var(--bg-3);
      border-radius: 16px; display: flex; align-items: center;
      padding: 0 20px; gap: 16px;
      box-shadow: var(--shadow-row); z-index: 101;
    }
    .header-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .header-logo-img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; }
    .header-brand-name { font-weight: 700; font-size: 0.95rem; color: var(--text); }
    .header-team {
      flex: 1; display: flex; align-items: center; gap: 16px;
      justify-content: center; font-size: 0.75rem; min-width: 0; overflow: hidden;
    }
    .header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .header-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
    @media (max-width: 900px) { .header-team { display: none; } }

    /* ── Sidebar (rounded card below header) ───────────────────────────────── */
    .sidebar {
      position: fixed;
      top: calc(var(--gap) + var(--header-h) + var(--gap));
      left: var(--gap); bottom: var(--gap);
      width: var(--sidebar-w); background: var(--sidebar-bg);
      border-radius: 16px; box-shadow: var(--shadow-row);
      display: flex; flex-direction: column; overflow: hidden; z-index: 100;
      transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .nav-group-label {
      /* Visualmente es una línea divisoria; el texto queda oculto pero
         se mantiene en el DOM para lectores de pantalla. */
      font-size: 0; line-height: 0; color: transparent;
      padding: 0; margin: 12px 14px 6px; height: 0;
      border-top: 1px solid var(--border); opacity: 0.7;
      user-select: none;
    }
    .nav-group-label:first-child { margin-top: 4px; }
    nav.sidebar-nav { padding: 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
    .nav-item {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
      color: var(--text-2); font-size: 0.84rem; font-weight: 500;
      cursor: pointer; transition: background 0.15s, color 0.15s; user-select: none;
    }
    .nav-item:hover    { background: var(--bg-4); color: var(--text); }
    .nav-item.active   { background: var(--accent); color: #fff; font-weight: 600; }
    .nav-item.active .nav-icon svg { stroke: #fff; }
    .nav-item.disabled { opacity: 0.35; cursor: default; pointer-events: none; }
    .nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

    /* ── Sidebar collapse ───────────────────────────────────────────────────── */
    .sidebar.collapsed { width: var(--sidebar-w-collapsed); }
    .sidebar.collapsed + .main-area { margin-left: calc(var(--gap) + var(--sidebar-w-collapsed) + var(--gap)); }
    /* Textos del sidebar: colapsan a max-width:0 + opacity:0 cuando el
       sidebar está collapsed — transicionan suave junto con el width del
       sidebar. Overflow hidden evita que se vea el texto cortado durante
       la transición. */
    .nav-text {
      display: inline-block; max-width: 200px; opacity: 1; overflow: hidden;
      transition: max-width 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease 0.08s;
    }
    .sidebar.collapsed .nav-text {
      max-width: 0; opacity: 0; transition-delay: 0s;
    }
    .sidebar.collapsed nav.sidebar-nav { padding: 8px 12px; gap: 2px; }
    .sidebar.collapsed .nav-group-label { margin: 6px 10px 4px; }
    .sidebar.collapsed .nav-item {
      justify-content: center; padding: 0; gap: 0;
      width: 40px; height: 40px; margin: 0 auto;
      border-radius: 10px;
    }

    /* Peek on hover: cuando el sidebar está colapsado y el cursor lo toca,
       se expande temporalmente encima del contenido (no empuja main-area,
       así evitamos reflows). Sólo en dispositivos con mouse/trackpad real. */
    @media (hover: hover) {
      .sidebar.collapsed:hover {
        width: var(--sidebar-w);
        box-shadow: 0 8px 24px rgba(0,0,0,0.18), var(--shadow-row);
      }
      .sidebar.collapsed:hover .nav-text { display: inline; }
      .sidebar.collapsed:hover .nav-group-label { margin: 12px 14px 6px; }
      .sidebar.collapsed:hover .nav-item {
        justify-content: flex-start; padding: 9px 12px; gap: 10px;
        width: auto; height: auto; margin: 0;
      }
      .sidebar.collapsed:hover .sidebar-footer { padding: 8px 10px 10px; }
      .sidebar.collapsed:hover .sidebar-footer::before { left: 14px; right: 14px; }
      .sidebar.collapsed:hover .sidebar-footer-btn {
        justify-content: flex-start; padding: 9px 12px; gap: 10px;
        width: 100%; height: auto; margin: 0;
      }
      .sidebar.collapsed:hover .sidebar-footer-label { max-width: 200px; opacity: 1; transition-delay: 0s, 0.08s; }
      .sidebar.collapsed:hover .nav-text { max-width: 200px; opacity: 1; transition-delay: 0s, 0.08s; }
    }

    /* ── Sidebar footer ───────────────────────────────────────────────────────
       Mismo patrón que .nav-item: siempre columnar. En colapsado el icono se
       centra y el label se oculta; al hover (peek) o expandido, icon + label
       alineados a la izquierda. Ambos botones SIEMPRE apilados verticalmente.
       El separador (línea) es un ::before que imita .nav-group-label — misma
       longitud, opacity y margin horizontal que los separadores del nav. */
    .sidebar-footer {
      padding: 8px 10px 10px;
      margin-top: 4px;
      display: flex; flex-direction: column; align-items: stretch;
      gap: 2px; flex-shrink: 0;
      position: relative;
    }
    .sidebar-footer::before {
      content: ''; position: absolute;
      top: 0; left: 14px; right: 14px; height: 1px;
      background: var(--border); opacity: 0.7;
      transition: left 0.28s cubic-bezier(0.4,0,0.2,1),
                  right 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .sidebar-footer-btn {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
      background: none; border: none; cursor: pointer;
      color: var(--text-2); font-size: 0.84rem; font-weight: 500; font-family: var(--ui);
      transition: background 0.15s, color 0.15s; overflow: hidden; white-space: nowrap;
      width: 100%;
    }
    .sidebar-footer-btn:hover { background: var(--bg-4); color: var(--text); }
    .sidebar-footer-label {
      display: inline-block; max-width: 200px; opacity: 1; overflow: hidden;
      font-size: 0.84rem;
      transition: max-width 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease 0.08s;
    }
    .sidebar-footer-sep { display: none; }
    .sidebar.collapsed .sidebar-footer { padding: 6px 12px 10px; gap: 2px; }
    .sidebar.collapsed .sidebar-footer::before { left: 12px; right: 12px; }
    .sidebar.collapsed .sidebar-footer-btn {
      justify-content: center; padding: 0; gap: 0;
      width: 40px; height: 40px; margin: 0 auto;
      border-radius: 10px;
    }
    .sidebar.collapsed .sidebar-footer-label { max-width: 0; opacity: 0; transition-delay: 0s; }

    /* ── User menu ──────────────────────────────────────────────────────────── */
    .user-menu { position: relative; }
    .user-trigger {
      display: flex; align-items: center; gap: 8px;
      background: none; border: none; cursor: pointer;
      padding: 4px 6px; border-radius: 8px; transition: background 0.12s;
    }
    .user-trigger:hover { background: var(--bg-4); }
    .user-info { text-align: right; }
    .user-display-name { font-size: 0.8rem; font-weight: 600; color: var(--text); display: block; line-height: 1.3; }
    .user-sub-text { font-size: 0.66rem; color: var(--text-3); }
    .user-avatar {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--accent); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
    }
    .user-dropdown {
      position: absolute; top: calc(100% + 6px); right: 0;
      background: var(--bg-3); border: 1px solid var(--border-2);
      border-radius: 10px; box-shadow: var(--shadow-card);
      min-width: 160px; display: none; z-index: 200; overflow: hidden;
    }
    .user-dropdown.open { display: block; }
    .dropdown-item {
      padding: 9px 14px; font-size: 0.82rem; cursor: pointer;
      color: var(--text-2); transition: background 0.1s, color 0.1s;
    }
    .dropdown-item:hover { background: var(--bg-4); color: var(--text); }
    .dropdown-item.dd-danger { color: var(--danger); }
    .dropdown-item.dd-danger:hover { background: rgba(220,38,38,0.07); }

    /* ── Main area ──────────────────────────────────────────────────────────── */
    .main-area {
      flex: 1;
      margin-left: calc(var(--gap) + var(--sidebar-w) + var(--gap));
      margin-top: calc(var(--gap) + var(--header-h) + var(--gap));
      margin-right: var(--gap);
      padding-bottom: var(--gap);
      min-height: calc(100vh - var(--gap) - var(--header-h) - var(--gap));
      background: var(--bg);
      transition: margin-left 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .page-header {
      display: flex; align-items: center; gap: 12px;
      padding: 16px 20px 12px;
    }
    .page-header h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
    #last-update { font-family: var(--mono); font-size: 0.68rem; color: var(--text-3); }
    /* ── Team bar (inside global header) ───────────────────────────────── */
    .team-bar-group { display: flex; align-items: center; gap: 6px; }
    .team-bar-label { color: var(--text-3); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
    .team-bar-label svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
    .team-bar-name { color: var(--text); font-weight: 500; }
    .team-dot {
      width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    .team-bar-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; }
    .team-bar-empty { color: var(--text-3); font-style: italic; font-size: 0.7rem; }
    .btn-sm {
      padding: .32rem .72rem; background: transparent; border: none;
      border-radius: var(--r); color: var(--text-3); cursor: pointer; font-size: .78rem;
      font-family: var(--ui); transition: background 0.12s, color 0.12s; line-height: 1.4;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .btn-sm:hover { background: var(--bg-4); color: var(--text-2); }
    .page-body { padding: 0 20px 20px; }

    /* ── Stats ──────────────────────────────────────────────────────────────── */
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.25rem; }
    .stat-card  {
      background: var(--bg-3); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 14px 18px; box-shadow: var(--shadow-row);
    }
    .stat-num   { font-family: var(--mono); font-size: 1.85rem; font-weight: 500; line-height: 1; color: var(--text); }
    .stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-top: 4px; }
    .stat-card-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
    .stat-card-h .stat-label { margin-top: 0; margin-bottom: 6px; }
    .stat-card-h .stat-num  { font-size: 1.6rem; }
    .stat-card-h .stat-num-text { font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
    .stat-card-h.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    .stat-icon-circle {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .stat-icon-circle svg { stroke-width: 1.5; }
    .sic-ventas       { background: #dcfce7; color: #16a34a; }
    .sic-recargas     { background: #fef3c7; color: #d97706; }
    .sic-renovaciones { background: #dbeafe; color: #2563eb; }
    .sic-iptv         { background: #dbeafe; color: #2563eb; }
    .sic-cambios      { background: #fce7f3; color: #db2777; }
    .sic-anulaciones  { background: #fee2e2; color: #dc2626; }
    :root[data-theme="dark"] .sic-ventas       { background: #052e16; color: #86efac; }
    :root[data-theme="dark"] .sic-recargas     { background: #451a03; color: #fbbf24; }
    :root[data-theme="dark"] .sic-renovaciones { background: #1e3a5f; color: #60a5fa; }
    :root[data-theme="dark"] .sic-iptv         { background: #1e3a5f; color: #60a5fa; }
    :root[data-theme="dark"] .sic-cambios      { background: #4a1942; color: #f472b6; }
    :root[data-theme="dark"] .sic-anulaciones  { background: #450a0a; color: #f87171; }

    /* Movimientos — grid de 5 columnas para las cards */
    .mov-stats-grid { grid-template-columns: repeat(5, 1fr); }
    @media (max-width: 900px) { .mov-stats-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 600px) { .mov-stats-grid { grid-template-columns: repeat(2, 1fr); } }

    /* Movimientos — badges por tipo en la tabla */
    .mov-badge {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .mov-badge-venta      { background: #dcfce7; color: #16a34a; }
    .mov-badge-renovacion { background: #dbeafe; color: #2563eb; }
    .mov-badge-cambio     { background: #fce7f3; color: #db2777; }
    .mov-badge-anulacion  { background: #fef3c7; color: #d97706; }
    :root[data-theme="dark"] .mov-badge-venta      { background: #052e16; color: #86efac; }
    :root[data-theme="dark"] .mov-badge-renovacion { background: #1e3a5f; color: #93c5fd; }
    :root[data-theme="dark"] .mov-badge-cambio     { background: #4a1942; color: #f9a8d4; }
    :root[data-theme="dark"] .mov-badge-anulacion  { background: #451a03; color: #fcd34d; }
    .sic-total     { background: #fee2e2; color: #E63946; }
    .sic-servicios { background: #dbeafe; color: #2563eb; }
    .sic-constock  { background: #d1fae5; color: #059669; }
    .sic-sinstock  { background: #fef3c7; color: #d97706; }
    :root[data-theme="dark"] .sic-total     { background: #450a0a; color: #f87171; }
    :root[data-theme="dark"] .sic-servicios { background: #1e3a5f; color: #60a5fa; }
    :root[data-theme="dark"] .sic-constock  { background: #064e3b; color: #34d399; }
    :root[data-theme="dark"] .sic-sinstock  { background: #451a03; color: #fbbf24; }
    .stat-warn .stat-num { color: var(--warn); }

    /* ── Filter bar ─────────────────────────────────────────────────────────── */
    .filter-bar { display: none; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .filter-bar select, .filter-bar input[type="text"] {
      padding: 6px 10px; background: var(--bg-3); border: 1px solid var(--border-2);
      border-radius: var(--r); color: var(--text); font-size: 0.82rem; font-family: var(--ui);
      transition: border-color 0.15s;
    }
    .filter-bar select:focus, .filter-bar input[type="text"]:focus { outline: none; border-color: var(--accent); }
    .filter-bar input[type="text"] { min-width: 210px; }
    .btn-clear-filters {
      padding: 6px 12px; background: none; border: 1px solid var(--border-2);
      border-radius: var(--r); color: var(--text-3); cursor: pointer; font-size: 0.78rem;
      font-family: var(--ui); display: none; transition: color 0.15s;
    }
    .btn-clear-filters.visible { display: block; }
    .btn-clear-filters:hover   { color: var(--text); }

    /* ── Table — card rows ──────────────────────────────────────────────────── */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: .85rem; }
    th {
      padding: .5rem 1rem; text-align: left; white-space: nowrap;
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); font-weight: 600;
    }
    td {
      padding: .75rem 1rem; background: var(--bg-3); vertical-align: middle;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    tbody tr td:first-child { border-left: 1px solid var(--border); border-radius: 10px 0 0 10px; }
    tbody tr td:last-child  { border-right: 1px solid var(--border); border-radius: 0 10px 10px 0; }
    tbody tr:hover td { background: var(--bg-4); }

    /* Row type — colored left border */
    tr.fila-cuenta td:first-child { border-left: 3px solid #b91c1c !important; border-radius: 10px 0 0 10px; }
    tr.fila-perfil  td:first-child { border-left: 3px solid #b45309 !important; border-radius: 10px 0 0 10px; }

    /* ── Service logo (circle with brand icon) ──────────────────────────────── */
    .svc-cell { display: flex; align-items: center; gap: 9px; }
    .svc-logo {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 0.88rem; overflow: hidden;
    }
    .svc-logo img { display: block; pointer-events: none; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

    /* ── Badges ─────────────────────────────────────────────────────────────── */
    .badge { display: inline-block; padding: .18rem .5rem; border-radius: 4px; font-size: .7rem; font-weight: 600; }
    .pantalla { background: #1d3a8a; color: #93c5fd; }
    .extra    { background: #4a1d96; color: #c4b5fd; }
    :root[data-theme="light"] .pantalla { background: #dbeafe; color: #1d4ed8; }
    :root[data-theme="light"] .extra    { background: #ede9fe; color: #6d28d9; }

    .svc-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 7px; border-radius: 4px; font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.01em; white-space: nowrap;
    }
    .badge-bloqueo {
      display: inline-block; padding: 1px 5px; border-radius: 3px;
      font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .badge-bloqueo.cuenta { background: #450a0a; color: #fca5a5; }
    .badge-bloqueo.perfil { background: #3d2000; color: #fde68a; }
    :root[data-theme="light"] .badge-bloqueo.cuenta { background: #fee2e2; color: #991b1b; }
    :root[data-theme="light"] .badge-bloqueo.perfil { background: #fef3c7; color: #92400e; }

    /* ── Credentials ────────────────────────────────────────────────────────── */
    .cred-cell   { display: flex; align-items: center; gap: 5px; }
    .cred-text   { font-family: var(--mono); font-size: 0.76rem; color: var(--text-2); }
    .cred-masked { font-family: var(--mono); font-size: 0.76rem; color: var(--text-3); letter-spacing: 0.1em; }
    .btn-cred {
      background: none; border: none; cursor: pointer; color: var(--text-3);
      padding: 2px 3px; border-radius: 3px; line-height: 1;
      transition: color 0.12s; flex-shrink: 0;
      display: inline-flex; align-items: center;
    }
    .btn-cred:hover { color: var(--text); }
    .copy-flash {
      position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
      background: var(--bg-3); border: 1px solid var(--border-2); color: var(--accent);
      font-family: var(--mono); font-size: 0.75rem; padding: 4px 14px;
      border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.18s; z-index: 999;
    }
    .copy-flash.visible { opacity: 1; }

    /* ── Icon action buttons ────────────────────────────────────────────────── */
    .btn-icon {
      background: none; border: none; cursor: pointer;
      width: 30px; height: 30px; border-radius: 7px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1rem; color: var(--text-3); transition: background 0.12s, color 0.12s;
    }
    .btn-icon:hover { background: var(--bg-4); }
    .btn-icon.btn-recuperar,
    .btn-icon.btn-recuperar-perfil        { color: #16a34a; }
    .btn-icon.btn-recuperar:hover,
    .btn-icon.btn-recuperar-perfil:hover  { background: rgba(22,163,74,0.08); }
    .btn-icon.btn-eliminar                { color: #dc2626; }
    .btn-icon.btn-eliminar:hover          { background: rgba(220,38,38,0.08); }
    .btn-icon.btn-reportar:hover          { color: #d97706; background: rgba(217,119,6,0.08); }
    .btn-icon:disabled                    { opacity: 0.3; cursor: not-allowed; }
    .actions-cell { display: flex; align-items: center; gap: 2px; }

    /* ── Empty / Error / Fecha ──────────────────────────────────────────────── */
    .empty, .loading { text-align: center; padding: 3rem; color: var(--text-3); font-family: var(--mono); font-size: 0.85rem; }
    .fecha-small { font-family: var(--mono); font-size: .7rem; color: var(--text-3); }

    /* ── Skeleton loader ────────────────────────────────────────────────────── */
    .skeleton-row td { padding: 12px 16px; }
    .skeleton-block {
      height: 13px; border-radius: 3px;
      background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 50%, var(--bg-3) 75%);
      background-size: 200% 100%; animation: shimmer 1.4s infinite;
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ── Row animations ─────────────────────────────────────────────────────── */
    @keyframes rowIn {
      from { opacity: 0; transform: translateY(5px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    tbody tr:not(.skeleton-row) { animation: rowIn 0.28s ease both; }
    @keyframes rowOut { to { opacity: 0; transform: translateX(28px); } }
    tr.removing { animation: rowOut 0.22s ease forwards; }

    /* ── Toasts ─────────────────────────────────────────────────────────────── */
    #toast-container {
      position: fixed; bottom: 20px; right: 20px;
      display: flex; flex-direction: column; gap: 8px; z-index: 1000; pointer-events: none;
    }
    .toast {
      padding: 9px 16px; border-radius: var(--r); font-size: 0.82rem; font-weight: 500;
      border-left: 3px solid; background: var(--bg-3); color: var(--text);
      animation: toastIn 0.22s ease forwards; pointer-events: none; max-width: 280px;
      font-family: var(--ui); box-shadow: var(--shadow-card);
    }
    .toast.ok  { border-color: #16a34a; color: #15803d; }
    .toast.err { border-color: var(--danger); color: var(--danger); }
    :root[data-theme="dark"] .toast.ok  { color: #86efac; }
    :root[data-theme="dark"] .toast.err { color: #fca5a5; }
    @keyframes toastIn  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes toastOut { to   { opacity: 0; transform: translateX(16px); } }

    /* ── Modal ──────────────────────────────────────────────────────────────── */
    #modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
      z-index: 900; align-items: center; justify-content: center;
    }
    :root[data-theme="dark"] #modal-overlay { background: rgba(0,0,0,0.72); }
    #modal-overlay.visible { display: flex; }
    .modal-card {
      background: var(--bg-3); border: 1px solid var(--border-2); border-radius: 14px;
      padding: 24px 28px; max-width: 380px; width: 90%;
      animation: cardIn 0.2s ease both; box-shadow: var(--shadow-card);
    }
    .modal-card h3  { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
    .modal-card p   { font-size: 0.875rem; color: var(--text-2); margin-bottom: 22px; line-height: 1.5; }
    .modal-actions  { display: flex; gap: 10px; justify-content: flex-end; }
    .btn-modal-cancel {
      padding: 7px 16px; background: transparent; border: none;
      border-radius: var(--r); color: var(--text-3); cursor: pointer; font-size: 0.85rem; font-family: var(--ui);
      transition: background 0.12s, color 0.12s;
    }
    .btn-modal-cancel:hover { background: var(--bg-4); color: var(--text-2); }
    .btn-modal-confirm {
      padding: 7px 16px; background: var(--danger-2); border: none;
      border-radius: var(--r); color: #fff; cursor: pointer; font-size: 0.85rem;
      font-weight: 600; font-family: var(--ui); transition: opacity 0.12s;
    }
    .btn-modal-confirm.is-primary { background: var(--accent); }
    .btn-modal-confirm:hover { opacity: 0.85; }

    /* ── Service cell — stacked info ────────────────────────────────────────── */
    .svc-info { display: flex; flex-direction: column; gap: 3px; }

    /* ── Perfil dash ────────────────────────────────────────────────────────── */
    .cell-dash { color: var(--text-3); opacity: 0.55; }

    /* ── History drawer ─────────────────────────────────────────────────────── */
    .history-drawer {
      position: fixed; top: 0; right: -340px; width: 320px; height: 100vh;
      background: var(--bg-3); border-left: 1px solid var(--border);
      z-index: 300; display: flex; flex-direction: column;
      transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
      box-shadow: -8px 0 24px rgba(0,0,0,0.08);
    }
    .history-drawer.open { right: 0; }
    .drawer-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.20);
      z-index: 299; display: none;
    }
    .drawer-overlay.visible { display: block; }
    .drawer-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    }
    .drawer-title { font-size: 0.9rem; font-weight: 600; }
    .drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
    .drawer-footer { padding: 12px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
    .btn-clear-history {
      width: 100%; padding: 7px; background: none; border: 1px solid var(--border-2);
      border-radius: var(--r); color: var(--text-3); cursor: pointer; font-size: 0.78rem;
      font-family: var(--ui); transition: color 0.15s, border-color 0.15s;
    }
    .btn-clear-history:hover { color: var(--danger); border-color: var(--danger); }
    .history-group-label {
      padding: 10px 20px 4px; font-size: 0.65rem; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--text-3); font-weight: 600;
    }
    .history-item { padding: 10px 20px; display: flex; align-items: center; gap: 12px; }
    .history-item-icon {
      width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .history-item-icon.recuperar { background: rgba(22,163,74,0.12); color: #16a34a; }
    .history-item-icon.eliminar  { background: rgba(220,38,38,0.12); color: #dc2626; }
    .history-item-content { flex: 1; min-width: 0; }
    .history-item-title { font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .history-item-time  { font-family: var(--mono); font-size: 0.65rem; color: var(--text-3); margin-top: 2px; }
    .history-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 0.82rem; }

    /* ── Stock page ────────────────────────────────────────────────────────── */
    .page-section { display: none; }
    .page-section.active { display: block; }
    .ajustes-section-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; color: var(--text); }
    .rol-select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 12px; cursor: pointer; }
    .badge-activo { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
    .badge-activo.si { background: rgba(16,185,129,0.15); color: var(--success); }
    .badge-activo.no { background: rgba(239,68,68,0.15); color: var(--danger); }
    .btn-link-email { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; }
    .btn-link-email:hover { background: var(--accent); color: #fff; }
    .ajustes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .ajustes-header .ajustes-section-title { margin-bottom: 0; }
    .btn-edit-email { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 2px; vertical-align: middle; }
    .btn-edit-email:hover { color: var(--accent); }
    .emp-email-text { font-size: 13px; }
    .emp-email-input { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--bg-2); color: var(--text); width: 180px; }
    .emp-email-input:focus { border-color: var(--accent); outline: none; }
    .stock-section { margin-bottom: 1.5rem; }
    .stock-section-header {
      display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem;
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-3); font-weight: 600;
    }
    .stock-section-header svg { width: 16px; height: 16px; opacity: 0.7; }
    .stock-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
    }
    .stock-card {
      background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
      box-shadow: var(--shadow-row); transition: border-color 0.15s; gap: 8px;
    }
    .stock-card:hover { border-color: var(--accent); }
    .stock-card-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .stock-card-left .svc-logo { width: 32px; height: 32px; font-size: 0.9rem; flex-shrink: 0; }
    .stock-card-info { min-width: 0; }
    .stock-card-name { font-size: 0.8rem; color: var(--text); font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stock-label { font-size: 0.65rem; color: var(--text-3); line-height: 1.2; }
    .stock-card-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .stock-num {
      font-family: var(--mono); font-size: 1.4rem; font-weight: 500; color: var(--text); line-height: 1;
    }
    .stock-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .stock-dot.red    { background: #ef4444; }
    .stock-dot.yellow { background: #eab308; }
    .stock-dot.green  { background: #22c55e; }
    .stock-infinity {
      font-family: var(--mono); font-size: 1.85rem; font-weight: 300; color: var(--accent); line-height: 1;
    }

    .stock-stats-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.25rem;
    }
    @media (max-width: 700px) {
      .stock-stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stock-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    }

    /* ── Cargar Stock page ──────────────────────────────────────── */
    .cargar-cat-card { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
    .cargar-cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
    .cargar-select {
      width: 100%; padding: 8px 10px; background: var(--bg-4); border: 1px solid var(--border-2);
      border-radius: var(--r); color: var(--text); font-size: 0.82rem; font-family: var(--ui);
      transition: border-color 0.15s;
    }
    .cargar-select:focus { outline: none; border-color: var(--accent); }
    .cargar-dropzone {
      border: 2px dashed var(--border-2); border-radius: var(--r-lg); padding: 32px 20px;
      text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
    }
    .cargar-dropzone:hover, .cargar-dropzone.drag-over {
      border-color: var(--accent); background: rgba(230,57,70,0.04);
    }
    :root[data-theme="dark"] .cargar-dropzone:hover, :root[data-theme="dark"] .cargar-dropzone.drag-over {
      background: rgba(230,57,70,0.04);
    }
    .cargar-mode-btn {
      background: var(--bg-4); border: 1px solid var(--border-2); color: var(--text-2);
      padding: 6px 14px; border-radius: var(--r); cursor: pointer; font-size: 12px; font-family: var(--ui); transition: all 0.15s;
    }
    .cargar-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* nav-item clickable (non-disabled) */
    .nav-item { cursor: pointer; }
    .nav-item.disabled { cursor: default; }

    /* ── Buscar Cliente page ───────────────────────────────────────── */
    .client-search-bar {
      display: flex; gap: 10px; margin-bottom: 20px;
    }
    .client-search-bar input {
      flex: 1; padding: 10px 14px; font-size: 0.95rem; font-family: var(--mono);
      background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--r);
      color: var(--text); transition: border-color 0.15s;
    }
    .client-search-bar input:focus { outline: none; border-color: var(--accent); }
    .client-search-bar .btn-primary {
      width: auto; padding: 10px 20px; display: flex; align-items: center; gap: 6px;
      white-space: nowrap; font-size: 0.9rem;
    }
    .client-empty, .client-not-found {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 60px 20px; color: var(--text-3); gap: 12px; text-align: center;
    }
    .client-not-found { color: var(--danger); }
    .client-card {
      background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 20px 24px; margin-bottom: 20px; box-shadow: var(--shadow-row);
    }
    .client-card-header {
      display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
    }
    .client-card-avatar {
      width: 44px; height: 44px; border-radius: 50%; background: var(--accent);
      color: #fff; display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
    }
    .client-card-name { font-size: 1.1rem; font-weight: 600; }
    .client-card-phone { font-family: var(--mono); color: var(--text-2); font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
    .btn-edit-phone { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 2px; border-radius: 4px; display: inline-flex; align-items: center; }
    .btn-edit-phone:hover { color: var(--accent); background: var(--bg-hover); }
    .client-card-date { font-size: 0.8rem; color: var(--text-3); }
    .client-card-stats {
      display: flex; gap: 24px; padding-top: 12px; border-top: 1px solid var(--border);
    }
    .client-stat { text-align: center; }
    .client-stat-num { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
    .client-stat-label { font-size: 0.75rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
    .client-section-header {
      font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-2); margin-bottom: 10px;
    }
    .client-tabs {
      display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--border);
    }
    .client-tab {
      padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
      margin-bottom: -2px; color: var(--text-2); font-size: 0.85rem; font-weight: 500;
      cursor: pointer; transition: color 0.15s, border-color 0.15s; font-family: var(--ui);
    }
    .client-tab:hover { color: var(--text); }
    .client-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .client-tab-content { display: none; }
    .client-tab-content.active { display: block; }
    .client-tab-empty {
      padding: 32px 20px; text-align: center; color: var(--text-3); font-size: 0.9rem;
    }

    /* ── Mi Actividad ──────────────────────────────────────────────────────── */
    .actividad-filters { display: flex; gap: 6px; margin-bottom: 14px; }
    .actividad-range-btn {
      padding: 5px 14px; border: 1px solid var(--border-2); border-radius: 20px;
      background: var(--bg-3); color: var(--text-2); font-size: 0.8rem; font-family: var(--ui);
      cursor: pointer; transition: all 0.15s;
    }
    .actividad-range-btn:hover { border-color: var(--accent); color: var(--accent); }
    .actividad-range-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .actividad-stats { display: flex; flex-wrap: wrap; gap: 12px; }
    .actividad-stats .stat-card { flex: 1 1 0; min-width: 140px; }
    .actividad-body { display: flex; gap: 16px; align-items: flex-start; }
    .actividad-body-left { flex: 1; min-width: 0; }
    .actividad-body-right {
      flex: 0 0 280px; position: sticky; top: calc(var(--gap) + var(--header-h) + var(--gap) + 16px);
      background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 20px; box-shadow: var(--shadow-row);
    }
    .actividad-donut-title {
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-3); margin-bottom: 12px; font-family: var(--ui);
    }
    .actividad-donut-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto; }
    .actividad-donut-center {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      text-align: center; pointer-events: none;
    }
    .actividad-donut-center-num { font-family: var(--mono); font-size: 1.6rem; font-weight: 600; color: var(--text); line-height: 1; }
    .actividad-donut-center-label { font-size: 0.68rem; color: var(--text-3); margin-top: 2px; }
    .actividad-donut-legend { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
    .actividad-donut-legend-item { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text); }
    .actividad-donut-legend-left { display: flex; align-items: center; gap: 8px; }
    .actividad-donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .actividad-donut-legend-val { font-family: var(--mono); font-weight: 500; color: var(--text-2); }
    @media (max-width: 900px) {
      .actividad-body { flex-direction: column; }
      .actividad-body-right { flex: none; width: 100%; position: static; }
      .actividad-donut-wrap { width: 180px; height: 180px; }
    }
    .actividad-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 10px 14px; background: var(--bg-3); border: 1px solid var(--border);
      border-radius: var(--r-lg); margin-bottom: 8px; box-shadow: var(--shadow-row);
    }
    .actividad-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .actividad-row-label { font-size: 0.85rem; font-weight: 500; color: var(--text); white-space: nowrap; }
    .actividad-row-sub { font-size: 0.78rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    .actividad-row-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
    .actividad-row-date { font-size: 0.75rem; color: var(--text-3); font-family: var(--mono); }
    .actividad-badge {
      display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.72rem;
      font-weight: 500; font-family: var(--ui); text-transform: capitalize;
    }
    .actividad-badge-activa   { background: #dcfce7; color: #166534; }
    .actividad-badge-completado { background: #dcfce7; color: #166534; }
    .actividad-badge-vencida  { background: #fef3c7; color: #92400e; }
    .actividad-badge-cancelada { background: #fee2e2; color: #991b1b; }
    .actividad-badge-cancelado { background: #fee2e2; color: #991b1b; }
    .actividad-badge-pendiente { background: #e0e7ff; color: #3730a3; }
    .actividad-badge-pendiente_iptv { background: #e0e7ff; color: #3730a3; }
    .actividad-badge-en_proceso { background: #fef3c7; color: #92400e; }
    .actividad-rol-badge {
      display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.68rem;
      font-family: var(--ui); margin-left: 4px; background: var(--bg-4); color: var(--text-3);
    }
    :root[data-theme="dark"] .actividad-badge-activa   { background: #14532d; color: #86efac; }
    :root[data-theme="dark"] .actividad-badge-completado { background: #14532d; color: #86efac; }
    :root[data-theme="dark"] .actividad-badge-vencida  { background: #451a03; color: #fcd34d; }
    :root[data-theme="dark"] .actividad-badge-cancelada { background: #450a0a; color: #fca5a5; }
    :root[data-theme="dark"] .actividad-badge-cancelado { background: #450a0a; color: #fca5a5; }
    :root[data-theme="dark"] .actividad-badge-pendiente { background: #1e1b4b; color: #a5b4fc; }
    :root[data-theme="dark"] .actividad-badge-pendiente_iptv { background: #1e1b4b; color: #a5b4fc; }
    :root[data-theme="dark"] .actividad-badge-en_proceso { background: #451a03; color: #fcd34d; }
    .actividad-select {
      padding: 6px 10px; border: 1px solid var(--border-2); border-radius: var(--r);
      background: var(--bg-3); color: var(--text); font-family: var(--ui); font-size: .85rem; min-width: 200px;
    }
    .actividad-icon {
      width: 32px; height: 32px; border-radius: 8px; color: #fff;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    @media (max-width: 767px) {
      .actividad-stats .stat-card { flex: 1 1 calc(33% - 10px); }
      .actividad-row-sub { max-width: 120px; }
    }
    /* ── Reportes v2 (scope #page-reportes) ─────────────────────────────── */
    /* `.stat-delta` se mantiene fuera del scope porque Nómina y Movimientos lo reutilizan. */
    .stat-delta { font-size: 0.75rem; font-weight: 500; margin-top: 2px; min-height: 16px; }
    .stat-delta.up { color: var(--green); }
    .stat-delta.down { color: var(--danger); }

    #page-reportes { color: var(--text); font-size: 14px; line-height: 1.5; }

    /* Header */
    #page-reportes .rpt-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      margin-bottom: 1.75rem; padding-bottom: 1.1rem;
      border-bottom: 1px solid var(--border); gap: 16px; flex-wrap: wrap;
    }
    #page-reportes .rpt-title { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; }
    #page-reportes .rpt-subtitle { font-size: 12px; color: var(--text-2); font-family: var(--mono); margin-top: 4px; }

    #page-reportes .rpt-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
    #page-reportes .rpt-tab {
      padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer;
      border: 1px solid transparent; background: transparent; color: var(--text-2);
      font-family: var(--ui); transition: all 0.15s;
    }
    #page-reportes .rpt-tab:hover { color: var(--text); background: var(--bg-4); }
    #page-reportes .rpt-tab.active { background: var(--accent); color: #fff; }

    /* Hero strip */
    #page-reportes .rpt-hero {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 1px;
      background: var(--border); border: 1px solid var(--border);
      border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.5rem;
    }
    #page-reportes .rpt-hero-cell {
      background: var(--bg-2); padding: 1.25rem 1.5rem;
      display: flex; flex-direction: column; gap: 4px;
    }
    #page-reportes .rpt-hero-primary { background: var(--bg-3); }
    #page-reportes .rpt-hero-label {
      font-size: 10px; font-weight: 500; letter-spacing: 0.8px;
      text-transform: uppercase; color: var(--text-3);
    }
    #page-reportes .rpt-hero-value {
      font-size: 28px; font-weight: 600; letter-spacing: -1px;
      font-family: var(--mono); color: var(--text); line-height: 1;
    }
    #page-reportes .rpt-hero-value.accent { color: var(--green); }
    #page-reportes .rpt-hero-sub { font-size: 11px; font-family: var(--mono); margin-top: 4px; }
    #page-reportes .rpt-hero-sub.up { color: var(--green); }
    #page-reportes .rpt-hero-sub.down { color: var(--danger); }
    #page-reportes .rpt-text-3 { color: var(--text-3); }
    #page-reportes .rpt-hero-note { font-size: 11px; color: var(--text-2); line-height: 1.4; margin-top: 2px; }

    /* Section label */
    #page-reportes .rpt-section-label {
      font-size: 10px; font-weight: 600; letter-spacing: 1px;
      text-transform: uppercase; color: var(--text-3);
      margin-bottom: 10px; margin-top: 2rem;
      display: flex; align-items: center; gap: 8px;
    }
    #page-reportes .rpt-section-label::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }

    /* Decision card (señales) */
    #page-reportes .rpt-decision {
      background: linear-gradient(135deg, var(--red-dim) 0%, transparent 65%);
      border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.1rem 1.4rem;
      margin-bottom: 1.5rem;
    }
    #page-reportes .rpt-decision-title {
      font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
      text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
    }
    #page-reportes .rpt-decision-items { display: flex; flex-direction: column; gap: 6px; }
    #page-reportes .rpt-decision-item {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 12.5px; color: var(--text-2); line-height: 1.5;
      padding: 8px 10px; border-radius: 6px;
      border-left: 3px solid transparent;
    }
    #page-reportes .rpt-decision-bullet {
      flex-shrink: 0; margin-top: 1px;
      width: 18px; height: 18px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700;
    }
    #page-reportes .rpt-decision-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    #page-reportes .rpt-decision-cta {
      font-size: 11.5px; font-weight: 600; color: var(--text); margin-top: 2px;
    }
    #page-reportes .rpt-decision-item strong { color: var(--text); font-weight: 600; }
    /* Severidad */
    #page-reportes .rpt-sev-critico {
      background: var(--red-dim); border-left-color: var(--danger);
    }
    #page-reportes .rpt-sev-critico .rpt-decision-bullet {
      background: var(--danger); color: #fff;
    }
    #page-reportes .rpt-sev-atencion {
      background: var(--amber-dim); border-left-color: var(--warn);
    }
    #page-reportes .rpt-sev-atencion .rpt-decision-bullet {
      background: var(--warn); color: #fff;
    }
    #page-reportes .rpt-sev-positivo {
      background: var(--green-dim); border-left-color: var(--green);
    }
    #page-reportes .rpt-sev-positivo .rpt-decision-bullet {
      background: var(--green); color: #fff;
    }

    /* Cobertura del KPI Margen neto */
    #page-reportes .rpt-hero-cobertura {
      font-size: 10.5px; color: var(--warn); margin-top: 2px;
      font-family: var(--mono); line-height: 1.3;
    }

    /* Card base */
    #page-reportes .rpt-card {
      background: var(--bg-3); border: 1px solid var(--border);
      border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1rem;
    }
    #page-reportes .rpt-card-header {
      padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
    }
    #page-reportes .rpt-card-title { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: var(--text); }
    #page-reportes .rpt-card-badge {
      font-size: 10px; font-family: var(--mono);
      color: var(--text-2); background: var(--bg-4);
      padding: 2px 8px; border-radius: 4px;
    }
    #page-reportes .rpt-card-subtitle {
      padding: 0.55rem 1.25rem 0; font-size: 11px; color: var(--text-2);
    }
    #page-reportes .rpt-card-subtitle:empty { display: none; }

    /* Tendencia 14d */
    #page-reportes .rpt-tend-card {
      background: var(--bg-3); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 1.1rem 1.4rem;
      margin-bottom: 1.5rem;
    }
    #page-reportes .rpt-tend-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 1.25rem;
    }
    #page-reportes .rpt-tend-title { font-size: 13px; font-weight: 500; color: var(--text); }
    #page-reportes .rpt-tend-total { font-size: 12px; font-family: var(--mono); color: var(--green); }
    #page-reportes .rpt-tend-bars {
      display: flex; align-items: flex-end; gap: 6px; height: 84px;
      margin-bottom: 10px;
    }
    #page-reportes .rpt-tend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
    #page-reportes .rpt-tend-bar {
      width: 100%; height: 64px; background: var(--border);
      border-radius: 3px 3px 0 0; position: relative; overflow: hidden;
    }
    #page-reportes .rpt-tend-bar-fill {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: var(--accent); border-radius: 3px 3px 0 0;
      transition: height 0.3s;
    }
    #page-reportes .rpt-tend-bar-fill.today { background: var(--green); }
    #page-reportes .rpt-tend-day { font-size: 9px; color: var(--text-3); font-family: var(--mono); }
    #page-reportes .rpt-tend-day.today { color: var(--green); }
    #page-reportes .rpt-tend-val { font-size: 9px; color: var(--text-2); font-family: var(--mono); white-space: nowrap; }
    #page-reportes .rpt-tend-legend { display: flex; gap: 18px; margin-top: 6px; }
    #page-reportes .rpt-tend-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
    #page-reportes .rpt-tend-dot { width: 8px; height: 8px; border-radius: 2px; }
    #page-reportes .rpt-tend-dot-red { background: var(--accent); }
    #page-reportes .rpt-tend-dot-green { background: var(--green); }
    #page-reportes .rpt-tend-dot-border { background: var(--border); }

    /* Rentabilidad table */
    #page-reportes .rpt-rent-table { width: 100%; border-collapse: collapse; }
    #page-reportes .rpt-rent-table thead { background: var(--bg-4); }
    #page-reportes .rpt-rent-table thead th {
      font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
      text-transform: uppercase; color: var(--text-3);
      padding: 8px 1.25rem; text-align: left;
    }
    #page-reportes .rpt-rent-table thead th.right { text-align: right; }
    #page-reportes .rpt-rent-table tbody tr { border-bottom: 1px solid var(--border); }
    #page-reportes .rpt-rent-table tbody tr:last-child { border-bottom: none; }
    #page-reportes .rpt-rent-table tbody tr:hover { background: var(--bg-4); }
    #page-reportes .rpt-rent-table td { padding: 11px 1.25rem; font-size: 12.5px; color: var(--text); }
    #page-reportes .rpt-rent-table td.right { text-align: right; font-family: var(--mono); }
    #page-reportes .rpt-rent-table td.mono { font-family: var(--mono); }
    #page-reportes .rpt-rent-table td.mono.muted { color: var(--text-3); }
    #page-reportes .rpt-rent-table td.mono.green { color: var(--green); }
    #page-reportes .rpt-rent-table td.mono.amber { color: var(--warn); }
    #page-reportes .rpt-rent-table td.mono.red { color: var(--danger); }
    #page-reportes .svc-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
    #page-reportes .svc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    /* PR2: badge proveedor cuando hay >1 fila por servicio_key */
    #page-reportes .svc-prov-badge {
      display: inline-block; margin-left: 6px;
      font-size: 10px; padding: 1px 6px;
      border-radius: 8px; background: var(--bg-4);
      color: var(--text-3); font-weight: 400;
      letter-spacing: 0.2px;
    }
    /* PR2: subtítulo de "Ventas nuevas" en empleado row mostrando recargas */
    #page-reportes .rpt-emp-stat-sub {
      display: inline-block; margin-left: 4px;
      font-size: 10px; color: var(--text-3); font-weight: 400;
    }

    #page-reportes .margin-bar-wrap { display: flex; align-items: center; gap: 8px; }
    #page-reportes .margin-bar-bg { flex: 1; height: 4px; background: var(--border); border-radius: 2px; max-width: 80px; }
    #page-reportes .margin-bar-fill { height: 4px; border-radius: 2px; }
    #page-reportes .margin-pct { font-size: 11px; font-family: var(--mono); min-width: 46px; text-align: right; }
    #page-reportes .margin-high { background: var(--green); }
    #page-reportes .margin-med  { background: var(--warn); }
    #page-reportes .margin-low  { background: var(--danger); }
    #page-reportes .margin-pct.margin-high { background: transparent; color: var(--green); }
    #page-reportes .margin-pct.margin-med  { background: transparent; color: var(--warn); }
    #page-reportes .margin-pct.margin-low  { background: transparent; color: var(--danger); }
    #page-reportes .margin-pct.margin-na   { color: var(--text-3); }

    #page-reportes .rpt-costos-alert {
      padding: 10px 1.25rem; font-size: 11px; color: var(--warn);
      background: var(--amber-dim); border-top: 1px solid var(--border);
    }

    /* Scroll horizontal en tablas ampliadas (Fase 4 + 6) */
    #page-reportes .rpt-rent-scroll { overflow-x: auto; }
    #page-reportes .rpt-rent-table th { white-space: nowrap; }
    #page-reportes .rpt-prov-warn {
      display: inline-block; margin-left: 4px; font-size: 11px; color: var(--warn);
    }
    /* Nota secundaria dentro de una celda (Fase rentabilidad parcial) */
    #page-reportes .rpt-cell-note {
      display: block; margin-top: 2px;
      color: var(--text-3); font-size: 10.5px; line-height: 1.3;
      font-family: var(--ui); font-weight: 400;
    }

    /* Mini strip (Fase 5) — debajo del hero, breakdown ventas/renov/recargas */
    #page-reportes .rpt-mini-strip {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
      background: var(--border); border: 1px solid var(--border);
      border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.5rem;
    }
    #page-reportes .rpt-mini-cell {
      background: var(--bg-2); padding: 12px 16px;
      display: flex; flex-direction: column; gap: 2px;
    }
    #page-reportes .rpt-mini-label {
      font-size: 10px; font-weight: 500; letter-spacing: 0.6px;
      text-transform: uppercase; color: var(--text-3);
    }
    #page-reportes .rpt-mini-val {
      font-size: 18px; font-weight: 600; font-family: var(--mono);
      color: var(--text); line-height: 1.2;
    }
    #page-reportes .rpt-mini-sub {
      font-size: 10.5px; color: var(--text-3); font-family: var(--mono);
    }

    /* Two-col (empleados + salud) */
    #page-reportes .rpt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }

    /* Empleados */
    #page-reportes .rpt-emp-row {
      display: flex; align-items: center; padding: 11px 1.25rem;
      border-bottom: 1px solid var(--border); gap: 12px;
    }
    #page-reportes .rpt-emp-row:last-child { border-bottom: none; }
    #page-reportes .rpt-emp-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 600; flex-shrink: 0;
    }
    #page-reportes .rpt-emp-meta { display: flex; flex-direction: column; min-width: 0; }
    #page-reportes .rpt-emp-name { font-size: 12.5px; font-weight: 500; color: var(--text); }
    #page-reportes .rpt-emp-rol { font-size: 10px; color: var(--text-3); }
    #page-reportes .rpt-emp-stats { margin-left: auto; display: flex; gap: 16px; align-items: center; }
    #page-reportes .rpt-emp-stat { text-align: right; min-width: 44px; }
    #page-reportes .rpt-emp-stat-val { font-size: 13px; font-weight: 600; font-family: var(--mono); color: var(--text); }
    #page-reportes .rpt-emp-stat-val.green { color: var(--green); }
    #page-reportes .rpt-emp-stat-lbl { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
    #page-reportes .rpt-emp-bar-wrap { width: 80px; }
    #page-reportes .rpt-emp-bar-bg { height: 3px; background: var(--border); border-radius: 2px; }
    #page-reportes .rpt-emp-bar-fill { height: 3px; border-radius: 2px; background: var(--accent); }
    #page-reportes .rpt-emp-bar-pct { font-size: 9px; color: var(--text-3); text-align: right; margin-top: 2px; font-family: var(--mono); }

    /* Salud */
    #page-reportes .rpt-alert-row {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 1.25rem; border-bottom: 1px solid var(--border);
      font-size: 12.5px; color: var(--text);
    }
    #page-reportes .rpt-alert-row:last-child { border-bottom: none; }
    #page-reportes .rpt-alert-icon {
      width: 28px; height: 28px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    #page-reportes .rpt-alert-icon.red   { background: var(--red-dim);   color: var(--danger); }
    #page-reportes .rpt-alert-icon.amber { background: var(--amber-dim); color: var(--warn); }
    #page-reportes .rpt-alert-icon.green { background: var(--green-dim); color: var(--green); }
    #page-reportes .rpt-alert-icon.info  { background: var(--info-dim);  color: var(--info); }
    #page-reportes .rpt-alert-label { flex: 1; }
    #page-reportes .rpt-alert-val { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
    #page-reportes .rpt-alert-val.green { color: var(--green); }

    /* Métodos de pago */
    #page-reportes .rpt-met-row {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 1.25rem; border-bottom: 1px solid var(--border);
      font-size: 12.5px;
    }
    #page-reportes .rpt-met-row:last-child { border-bottom: none; }
    #page-reportes .rpt-met-name { flex: 1; color: var(--text); }
    #page-reportes .rpt-met-name.muted { color: var(--text-2); }
    #page-reportes .rpt-met-bar-bg { width: 90px; height: 4px; background: var(--border); border-radius: 2px; }
    #page-reportes .rpt-met-bar-fill { height: 4px; border-radius: 2px; background: var(--info); }
    #page-reportes .rpt-met-vals { text-align: right; min-width: 80px; }
    #page-reportes .rpt-met-usd { font-size: 12px; font-family: var(--mono); font-weight: 500; color: var(--text); }
    #page-reportes .rpt-met-usd.muted { color: var(--text-2); }
    #page-reportes .rpt-met-pct { font-size: 10px; color: var(--text-3); font-family: var(--mono); }

    #page-reportes .rpt-met-detail {
      padding: 4px 1.25rem 10px 1.25rem; border-bottom: 1px solid var(--border);
    }
    #page-reportes .rpt-met-detail:last-child { border-bottom: none; }
    #page-reportes .rpt-met-detail summary {
      cursor: pointer; font-size: 11px; color: var(--text-3);
      list-style: none; padding-left: 4px;
    }
    #page-reportes .rpt-met-detail summary::-webkit-details-marker { display: none; }
    #page-reportes .rpt-met-detail summary::before { content: '▸ '; font-size: 9px; }
    #page-reportes .rpt-met-detail[open] summary::before { content: '▾ '; }
    #page-reportes .rpt-met-monedas {
      padding: 6px 0 0 16px; font-size: 12px; line-height: 1.7;
      font-family: var(--mono); color: var(--text-2);
    }
    #page-reportes .rpt-met-mon-row { white-space: nowrap; }

    /* Slot "Otros / Sobrepagos" en tabla de rentabilidad */
    #page-reportes tr.row-otros td { background: var(--surface-2, transparent); opacity: 0.85; }
    #page-reportes tr.row-otros .svc-name span { font-style: italic; }

    /* Banner detallado de costos faltantes */
    #page-reportes .rpt-costos-alert .sin-costo-titulo {
      font-weight: 600; margin-bottom: 6px;
    }
    #page-reportes .rpt-costos-alert .sin-costo-lista {
      list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;
    }
    #page-reportes .rpt-costos-alert .sin-costo-lista li {
      display: flex; align-items: center; gap: 8px; font-size: 11px;
    }
    #page-reportes .rpt-costos-alert .sc-meta { flex: 1; color: var(--warn); }
    #page-reportes .rpt-costos-alert .sc-btn {
      background: var(--warn); color: #fff; border: none; border-radius: 4px;
      padding: 2px 8px; font-size: 10px; font-weight: 600; cursor: pointer;
    }
    #page-reportes .rpt-costos-alert .sc-btn:hover { opacity: 0.9; }
    #page-reportes .rpt-costos-alert .sin-costo-resto {
      margin-top: 6px; font-size: 10.5px; color: var(--text-3);
    }

    #page-reportes .rpt-empty { padding: 24px 1.25rem; text-align: center; color: var(--text-3); font-size: 12px; }

    @media (max-width: 900px) {
      #page-reportes .rpt-hero { grid-template-columns: 1fr 1fr; }
      #page-reportes .rpt-hero-primary { grid-column: 1 / -1; }
      #page-reportes .rpt-two-col { grid-template-columns: 1fr; }
    }
    /* Mobile <768px: hero 2×3 grid (2 columnas, 3 filas) y tabla rentabilidad scrolleable */
    @media (max-width: 767px) {
      #page-reportes .rpt-hero { grid-template-columns: repeat(2, 1fr); }
      #page-reportes .rpt-hero-primary { grid-column: 1 / -1; }
      /* Tabla "Rentabilidad por servicio" — scroll horizontal en lugar de truncar columnas */
      #page-reportes .rpt-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      #page-reportes .rpt-rent-table { min-width: 560px; }
    }
    @media (max-width: 600px) {
      #page-reportes .rpt-tend-day { display: none; }
      #page-reportes .rpt-emp-stats { gap: 10px; }
      #page-reportes .rpt-emp-bar-wrap { display: none; }
    }
    /* Movement type badges */
    .mov-tipo { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 600; }
    .mov-tipo-venta { background: rgba(22,163,106,0.12); color: #16a34a; }
    .mov-tipo-renovacion { background: rgba(37,99,235,0.12); color: #2563eb; }
    .mov-tipo-recarga { background: rgba(245,158,11,0.12); color: #d97706; }
    /* Tab bar — cuentas bloqueadas */
    .tab-bar { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--border); }
    .tab-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
      margin-bottom: -2px; color: var(--text-2); font-size: 0.85rem; font-weight: 500;
      cursor: pointer; transition: color 0.15s, border-color 0.15s; font-family: var(--ui);
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
    .tab-btn svg { vertical-align: middle; }
    /* Motivo badge */
    .motivo-info { display: flex; flex-direction: column; gap: 2px; }
    .motivo-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 500; color: var(--text); }
    .motivo-badge svg { flex-shrink: 0; }
    .motivo-emp { font-size: 0.75rem; color: var(--text-3); }
    .btn-wa {
      display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
      background: #25d366; color: #fff; border: none; border-radius: var(--r);
      font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background 0.15s;
      font-family: var(--ui);
    }
    .btn-wa:hover { background: #1ebe57; }
    .estado-badge {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .estado-badge.vencida { background: rgba(220,38,38,0.12); color: var(--danger); }
    .estado-badge.cancelada { background: rgba(107,107,138,0.12); color: var(--text-2); }
    .estado-badge.pendiente { background: rgba(217,119,6,0.12); color: var(--warn); }
    .estado-badge.en_proceso { background: rgba(59,130,246,0.12); color: #3b82f6; }
    .estado-badge.completado { background: rgba(34,197,94,0.12); color: #22c55e; }

    /* ── Base de Datos — inline edit & accordion ─────────────────────────── */
    .db-cell-copy { cursor: copy; padding: 4px 8px; border-radius: 4px; transition: background 0.15s; }
    .db-cell-copy:hover { background: var(--bg-4, rgba(255,255,255,0.06)); }
    .db-inline-input {
      width: 100%; padding: 4px 8px; font-size: inherit;
      background: var(--bg-1); border: 1.5px solid var(--accent); border-radius: 4px;
      color: var(--text); font-family: inherit; outline: none;
    }
    .db-inline-input.mono { font-family: var(--mono); }
    .db-inline-select {
      padding: 4px 8px; font-size: inherit; background: var(--bg-1); border: 1.5px solid var(--accent);
      border-radius: 4px; color: var(--text); outline: none;
    }
    .db-expand-btn { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 2px; transition: transform 0.2s; display: inline-flex; }
    .db-expand-btn.open { transform: rotate(90deg); }
    .db-perfil-row td { background: var(--bg-2) !important; font-size: 0.82rem; }
    .db-perfil-row td:first-child { padding-left: 2.5rem; }
    .db-filter-bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
    .db-filter-bar input, .db-filter-bar select {
      padding: 8px 12px; background: var(--bg-3); border: 1px solid var(--border);
      border-radius: var(--r); color: var(--text); font-size: 0.82rem; font-family: var(--ui);
    }
    .db-filter-bar input { flex: 1; min-width: 180px; }
    .db-filter-bar input:focus, .db-filter-bar select:focus { border-color: var(--accent); outline: none; }
    .db-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
    .db-pagination .db-page-info { font-family: var(--mono); font-size: 0.78rem; color: var(--text-3); }
    .db-pagination .db-page-btns { display: flex; gap: 6px; }
    .db-tab-bar { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
    .db-tab-btn {
      padding: 10px 20px; font-size: 0.85rem; font-weight: 600; color: var(--text-3);
      background: none; border: none; border-bottom: 2px solid transparent;
      cursor: pointer; transition: color 0.15s, border-color 0.15s; font-family: var(--ui);
    }
    .db-tab-btn:hover { color: var(--text); }
    .db-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
    .db-empty-state { text-align: center; padding: 48px 20px; color: var(--text-3); font-size: 0.9rem; }

    /* ── Modal edición Base de Datos ──────────────────────────────────── */
    .db-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; display:flex; align-items:center; justify-content:center; }
    .db-modal { background:var(--bg-3); border-radius:14px; padding:0; max-width:640px; width:90vw; max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
    .db-modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px 0; }
    .db-modal-header h3 { margin:0; font-size:1.05rem; font-weight:700; }
    .db-modal-close { background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-3); line-height:1; padding:0 4px; }
    .db-modal-close:hover { color:var(--text); }
    .db-modal-body { padding:16px 24px; overflow-y:auto; flex:1; }
    .db-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 24px 18px; border-top:1px solid var(--border); }
    .db-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
    .db-modal-grid label { display:block; font-size:0.75rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:3px; }
    .db-modal-grid input, .db-modal-grid select, .db-modal-grid textarea { width:100%; padding:7px 10px; background:var(--bg-4); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-size:0.85rem; font-family:var(--ui); box-sizing:border-box; }
    .db-modal-grid input:focus, .db-modal-grid select:focus, .db-modal-grid textarea:focus { border-color:var(--accent); outline:none; }
    .db-modal-grid .mono { font-family:var(--mono); }
    .db-modal-grid .full-width { grid-column: 1 / -1; }
    .db-modal-perfiles { margin-top:16px; border-top:1px solid var(--border); padding-top:12px; }
    .db-modal-perfiles h4 { font-size:0.82rem; color:var(--text-2); margin:0 0 8px; font-weight:600; }
    .db-modal-perfiles table { width:100%; border-collapse:collapse; font-size:0.82rem; }
    .db-modal-perfiles th { text-align:left; font-size:0.72rem; color:var(--text-3); text-transform:uppercase; padding:4px 6px; border-bottom:1px solid var(--border); }
    .db-modal-perfiles td { padding:4px 6px; }
    .db-modal-perfiles input, .db-modal-perfiles select { padding:5px 8px; font-size:0.82rem; background:var(--bg-4); border:1px solid var(--border); border-radius:var(--r); color:var(--text); width:100%; box-sizing:border-box; }
    .db-modal-perfiles .mono { font-family:var(--mono); }
    .db-view-val { padding:5px 0; font-size:0.88rem; color:var(--text); word-break:break-word; }
    .db-view-val.mono { font-family:var(--mono); }
    .db-copy-btn { vertical-align:middle; margin-left:4px; }

    /* ── Formularios inline agregar costos/gastos/comisiones ───────────── */
    .form-agregar {
      display: none; background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 8px; padding: 16px; margin-bottom: 16px; gap: 12px;
    }
    .form-agregar.visible { display: flex; flex-wrap: wrap; align-items: flex-end; }
    .form-agregar .form-group { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
    .form-agregar .form-group.fg-wide { min-width: 200px; flex: 1; }
    .form-agregar label { font-size: 0.78rem; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
    .form-agregar select, .form-agregar input[type="text"], .form-agregar input[type="number"] {
      padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
      background: var(--surface); color: var(--text); font-size: 0.88rem; font-family: var(--ui);
    }
    .form-agregar select:focus, .form-agregar input:focus { border-color: var(--accent); outline: none; }
    .form-agregar .form-actions { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 1px; }
    .form-agregar .btn-guardar {
      background: var(--accent); color: #fff; border: none; border-radius: 6px;
      padding: 8px 18px; font-weight: 600; cursor: pointer; font-size: 0.88rem;
    }
    .form-agregar .btn-guardar:hover { opacity: 0.9; }
    .form-agregar .btn-cancelar {
      background: var(--surface); color: var(--text-2); border: 1px solid var(--border); border-radius: 6px;
      padding: 8px 14px; cursor: pointer; font-size: 0.88rem;
    }
    .form-agregar .btn-cancelar:hover { background: var(--bg-4); }
    .form-agregar .input-otro { display: none; margin-top: 4px; }
    .form-agregar .input-otro.visible { display: block; }

/* ── Garantías ──────────────────────────────────────────────── */
.modal-card.modal-wide { max-width: 580px; }
.sustituir-form label { display:block; font-size:0.85rem; color:var(--text-2); margin-top:12px; }
.sustituir-form input, .sustituir-form select { display:block; width:100%; margin-top:4px; padding:8px 12px; border:1px solid var(--border); border-radius:6px; font-size:0.95rem; background:var(--bg-2); color:var(--text-1); }
.sustituir-info { background:var(--bg-3); border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:0.85rem; color:var(--text-2); }
.sustituir-info strong { color:var(--text-1); }
.sustituir-clientes { font-size:0.82rem; color:var(--text-2); margin:8px 0; }
.sustituir-clientes li { margin:2px 0; }
.profile-map-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:0.82rem; }
.profile-map-table th { text-align:left; padding:4px 6px; color:var(--text-2); font-weight:500; border-bottom:1px solid var(--border); }
.profile-map-table td { padding:4px 6px; border-bottom:1px solid var(--border); }
.profile-map-table input { padding:5px 8px; font-size:0.82rem; border:1px solid var(--border); border-radius:4px; background:var(--bg-2); color:var(--text-1); width:100%; }
.gar-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.gar-stat-card { background:var(--bg-2); border-radius:10px; padding:16px; border:1px solid var(--border); }
.gar-stat-card .stat-value { font-size:1.5rem; font-weight:700; color:var(--text-1); }
.gar-stat-card .stat-label { font-size:0.78rem; color:var(--text-2); margin-top:2px; }
.gar-expand-btn { cursor:pointer; background:none; border:none; color:var(--text-2); font-size:0.8rem; padding:2px 6px; border-radius:4px; transition:background 0.15s; }
.gar-expand-btn:hover { background:var(--bg-3); }
.gar-detail-row td { padding:0 !important; }
.gar-detail-content { padding:8px 16px 12px 40px; font-size:0.82rem; color:var(--text-2); background:var(--bg-3); border-radius:0 0 6px 6px; }
.gar-detail-content li { margin:3px 0; }
.btn-sustituir { color: var(--accent) !important; }
.gar-badge { font-size:0.7rem; padding:2px 6px; border-radius:4px; margin-left:6px; font-weight:600; }
.gar-badge-warn { background:#fef3c7; color:#92400e; }
.gar-badge-danger { background:#fee2e2; color:#991b1b; }
.garantia-notice { background:var(--bg-3); border-left:3px solid #3b82f6; border-radius:6px; padding:10px 14px; margin-bottom:12px; font-size:0.85rem; color:var(--text-2); }
.garantia-notice strong { color:var(--text-1); }
.clave-notice { background:var(--bg-3); border-left:3px solid #eab308; border-radius:6px; padding:10px 14px; margin-bottom:12px; font-size:0.85rem; color:var(--text-2); }
.clave-notice strong { color:var(--text-1); }

/* ── Vencimientos ─────────────────────────────────────────────────────────── */
.vec-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:1.25rem; }
@media(max-width:900px) { .vec-stats { grid-template-columns:repeat(2,1fr); } }
.sic-vencidas   { background: #fee2e2; color: #dc2626; }
.sic-cuentas    { background: #fef3c7; color: #d97706; }
.sic-norenovable{ background: #f3f4f6; color: #6b7280; }
.sic-topsrv     { background: #dbeafe; color: #2563eb; }
:root[data-theme="dark"] .sic-vencidas   { background: #450a0a; color: #f87171; }
:root[data-theme="dark"] .sic-cuentas    { background: #451a03; color: #fbbf24; }
:root[data-theme="dark"] .sic-norenovable{ background: #1f2937; color: #9ca3af; }
:root[data-theme="dark"] .sic-topsrv     { background: #1e3a5f; color: #60a5fa; }
.sic-promedio   { background: #dbeafe; color: #2563eb; }
:root[data-theme="dark"] .sic-promedio   { background: #1e3a5f; color: #60a5fa; }
.vec-grupo { margin-bottom:8px; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.vec-grupo-header { display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; background:var(--bg-2); transition:background 0.15s; user-select:none; }
.vec-grupo-header:hover { background:var(--bg-3); }
.vec-grupo-arrow { transition:transform 0.2s; font-size:0.75rem; color:var(--text-2); flex-shrink:0; }
.vec-grupo.open .vec-grupo-arrow { transform:rotate(90deg); }
.vec-grupo-label { font-weight:600; font-size:0.88rem; color:var(--text); }
.vec-grupo-count { font-size:0.78rem; color:var(--text-2); margin-left:auto; }
.vec-grupo-body { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.vec-grupo.open .vec-grupo-body { max-height:none; overflow:visible; }
.vec-cuenta-card { padding:14px 16px; border-top:1px solid var(--border); }
.vec-cuenta-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.vec-cuenta-correo { font-family:var(--mono); font-size:0.85rem; font-weight:500; color:var(--text); }
.vec-cuenta-meta { font-size:0.78rem; color:var(--text-2); }
.vec-cuenta-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.vec-perfil-row { display:flex; align-items:center; gap:10px; padding:6px 0 6px 20px; font-size:0.82rem; border-top:1px dashed var(--border); color:var(--text-2); }
.vec-perfil-row:first-child { margin-top:8px; }
.vec-perfil-info { flex:1; }
.vec-btn { padding:4px 10px; font-size:0.78rem; border:1px solid var(--border-2); border-radius:var(--r); cursor:pointer; background:var(--bg-2); color:var(--text); transition:all 0.15s; font-family:var(--ui); }
.vec-btn:hover { background:var(--bg-3); border-color:var(--accent); color:var(--accent); }
.vec-btn-danger { color:var(--danger); border-color:var(--danger); }
.vec-btn-danger:hover { background:#fee2e2; color:var(--danger); }
.vec-badge-norenovable { font-size:0.7rem; padding:2px 8px; border-radius:10px; background:#fee2e2; color:#991b1b; font-weight:600; margin-left:8px; }
:root[data-theme="dark"] .vec-badge-norenovable { background:#450a0a; color:#f87171; }
:root[data-theme="dark"] .vec-btn-danger:hover { background:#450a0a; }
/* Tooltip — positioned via JS to avoid clipping */
.vec-tip-float { position:fixed; z-index:9999; max-width:260px; padding:8px 12px; background:var(--bg-3); color:var(--text-2); font-size:0.72rem; line-height:1.45; border:1px solid var(--border-2); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.12); pointer-events:none; opacity:0; transition:opacity 0.15s; white-space:normal; }
.vec-tip-float.visible { opacity:1; }
:root[data-theme="dark"] .vec-tip-float { box-shadow:0 4px 20px rgba(0,0,0,.5); }

/* ═════════════ Recordatorios SMS (v6.58) ═════════════════════════════════ */
.rec-badge { display:inline-block; font-size:0.72rem; padding:2px 10px; border-radius:10px; font-weight:600; }
.rec-badge-listo    { background:#dcfce7; color:#166534; }
.rec-badge-enviado  { background:#e5e7eb; color:#374151; }
.rec-badge-nove     { background:#fef3c7; color:#92400e; }
:root[data-theme="dark"] .rec-badge-listo   { background:#14532d; color:#86efac; }
:root[data-theme="dark"] .rec-badge-enviado { background:#374151; color:#d1d5db; }
:root[data-theme="dark"] .rec-badge-nove    { background:#78350f; color:#fde68a; }
.rec-saldo-bar { margin:10px 0; padding:8px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); font-size:0.82rem; color:var(--text-2); }
.rec-filterbar {
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(160px, 220px) minmax(150px, 190px) auto;
  align-items:center;
  gap:8px;
  margin:10px 0;
}
.rec-filterbar input,
.rec-filterbar select {
  height:34px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-2);
  color:var(--text);
  padding:0 10px;
  font-size:0.82rem;
  font-family:var(--ui);
}
.rec-filterbar input:focus,
.rec-filterbar select:focus {
  outline:none;
  border-color:var(--accent);
}
@media (max-width: 900px) {
  .rec-filterbar { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .rec-filterbar { grid-template-columns:1fr; }
}
.rec-actionbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 14px; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); flex-wrap:wrap; }
.rec-actionbar-info { display:flex; align-items:center; gap:10px; font-size:0.82rem; color:var(--text-2); }
.rec-preview-count { font-weight:600; color:var(--text); }
.rec-preview-cost { color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.rec-preview-sep { color:var(--text-muted); }
.rec-actionbar-btns { display:flex; gap:8px; }
.rec-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:0.82rem; font-weight:600; border-radius:8px; border:1px solid var(--border); cursor:pointer; font-family:var(--ui); background:var(--bg-2); color:var(--text); transition:all 0.15s; }
.rec-btn:hover:not(:disabled) { background:var(--bg-3); border-color:var(--border-2); }
.rec-btn:disabled { opacity:0.4; cursor:not-allowed; }
.rec-btn-accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.rec-btn-accent:hover:not(:disabled) { background:var(--accent-2, var(--accent)); border-color:var(--accent-2, var(--accent)); opacity:0.92; }
.rec-btn-ghost { background:transparent; }
#rec-tbody input.rec-row-check:disabled { opacity:0.4; cursor:not-allowed; }
.rec-insight-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  margin:12px 0;
}
.rec-insight {
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:var(--r);
  padding:10px 12px;
  min-height:64px;
}
.rec-insight-label {
  font-size:0.72rem;
  color:var(--text-3);
  font-weight:600;
  text-transform:uppercase;
}
.rec-insight-value {
  margin-top:4px;
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.rec-two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.rec-panel-mini {
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:var(--r);
  padding:12px;
}
.rec-mini-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.rec-mini-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:8px;
  font-size:0.82rem;
}
.rec-mini-row:last-child { border-bottom:none; padding-bottom:0; }
.rec-mini-main { min-width:0; color:var(--text); font-weight:600; }
.rec-mini-sub { margin-top:2px; color:var(--text-3); font-size:0.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-mini-value { color:var(--text-2); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.chart-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:12px; }
.chart-card .chart-title { font-size:0.82rem; color:var(--text-2); margin-bottom:8px; font-weight:600; }
@media (max-width: 900px) {
  #page-recordatorios .chart-row { grid-template-columns:1fr !important; }
  #page-recordatorios .rec-two-col { grid-template-columns:1fr; }
}

/* ═════════════ Recordatorios WhatsApp (v6.59) ═════════════════════════════ */
.rec-canal-toggle { display:inline-flex; margin-bottom:12px; background:var(--bg-2); border:1px solid var(--border); border-radius:999px; padding:3px; gap:2px; }
.rec-canal-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; font-size:0.82rem; font-weight:600; border:none; background:transparent; color:var(--text-2); cursor:pointer; border-radius:999px; font-family:var(--ui); transition:all 0.15s; }
.rec-canal-btn:hover { color:var(--text); }
.rec-canal-btn.active { background:var(--accent); color:#fff; }
.rec-saldo-warn { border-color:#f59e0b !important; background:#fffbeb !important; color:#92400e !important; }
.rec-saldo-danger { border-color:#ef4444 !important; background:#fee2e2 !important; color:#991b1b !important; }
:root[data-theme="dark"] .rec-saldo-warn { background:#451a03 !important; color:#fde68a !important; }
:root[data-theme="dark"] .rec-saldo-danger { background:#450a0a !important; color:#fca5a5 !important; }
.rec-saldo-edit { background:transparent; border:none; cursor:pointer; margin-left:10px; font-size:0.95rem; padding:2px 6px; border-radius:4px; transition:background 0.15s; }
.rec-saldo-edit:hover { background:var(--bg-3); }
.rec-batch-preview {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 12px;
  color:var(--text-2);
  font-size:0.82rem;
}
.rec-batch-preview[hidden] { display:none; }
.rec-batch-chip {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-2);
  font-variant-numeric:tabular-nums;
}
.rec-batch-chip strong {
  margin-right:4px;
  color:var(--text);
  font-weight:700;
}
.rec-batch-chip-warn {
  border-color:#f59e0b;
  background:#fffbeb;
  color:#92400e;
}
:root[data-theme="dark"] .rec-batch-chip-warn {
  background:#451a03;
  color:#fde68a;
}

/* ─── Conciliación VES (v6.60) ─── */
.conc-card { cursor:pointer; transition:transform 0.1s, box-shadow 0.15s; }
.conc-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.conc-card.active { outline:2px solid var(--accent, #E63946); }
.sic-pendientes .sc-value { color:#eab308; }
.sic-conciliados .sc-value { color:#16a34a; }
.sic-noenc .sc-value { color:#ef4444; }
.sic-diff .sc-value { color:#f97316; }
.conc-badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:0.78rem; font-weight:600; }
.conc-badge-pendiente { background:#fef3c7; color:#92400e; }
.conc-badge-conciliado { background:#dcfce7; color:#166534; }
.conc-badge-noenc { background:#fee2e2; color:#991b1b; }
.conc-badge-diff { background:#ffedd5; color:#9a3412; }
.conc-badge-manual { background:#e0e7ff; color:#3730a3; }
.conc-badge-noaplica { background:#f3f4f6; color:#6b7280; }
:root[data-theme="dark"] .conc-badge-pendiente { background:#451a03; color:#fde68a; }
:root[data-theme="dark"] .conc-badge-conciliado { background:#052e16; color:#86efac; }
:root[data-theme="dark"] .conc-badge-noenc { background:#450a0a; color:#fca5a5; }
:root[data-theme="dark"] .conc-badge-diff { background:#431407; color:#fed7aa; }
:root[data-theme="dark"] .conc-badge-manual { background:#1e1b4b; color:#a5b4fc; }
:root[data-theme="dark"] .conc-badge-noaplica { background:#1f2937; color:#9ca3af; }


/* ═══════════════════════════════
   NÓMINA — REDISEÑO
═══════════════════════════════ */

/* Top bar */
.nom-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 12px; padding: 14px 20px 0;
}
.nom-title { font-size: 20px; font-weight: 500; letter-spacing: -0.3px; color: var(--text); margin: 0; }
.nom-topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nom-period-selector { display: flex; gap: 6px; }

.nom-period-input,
.nom-quincena-select {
  border: 0.5px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; background: var(--bg-3); color: var(--text);
  cursor: pointer; height: 34px;
}
.nom-period-input { min-width: 150px; }

.nom-btn-primary {
  background: #D42B2B; color: #fff; border: none; border-radius: 8px;
  padding: 7px 16px; font-size: 13px; font-weight: 500; cursor: pointer; height: 34px;
}
.nom-btn-primary:hover { background: #b82424; }
.nom-btn-sm { padding: 5px 12px; font-size: 12px; height: 30px; }

/* Métricas */
.nom-metrics-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 0 20px 1.5rem;
}
.nom-metric-card {
  background: var(--bg-3); border: 0.5px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 4px;
}
.nom-metric-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-3);
}
.nom-metric-value {
  font-size: 26px; font-weight: 500; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.nom-accent { color: #D42B2B; }
.nom-muted { color: var(--text-3); }
.nom-metric-sub { font-size: 12px; color: var(--text-3); }

/* Section label */
.nom-section-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-3);
  margin: 1.25rem 20px 10px;
}

/* Tabla */
.nom-table-card {
  background: var(--bg-3); border: 0.5px solid var(--border);
  border-radius: 12px; overflow: hidden; margin: 0 20px;
}
.nom-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nom-table thead tr { border-bottom: 0.5px solid var(--border); }
.nom-table thead th {
  padding: 10px 14px; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3); text-align: left; white-space: nowrap;
}
.nom-table tbody tr {
  border-bottom: 0.5px solid var(--border);
  transition: background .12s;
}
.nom-table tbody tr:last-child { border-bottom: none; }
.nom-table tbody tr.nom-row-clickable { cursor: pointer; }
.nom-table tbody tr:hover { background: var(--bg-4); }
.nom-table td { padding: 12px 14px; vertical-align: middle; }
.nom-td-right { text-align: right; }

/* Avatar + celda empleado */
.nom-emp-cell { display: flex; align-items: center; gap: 10px; }
.nom-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.nom-av-red    { background: #FAECE7; color: #993C1D; }
.nom-av-blue   { background: #E6F1FB; color: #185FA5; }
.nom-av-green  { background: #EAF3DE; color: #3B6D11; }
.nom-av-amber  { background: #FAEEDA; color: #854F0B; }
.nom-emp-name  { font-weight: 500; font-size: 13px; color: var(--text); }
.nom-emp-rol   { font-size: 11px; color: var(--text-3); text-transform: capitalize; }

/* Badges */
.nom-badge-hours {
  background: var(--bg-4); color: var(--text-2);
  border-radius: 4px; padding: 2px 7px; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.nom-badge-sales {
  background: #EAF3DE; color: #3B6D11;
  border-radius: 4px; padding: 2px 7px; font-size: 12px; font-weight: 500;
}
.nom-badge-comm {
  background: #E6F1FB; color: #185FA5;
  border-radius: 4px; padding: 2px 7px; font-size: 12px; font-weight: 500;
}
.nom-badge-paid {
  background: #DCF5E2; color: #1F7A3A;
  border-radius: 4px; padding: 2px 7px; font-size: 12px; font-weight: 500;
}
.nom-badge-pending {
  background: var(--bg-4); color: var(--text-3);
  border-radius: 4px; padding: 2px 7px; font-size: 12px; font-weight: 500;
}
.nom-btn-pagar {
  font-size: 12px; padding: 4px 10px;
}
.nom-total-cell {
  font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; color: #D42B2B;
}

/* Barra de distribución */
.nom-bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.nom-bar-bg   { flex: 1; height: 4px; background: var(--border); border-radius: 2px; }
.nom-bar-fill { height: 4px; border-radius: 2px; background: #D42B2B; transition: width 0.3s ease; }
.nom-bar-pct  { font-size: 11px; color: var(--text-3); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* Grid inferior */
.nom-bottom-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin: 0 20px 1rem;
}

/* Card genérica */
.nom-card {
  background: var(--bg-3); border: 0.5px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem; margin: 0 20px;
}
.nom-bottom-grid > div > .nom-card { margin: 0; }

/* Festivos */
.nom-festivo-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 0.5px solid var(--border);
  font-size: 13px; gap: 8px;
}
.nom-festivo-row:last-child { border-bottom: none; }
.nom-festivo-date { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nom-festivo-name { flex: 1; color: var(--text); }
.nom-btn-del {
  background: none; border: none; color: #E24B4A;
  font-size: 11px; cursor: pointer; padding: 2px 8px; border-radius: 4px;
}
.nom-btn-del:hover { background: rgba(226,75,74,0.1); }

.nom-add-festivo {
  margin-top: 12px; padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap;
  border-top: 0.5px dashed var(--border);
}
.nom-input-sm {
  border: 0.5px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font-size: 12px; background: var(--bg-4);
  color: var(--text); height: 30px; min-width: 0;
}
.nom-input-grow { flex: 1; min-width: 140px; }

/* Tarifas */
.nom-rate-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px;
}
.nom-rate-row:last-child { border-bottom: none; }
.nom-rate-tipo { color: var(--text-2); }
.nom-rate-val  { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }

.nom-badge {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  margin-left: 6px; font-weight: 500;
}
.nom-badge-day   { background: #EAF3DE; color: #3B6D11; }
.nom-badge-night { background: #EEEDFE; color: #3C3489; }
.nom-badge-sun   { background: #FAEEDA; color: #854F0B; }

/* Salarios fijos */
.nom-salario-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 0.5px solid var(--border);
}
.nom-salario-row:last-child { border-bottom: none; }
.nom-salario-row .nom-emp-cell { flex: 1; }

/* Drawer lateral */
.nom-drawer {
  position: fixed; inset: 0; z-index: 2000;
  pointer-events: none;
}
.nom-drawer.open { pointer-events: auto; }
.nom-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45); opacity: 0;
  transition: opacity .25s ease;
}
.nom-drawer.open .nom-drawer-backdrop { opacity: 1; }
.nom-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100vh;
  width: min(480px, 100%);
  background: var(--bg-2); border-left: 1px solid var(--border);
  box-shadow: -10px 0 40px rgba(0,0,0,0.2);
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
}
.nom-drawer.open .nom-drawer-panel { transform: none; }

/* Dark mode ajustes */
:root[data-theme="dark"] .nom-av-red    { background: #3a1a12; color: #f7b59a; }
:root[data-theme="dark"] .nom-av-blue   { background: #0f2c4a; color: #9fc7ec; }
:root[data-theme="dark"] .nom-av-green  { background: #1e3410; color: #b8d99b; }
:root[data-theme="dark"] .nom-av-amber  { background: #3a2408; color: #f0c687; }
:root[data-theme="dark"] .nom-badge-sales { background: #1e3410; color: #b8d99b; }
:root[data-theme="dark"] .nom-badge-comm  { background: #0f2c4a; color: #9fc7ec; }
:root[data-theme="dark"] .nom-badge-day   { background: #1e3410; color: #b8d99b; }
:root[data-theme="dark"] .nom-badge-night { background: #1c1a3a; color: #b5b1ec; }
:root[data-theme="dark"] .nom-badge-sun   { background: #3a2408; color: #f0c687; }

/* Responsive */
@media (max-width: 900px) {
  .nom-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nom-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nom-table { font-size: 12px; }
  .nom-table td, .nom-table th { padding: 8px 10px; }
  .nom-drawer-panel { width: 100%; }
  .nom-topbar-actions { width: 100%; }
  .nom-topbar-actions .nom-period-selector { flex: 1; }
}

/* ═══════════════════════════════
   NÓMINA · DRAWER DETALLE
═══════════════════════════════ */

/* Header */
.nom-det-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.nom-det-emp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nom-det-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.nom-det-emp-text { min-width: 0; }
.nom-det-nombre {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nom-det-rol {
  font-size: 11px; color: var(--text-3); text-transform: capitalize;
}
.nom-det-periodo-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nom-det-periodo {
  background: var(--bg-4); color: var(--text-2);
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.nom-drawer-close {
  background: none; border: none; font-size: 1.7rem; line-height: 1;
  color: var(--text-3); cursor: pointer; padding: 0 6px; border-radius: 6px;
}
.nom-drawer-close:hover { color: var(--text); background: var(--bg-4); }

/* Strip de métricas */
.nom-det-metrics {
  display: flex; margin: 16px 22px 0;
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--bg-3);
  flex-shrink: 0;
}
.nom-det-metric {
  flex: 1; min-width: 0; padding: 12px 8px; text-align: center;
  border-right: 1px solid var(--border);
}
.nom-det-metric:last-child { border-right: none; }
.nom-det-metric-val {
  font-size: 16px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.nom-det-metric-val.is-ventas   { color: #3B6D11; }
.nom-det-metric-val.is-comision { color: #185FA5; }
.nom-det-metric-val.is-total    { color: #D42B2B; }
.nom-det-metric-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); margin-top: 3px;
}

/* Mini chart */
.nom-det-chart {
  margin: 16px 22px 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-3); flex-shrink: 0;
}
.nom-det-chart-bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 50px; overflow-x: auto;
}
.nom-det-chart-col {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; min-width: 22px;
}
.nom-det-chart-bar {
  width: 18px; border-radius: 3px 3px 0 0;
  background: #D42B2B; transition: opacity .15s;
}
.nom-det-chart-bar:hover { opacity: 0.8; }
.nom-det-chart-bar.is-domingo { background: #854F0B; }
.nom-det-chart-label {
  font-size: 10px; color: var(--text-3); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.nom-det-chart-legend {
  display: flex; gap: 16px; margin-top: 12px;
  font-size: 11px; color: var(--text-3);
}
.nom-det-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.nom-det-legend-sq {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.nom-det-legend-ls  { background: #D42B2B; }
.nom-det-legend-dom { background: #854F0B; }

/* Lista de días (scrollable) */
.nom-det-days {
  flex: 1; overflow-y: auto;
  padding: 16px 22px;
}
.nom-det-note {
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--bg-3); border-left: 3px solid #D42B2B;
  border-radius: 6px; font-size: 0.85em; color: var(--text-2);
}
.nom-det-day-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--bg-3);
}
.nom-det-day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.nom-det-day-name { font-size: 0.95rem; color: var(--text); font-weight: 600; }
.nom-det-day-head.is-domingo .nom-det-day-name { color: #854F0B; }
.nom-det-day-tot {
  font-family: var(--mono); font-weight: 600; color: #D42B2B;
  font-size: 0.88em; font-variant-numeric: tabular-nums;
}
.nom-det-day-head.is-domingo .nom-det-day-tot { color: #854F0B; }

.nom-det-turno-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 0.84em; color: var(--text-2);
  flex-wrap: wrap;
}
.nom-det-turno-rng  { flex: 1; min-width: 120px; }
.nom-det-turno-calc { color: var(--text-3); font-family: var(--mono); font-size: 0.9em; }
.nom-det-turno-monto { color: var(--text); font-family: var(--mono); min-width: 60px; text-align: right; }

.nom-det-badge-chat, .nom-det-badge-operador {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 500; text-transform: lowercase; flex-shrink: 0;
}
.nom-det-badge-chat     { background: #E6F1FB; color: #185FA5; }
.nom-det-badge-operador { background: #FAEEDA; color: #854F0B; }

.nom-det-ventas-tit {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 0.78em; font-weight: 600; color: var(--text-2);
}
.nom-det-ventas-list { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.78em; color: var(--text-3); }
.nom-det-ventas-list li {
  padding: 3px 0; display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
}
.nom-det-ventas-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3B6D11; flex-shrink: 0;
}
.nom-det-ventas-hora { color: var(--text-2); }
.nom-det-ventas-prod { color: var(--text-3); }

/* Footer fijo */
.nom-det-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-2); flex-shrink: 0;
}
.nom-det-footer-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
}
.nom-det-footer-total {
  font-size: 22px; font-weight: 700; color: #D42B2B;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* Dark mode */
:root[data-theme="dark"] .nom-det-metrics,
:root[data-theme="dark"] .nom-det-chart,
:root[data-theme="dark"] .nom-det-day-card { background: #1e1e1e; border-color: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .nom-det-metric { border-right-color: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .nom-det-badge-chat     { background: #0f2c4a; color: #9fc7ec; }
:root[data-theme="dark"] .nom-det-badge-operador { background: #3a2408; color: #f0c687; }
:root[data-theme="dark"] .nom-det-note { background: #1e1e1e; }

/* Responsive */
@media (max-width: 640px) {
  .nom-det-metrics { flex-wrap: wrap; }
  .nom-det-metric { flex-basis: 33%; border-right: none; border-bottom: 1px solid var(--border); }
  .nom-det-metric:nth-child(n+4) { flex-basis: 50%; border-bottom: none; }
  .nom-det-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .nom-det-footer .nom-btn-primary { width: 100%; }
}

/* ═══════════════════════════════
   VENCIMIENTOS — MEJORAS
═══════════════════════════════ */

.venc-urgency-bar { height:3px; width:100%; border-radius:3px 3px 0 0; }
.venc-urg-high { background:#E24B4A; }
.venc-urg-med  { background:#EF9F27; }
.venc-urg-low  { background:#97C459; }

.venc-group-svc-dot {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
}

.venc-btn {
  border-radius:7px; padding:5px 11px; font-size:12px;
  font-weight:500; cursor:pointer; border:none; white-space:nowrap;
  transition:opacity .15s;
}
.venc-btn-sm { padding:3px 8px; font-size:11px; }
.venc-btn-blue  { background:#E6F1FB; color:#185FA5; }
.venc-btn-green { background:#EAF3DE; color:#3B6D11; }
.venc-btn-amber { background:#FAEEDA; color:#854F0B; }
.venc-btn-pink  { background:#FBEAF0; color:#993356; }
.venc-btn-red   { background:#FCEBEB; color:#A32D2D; }
.venc-btn:hover { opacity:0.82; }

.venc-perfil-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:var(--bg-2);
  border-radius:7px; font-size:12px; margin-bottom:4px;
}
.venc-perfil-row:last-child { margin-bottom:0; }
.venc-perfil-nombre { font-weight:500; color:var(--text); min-width:58px; }
.venc-perfil-pin {
  color:var(--text-2); background:var(--bg-3);
  border:0.5px solid var(--border); border-radius:4px;
  padding:1px 6px; font-size:11px; font-variant-numeric:tabular-nums;
}
.venc-sep { color:var(--border-2); }
.venc-perfil-tel { color:var(--text-2); font-variant-numeric:tabular-nums; }
.venc-perfil-right {
  margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.venc-perfil-fecha { font-size:11px; color:var(--text-2); white-space:nowrap; }

.venc-ub { font-size:10px; font-weight:500; padding:2px 6px; border-radius:4px; }
.venc-ub-high { background:#FCEBEB; color:#A32D2D; }
.venc-ub-med  { background:#FAEEDA; color:#854F0B; }
.venc-ub-low  { background:#EAF3DE; color:#3B6D11; }

.venc-account-email { font-size:13px; font-weight:500; color:var(--text); }
.venc-account-proveedor { font-size:11px; color:var(--text-2); margin-top:1px; }
.venc-account-actions { display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; }
.venc-account-header {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px; margin-bottom:8px;
}

.venc-badge-norenovable {
  background:#FAEEDA; color:#854F0B; font-size:10px;
  font-weight:500; padding:2px 7px; border-radius:4px;
}

[data-theme="dark"] .venc-perfil-row { background:#1e1e1e; }
[data-theme="dark"] .venc-perfil-pin { background:var(--bg-2); }
[data-theme="dark"] .venc-btn-blue  { background:#0c3a5e; color:#7ab8e8; }
[data-theme="dark"] .venc-btn-green { background:#1a3a0e; color:#7dc45a; }
[data-theme="dark"] .venc-btn-amber { background:#3a2400; color:#e8a84a; }
[data-theme="dark"] .venc-btn-pink  { background:#3a0a1e; color:#e87aaa; }
[data-theme="dark"] .venc-btn-red   { background:#3a0a0a; color:#e87a7a; }
[data-theme="dark"] .venc-badge-norenovable { background:#3a2400; color:#e8a84a; }
[data-theme="dark"] .venc-ub-high { background:#3a0a0a; color:#e87a7a; }
[data-theme="dark"] .venc-ub-med  { background:#3a2400; color:#e8a84a; }
[data-theme="dark"] .venc-ub-low  { background:#1a3a0e; color:#7dc45a; }

/* VENCIMIENTOS — MODAL 2 PASOS */
.venc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:1000;}
.venc-modal{background:var(--bg-3);border:0.5px solid var(--border-2);border-radius:14px;width:340px;max-width:90vw;overflow:hidden;}
.venc-modal-header{padding:1rem 1.1rem 0.75rem;border-bottom:0.5px solid var(--border);}
.venc-step-indicator{display:flex;gap:6px;margin-bottom:8px;}
.venc-step-dot{width:6px;height:6px;border-radius:50%;background:var(--border-2);transition:background 0.2s;}
.venc-step-dot.active{background:#D42B2B;}
.venc-step-dot.done{background:#3B6D11;}
.venc-modal-title{font-size:14px;font-weight:500;color:var(--text);}
.venc-modal-subtitle{font-size:12px;color:var(--text-2);margin-top:2px;}
.venc-modal-body{padding:1rem 1.1rem;}
.venc-modal-footer{padding:0.75rem 1.1rem;border-top:0.5px solid var(--border);display:flex;gap:8px;align-items:center;}
.venc-clave-box{background:var(--bg-2);border:0.5px solid var(--border-2);border-radius:8px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.venc-clave-val{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:1px;}
.venc-clave-input{flex:1;background:var(--bg-3);border:0.5px solid var(--border-2);border-radius:var(--r);padding:6px 10px;font-size:14px;font-family:var(--mono);color:var(--text);outline:none;}
.venc-clave-input:focus{border-color:var(--accent);}
.venc-btn-copy{background:none;border:none;font-size:12px;color:#185FA5;cursor:pointer;padding:2px 6px;border-radius:4px;}
.venc-btn-copy:hover{background:#E6F1FB;}
.venc-hint{font-size:11px;color:var(--text-2);}
.venc-limpiar-pines{margin-top:8px;}
.venc-limpiar-pin-row{font-size:11px;color:var(--text-2);padding:2px 0;}
.venc-success-icon{width:44px;height:44px;border-radius:50%;background:#EAF3DE;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:20px;color:#3B6D11;}
.venc-success-title{font-size:14px;font-weight:500;color:var(--text);margin-bottom:4px;}
.venc-success-sub{font-size:12px;color:var(--text-2);}
.venc-option-card{border:0.5px solid var(--border-2);border-radius:9px;padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:border-color 0.15s,background 0.15s;}
.venc-option-card:hover{background:var(--bg-2);}
.venc-option-card.sel-green{border-color:#3B6D11;background:#EAF3DE;}
.venc-option-card.sel-red{border-color:#A32D2D;background:#FCEBEB;}
.venc-opt-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.venc-opt-green{background:#EAF3DE;}
.venc-opt-red{background:#FCEBEB;}
.venc-opt-label{font-size:13px;font-weight:500;color:var(--text);}
.venc-opt-desc{font-size:11px;color:var(--text-2);margin-top:1px;}
.venc-opt-radio{margin-left:auto;width:16px;height:16px;border-radius:50%;border:0.5px solid var(--border-2);flex-shrink:0;transition:background 0.15s,border-color 0.15s;}
.venc-opt-radio.sel-green{border-color:#3B6D11;background:#3B6D11;}
.venc-opt-radio.sel-red{border-color:#A32D2D;background:#A32D2D;}
.venc-pin-label{font-size:12px;color:var(--text-2);margin-bottom:6px;display:block;}
.venc-pin-input{width:100%;border:0.5px solid var(--border-2);border-radius:8px;padding:8px 12px;font-size:20px;font-weight:500;text-align:center;letter-spacing:6px;font-variant-numeric:tabular-nums;background:var(--bg-3);color:var(--text);box-sizing:border-box;}
.venc-pin-input:focus{outline:none;border-color:#D42B2B;}
.venc-btn-random-pin{background:none;border:none;font-size:12px;color:#185FA5;cursor:pointer;display:block;margin-top:5px;}
.venc-btn-back{background:none;border:none;font-size:12px;color:var(--text-2);cursor:pointer;padding:6px 4px;margin-right:auto;}
.venc-btn-cancel{background:none;border:0.5px solid var(--border-2);border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer;color:var(--text-2);}
.venc-btn-confirm{background:#D42B2B;color:#fff;border:none;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:500;cursor:pointer;}
.venc-btn-confirm.green{background:#3B6D11;}
.venc-btn-confirm:hover{opacity:0.88;}
[data-theme="dark"] .venc-btn-copy:hover{background:#0c3a5e;}
[data-theme="dark"] .venc-option-card.sel-green{border-color:#3B6D11;background:#1a3a0e;}
[data-theme="dark"] .venc-option-card.sel-red{border-color:#A32D2D;background:#3a0a0a;}
[data-theme="dark"] .venc-opt-green{background:#1a3a0e;}
[data-theme="dark"] .venc-opt-red{background:#3a0a0a;}
[data-theme="dark"] .venc-success-icon{background:#1a3a0e;}
.venc-clave-opts{display:flex;gap:4px;margin-bottom:8px;}
.venc-clave-opt{background:none;border:0.5px solid var(--border-2);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--text-2);}
.venc-clave-opt.active{background:#D42B2B;color:#fff;border-color:#D42B2B;}
.venc-clave-opt:hover:not(.active){background:var(--bg-2);}

.cc-vencidas-banner { display:flex; align-items:center; gap:10px; background:#fff8e1; color:#7a5a00; border:1px solid #ffe082; border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:13px; }
.cc-vencidas-icon { font-size:18px; }
.cc-vencidas-text { flex:1; }
.cc-vencidas-btn { background:#ffc107; color:#000; border:none; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.cc-vencidas-btn:hover { background:#ffb700; }
[data-theme="dark"] .cc-vencidas-banner { background:#3a2c08; color:#ffd566; border-color:#5a4408; }

/* ── Historial v6.66 — badges por categoría de acción ───────────────────── */
.hist-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; letter-spacing:0.02em; }
.hist-badge-venta      { background:#dcfce7; color:#166534; }
.hist-badge-anulacion  { background:#fee2e2; color:#991b1b; }
.hist-badge-cambio     { background:#fef3c7; color:#92400e; }
.hist-badge-limpieza   { background:#fce7f3; color:#9d174d; }
.hist-badge-edit       { background:#dbeafe; color:#1e40af; }
.hist-badge-busqueda   { background:#f3f4f6; color:#374151; }
.hist-badge-login      { background:#e0e7ff; color:#3730a3; }
.hist-badge-default    { background:var(--bg-2); color:var(--text-2); }
[data-theme="dark"] .hist-badge-venta      { background:#14352a; color:#86efac; }
[data-theme="dark"] .hist-badge-anulacion  { background:#3f1414; color:#fca5a5; }
[data-theme="dark"] .hist-badge-cambio     { background:#3f2c0a; color:#fcd34d; }
[data-theme="dark"] .hist-badge-limpieza   { background:#3a1532; color:#f9a8d4; }
[data-theme="dark"] .hist-badge-edit       { background:#1a2a4a; color:#93c5fd; }
[data-theme="dark"] .hist-badge-busqueda   { background:#2a2d33; color:#9ca3af; }
[data-theme="dark"] .hist-badge-login      { background:#272649; color:#a5b4fc; }

/* ── Actividad reciente colapsable (componente reutilizable) ────────────── */
.actividad-reciente { margin-top:24px; border:1px solid var(--border-2); border-radius:8px; padding:0; background:var(--bg-1); }
.actividad-reciente summary { padding:10px 14px; cursor:pointer; font-weight:600; font-size:13px; color:var(--text-2); user-select:none; list-style:none; }
.actividad-reciente summary::-webkit-details-marker { display:none; }
.actividad-reciente summary:hover { background:var(--bg-2); }
.actividad-reciente[open] summary { border-bottom:1px solid var(--border-2); }
.actividad-count { color:var(--text-3); font-weight:400; margin-left:6px; }
.actividad-tabla-wrap { padding:10px 14px; max-height:420px; overflow:auto; }
.actividad-footer { padding:8px 14px; border-top:1px solid var(--border-2); font-size:12px; text-align:right; }
.actividad-footer a { color:var(--accent); text-decoration:none; }
.data-table-compact th, .data-table-compact td { padding:6px 8px; font-size:12px; }

/* ─── Modal editar fecha vencimiento (Buscar Cliente) ─────────────────────── */
.fecha-ctx-strip {
  background: var(--bg-2); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.fecha-ctx-label { font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.fecha-ctx-val { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
.fecha-ctx-nueva { color: var(--accent); }
.fecha-ctx-nueva.warn { color: var(--warn); }
.fecha-ctx-arrow { font-size: 16px; color: var(--text-3); }

.fecha-quick-label { font-size: 11px; color: var(--text-3); margin-bottom: 7px; }
.fecha-quick-btns { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.fecha-quick-btn {
  border: 1px solid var(--border); border-radius: 20px; padding: 4px 11px;
  font-size: 11px; background: transparent; color: var(--text-2);
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: var(--ui);
}
.fecha-quick-btn:hover { border-color: var(--accent); color: var(--accent); }
.fecha-quick-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.fecha-input-label { font-size: 11px; color: var(--text-3); margin-bottom: 6px; display: block; }
.fecha-date-input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 15px; font-weight: 500; text-align: center;
  font-variant-numeric: tabular-nums; background: var(--bg-3); color: var(--text);
  font-family: var(--ui); box-sizing: border-box;
}
.fecha-date-input:focus { outline: none; border-color: var(--accent); }

.fecha-days-badge { text-align: center; margin-top: 10px; min-height: 24px; }
.fecha-days-pill {
  background: #EAF3DE; color: #3B6D11; border-radius: 20px; padding: 3px 12px;
  font-size: 12px; font-weight: 500; display: inline-block;
}
.fecha-days-pill.warn { background: #FAEEDA; color: #854F0B; }

.fecha-motivo-wrap { margin-top: 12px; }
.fecha-motivo-label { font-size: 11px; color: var(--text-3); margin-bottom: 6px; display: block; }
.fecha-motivo-select {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; background: var(--bg-3); color: var(--text);
  font-family: var(--ui); box-sizing: border-box;
}

/* Botón fecha en tabla — reemplaza input nativo inline */
.btn-editar-fecha {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--text);
  cursor: pointer; font-variant-numeric: tabular-nums; font-family: var(--ui);
  transition: border-color 0.15s, color 0.15s;
}
.btn-editar-fecha:hover { border-color: var(--accent); color: var(--accent); }
.btn-editar-fecha svg { width: 14px; height: 14px; }

/* Botón Guardar cuando la fecha cae en el pasado */
.btn-modal-confirm.is-warn { background: var(--warn); }

/* Dark mode: pills semánticos con tonos ajustados */
@media (prefers-color-scheme: dark) {
  .fecha-days-pill { background: rgba(59,109,17,0.18); color: #8FC95A; }
  .fecha-days-pill.warn { background: rgba(133,79,11,0.22); color: #E8B468; }
}

/* ───────────────────────── Tesoreria v7.13 ───────────────────────────── */

/* Segmented control (tabs) */
#page-tesoreria .tes-tabs {
  display:inline-flex; gap:4px; padding:4px; margin-bottom:20px;
  background:var(--bg-4); border:1px solid var(--border); border-radius:10px;
}
#page-tesoreria .tes-tab {
  background:transparent; border:none; padding:7px 16px; cursor:pointer;
  color:var(--text-2); font-size:.85rem; font-weight:600; font-family:var(--ui);
  border-radius:7px; transition:background .15s, color .15s;
}
#page-tesoreria .tes-tab:hover { color:var(--text); }
#page-tesoreria .tes-tab.active {
  background:var(--bg-3); color:var(--accent);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
#page-tesoreria .tes-tab-content { display:none; }
#page-tesoreria .tes-tab-content.active { display:block; }

/* Hero compacto: métricas a la izquierda, acciones a la derecha */
#page-tesoreria .tes-hero {
  background:var(--bg-3); border:1px solid var(--border); border-radius:14px;
  padding:18px 22px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
#page-tesoreria .tes-hero-metrics {
  display:grid; grid-template-columns:repeat(4, minmax(140px, 1fr)); gap:24px;
  flex:1; min-width:0;
}
#page-tesoreria .tes-metric { min-width:0; }
#page-tesoreria .tes-metric-label {
  color:var(--text-3); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;
}
#page-tesoreria .tes-metric-value {
  font-size:1.6rem; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#page-tesoreria .tes-metric-value.tes-metric-time { font-size:1.05rem; font-weight:600; }
#page-tesoreria .tes-metric-sub {
  color:var(--text-3); font-size:.75rem; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Saldo: verde solo si hay saldo > 0 */
#page-tesoreria .tes-hero[data-state="positive"] .tes-metric-saldo .tes-metric-value { color:var(--green); }
#page-tesoreria .tes-hero[data-state="zero"] .tes-metric-saldo .tes-metric-value { color:var(--text-2); }

#page-tesoreria .tes-hero-actions {
  display:flex; gap:10px; flex-shrink:0;
}

/* Botones de hero (mantienen identidad anterior, solo refinados) */
.tes-btn {
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:none;
  border-radius:8px; font-size:.88rem; font-weight:600; cursor:pointer;
  font-family:var(--ui); transition:transform .12s ease, box-shadow .15s ease, background .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.06); white-space:nowrap;
}
.tes-btn svg { flex-shrink:0; }
.tes-btn:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.12); }
.tes-btn:active { transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.06); }
.tes-btn-adelanto { background:var(--green); color:#fff; }
.tes-btn-adelanto:hover { background:#15803d; }
:root[data-theme="dark"] .tes-btn-adelanto:hover { background:#22c55e; }
.tes-btn-gasto { background:var(--accent); color:#fff; }
.tes-btn-gasto:hover { background:var(--accent-2); }

/* Paneles (Adelantos / Gastos / Cronograma) */
#page-tesoreria .tes-panel {
  background:var(--bg-3); border:1px solid var(--border); border-radius:14px;
  margin-bottom:18px; overflow:hidden;
}
#page-tesoreria .tes-panel-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
#page-tesoreria .tes-panel-header-stack { flex-direction:column; align-items:stretch; gap:12px; }
#page-tesoreria .tes-panel-header-row { display:flex; align-items:center; justify-content:space-between; }
#page-tesoreria .tes-panel-title {
  margin:0; font-size:.95rem; font-weight:700; color:var(--text);
  display:inline-flex; align-items:center; gap:8px;
}
#page-tesoreria .tes-panel-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 7px;
  background:var(--bg-4); color:var(--text-2); border:1px solid var(--border);
  border-radius:10px; font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums;
}
#page-tesoreria .tes-panel-body { padding:8px 12px 14px; }
#page-tesoreria .tes-panel-body .table-wrap { padding:0 6px; }
#page-tesoreria .tes-panel-body table { font-size:.82rem; }
#page-tesoreria .tes-panel-body th { padding:.45rem .8rem; }
#page-tesoreria .tes-panel-body td { padding:.6rem .8rem; }
#page-tesoreria .tes-th-num { text-align:right !important; }
#page-tesoreria .tes-th-mid { text-align:center !important; }
#page-tesoreria .tes-table .tes-num { text-align:right; font-variant-numeric:tabular-nums; }
#page-tesoreria .tes-table .tes-mid { text-align:center; }

/* Filtros tematizados */
#page-tesoreria .tes-panel-filtros {
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
}
#page-tesoreria .tes-filtro { display:flex; flex-direction:column; gap:4px; min-width:0; }
#page-tesoreria .tes-filtro-label {
  font-size:.7rem; font-weight:600; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.05em;
}
#page-tesoreria .tes-input {
  background:var(--bg-4); color:var(--text); border:1px solid var(--border-2);
  border-radius:8px; padding:7px 10px; font-size:.85rem; font-family:var(--ui);
  transition:border-color .15s, box-shadow .15s;
  min-width:140px;
}
#page-tesoreria .tes-input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(230,57,70,.10);
}
#page-tesoreria .tes-input::-webkit-calendar-picker-indicator { filter:invert(.5); cursor:pointer; }
:root[data-theme="dark"] #page-tesoreria .tes-input::-webkit-calendar-picker-indicator { filter:invert(.85); }

#page-tesoreria .tes-filtro-acciones { display:flex; gap:8px; align-self:flex-end; }
#page-tesoreria .tes-btn-filter,
#page-tesoreria .tes-btn-ghost {
  padding:7px 14px; border-radius:8px; font-size:.82rem; font-weight:600;
  cursor:pointer; font-family:var(--ui); border:1px solid transparent;
  transition:background .15s, border-color .15s, color .15s;
}
#page-tesoreria .tes-btn-filter { background:var(--accent); color:#fff; border-color:var(--accent); }
#page-tesoreria .tes-btn-filter:hover { background:var(--accent-2); border-color:var(--accent-2); }
#page-tesoreria .tes-btn-ghost { background:transparent; color:var(--text-2); border-color:var(--border-2); }
#page-tesoreria .tes-btn-ghost:hover { background:var(--bg-4); color:var(--text); }

/* Empty states */
#page-tesoreria .tes-empty {
  text-align:center; padding:40px 20px; color:var(--text-2);
}
#page-tesoreria .tes-empty svg { color:var(--text-3); margin-bottom:10px; opacity:.7; }
#page-tesoreria .tes-empty-title {
  font-size:.95rem; font-weight:600; color:var(--text); margin-bottom:4px;
}
#page-tesoreria .tes-empty-sub { font-size:.82rem; color:var(--text-3); }

/* Badges de estado */
.tes-saldo-badge-abierto {
  display:inline-block; padding:3px 10px; border-radius:11px;
  background:var(--green-dim); color:var(--green);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.tes-saldo-badge-cerrado {
  display:inline-block; padding:3px 10px; border-radius:11px;
  background:var(--bg-4); color:var(--text-3); border:1px solid var(--border);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}

/* Botón de captura como icon-button */
#page-tesoreria .tes-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  background:transparent; color:var(--text-2);
  border:1px solid var(--border-2); border-radius:7px;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
#page-tesoreria .tes-icon-btn:hover {
  background:var(--bg-4); color:var(--accent); border-color:var(--accent);
}

/* ─── Cronograma ─── */
#page-tesoreria .tes-cron-hero {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:18px;
}
#page-tesoreria .tes-cron-kpi {
  background:var(--bg-3); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; text-align:left;
  display:flex; flex-direction:column; gap:2px;
}
#page-tesoreria .tes-cron-kpi label {
  color:var(--text-3); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; order:1;
}
#page-tesoreria .tes-cron-kpi span {
  font-size:1.6rem; font-weight:700; display:block;
  font-variant-numeric:tabular-nums; line-height:1.1; order:2;
}
#page-tesoreria .tes-cron-kpi[data-tone="atrasados"] span { color:var(--danger); }
#page-tesoreria .tes-cron-kpi[data-tone="proximos7"] span { color:var(--warn); }
#page-tesoreria .tes-cron-kpi[data-tone="proximos14"] span { color:var(--text); }

/* Banner (sin costo configurado) */
#page-tesoreria .tes-cron-banner {
  padding:10px 14px; border-radius:10px; margin-bottom:14px;
  background:var(--warn-dim, rgba(217,119,6,.10)); color:var(--warn);
  font-size:.82rem; border-left:3px solid var(--warn);
}

/* Leyenda */
#page-tesoreria .tes-cron-legend {
  display:inline-flex; gap:10px; flex-wrap:wrap; font-size:.72rem; color:var(--text-3);
}
#page-tesoreria .tes-cron-legend-item {
  display:inline-flex; align-items:center; gap:5px;
}
#page-tesoreria .tes-cron-legend-item::before {
  content:""; width:8px; height:8px; border-radius:50%; display:inline-block;
}
#page-tesoreria .tes-cron-legend-item[data-estado="atrasado"]::before { background:var(--danger); }
#page-tesoreria .tes-cron-legend-item[data-estado="hoy"]::before { background:var(--warn); }
#page-tesoreria .tes-cron-legend-item[data-estado="pico"]::before { background:var(--info); }
#page-tesoreria .tes-cron-legend-item[data-estado="proximo"]::before { background:var(--green); }

/* Días del cronograma como acordeón */
#page-tesoreria .tes-cron-grilla { padding:6px 12px 10px; }
#page-tesoreria .tes-cron-dia {
  background:var(--bg-4); border:1px solid var(--border); border-left:3px solid var(--border-2);
  border-radius:10px; margin-bottom:8px; cursor:pointer; overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
#page-tesoreria .tes-cron-dia:hover { box-shadow:0 1px 4px rgba(0,0,0,.06); }
#page-tesoreria .tes-cron-dia[data-estado="atrasado"] { border-left-color:var(--danger); }
#page-tesoreria .tes-cron-dia[data-estado="hoy"] { border-left-color:var(--warn); }
#page-tesoreria .tes-cron-dia[data-estado="pico"] { border-left-color:var(--info); }
#page-tesoreria .tes-cron-dia[data-estado="proximo"] { border-left-color:var(--green); }
#page-tesoreria .tes-cron-dia-hdr {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
}
#page-tesoreria .tes-cron-dia-fecha {
  font-weight:700; color:var(--text); font-size:.88rem; min-width:120px;
}
#page-tesoreria .tes-cron-dia-cuentas {
  color:var(--text-2); font-size:.78rem; flex:1;
}
#page-tesoreria .tes-cron-dia-monto {
  font-weight:700; color:var(--text); font-size:.95rem;
  font-variant-numeric:tabular-nums; margin-left:auto;
}
#page-tesoreria .tes-cron-dia-caret {
  color:var(--text-3); transition:transform .15s; flex-shrink:0;
}
#page-tesoreria .tes-cron-dia.expanded .tes-cron-dia-caret { transform:rotate(180deg); }
#page-tesoreria .tes-cron-detalle {
  display:none; padding:0 14px 12px; border-top:1px dashed var(--border);
  margin-top:0;
}
#page-tesoreria .tes-cron-dia.expanded .tes-cron-detalle { display:block; padding-top:10px; }
#page-tesoreria .tes-cron-fila {
  display:grid; grid-template-columns:1.4fr 0.8fr 1fr auto auto;
  gap:10px; padding:6px 0; font-size:.8rem;
  border-bottom:1px dashed var(--border);
}
#page-tesoreria .tes-cron-fila:last-child { border-bottom:none; }
#page-tesoreria .tes-cron-fila-svc { color:var(--text); font-weight:600; }
#page-tesoreria .tes-cron-fila-tipo { color:var(--text-3); font-size:.75rem; }
#page-tesoreria .tes-cron-fila-prov { color:var(--text-2); }
#page-tesoreria .tes-cron-fila-costo { color:var(--text); font-variant-numeric:tabular-nums; text-align:right; }
#page-tesoreria .tes-cron-fila-costo.is-sin { color:var(--text-3); font-style:italic; }
#page-tesoreria .tes-cron-fila-estado {
  font-size:.68rem; font-weight:600; padding:2px 7px; border-radius:6px;
  background:var(--bg-3); color:var(--text-2); text-align:center;
  text-transform:uppercase; letter-spacing:.04em;
}

/* Banner FIFO en modal (alcanza/falta) */
.tes-banner { padding:8px 12px; border-radius:8px; margin:8px 0; font-size:.85rem; }
.tes-banner:empty { display:none; }
.tes-banner.alcanza { background:var(--green-dim); color:var(--green); }
.tes-banner.falta { background:var(--red-dim); color:var(--danger); }

/* ─── Modales Tesoreria (overlay + form) ─── */
.tes-modal-overlay {
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px;
  overflow-y:auto;
}
:root[data-theme="dark"] .tes-modal-overlay { background:rgba(0,0,0,.72); }

.tes-modal {
  background:var(--bg-3); border:1px solid var(--border-2); border-radius:14px;
  width:100%; max-width:500px; max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.30);
  overflow:hidden;
  animation:tesModalIn .18s ease-out;
}
@keyframes tesModalIn {
  from { opacity:0; transform:translateY(8px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1);  }
}

.tes-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tes-modal-header h3 {
  margin:0; font-size:1rem; font-weight:700; color:var(--text);
}
.tes-modal-close {
  background:transparent; border:none; cursor:pointer;
  width:30px; height:30px; padding:0; border-radius:7px;
  font-size:1.4rem; line-height:1; color:var(--text-3);
  transition:background .15s, color .15s;
  display:inline-flex; align-items:center; justify-content:center;
}
.tes-modal-close:hover { background:var(--bg-4); color:var(--text); }

.tes-form {
  padding:18px 20px 20px; display:flex; flex-direction:column; gap:15px;
  overflow-y:auto;
}
.tes-form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.tes-form-field {
  display:flex; flex-direction:column; gap:7px; min-width:0;
}
.tes-form-label {
  font-size:.78rem; font-weight:600; color:var(--text-2);
}
.tes-form-hint {
  font-weight:400; color:var(--text-3); font-size:.72rem;
}

.tes-modal .tes-input {
  width:100%; min-width:0;
  background:var(--bg-4); color:var(--text);
  border:1px solid var(--border-2); border-radius:8px;
  padding:9px 11px; font-size:.88rem; font-family:var(--ui);
  transition:border-color .15s, box-shadow .15s;
}
.tes-modal .tes-input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(230,57,70,.10);
}
.tes-textarea { resize:vertical; min-height:48px; font-family:var(--ui); }

/* Drop zone con paste (Ctrl+V) + drag&drop + click */
.tes-file-zone {
  position:relative; width:100%;
  background:var(--bg-4); color:var(--text-2);
  border:1.5px dashed var(--border-2); border-radius:10px;
  padding:14px 16px; min-height:96px;
  cursor:pointer; transition:border-color .15s, background .15s;
  display:flex; align-items:center; justify-content:center;
}
.tes-file-zone:hover,
.tes-file-zone:focus,
.tes-file-zone:focus-visible,
.tes-file-zone.is-dragover {
  border-color:var(--accent); background:var(--bg-3); outline:none;
  box-shadow:0 0 0 3px rgba(230,57,70,.10);
}
.tes-file-zone.has-file {
  padding:10px; min-height:84px; background:var(--bg-3);
  border-style:solid;
}
.tes-file-real {
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.tes-file-placeholder {
  width:100%;
  display:grid; grid-template-columns:42px 1fr; gap:10px 12px;
  align-items:center; text-align:left;
}
.tes-file-icon {
  grid-row:1 / span 2;
  width:42px; height:42px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-3); background:var(--bg-3);
  border:1px solid var(--border);
}
.tes-file-zone:hover .tes-file-placeholder svg,
.tes-file-zone:focus .tes-file-placeholder svg,
.tes-file-zone.is-dragover .tes-file-placeholder svg { color:var(--accent); }
.tes-file-text { align-self:end; font-size:.86rem; color:var(--text-2); line-height:1.35; }
.tes-file-text strong { color:var(--text); font-weight:600; }
.tes-file-pick {
  background:var(--bg-3); border:1px solid var(--border-2);
  border-radius:7px; padding:3px 8px; margin-left:2px;
  color:var(--accent); font-weight:700; font-family:var(--ui);
  font-size:.82rem; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.tes-file-pick:hover { color:#fff; background:var(--accent); border-color:var(--accent); }
.tes-file-hint { align-self:start; font-size:.72rem; color:var(--text-3); line-height:1.25; }
.tes-file-zone.has-file .tes-file-placeholder { display:none; }

.tes-file-preview {
  width:100%;
  display:grid; grid-template-columns:58px minmax(0, 1fr) 30px;
  align-items:center; gap:10px;
}
.tes-file-preview[hidden] {
  display:none;
}
.tes-file-preview img {
  width:58px; height:58px; object-fit:cover;
  border-radius:6px; border:1px solid var(--border-2);
  display:block; background:var(--bg-4);
  color:transparent; font-size:0;
}
.tes-file-preview-copy {
  min-width:0; display:flex; flex-direction:column; gap:5px;
}
.tes-file-info {
  min-width:0; font-size:.8rem; color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tes-file-change {
  width:max-content; max-width:100%;
  background:transparent; border:none; padding:0;
  color:var(--accent); font:700 .78rem var(--ui);
  cursor:pointer;
}
.tes-file-change:hover { color:var(--accent-2); text-decoration:underline; }
.tes-file-clear {
  background:var(--bg-4); border:1px solid var(--border-2);
  width:30px; height:30px; padding:0; border-radius:7px;
  font-size:1.1rem; line-height:1; color:var(--text-3);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.tes-file-clear:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

.tes-modal-footer {
  display:flex; justify-content:flex-end; gap:10px;
  border-top:1px solid var(--border);
  padding:15px 0 0; margin-top:8px;
}

/* Cancelar consistente con el resto del dashboard (.btn-modal-cancel)
   pero sobreescrito para encajar con el footer del modal de tesoreria */
.tes-modal-footer .tes-modal-cancel {
  padding:9px 16px;
  border-radius:8px;
  font-size:.88rem; font-weight:600; font-family:var(--ui);
  background:var(--bg-4); color:var(--text-2);
  border:1px solid var(--border-2);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.tes-modal-footer .tes-modal-cancel:hover {
  background:var(--bg-3); color:var(--text); border-color:var(--text-3);
}

.tes-modal .tes-input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(.5); cursor:pointer; }
:root[data-theme="dark"] .tes-modal .tes-input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(.85); }

/* Lightbox de capturas */
.tes-lightbox-overlay {
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.85);
  align-items:center; justify-content:center; padding:20px;
  cursor:zoom-out;
}
.tes-lightbox-overlay img {
  max-width:min(960px, 92vw); max-height:90vh;
  border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.50);
  display:block;
}

/* Mobile */
@media (max-width: 600px) {
  .tes-modal-overlay { padding:0; align-items:stretch; }
  .tes-modal {
    max-width:100%; max-height:100vh;
    border-radius:0; border:none;
  }
  .tes-file-zone { padding:12px; }
  .tes-file-placeholder { grid-template-columns:38px 1fr; gap:8px 10px; }
  .tes-file-icon { width:38px; height:38px; }
  .tes-file-preview { grid-template-columns:52px minmax(0, 1fr) 30px; }
  .tes-file-preview img { width:52px; height:52px; }
  .tes-form-row { grid-template-columns:1fr; }
  .tes-modal-footer { flex-direction:column-reverse; }
  .tes-modal-footer button { width:100%; justify-content:center; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  #page-tesoreria .tes-hero { padding:14px; gap:14px; }
  #page-tesoreria .tes-hero-metrics { grid-template-columns:repeat(2, 1fr); gap:14px; }
  #page-tesoreria .tes-hero-actions { width:100%; flex-direction:column; }
  #page-tesoreria .tes-hero-actions .tes-btn { width:100%; justify-content:center; }
  #page-tesoreria .tes-cron-hero { grid-template-columns:1fr; }
  #page-tesoreria .tes-panel-filtros { gap:8px; }
  #page-tesoreria .tes-input { min-width:0; width:100%; }
  #page-tesoreria .tes-filtro { flex:1 1 calc(50% - 4px); }
  #page-tesoreria .tes-filtro-acciones { width:100%; }
  #page-tesoreria .tes-filtro-acciones button { flex:1; }
  #page-tesoreria .tes-cron-fila { grid-template-columns:1fr 1fr; gap:6px; }
  #page-tesoreria .tes-cron-fila-tipo,
  #page-tesoreria .tes-cron-fila-estado { font-size:.7rem; }
}
@media (max-width: 600px) {
  #page-tesoreria .tes-hero-metrics { grid-template-columns:1fr 1fr; }
  #page-tesoreria .tes-cron-dia-fecha { min-width:80px; font-size:.82rem; }
  #page-tesoreria .tes-cron-dia-cuentas { display:none; }
}