/* Estilos compartidos por el dashboard y el Control Maestro.
   Un solo lugar para los colores y componentes de Alva. */

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

  :root {
    --bg: #f8fafc;
    --white: #ffffff;
    --sidebar-w: 240px;
    --sidebar: #ffffff;
    --sidebar-hover: #eef2ff;
    --border: #e2e8f0;
    --text: #1e293b;
    --muted: #64748b;
    --income: #16a34a;
    --income-bg: #dcfce7;
    --expense: #dc2626;
    --expense-bg: #fee2e2;
    --savings: #0d9488;
    --savings-bg: #ccfbf1;
    --accent: #6366f1;
    --accent-dark: #4338ca;
    --accent-2: #818cf8;
    --accent-light: #eef2ff;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 8px rgba(0,0,0,0.04);
    --shadow: 0 4px 16px rgba(0,0,0,0.10);
    --radius: 16px;
    --transition: 0.3s cubic-bezier(.4,0,.2,1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
  }

  /* ═══ LOGIN ═══ */
  .login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
    padding: 24px;
  }

  /* botón volver a la web */
  .login-back {
    position: absolute;
    top: 22px; left: 22px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px 9px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: rgba(255,255,255,0.88);
    font-family: 'Inter', sans-serif;
    font-size: 0.83rem; font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
    z-index: 5;
  }
  .login-back:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.32);
    transform: translateX(-3px);
  }
  .login-back svg { width: 15px; height: 15px; fill: currentColor; transition: transform .25s ease; }
  .login-back:hover svg { transform: translateX(-2px); }
  @media (max-width: 560px) {
    .login-back { top: 14px; left: 14px; padding: 8px 13px 8px 10px; font-size: 0.78rem; }
  }

  .login-card {
    background: var(--white);
    border-radius: 24px;
    padding: 48px 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    text-align: center;
  }

  .login-logo-mark {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: white; font-weight: 900;
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(99,102,241,0.4);
  }

  .login-brand { font-size: 1.6rem; font-weight: 900; color: #0f172a; margin-bottom: 6px; letter-spacing: -0.03em; }
  .login-brand span { color: var(--accent); }
  .login-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 32px; }
  .login-label { display: block; text-align: left; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

  .login-input-wrap {
    display: flex;
    border: 2px solid var(--border);
    border-radius: 14px;
    /* sin overflow:hidden -> el desplegable de países no se recorta */
    margin-bottom: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--white);
    position: relative;
  }
  .login-input-wrap > *:first-child { border-radius: 12px 0 0 12px; }
  .login-input-wrap > *:last-child  { border-radius: 0 12px 12px 0; }
  /* el hijo real que pinta el fondo también debe redondearse, si no se ve cuadrado */
  .login-input-wrap > *:first-child > .prefix-btn { border-radius: 12px 0 0 12px; }

  .login-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
  }

  /* ── Selector de país con bandera SVG ── */
  .login-prefix { position: relative; flex-shrink: 0; display: flex; }
  .prefix-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 0 13px; height: 100%;
    background: #f8fafc;
    border: none;
    border-right: 2px solid var(--border);
    border-radius: 12px 0 0 12px;   /* acompaña el redondeo de la fila */
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background .2s;
    -webkit-appearance: none; appearance: none;
  }
  .prefix-btn:hover { background: #eef2ff; }
  .flag-svg {
    width: 26px; height: 18px;
    border-radius: 5px;
    overflow: hidden; display: block; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 3px rgba(15,23,42,0.14);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* fuerza el clip redondeado en WebKit */
  }
  .flag-svg svg { width: 100%; height: 100%; display: block; border-radius: 5px; }
  .prefix-btn .caret { font-size: 0.95rem; color: #64748b; line-height: 1; transition: transform .25s ease, color .2s; }
  .prefix-btn:hover .caret { color: var(--accent); }
  .login-prefix.open .prefix-btn .caret { transform: rotate(180deg); }

  .pais-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 190px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(15,23,42,0.18);
    padding: 6px; z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .login-prefix.open .pais-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .pais-opt {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border: none; background: transparent;
    border-radius: 9px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 600;
    color: var(--text); text-align: left; transition: background .15s ease;
  }
  .pais-opt:hover { background: var(--bg); }
  .pais-opt.selected { background: var(--accent-light); color: var(--accent-dark); }
  .pais-opt .check-pais { margin-left: auto; color: var(--accent); font-size: 0.8rem; opacity: 0; }
  .pais-opt.selected .check-pais { opacity: 1; }

  .login-input { flex: 1; border: none; padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 0.95rem; color: var(--text); outline: none; background: transparent; }
  .login-input::placeholder { color: #cbd5e1; font-weight: 400; letter-spacing: 0.02em; }
  .login-btn { width: 100%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white; border: none; border-radius: 12px; padding: 14px; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.15s; margin-top: 8px; letter-spacing: 0.01em; }
  .login-btn:hover { opacity: 0.92; transform: translateY(-1px); }
  .login-btn:active { transform: translateY(0); }
  .login-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
  /* "Mantener sesión activa": casilla propia, la del sistema desentona */
  .login-recordar {
    display: flex; align-items: center; gap: 9px;
    margin: 14px 0 16px;
    cursor: pointer; user-select: none;
  }
  .login-recordar input { position: absolute; opacity: 0; width: 0; height: 0; }
  .login-recordar-caja {
    width: 18px; height: 18px; flex-shrink: 0;
    border: 1.5px solid var(--border); border-radius: 6px;
    background: var(--white);
    position: relative;
    transition: background .15s, border-color .15s;
  }
  .login-recordar-caja::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.72rem; font-weight: 700;
    opacity: 0; transition: opacity .15s;
  }
  .login-recordar:hover .login-recordar-caja { border-color: var(--accent); }
  .login-recordar input:checked + .login-recordar-caja {
    background: var(--accent); border-color: var(--accent);
  }
  .login-recordar input:checked + .login-recordar-caja::after { opacity: 1; }
  .login-recordar input:focus-visible + .login-recordar-caja {
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .login-recordar-txt { font-size: 0.82rem; color: var(--muted); }

  .login-error { color: var(--expense); font-size: 0.8rem; margin-top: 10px; display: none; background: #fff5f5; border: 1px solid #fca5a5; border-radius: 8px; padding: 8px 12px; }
  .login-hint { font-size: 0.75rem; color: var(--muted); margin-top: 20px; line-height: 1.6; }
  .login-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
  .login-resend { font-size: 0.8rem; color: var(--accent); cursor: pointer; font-weight: 600; background: var(--accent-light); border: none; border-radius: 8px; padding: 8px 18px; font-family: 'Inter', sans-serif; transition: background 0.15s; }
  .login-resend:hover { background: #e0e7ff; }
  /* Botón de cambiar número: vive dentro del recuadro, junto a "Reenviar
     código" y con su mismo diseño, solo que en tono secundario. Tiene clase
     propia porque .login-back ya la usa la flecha de volver al sitio, que va
     anclada a la esquina de la pantalla. */
  .login-cambiar { font-size: 0.8rem; color: var(--muted); cursor: pointer; font-weight: 600; background: var(--bg); border: none; border-radius: 8px; padding: 8px 18px; font-family: 'Inter', sans-serif; transition: background 0.15s, color 0.15s; }
  .login-cambiar:hover { background: #e2e8f0; color: var(--text); }

  /* ═══ APP LAYOUT ═══ */
  .app { display: none; }

  /* Layout principal: flex row */
  .app-layout {
    display: flex;
    min-height: 100vh;
    transition: all var(--transition);
  }

  /* OVERLAY solo en mobile */
  .overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 90;
  }

  @media (max-width: 768px) {
    .overlay.show { display: block; }
  }

  /* ═══ SIDEBAR ═══ */
  .sidebar {
    width: clamp(190px, var(--sidebar-w), 420px);
    background: var(--sidebar);
    display: flex;
    flex-direction: column;
    padding: 24px 0 16px;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    transition: transform var(--transition);
    transform: translateX(-100%);
    /* permite desplazar cuando hay muchas opciones (ej. Control Maestro) */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sidebar::-webkit-scrollbar { width: 6px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
  .sidebar::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
  /* el footer deja de ser sticky para no tapar contenido al desplazar */
  .sidebar-footer { flex-shrink: 0; }

  /* Desktop: sidebar empuja el contenido */
  @media (min-width: 769px) {
    .sidebar { box-shadow: none; }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow); }
    .main { transition: margin-left var(--transition); }
    .main.sidebar-open { margin-left: clamp(190px, var(--sidebar-w), 420px); }
  }

  /* Mobile: sidebar se superpone */
  @media (max-width: 768px) {
    .sidebar { box-shadow: var(--shadow); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0 !important; }
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px 24px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }

  .brand-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 900; color: white; flex-shrink: 0; letter-spacing: -0.02em; }
  .brand-name { font-size: 0.88rem; font-weight: 600; color: #111827; line-height: 1.2; }
  .brand-sub { font-size: 0.68rem; color: #6b7280; margin-top: 2px; }

  .sidebar-close {
    position: absolute;
    right: 12px; top: 0;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
  }

  .sidebar-close:hover { color: var(--accent-dark); background: var(--accent-light); }

  .sidebar-user {
    margin: 16px 12px;
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 12px;
  }

  .sidebar-user-label { font-size: 0.62rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
  .sidebar-user-name { font-size: 0.95rem; color: #111827; font-weight: 600; margin-bottom: 2px; }
  .sidebar-user-phone { font-size: 0.75rem; color: #6b7280; }

  .sidebar-section { padding: 16px 10px 4px; }
  .sidebar-section-label { font-size: 0.62rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.12em; padding: 0 8px; margin-bottom: 4px; }
  .sidebar-divider { height: 1px; background: rgba(0,0,0,0.08); margin: 8px 14px; }

  .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: #6b7280; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s; margin-bottom: 2px; border: none; background: none; width: 100%; text-align: left; }
  .nav-item:hover { background: var(--accent-light); color: var(--accent-dark); }
  .nav-item.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 600; border-left: 3px solid var(--accent); padding-left: 9px; }
  .nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }

  .sidebar-footer { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }

  .logout-btn { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--border); border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500; padding: 10px 14px; cursor: pointer; transition: all 0.15s; }


  .logout-btn { background: white; color: #374151; }
  .logout-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }

  /* ═══ TOPBAR ═══ */
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 80;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    transition: left var(--transition);
  }

  .hamburger { background: none; border: none; color: #374151; font-size: 1.4rem; cursor: pointer; padding: 6px 8px; border-radius: 6px; transition: background 0.15s; }
  .hamburger:hover { background: var(--accent-light); }

  .topbar-title { font-size: 0.95rem; font-weight: 600; color: #111827; }
  .topbar-meta { font-size: 0.72rem; color: #6b7280; margin-left: auto; }

  /* ═══ MAIN ═══ */
  .main {
    flex: 1;
    padding: 76px 32px 32px;
    min-height: 100vh;
    margin-left: 0;
  }

  @media (max-width: 600px) { .main { padding: 68px 16px 24px; } }

  .main-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
  .main-title { font-size: 1.4rem; font-weight: 700; color: var(--text); }
  .main-sub { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
  .last-update { font-size: 0.72rem; color: var(--muted); background: var(--white); padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); white-space: nowrap; flex-shrink: 0; }

  /* ═══ KPI ═══ */
  .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
  @media (max-width: 600px) { .kpi-grid { grid-template-columns: 1fr; gap: 10px; } }

  .kpi-card { background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; }
  .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
  .kpi-icon.income { background: var(--income-bg); }
  .kpi-icon.expense { background: var(--expense-bg); }
  .kpi-icon.savings { background: var(--savings-bg); }
  .kpi-info { flex: 1; min-width: 0; }
  .kpi-label { font-size: 0.68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
  .kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1; margin-bottom: 3px; }
  .kpi-value.income { color: var(--income); }
  .kpi-value.expense { color: var(--expense); }
  .kpi-value.savings { color: var(--savings); }
  .kpi-sub { font-size: 0.7rem; color: var(--muted); }

  /* ═══ CHARTS ═══ */
  .charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 20px; }
  @media (max-width: 768px) { .charts-grid { grid-template-columns: 1fr; } }

  .chart-card { background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); min-width: 0; }

  /* alturas que se adaptan al zoom y al tamaño de ventana */
  .chart-wrap { position: relative; width: 100%; min-width: 0; }
  .chart-h-lg { height: clamp(190px, 26vh, 300px); }
  .chart-h-md { height: clamp(170px, 23vh, 260px); }
  .chart-center { display: flex; align-items: center; justify-content: center; }
  .chart-wrap canvas { max-width: 100% !important; }

  /* la grilla se reacomoda antes al hacer zoom */
  @media (max-width: 1100px) {
    .charts-grid { grid-template-columns: 1fr !important; }
  }
  .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
  .chart-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
  .chart-legend { display: flex; gap: 12px; flex-wrap: wrap; }
  .legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--muted); }
  .legend-dot { width: 8px; height: 8px; border-radius: 50%; }
  .chart-wrap { position: relative; height: 200px; }
  .cat-list { display: flex; flex-direction: column; gap: 12px; }
  .cat-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
  .cat-name { font-size: 0.78rem; color: var(--text); font-weight: 500; }
  .cat-amount { font-size: 0.78rem; color: var(--muted); }
  .cat-bar-bg { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
  .cat-bar { height: 100%; border-radius: 3px; transition: width 0.8s ease; }

  /* ═══ TABLE ═══ */
  .table-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 20px; }
  .table-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
  .table-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
  .table-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  .filter-tabs { display: flex; gap: 4px; background: var(--bg); padding: 3px; border-radius: 10px; }
  .tab { background: transparent; border: none; border-radius: 7px; color: var(--muted); font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500; padding: 5px 12px; cursor: pointer; transition: all 0.15s; }
  .tab.active { background: var(--white); color: var(--accent-dark); box-shadow: var(--shadow-sm); font-weight: 700; }

  .btn-delete { display: none; align-items: center; gap: 6px; background: var(--expense-bg); color: var(--expense); border: 1px solid rgba(220,38,38,0.2); border-radius: 8px; padding: 6px 14px; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
  .btn-delete:hover { background: var(--expense); color: white; border-color: var(--expense); }
  .btn-delete.show { display: flex; }

  /* En modo oscuro el rojo apagado del fondo y el borde translúcido dejaban
     el botón casi invisible sobre la cabecera de la tabla. Aquí se le sube el
     contraste: borde propio, texto más claro y un realce al pasar por encima,
     que es lo mínimo para algo que borra datos. */
  html[data-tema="oscuro"] .btn-delete {
    background: rgba(248,113,113,0.12);
    color: #fca5a5;
    border: 1px solid rgba(248,113,113,0.45);
  }
  html[data-tema="oscuro"] .btn-delete:hover {
    background: var(--expense);
    color: #fff;
    border-color: var(--expense);
    box-shadow: 0 0 0 3px rgba(248,113,113,0.18);
  }
  .btn-edit { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-light); color: var(--accent-dark); border: 1px solid rgba(99,102,241,0.25); border-radius: 6px; padding: 4px 10px; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
  .btn-edit:hover { background: var(--accent); color: white; border-color: var(--accent); }

  /* ═══ BORRAR UNA FILA ═══
     Antes los colores iban escritos en la propia etiqueta (#fee2e2, #dc2626),
     y un color fijo no sabe nada de temas: en oscuro quedaba un rectángulo
     rosa pálido que no pegaba con nada. Ahora sale de las variables, así que
     se adapta solo. Mismo tamaño y forma que el de editar, para que la pareja
     de botones se lea como una sola cosa. */
  .btn-borrar-fila {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 4px;
    background: var(--expense-bg);
    color: var(--expense);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    line-height: 1.35;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  }
  .btn-borrar-fila:hover {
    background: var(--expense);
    border-color: var(--expense);
    transform: translateY(-1px);
  }
  /* El emoji del tacho no cambia de color, así que en hover se le sube el
     brillo para que se note que está activo sobre el rojo lleno. */
  .btn-borrar-fila:hover { filter: brightness(1.15); }
  .btn-borrar-fila:active { transform: none; }
  html[data-tema="oscuro"] .btn-borrar-fila {
    background: rgba(248,113,113,0.13);
    border-color: rgba(248,113,113,0.4);
  }
  html[data-tema="oscuro"] .btn-borrar-fila:hover {
    background: rgba(248,113,113,0.3);
    border-color: var(--expense);
  }

  /* ═══ SESIONES ═══ */
  .ses-barra { display: flex; justify-content: flex-end; margin-bottom: 14px; }
  /* Un botón que cierra accesos no puede parecer un filtro: va en rojo, pero
     apagado, porque tampoco es la acción principal de la pantalla. */
  .btn-peligro {
    background: var(--expense-bg);
    color: var(--expense);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .btn-peligro:hover { background: var(--expense); color: #fff; border-color: var(--expense); }
  html[data-tema="oscuro"] .btn-peligro {
    background: rgba(248,113,113,0.12);
    color: #fca5a5;
    border-color: rgba(248,113,113,0.42);
  }
  html[data-tema="oscuro"] .btn-peligro:hover { background: var(--expense); color: #fff; }

  /* Ojo: el marco redondeado lo pone .ses-lista, que es lo que dibuja dentro
     este contenedor. Aquí NO se repite el borde: dos marcos concéntricos
     separados por unos pocos píxeles se ven como un error, no como un
     diseño. Este div solo existe para colgar el contenido. */

  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; font-size: 0.68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
  th.th-check { width: 40px; padding: 10px 12px; }
  td { padding: 12px 16px; font-size: 0.85rem; border-bottom: 1px solid var(--border); color: var(--text); }
  td.td-check { padding: 12px; }
  td.td-actions { padding: 8px 12px; white-space: nowrap; }
  tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: var(--bg); }
  tbody tr.selected td { background: #eef2ff; }

  input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

  .table-desktop { display: block; }
  .table-mobile { display: none; }
  @media (max-width: 640px) { .table-desktop { display: none; } .table-mobile { display: block; } }

  .tx-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .tx-card:last-child { border-bottom: none; }
  .tx-card.selected { background: #eff6ff; }
  .tx-dot { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
  .tx-dot.gasto { background: var(--expense-bg); }
  .tx-dot.ingreso { background: var(--income-bg); }
  .tx-info { flex: 1; min-width: 0; }
  .tx-name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tx-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
  .tx-amount { font-size: 0.95rem; font-weight: 700; flex-shrink: 0; }

  .badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 0.68rem; font-weight: 600; }
  .badge.gasto { background: var(--expense-bg); color: var(--expense); }
  .badge.ingreso { background: var(--income-bg); color: var(--income); }
  .amount-neg { color: var(--expense); font-weight: 600; }
  .amount-pos { color: var(--income); font-weight: 600; }

  .empty-state { text-align: center; padding: 48px 24px; color: var(--muted); }
  .empty-icon { font-size: 2.2rem; margin-bottom: 10px; opacity: 0.4; }
  .empty-state p { font-size: 0.85rem; line-height: 1.8; }

  .loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--muted); font-size: 0.85rem; }
  .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .spinning { animation: spin 0.8s linear infinite; display: inline-block; }

  /* ═══ MODAL ═══ */
  /* ═══ MODAL GENÉRICO (diseño de la app) ═══ */
  @keyframes uiModalIn { from { opacity:0; transform: translateY(14px) scale(0.96); } to { opacity:1; transform:none; } }
  @keyframes uiFadeIn  { from { opacity:0; } to { opacity:1; } }

  .ui-modal-bg {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 24px;
    animation: uiFadeIn .2s ease;
  }
  .ui-modal-bg.show { display: flex; }
  .ui-modal {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px 28px 24px;
    max-width: 420px; width: 100%;
    box-shadow: 0 24px 70px rgba(15,23,42,0.28);
    animation: uiModalIn .35s cubic-bezier(.34,1.4,.64,1) both;
    text-align: center;
  }
  .ui-modal-icon {
    width: 60px; height: 60px; border-radius: 50%;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
  }
  .ui-modal-icon.danger  { background: #fee2e2; color: #dc2626; }
  .ui-modal-icon.warn    { background: #fef3c7; color: #d97706; }
  .ui-modal-icon.ok      { background: #d1fae5; color: #059669; }
  .ui-modal-icon.info    { background: var(--accent-light); color: var(--accent-dark); }
  .ui-modal-title {
    font-size: 1.08rem; font-weight: 800; color: var(--text);
    margin-bottom: 8px; letter-spacing: -0.02em;
  }
  .ui-modal-desc {
    font-size: 0.88rem; color: var(--muted);
    line-height: 1.65; margin-bottom: 24px;
  }
  .ui-modal-btns { display: flex; gap: 10px; }
  .ui-modal-btns button {
    flex: 1; padding: 12px 16px; border-radius: 11px;
    font-family: 'Inter', sans-serif; font-size: 0.87rem; font-weight: 700;
    cursor: pointer; transition: all .18s ease; border: 1.5px solid var(--border);
    background: var(--white); color: var(--text);
  }
  .ui-modal-btns button:hover { background: var(--bg); border-color: var(--muted); }
  .ui-modal-btns .ui-btn-primary {
    background: var(--accent); color: #fff; border-color: var(--accent);
  }
  .ui-modal-btns .ui-btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
  .ui-modal-btns .ui-btn-danger {
    background: var(--expense); color: #fff; border-color: var(--expense);
  }
  .ui-modal-btns .ui-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); z-index: 200; align-items: center; justify-content: center; padding: 24px; animation: uiFadeIn .2s ease; }
  .modal-overlay.show { display: flex; }
  .modal { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 30px 28px 24px; max-width: 420px; width: 100%; box-shadow: 0 24px 70px rgba(15,23,42,0.28); text-align: center; animation: uiModalIn .35s cubic-bezier(.34,1.4,.64,1) both; }
  .modal-icon { font-size: 2.5rem; margin-bottom: 16px; }
  .modal-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
  .modal-desc { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; line-height: 1.6; }
  .modal-btns { display: flex; gap: 10px; }
  .modal-btn-cancel { flex: 1; background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  .modal-btn-cancel:hover { background: var(--border); }
  .modal-btn-delete { flex: 1; background: var(--expense); color: white; border: none; border-radius: 10px; padding: 12px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  .modal-btn-delete:hover { background: #b91c1c; }

  /* ═══ MASTER CHOICE ═══ */
  .choice-overlay { display: none; position: fixed; inset: 0; background: var(--sidebar); z-index: 300; align-items: center; justify-content: center; padding: 24px; }
  .choice-overlay.show { display: flex; }
  .choice-card { background: var(--white); border-radius: 20px; padding: 40px; max-width: 460px; width: 100%; box-shadow: var(--shadow); text-align: center; }
  .choice-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .choice-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 28px; }
  .choice-options { display: flex; flex-direction: column; gap: 12px; }
  .choice-btn { display: flex; align-items: center; gap: 14px; text-align: left; border: 2px solid var(--border); border-radius: 14px; padding: 16px 18px; background: var(--white); cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif; }
  .choice-btn:hover { border-color: var(--accent); background: var(--accent-light); }
  .choice-icon { font-size: 1.6rem; }
  .choice-text { flex: 1; }
  .choice-text .choice-name { font-size: 0.92rem; font-weight: 700; color: var(--text); }
  .choice-text .choice-desc { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

  /* ═══ FILTERS ═══ */
  .filters-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
  .filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 130px; flex: 1; }
  .filter-group label { font-size: 0.65rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .filter-group select, .filter-group input { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--text); background: var(--white); cursor: pointer; }

  /* ═══ DROPDOWN DE FILTROS (estilo unificado) ═══ */
  .fdd { position: relative; }
  .fdd-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 11px;
    background: var(--white);
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500;
    color: var(--text); cursor: pointer; text-align: left;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .fdd-btn:hover { border-color: var(--accent); background: var(--accent-light); }
  .fdd.open .fdd-btn {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  }
  .fdd-btn .fdd-val {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fdd-btn .fdd-caret {
    font-size: 0.62rem; color: var(--muted); flex-shrink: 0;
    transition: transform .25s ease;
  }
  .fdd.open .fdd-btn .fdd-caret { transform: rotate(180deg); color: var(--accent); }
  /* punto que indica filtro activo */
  .fdd-btn .fdd-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
    display: none;
  }
  .fdd.filtrado .fdd-btn .fdd-dot { display: block; }
  .fdd.filtrado .fdd-btn { border-color: var(--accent); background: var(--accent-light); }
  .fdd.filtrado .fdd-btn .fdd-val { font-weight: 700; color: var(--accent-dark); }

  .fdd-menu {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0;
    min-width: 190px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.15);
    padding: 6px;
    z-index: 120;
    max-height: 280px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .fdd.open .fdd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .fdd-menu::-webkit-scrollbar { width: 7px; }
  .fdd-menu::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

  .fdd-opt {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border: none; background: transparent;
    border-radius: 8px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.815rem; font-weight: 500;
    color: var(--text); text-align: left;
    transition: background .14s ease;
  }
  .fdd-opt:hover { background: #eef2ff; }
  .fdd-opt.sel { background: var(--accent-light); color: var(--accent-dark); font-weight: 700; }
  .fdd-opt .fdd-check { margin-left: auto; color: var(--accent); font-size: 0.78rem; opacity: 0; flex-shrink: 0; }
  .fdd-opt.sel .fdd-check { opacity: 1; }
  .fdd-sep { height: 1px; background: var(--border); margin: 4px 2px; }

  /* filtro Tipo: idéntico a Categoría (check ✓ a la derecha, sin casilla visible) */
  .fdd-check-opt { cursor: pointer; position: relative; }
  .fdd-check-opt input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
    pointer-events: none;
  }
  .fdd-check-opt .fdd-check {
    margin-left: auto; color: var(--accent);
    font-size: 0.78rem; opacity: 0; flex-shrink: 0;
    transition: opacity .15s ease;
  }
  .fdd-check-opt:has(input:checked) {
    background: var(--accent-light);
    color: var(--accent-dark);
    font-weight: 700;
  }
  .fdd-check-opt:has(input:checked) .fdd-check { opacity: 1; }
  .filter-group input[type="text"] { cursor: text; }

  /* ═══ FILTROS DE OBJETIVOS ═══
     Aquí los filtros no se reparten el ancho de la pantalla. Son tres listas
     de opciones cortas: estirarlas hasta el borde no aporta nada y hace que
     un desplegable de una sola palabra parezca un campo de texto largo. */
  #vista-objetivos .filters-bar { justify-content: flex-start; }
  #vista-objetivos .filter-group {
    flex: 0 0 auto;
    width: 190px;
    min-width: 0;
    max-width: 100%;
  }

  /* Dato que se muestra pero no se edita (el teléfono del perfil). El fondo
     sale de las variables y no de un gris fijo, que en modo oscuro se veía
     como un parche claro pegado encima. */
  .campo-fijo {
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 0.9rem;
    color: var(--muted);
    background: var(--bg);
  }
  html[data-tema="oscuro"] .campo-fijo {
    background: rgba(255,255,255,0.04);
    border-color: var(--border);
    color: var(--text);
  }

  /* Botón de actualizar de la cabecera */
  .btn-actualizar {
    display: flex; align-items: center; gap: 6px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 10px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; margin-left: auto;
    transition: background .15s ease;
  }
  .btn-actualizar:hover { background: var(--accent-dark); }

  /* ═══ FILTROS DE MOVIMIENTOS ═══
     Mismo lenguaje que los del Dashboard: bordes suaves, esquinas redondas y
     un solo acento cuando el filtro está puesto. */
  .mov-filtros {
    display: flex; flex-wrap: wrap; gap: 10px;
    align-items: center; margin-bottom: 16px;
  }
  .mov-filtros .fdd-btn { min-width: 170px; }

  /* ═══ CAMPO DE FECHA Y CALENDARIO PROPIO ═══
     El calendario del navegador no se puede pintar y desentona. Este usa los
     colores y la tipografía de Alva. */
  .cal-campo {
    display: flex; align-items: center; gap: 8px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .cal-campo:hover { border-color: var(--accent); background: var(--accent-light); }
  .cal-icono { font-size: 0.82rem; opacity: .5; flex-shrink: 0; }
  .cal-valor {
    font-family: 'Inter', sans-serif; font-size: 0.82rem;
    color: #9ca3af; white-space: nowrap;
  }
  .cal-campo.activa { border-color: var(--accent); background: var(--accent-light); }
  .cal-campo.activa .cal-valor { color: var(--accent-dark); font-weight: 600; }
  .cal-campo.activa .cal-icono { opacity: 1; }

  /* Dentro de un formulario el campo es rectangular, como los demás */
  .form-alva .cal-campo {
    border-radius: 10px; border-width: 1px; padding: 10px 12px;
    justify-content: flex-start;
  }

  .cal-pop {
    position: fixed; z-index: 4000;
    width: 272px; padding: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(15,23,42,0.16);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
  }
  .cal-pop.abierto { opacity: 1; visibility: visible; transform: translateY(0); }

  .cal-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
  .cal-titulo {
    flex: 1; text-align: center;
    font-size: 0.86rem; font-weight: 700; color: var(--text);
  }
  .cal-nav {
    width: 28px; height: 28px; flex-shrink: 0;
    border: none; background: transparent; border-radius: 8px;
    color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
    transition: background .14s, color .14s;
  }
  .cal-nav:hover { background: var(--accent-light); color: var(--accent-dark); }

  .cal-semana {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
  }
  .cal-semana span {
    text-align: center;
    font-size: 0.66rem; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.04em;
  }

  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal-dia {
    aspect-ratio: 1; width: 100%;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 9px;
    font-family: 'Inter', sans-serif; font-size: 0.79rem; color: var(--text);
    cursor: pointer;
    transition: background .12s, color .12s;
  }
  .cal-dia:hover { background: var(--accent-light); color: var(--accent-dark); }
  .cal-dia.vacio { cursor: default; }
  .cal-dia.hoy { font-weight: 700; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-light); }
  .cal-dia.elegido { background: var(--accent); color: #fff; font-weight: 700; }
  .cal-dia.elegido:hover { background: var(--accent-dark); color: #fff; }

  .cal-pie {
    display: flex; gap: 6px; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--border);
  }
  .cal-accion {
    flex: 1; padding: 7px;
    border: 1px solid var(--border); background: var(--white); border-radius: 9px;
    font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 600;
    color: var(--muted); cursor: pointer;
    transition: all .14s;
  }
  .cal-accion:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-light); }
  .cal-borrar:hover { border-color: var(--expense); color: var(--expense); background: var(--expense-bg); }

  /* Buscador de la tabla */
  .mov-buscar {
    display: flex; align-items: center; gap: 8px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 0 16px;
    flex: 1; min-width: 200px;
    transition: border-color .15s, box-shadow .15s;
  }
  .mov-buscar:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .mov-buscar-icono { font-size: 0.82rem; opacity: .5; flex-shrink: 0; }
  .mov-buscar input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 8px 0;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text);
  }
  .mov-buscar input::placeholder { color: #9ca3af; }

  /* Limpiar: apagado mientras no haya nada que limpiar */
  .btn-limpiar {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500;
    color: #9ca3af;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
  }
  .btn-limpiar:hover { border-color: #cbd5e1; color: var(--muted); }
  .btn-limpiar.activo {
    background: var(--expense-bg, #fee2e2);
    border-color: rgba(220,38,38,0.35);
    color: var(--expense, #dc2626);
    font-weight: 600;
  }
  .btn-limpiar.activo:hover {
    background: #fecaca;
    border-color: var(--expense, #dc2626);
    color: var(--expense, #dc2626);
  }

  @media (max-width: 768px) {
    .mov-buscar { flex: 1 1 100%; }
    .mov-filtros .fdd-btn { min-width: 0; }
  }

  /* ═══ FORMULARIOS DE VENTANAS EMERGENTES ═══ */
  .form-alva { display: flex; flex-direction: column; gap: 13px; }
  .form-alva .campo { display: flex; flex-direction: column; gap: 6px; }
  .form-alva .campo > label {
    font-size: 0.78rem; font-weight: 600; color: var(--muted);
    letter-spacing: 0;
  }
  /* Todos los campos del formulario, sea cual sea su tipo. Antes solo se
     estilaban texto y número, y el de celular salía como una línea suelta. */
  .form-alva input,
  .form-alva textarea,
  .form-alva select {
    width: 100%;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Inter', sans-serif; font-size: 0.86rem; color: var(--text);
    background: var(--white); outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .form-alva input:focus,
  .form-alva textarea:focus,
  .form-alva select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .form-alva input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .form-alva input::placeholder { color: #9ca3af; }
  /* Dentro del formulario el desplegable ocupa todo el ancho */
  .form-alva .fdd { width: 100%; min-width: 120px; }
  .form-alva .fdd-btn { width: 100%; border-radius: 10px; border-width: 1px; padding: 10px 12px; }
  .form-alva .fdd-menu { width: 100%; }

  /* ═══ BLOQUES Y MINI KPIs DEL DASHBOARD ═══ */
  .bloque-titulo { margin: 26px 0 14px; }
  .bloque-titulo h2 {
    font-size: 1.02rem; font-weight: 700; color: var(--text); margin: 0;
    display: flex; align-items: center; gap: 9px;
  }
  .bloque-titulo h2::before {
    content: ''; width: 4px; height: 17px;
    background: var(--accent); border-radius: 99px; flex-shrink: 0;
  }
  .bloque-titulo p {
    margin: 5px 0 0 13px;
    font-size: 0.82rem; color: var(--muted); line-height: 1.5;
  }

  .mini-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 16px;
  }
  @media (max-width: 900px) { .mini-kpis { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .mini-kpis { grid-template-columns: 1fr; } }

  .mini-kpi {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
  }
  .mini-kpi-label {
    font-size: 0.68rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.07em;
  }
  .mini-kpi-valor {
    font-size: 1.28rem; font-weight: 700; color: var(--text);
    margin-top: 5px; line-height: 1.2;
  }
  .mini-kpi-valor.bueno { color: var(--income); }
  .mini-kpi-valor.malo { color: var(--expense); }
  .mini-kpi-sub {
    font-size: 0.74rem; color: var(--muted); margin-top: 4px; line-height: 1.4;
  }

  .chart-nota {
    font-size: 0.76rem; color: var(--muted);
    margin-left: auto; text-align: right;
  }

  /* ═══ SORTABLE TABLE ═══ */
  th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
  th.sortable:hover { color: var(--text); }
  th .sort-arrow { margin-left: 4px; opacity: 0.4; }
  th.sort-active .sort-arrow { opacity: 1; color: var(--accent); }

  /* ═══ CONTROL MAESTRO ═══ */
  .cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
  @media (max-width: 768px) { .cm-grid { grid-template-columns: 1fr; } }
  .cm-card { background: var(--white); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
  .cm-card h3 { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 14px; }
  .cm-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
  .cm-form input { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: 'Inter', sans-serif; font-size: 0.85rem; }
  .cm-form button { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 10px; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
  .cm-form button:hover { background: var(--accent-dark); }
  .cm-msg { font-size: 0.78rem; margin-top: 6px; display: none; }
  .cm-msg.ok { color: var(--income); display: block; }
  .cm-msg.err { color: var(--expense); display: block; }
  .cm-list { max-height: 280px; overflow-y: auto; }
  .cm-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
  .cm-row:last-child { border-bottom: none; }
  .cm-row .cm-name { font-weight: 600; color: var(--text); }
  .cm-row .cm-phone { color: var(--muted); font-size: 0.75rem; }

  /* ═══ PLANES (CONTROL MAESTRO) ═══
     Una tarjeta por plan: dentro van su descripción, sus precios por periodo
     y sus características. Todo lo de un plan se administra en un solo sitio. */
  /* Tarjetas más anchas: con menos ancho las filas de funcionalidades partían
     el nombre en dos renglones y se leía mal. */
  .planes-cm-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(540px, 1fr)); gap: 16px; align-items: start; }
  @media (max-width: 1400px) { .planes-cm-wrap { grid-template-columns: 1fr; } }

  .plan-card-cm { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
  .plan-card-cm.destacado { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
  .plan-card-cm.inactivo { opacity: .62; }

  .pcm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); }
  .pcm-nombre { font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .pcm-chip { font-size: 0.7rem; font-weight: 700; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; }
  .pcm-chip.pop { background: var(--accent); color: #fff; }
  .pcm-chip.off { background: var(--bg); color: var(--muted); }
  .pcm-chip.free { background: #dcfce7; color: #15803d; }
  .pcm-head .pcm-espacio { flex: 1; }
  .pcm-desde { font-size: 0.78rem; color: var(--muted); font-weight: 600; }

  /* Borrar el plan entero. Discreto hasta que pasas el ratón por la tarjeta:
     no es una acción que deba invitarse. */
  .pcm-borrar {
    background: transparent !important; border: none;
    padding: 5px 7px !important; border-radius: 8px !important;
    font-size: 0.82rem !important; cursor: pointer;
    opacity: 0; transition: opacity .15s, background .15s;
  }
  .plan-card-cm:hover .pcm-borrar { opacity: .55; }
  .pcm-borrar:hover { opacity: 1 !important; background: var(--expense-bg) !important; }
  @media (hover: none) { .pcm-borrar { opacity: .55; } }

  /* ── Cabecera de la vista de Planes ────────────────────────────────────── */
  .pcm-barra {
    display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .pcm-titulo { flex: 1; min-width: 180px; }
  .pcm-titulo h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
  .pcm-enlace {
    font-size: 0.78rem; color: var(--accent); font-weight: 600; text-decoration: none;
  }
  .pcm-enlace:hover { text-decoration: underline; }

  /* Botón principal de la sección */
  .btn-primario {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent) !important; color: #fff !important;
    border: none !important; border-radius: 11px !important;
    padding: 10px 18px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.84rem !important; font-weight: 600 !important;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(99,102,241,0.28);
    transition: background .15s, box-shadow .15s, transform .12s;
  }
  .btn-primario:hover {
    background: var(--accent-dark) !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.34);
  }
  .btn-primario:active { transform: translateY(1px); }
  .btn-primario-icono {
    font-size: 1rem; line-height: 1;
    transition: transform .2s;
  }
  .btn-primario.abierto {
    background: var(--white) !important; color: var(--muted) !important;
    border: 1px solid var(--border) !important; box-shadow: none;
  }
  .btn-primario.abierto .btn-primario-icono { transform: rotate(45deg); }

  /* Tres cifras en vez de una frase corrida */
  .pcm-cifras {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  }
  @media (max-width: 620px) { .pcm-cifras { grid-template-columns: 1fr; } }
  .pcm-cifra {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
  }
  .pcm-cifra-n {
    font-size: 1.5rem; font-weight: 700; color: var(--accent-dark); line-height: 1.1;
  }
  .pcm-cifra-e {
    font-size: 0.74rem; font-weight: 600; color: var(--muted);
    letter-spacing: 0; margin-top: 3px;
  }
  .pcm-cifra-nota {
    font-size: 0.75rem; color: var(--muted); margin-top: 5px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .pcm-body { padding: 14px 18px 18px; }
  .pcm-seccion { font-size: 0.82rem; font-weight: 700; color: var(--text); letter-spacing: 0; margin: 18px 0 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .pcm-seccion:first-child { margin-top: 0; }

  .pcm-periodo { display: grid; grid-template-columns: 92px 104px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 0.8rem; }
  .pcm-periodo .pcm-nota { min-width: 0; }

  /* Orden del plan completo, en un solo lugar */
  .pcm-orden {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding: 9px 12px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    font-size: 0.8rem; color: var(--text);
  }
  .pcm-orden input { width: 72px; }
  .pcm-orden small { flex: 1 1 100%; font-size: 0.73rem; color: var(--muted); }

  /* Qué hace el botón del plan en la web: menú de pagos o chat de WhatsApp */
  .pcm-boton {
    margin-top: 4px; padding: 11px 12px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  }
  .pcm-boton-fila {
    display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  }
  .pcm-boton-fila select { width: 100%; }
  .pcm-boton-wa {
    display: grid; gap: 9px;
    margin-top: 11px; padding-top: 11px;
    border-top: 1px dashed var(--border);
  }
  .pcm-boton-wa[hidden] { display: none; }
  .pcm-boton-wa label {
    display: grid; gap: 5px;
    font-size: 0.76rem; font-weight: 600; color: var(--muted);
  }
  .pcm-boton-wa input, .pcm-boton-wa textarea {
    width: 100%; font-family: inherit; font-size: 0.82rem;
    font-weight: 400; color: var(--text); resize: vertical;
  }
  .pcm-boton-wa small { font-size: 0.73rem; color: var(--muted); }

  /* ═══ FILAS DE LA COMPARACIÓN DE PLANES EN LA WEB ═══ */
  .comp-ayuda {
    font-size: 0.82rem; color: var(--muted); line-height: 1.5;
    margin: 2px 0 14px;
  }
  .comp-cuenta {
    font-size: 0.78rem; font-weight: 600; color: var(--accent-dark);
    background: var(--accent-light); border-radius: 999px; padding: 5px 12px;
    white-space: nowrap;
  }
  .comp-lista {
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  }
  .comp-fila {
    display: grid; grid-template-columns: auto 1fr auto auto auto;
    gap: 10px; align-items: center;
    padding: 9px 12px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), opacity var(--transition);
  }
  .comp-fila:last-child { border-bottom: 0; }
  .comp-fila:hover { background: var(--bg); }
  .comp-fila.arrastrando { opacity: .45; }
  .comp-fila.destino { background: var(--accent-light); }
  .comp-fila.oculta { opacity: .5; }
  .comp-fila.oculta .comp-nombre { text-decoration: line-through; }
  .comp-nombre { font-size: 0.85rem; font-weight: 600; color: var(--text); }
  .comp-tipo {
    font-size: 0.72rem; font-weight: 600; color: var(--muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  }
  /* Interruptor de "se ve en la web": riel + texto, sin iconos */
  .comp-switch {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; cursor: pointer;
    padding: 3px 4px; border-radius: 999px;
    font-family: inherit; font-size: 0.75rem; font-weight: 600;
    color: var(--muted); white-space: nowrap;
  }
  .comp-switch-riel {
    position: relative; display: inline-block;
    width: 34px; height: 19px; border-radius: 999px;
    background: #cbd5e1; transition: background var(--transition);
  }
  .comp-switch-bola {
    position: absolute; top: 2px; left: 2px;
    width: 15px; height: 15px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25);
    transition: transform var(--transition);
  }
  .comp-switch.on .comp-switch-riel { background: var(--accent); }
  .comp-switch.on .comp-switch-bola { transform: translateX(15px); }
  .comp-switch.on .comp-switch-txt { color: var(--accent-dark); }
  .comp-switch-txt { min-width: 56px; text-align: left; }

  /* Marcar el plan destacado desde su propia tarjeta */
  .pcm-pop {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--white); color: var(--muted);
    border: 1px dashed var(--border); border-radius: 999px;
    padding: 3px 11px; cursor: pointer;
    font-family: inherit; font-size: 0.7rem; font-weight: 700;
    transition: all var(--transition);
  }
  .pcm-pop:hover { border-color: var(--accent); color: var(--accent-dark); }
  .pcm-pop.on {
    background: var(--accent); color: #fff;
    border: 1px solid var(--accent);
  }
  .pcm-pop-estrella { font-size: 0.82rem; line-height: 1; }

  /* ═══ REPORTE BREVE DE USUARIOS ═══ */
  .usuarios-reporte { margin-bottom: 16px; }
  .ur-cab {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  }
  .ur-cab h3 { margin: 0; }
  .ur-fecha { font-size: 0.78rem; color: var(--muted); }

  .ur-cifras {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .ur-item {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 13px 15px;
  }
  .ur-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
  .ur-etq { font-size: 0.8rem; font-weight: 600; color: var(--text); margin-top: 3px; }
  .ur-sub { font-size: 0.74rem; color: var(--muted); margin-top: 3px; }

  .ur-barra {
    display: flex; height: 9px; border-radius: 999px; overflow: hidden;
    background: var(--bg); margin-top: 16px;
  }
  .ur-tramo { display: block; height: 100%; }
  .ur-nota { font-size: 0.8rem; color: var(--muted); margin: 9px 0 0; }

  /* ═══ TABLA DE USUARIOS ═══ */
  .caja-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
  }
  .caja-barra .caja-nota { margin: 0; flex: 1; min-width: 200px; }

  .tabla-us-scroll {
    border: 1px solid var(--border); border-radius: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Sin min-width y con layout fijo, la tabla se reparte el ancho disponible
     en vez de empujar hacia los lados. Antes bastaba con un correo largo para
     obligar a desplazarse para ver el estado, que es justo lo que uno viene a
     mirar. El scroll horizontal solo aparece ya en pantallas estrechas. */
  .tabla-us {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
    table-layout: fixed;
  }
  .tabla-us thead th {
    text-align: center; white-space: nowrap;
    background: var(--bg); color: var(--muted);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0;
    padding: 10px 10px; border-bottom: 1px solid var(--border);
  }
  .tabla-us td {
    padding: 10px 10px; border-bottom: 1px solid var(--border);
    color: var(--text); vertical-align: middle;
    text-align: center;
    /* Lo que no quepa se corta con puntos suspensivos en vez de ensanchar */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Los datos de la tabla se pueden seleccionar y copiar. Hay que decirlo
     expreso porque la caja que las contiene se arrastra para reordenarse, y
     el navegador bloquea la selección dentro de todo lo arrastrable. */
  .tabla-us, .tabla-us th, .tabla-us td {
    user-select: text;
    -webkit-user-select: text;
    cursor: auto;
  }
  .tabla-us td[title] { cursor: auto; }   /* nada de signo de interrogación */

  /* Columnas angostas de verdad: código de país y el botón de editar. */
  .tabla-us th:last-child, .tabla-us td:last-child { width: 52px; }
  .tabla-us .us-cod { width: 64px; }
  .tabla-us .us-codigo { width: 78px; }

  /* ═══ TIRADOR PARA ANCHAR COLUMNAS ═══
     Una franja fina en el borde derecho de cada encabezado. Invisible hasta
     que el cursor se acerca: si se viera siempre, la cabecera parecería una
     reja. El area sensible es mas ancha que la linea que se pinta, porque
     acertarle a 2 pixeles con el raton es un ejercicio de puntería. */
  .tabla-us thead th { position: relative; }
  .col-tirador {
    position: absolute;
    top: 0; right: -4px;
    width: 9px; height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
  }
  /* La línea sigue el color del texto de la interfaz: oscura sobre fondo
     claro y clara sobre fondo oscuro. El acento índigo se perdía contra el
     encabezado y en modo oscuro se leía casi blanco. */
  .col-tirador { cursor: col-resize !important; }
  .col-tirador::after {
    content: '';
    position: absolute;
    top: 20%; left: 3px;
    width: 2px; height: 60%;
    border-radius: 2px;
    background: transparent;
    transition: background .15s ease;
  }
  .tabla-us thead th:hover .col-tirador::after { background: var(--muted); }
  .col-tirador:hover::after { background: var(--text); }

  /* Mientras se arrastra, el cursor manda en toda la página y no se
     selecciona texto sin querer. */
  body.ajustando-col { cursor: col-resize; user-select: none; }
  body.ajustando-col .col-tirador::after { background: var(--text); }
  .tabla-us tbody tr:last-child td { border-bottom: 0; }
  .tabla-us tbody tr:hover td { background: rgba(99,102,241,.035); }
  .us-nombre { font-weight: 600; white-space: nowrap; }
  .us-codigo {
    font-weight: 700; white-space: nowrap; letter-spacing: .02em;
    color: var(--accent-dark);
  }
  .us-cod, .us-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* ═══ ESTADO DEL ACCESO AL PANEL ═══
     Un desplegable, no un chip: aquí no solo se mira el estado, se cambia.
     El color dice de un vistazo si esa persona entra o no. */
  .us-estado-sel {
    /* Se le quita el aspecto de formulario del sistema y se dibuja a mano:
       un punto de color a la izquierda y una flecha discreta a la derecha,
       las dos como fondos. Un <select> no admite hijos, y resolverlo con
       fondos evita montar un desplegable propio que además quedaría
       recortado por el overflow de la celda. */
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    max-width: 156px;
    padding: 7px 26px 7px 26px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--white);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
    text-align-last: left;
    background-repeat: no-repeat, no-repeat;
    background-position: left 9px center, right 8px center;
    background-size: 8px 8px, 9px 6px;
    background-image:
      radial-gradient(circle, currentColor 3.2px, transparent 3.6px),
      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .us-estado-sel:hover { border-color: var(--accent-2); }
  .us-estado-sel:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .us-estado-sel:disabled { opacity: .55; cursor: progress; }
  /* El color del texto tiñe también el punto, que usa currentColor */
  .us-estado-sel.est-activo   { color: var(--income);  background-color: var(--income-bg); border-color: transparent; }
  .us-estado-sel.est-pausa    { color: #b45309;        background-color: #fef3c7;          border-color: transparent; }
  .us-estado-sel.est-inactivo { color: var(--expense); background-color: var(--expense-bg); border-color: transparent; }
  /* Las opciones del desplegable las pinta el sistema: se dejan legibles */
  .us-estado-sel option { color: var(--text); background: var(--white); font-weight: 500; }

  /* En modo oscuro los amarillos claros de la pausa no funcionan */
  html[data-tema="oscuro"] .us-estado-sel.est-pausa { color: #fbbf24; background-color: #3b2f10; }
  .us-cod { color: var(--muted); }
  .us-vacio { color: #cbd5e1; }
  .us-plan {
    padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8rem; background: var(--white); min-width: 110px;
  }
  .us-estado {
    display: inline-block; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    font-size: 0.73rem; font-weight: 600;
  }
  .us-estado.act { background: #dcfce7; color: #15803d; }
  .us-estado.ina { background: var(--bg); color: var(--muted); }
  .us-codigo-celda { display: inline-flex; align-items: center; gap: 6px; }
  .us-codigo-celda .codigo-admin { width: 96px; }

  @media (max-width: 640px) {
    .comp-fila { grid-template-columns: auto 1fr auto; row-gap: 6px; }
    .comp-fila .pcm-l-grupo { grid-column: 2; margin-left: 0; }
    .comp-tipo { display: none; }
  }

  /* ═══ VENTANA DE FORMULARIO ═══
     Para altas con varios campos: cabecera con título y cierre, cuerpo con el
     formulario y botones abajo, siempre en el mismo sitio. */
  .modal.modal-form {
    max-width: 520px;
    text-align: left;
    padding: 22px 24px 20px;
  }
  .modal-form-cab {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 18px;
  }
  .modal-form-titulo {
    font-size: 1.05rem; font-weight: 700; color: var(--text);
  }
  .modal-form-sub {
    font-size: 0.79rem; color: var(--muted); margin-top: 3px; line-height: 1.4;
  }
  .modal-form-x {
    margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px;
    border: none; background: transparent; border-radius: 9px;
    color: var(--muted); font-size: 0.9rem; cursor: pointer;
    transition: background .14s, color .14s;
  }
  .modal-form-x:hover { background: var(--bg); color: var(--text); }

  /* Campos en línea que se apilan solos cuando no caben */
  /* Las columnas se alinean por abajo: si una etiqueta ocupa dos renglones,
     los campos siguen quedando a la misma altura. */
  .campo-fila {
    align-items: flex-end;
    display: flex; gap: 12px; flex-wrap: wrap;
  }
  .campo-fila .campo { min-width: 120px; }

  .modal-form-check {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.84rem; color: var(--text); cursor: pointer;
    padding: 4px 0;
  }
  .modal-form-check input[type="checkbox"] {
    width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer;
  }

  .usuarios-acciones { display: flex; justify-content: flex-end; margin-bottom: 10px; }
  .usuarios-acciones .btn-ghost-min {
    border-radius: 9px; padding: 8px 14px;
    font-family: 'Inter', sans-serif; font-size: 0.79rem; font-weight: 600;
    cursor: pointer;
  }
  .pcm-periodo:last-of-type { border-bottom: none; }
  .pcm-periodo .pcm-p-nombre { font-weight: 600; color: var(--text); }
  .pcm-periodo .pcm-precio { display: flex; align-items: center; gap: 4px; }
  .pcm-periodo .pcm-precio span { color: var(--muted); font-size: 0.75rem; }

  .plan-card-cm input[type="text"], .plan-card-cm input[type="number"], .plan-card-cm select {
    border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px;
    font-family: 'Inter', sans-serif; font-size: 0.8rem; width: 100%; background: var(--white);
  }
  .plan-card-cm label.pcm-check { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--muted); white-space: nowrap; cursor: pointer; }
  .plan-card-cm .pcm-acciones { display: flex; gap: 5px; justify-content: flex-end; }
  .plan-card-cm button { border: none; border-radius: 7px; padding: 6px 9px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
  .plan-card-cm .btn-save { background: var(--accent); color: #fff; }
  .plan-card-cm .btn-del { background: #fee2e2; color: var(--expense); }
  .plan-card-cm .btn-ghost { background: transparent; color: var(--accent); border: 1px dashed var(--border); width: 100%; padding: 8px; }
  .plan-card-cm .btn-ghost:hover { border-color: var(--accent); background: var(--bg); }

  /* ── Agrupadores de funcionalidades ────────────────────────────────────
     Antes las doce funciones caían en una lista plana y costaba ubicarse.
     Ahora cada grupo lleva su banda de color, bien visible. */
  /* Catálogo administrable de funcionalidades */
  .func-grupo { margin-bottom: 16px; }
  .func-grupo:last-child { margin-bottom: 0; }
  .func-grupo-cab {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    background: var(--accent-light) !important;
    color: var(--accent-dark) !important;
    border: none !important;
    border-left: 3px solid var(--accent) !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 9px 14px !important;
    font-family: 'Inter', sans-serif !important;
    cursor: pointer; text-align: left;
    transition: filter .14s;
  }
  .func-grupo-cab:hover { filter: brightness(0.97); }
  .func-grupo-flecha { font-size: 0.72rem; transition: transform var(--transition); }
  .func-grupo.abierto .func-grupo-flecha { transform: rotate(180deg); }
  .func-grupo-icono { font-size: 1rem; }
  .func-grupo-nombre {
    flex: 1;
    font-size: 0.86rem; font-weight: 700;
    letter-spacing: 0;
  }
  .func-grupo-cuenta {
    background: var(--white); color: var(--accent-dark);
    border-radius: 999px; padding: 1px 9px;
    font-size: 0.72rem; font-weight: 700;
  }
  .func-grupo-items {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px;
    margin-top: 8px;
  }
  .func-grupo.abierto .func-grupo-items { display: grid; }
  .func-item {
    display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
    background: var(--white);
    border: 1px solid var(--border); border-radius: 11px;
    padding: 10px 12px;
    transition: border-color .15s;
  }
  .func-item:hover { border-color: #cbd5e1; }
  .func-item-nombre { font-size: 0.84rem; font-weight: 600; color: var(--text); }
  .func-item-ayuda { font-size: 0.73rem; color: var(--muted); margin-top: 2px; line-height: 1.35; }
  .func-item-tipo {
    background: var(--bg); color: var(--muted);
    border-radius: 999px; padding: 3px 10px;
    font-size: 0.68rem; font-weight: 700; white-space: nowrap;
  }
  .func-item-btn {
    background: transparent; border: none; border-radius: 8px;
    padding: 5px 6px; font-size: 0.82rem; cursor: pointer;
    opacity: 0; transition: opacity .15s, background .15s;
  }
  .func-item:hover .func-item-btn { opacity: .55; }
  .func-item-btn:hover { opacity: 1; background: var(--accent-light); }
  .func-item-del:hover { background: var(--expense-bg); }
  @media (hover: none) { .func-item-btn { opacity: .55; } }

  /* Edición en el sitio: la tarjeta se convierte en formulario */
  .func-item.editando {
    grid-template-columns: 1fr;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .func-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .func-edit input, .func-edit select {
    width: 100%; border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 10px; font-family: 'Inter', sans-serif; font-size: 0.82rem;
    color: var(--text); background: var(--white);
  }
  .func-edit input:first-child, .func-edit #fe-ayuda { grid-column: 1 / -1; }
  .func-edit-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
  .func-edit-btns button {
    border: none; border-radius: 8px; padding: 8px 14px;
    font-family: 'Inter', sans-serif; font-size: 0.79rem; font-weight: 600; cursor: pointer;
  }
  .func-edit-btns .btn-save { background: var(--accent); color: #fff; }
  .btn-ghost-min {
    background: var(--white) !important; color: var(--muted) !important;
    border: 1px solid var(--border) !important;
  }

  /* El interruptor de infinito, más grande y más fácil de acertar */
  .pcm-check.pcm-inf { gap: 6px; }
  .pcm-check.pcm-inf input[type="checkbox"] {
    width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent);
  }
  .pcm-check.pcm-inf b {
    font-size: 1.15rem; line-height: 1; color: var(--muted); font-weight: 700;
  }
  .pcm-check.pcm-inf input:checked ~ b { color: var(--accent); }

  /* Botón para borrar la funcionalidad desde la propia tarjeta del plan */
  .pcm-l-del {
    background: transparent !important; border: none;
    padding: 3px 5px !important; border-radius: 7px !important;
    font-size: 0.76rem !important; cursor: pointer;
    opacity: 0; transition: opacity .15s, background .15s;
  }
  .pcm-limite:hover .pcm-l-del { opacity: .5; }
  .pcm-l-del:hover { opacity: 1 !important; background: var(--expense-bg) !important; }
  @media (hover: none) { .pcm-l-del { opacity: .5; } }

  /* ── Vigencia del plan ──────────────────────────────────────────────────
     Va antes de las funcionalidades y con su propio color: no es una función
     que se active o desactive, es cuánto dura el plan. */
  .pcm-vigencia {
    border: 1px solid rgba(13,148,136,0.25);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 16px;
  }
  .pcm-vigencia-cab {
    display: flex; align-items: center; gap: 8px;
    background: #ccfbf1; color: #0f766e;
    border-left: 3px solid var(--savings, #0d9488);
    padding: 8px 13px;
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0;
  }
  .pcm-vigencia-cab span { font-size: 0.9rem; }
  .pcm-vigencia-cuerpo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 11px 13px;
    background: var(--white);
  }
  .pcm-vigencia-txt { font-size: 0.82rem; color: var(--text); }

  .pcm-limite { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 0.8rem; border-bottom: 1px dashed var(--border); }

  /* Etiqueta de familia al costado del nombre: se sabe de qué tipo es cada
     funcionalidad sin partir la lista en secciones. */
  .pcm-l-grupo {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px; padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap; vertical-align: middle;
    background: var(--accent-light); color: var(--accent-dark);
  }
  .pcm-l-grupo.g-registro  { background: #e0e7ff; color: #3730a3; }
  .pcm-l-grupo.g-ia        { background: #f3e8ff; color: #6b21a8; }
  .pcm-l-grupo.g-objetivos { background: #ccfbf1; color: #0f766e; }
  .pcm-l-grupo.g-reportes  { background: #dbeafe; color: #1e40af; }
  .pcm-l-grupo.g-soporte   { background: #fef3c7; color: #92400e; }
  @media (max-width: 520px) { .pcm-l-grupo { display: none; } }
  .pcm-limite:last-of-type { border-bottom: none; }
  .pcm-limite .pcm-l-nombre { color: var(--text); }
  .pcm-limite .pcm-l-num { display: flex; align-items: center; gap: 8px; }
  .pcm-limite .pcm-l-num input[type="number"] { width: 74px; text-align: right; }
  .pcm-limite .pcm-l-num input[type="number"]:disabled { background: var(--bg); color: var(--muted); }
  .pcm-limite select { width: auto; min-width: 128px; }

  /* El orden ya no se escribe: se arrastra. La fila lleva su agarradera y se
     marca mientras se mueve, igual que las cajas de Usuarios. */
  .pcm-carac {
    display: grid; grid-template-columns: auto 1fr auto auto;
    gap: 8px; align-items: center;
    padding: 6px 4px; font-size: 0.8rem;
    border-radius: 9px;
    transition: background .14s, opacity .14s, box-shadow .14s;
  }
  .pcm-carac:hover { background: var(--bg); }
  .pcm-carac.excluida input[type="text"] { text-decoration: line-through; color: var(--muted); }
  .carac-agarre {
    color: #cbd5e1; font-size: 1rem; letter-spacing: -2px;
    cursor: grab; flex-shrink: 0; user-select: none;
  }
  .carac-agarre:active { cursor: grabbing; }
  .pcm-carac:hover .carac-agarre { color: var(--muted); }
  .pcm-carac.arrastrando { opacity: .4; }
  .pcm-carac.destino { box-shadow: 0 -2px 0 var(--accent); }
  .caracs-lista { margin-bottom: 2px; }

  /* ═══ AVISO FLOTANTE ═══
     Confirmación breve abajo al centro. No interrumpe ni pide un clic para
     cerrarse: aparece, se lee y se va sola. */
  .aviso-flotante {
    position: fixed;
    left: 50%; bottom: 28px;
    transform: translate(-50%, 14px);
    z-index: 5000;
    background: #111827; color: #fff;
    padding: 11px 22px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem; font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 8px 26px rgba(15,23,42,0.28);
    opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .aviso-flotante.visible {
    opacity: 1; visibility: visible;
    transform: translate(-50%, 0);
  }
  .aviso-flotante.ok { background: #111827; }
  .aviso-flotante.borrado { background: var(--expense); }
  .aviso-flotante::before {
    content: '✓'; margin-right: 8px; font-weight: 700;
  }
  .aviso-flotante.borrado::before { content: '🗑'; }

  .pcm-alta { display: none; gap: 8px; margin-top: 8px; }
  .pcm-alta.abierta { display: grid; }

  /* Alta de varias funcionalidades a la vez */
  .alta-multi {
    display: none;
    margin-top: 8px;
    border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden;
  }
  .alta-multi.abierta { display: block; }
  .alta-multi-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .alta-multi-cuenta { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
  .alta-multi-lista { max-height: 260px; overflow-y: auto; padding: 6px; }
  .alta-multi-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 9px;
    font-size: 0.82rem; cursor: pointer;
    transition: background .14s;
  }
  .alta-multi-item:hover { background: var(--accent-light); }
  .alta-multi-item input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
  }
  .alta-multi-nombre { flex: 1; color: var(--text); }
  .alta-multi-item .pcm-l-grupo { margin-left: 0; }
  .alta-multi-btn {
    width: 100%; border-radius: 0 !important;
    padding: 11px !important; font-size: 0.83rem !important;
  }

  @media (max-width: 560px) {
    .pcm-periodo { grid-template-columns: 1fr 1fr; }
    .pcm-carac { grid-template-columns: auto 1fr; }
  }

  /* ═══ OBJETIVOS ═══ */
  .cm-form select { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text); background: var(--white); cursor: pointer; }
  .objetivos-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
  .objetivos-header .table-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
  .btn-nuevo-objetivo { display: flex; align-items: center; gap: 6px; background: var(--accent); color: white; border: none; border-radius: 8px; padding: 8px 16px; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
  .btn-nuevo-objetivo:hover { background: var(--accent-dark); }
  .objetivos-lista { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
  .obj-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
  .obj-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .obj-nombre { font-size: 0.9rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .obj-meta { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }
  .obj-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .obj-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; font-size: 0.85rem; cursor: pointer; transition: all 0.15s; }
  .obj-btn:hover { background: var(--border); }
  .obj-btn-del:hover { background: var(--expense-bg); border-color: rgba(220,38,38,0.3); }
  .obj-bottom { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.78rem; color: var(--muted); }
  .badge-inactivo { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 0.65rem; font-weight: 600; background: var(--bg); color: var(--muted); }

  /* ── Control Maestro: cajas plegables y reordenables ──────────────────── */

  .caja {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
  }
  .caja:hover { border-color: #cbd5e1; }
  .caja.arrastrando { opacity: .4; }
  .caja.destino { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

  .caja-cab {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
  }
  .caja-cab:hover { background: var(--bg); }
  .caja-cab h4 {
    margin: 0; flex: 1;
    font-size: 0.95rem; font-weight: 700; color: var(--text);
  }

  .caja-agarre {
    color: #cbd5e1; font-size: 1rem; cursor: grab;
    letter-spacing: -2px; flex-shrink: 0;
  }
  .caja-agarre:active { cursor: grabbing; }
  .caja:hover .caja-agarre { color: var(--muted); }

  .caja-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

  .caja-cuenta {
    background: var(--bg); color: var(--muted);
    border-radius: 999px; padding: 2px 11px;
    font-size: 0.78rem; font-weight: 700; min-width: 30px; text-align: center;
  }

  .caja-flecha {
    color: var(--muted); font-size: 0.8rem;
    transition: transform var(--transition); flex-shrink: 0;
  }
  .caja-flecha.abierta { transform: rotate(180deg); }

  .caja-cuerpo { display: none; padding: 0 16px 16px; }
  .caja-cuerpo.abierta { display: block; }

  .caja-nota {
    font-size: 0.79rem; color: var(--muted);
    margin: 0 0 12px; line-height: 1.5;
  }

  .caja-vacia {
    text-align: center; color: var(--muted);
    font-size: 0.82rem; padding: 20px 10px;
  }

  /* Dentro de un apartado la caja pierde la cabecera: no hay nada que plegar
     ni que reordenar cuando solo se ve una. */
  .caja.caja-sola { border: none; box-shadow: none; background: transparent; margin-bottom: 0; }
  .caja.caja-sola:hover { border: none; }
  .caja.caja-sola .caja-cab { display: none; }
  .caja.caja-sola .caja-cuerpo { padding: 0; }

  /* Buscador que encabeza la vista de Usuarios */
  .cm-buscador {
    display: flex; align-items: center; gap: 9px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 0 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
  }
  .cm-buscador:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .cm-buscador-icono { font-size: 0.9rem; opacity: .55; flex-shrink: 0; }
  .cm-buscador input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 12px 0;
    font-family: 'Inter', sans-serif; font-size: 0.86rem; color: var(--text);
  }
  .cm-buscador input::placeholder { color: #9ca3af; }

  .cm-caja-alta { margin-bottom: 14px; }

  /* Código propio de cada administrador */
  .codigo-admin {
    font-family: 'Inter', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 110px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.8rem;
  }

  /* Asa para cambiar el ancho de la barra lateral, solo en escritorio */
  .asa-ancho { display: none; }
  @media (min-width: 769px) {
    .asa-ancho {
      display: block; position: fixed; top: 0; bottom: 0;
      width: 6px; margin-left: -3px; z-index: 101;
      cursor: col-resize; background: transparent;
      transition: background .15s;
    }
    .asa-ancho:hover, .asa-ancho.activa { background: var(--accent-light); }
  }
  body.ajustando-ancho { cursor: col-resize; user-select: none; }

  /* ── Menú del Control Maestro: grupos y sub-opciones ──────────────────── */

  .nav-grupo { position: relative; transition: opacity .15s; }
  .nav-grupo.arrastrando { opacity: .35; }
  .nav-grupo.destino > .nav-item { box-shadow: inset 3px 0 0 var(--accent); }

  .nav-item { position: relative; }
  .nav-caret {
    margin-left: auto; font-size: 0.7rem; color: var(--muted);
    padding: 2px 4px; border-radius: 4px;
    transition: transform var(--transition), background .15s;
  }
  .nav-caret:hover { background: var(--border); }
  .nav-caret.abierto { transform: rotate(180deg); }

  .nav-sub { display: none; margin: 2px 0 6px; }
  .nav-sub.abierto { display: block; }

  .nav-subitem {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 7px 14px 7px 42px;
    border: none; background: none; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.79rem; font-weight: 500;
    color: var(--muted); border-radius: 8px;
    transition: background .15s, color .15s, opacity .15s;
    position: relative;
  }
  .nav-subitem::before {
    content: ''; position: absolute; left: 26px; top: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    background: #cbd5e1; transform: translateY(-50%);
  }
  .nav-subitem:hover { background: var(--sidebar-hover); color: var(--text); }
  .nav-subitem.active { background: var(--accent-light); color: var(--accent-dark); font-weight: 600; }
  .nav-subitem.active::before { background: var(--accent); }
  .nav-subitem.arrastrando { opacity: .35; }
  .nav-subitem.destino { box-shadow: inset 3px 0 0 var(--accent); }

  .sub-cuenta {
    margin-left: auto; background: var(--bg); color: var(--muted);
    border-radius: 999px; padding: 1px 8px;
    font-size: 0.7rem; font-weight: 700;
  }
  .nav-subitem.active .sub-cuenta { background: var(--white); color: var(--accent-dark); }

  /* ═══ FILTROS DE LA TABLA DE USUARIOS ═══ */
  .us-filtros {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 12px; padding: 9px 11px; margin-bottom: 14px;
  }
  .us-buscador {
    display: flex; align-items: center; gap: 7px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 9px; padding: 5px 10px;
    flex: 1 1 220px; min-width: 180px;
  }
  .us-buscador span { font-size: 0.8rem; opacity: .6; }
  .us-buscador input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: none;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text);
  }
  .us-buscador input::placeholder { color: var(--muted); }

  .us-filtros select {
    border: 1px solid var(--border); border-radius: 9px;
    padding: 6px 30px 6px 11px;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text);
    background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 7px center;
    background-size: 15px;
    -webkit-appearance: none; appearance: none;
    cursor: pointer; outline: none;
  }
  .us-filtros select:focus { border-color: var(--accent); }
  .us-filtros .btn-limpiar { margin-left: auto; }

  /* ═══ INTERRUPTOR DE TEMA ═══ */
  .tema-btn {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: none; border: 0; cursor: pointer;
    padding: 9px 12px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500;
    color: var(--muted); text-align: left;
    transition: background var(--transition), color var(--transition);
  }
  .tema-btn:hover { background: var(--sidebar-hover); color: var(--accent-dark); }
  .tema-icono { font-size: 0.95rem; width: 18px; text-align: center; }
  .tema-txt { flex: 1; }
  .tema-riel {
    position: relative; display: inline-block; flex-shrink: 0;
    width: 36px; height: 20px; border-radius: 999px;
    background: #cbd5e1; transition: background var(--transition);
  }
  .tema-bola {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3);
    transition: transform var(--transition);
  }
  .tema-btn.oscuro .tema-riel { background: var(--accent); }
  .tema-btn.oscuro .tema-bola { transform: translateX(16px); }

  /* ═══ TEMA OSCURO ═══
     Una paleta azul-noche completa: fondo, tarjetas, barra lateral y barra
     superior salen de las mismas variables, así que basta con cambiarlas.
     Debajo solo quedan los pocos sitios que tenían un color escrito a mano. */
  html[data-tema="oscuro"] {
    --bg: #0b1220;
    --white: #151d2e;
    --sidebar: #0e1626;
    --sidebar-hover: #1c2740;
    --border: #273347;
    --text: #e6edf7;
    --muted: #93a3bb;
    --accent: #7c85f7;
    --accent-dark: #a5b0ff;
    --accent-2: #a5b4fc;
    --accent-light: #232d47;
    --income: #34d399;
    --income-bg: #10352a;
    --expense: #f87171;
    --expense-bg: #3a1c20;
    --savings: #2dd4bf;
    --savings-bg: #103b38;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.55), 0 1px 10px rgba(0,0,0,0.35);
    --shadow: 0 6px 24px rgba(0,0,0,0.6);
    color-scheme: dark;
  }

  html[data-tema="oscuro"] body { background: var(--bg); color: var(--text); }
  html[data-tema="oscuro"] .tema-riel,
  html[data-tema="oscuro"] .comp-switch-riel { background: #3b4a63; }
  html[data-tema="oscuro"] .comp-switch-bola,
  html[data-tema="oscuro"] .tema-bola { background: #e6edf7; }

  /* Superficies que nacieron blancas */
  html[data-tema="oscuro"] .cm-card,
  html[data-tema="oscuro"] .caja,
  html[data-tema="oscuro"] .modal,
  html[data-tema="oscuro"] .ui-modal,
  html[data-tema="oscuro"] .card,
  html[data-tema="oscuro"] .kpi,
  html[data-tema="oscuro"] .plan-card-cm,
  html[data-tema="oscuro"] .comp-fila,
  html[data-tema="oscuro"] .msg-caja,
  html[data-tema="oscuro"] .msg-emojis,
  html[data-tema="oscuro"] .pcm-vigencia-cuerpo,
  html[data-tema="oscuro"] .fdd-menu,
  html[data-tema="oscuro"] .fdd-btn,
  html[data-tema="oscuro"] .cal-panel,
  html[data-tema="oscuro"] .func-item,
  html[data-tema="oscuro"] .cm-row {
    background-color: var(--white);
    color: var(--text);
  }

  /* Campos: el navegador los pinta blancos si no se le dice otra cosa */
  html[data-tema="oscuro"] input,
  html[data-tema="oscuro"] textarea,
  html[data-tema="oscuro"] select {
    background-color: var(--white);
    color: var(--text);
    border-color: var(--border);
  }
  html[data-tema="oscuro"] input::placeholder,
  html[data-tema="oscuro"] textarea::placeholder { color: #6b7c96; }

  /* Botones sobrios sobre fondo oscuro */
  html[data-tema="oscuro"] .logout-btn,
  html[data-tema="oscuro"] .btn-ghost,
  html[data-tema="oscuro"] .btn-ghost-min {
    background: transparent; color: var(--muted); border-color: var(--border);
  }
  html[data-tema="oscuro"] .logout-btn:hover,
  html[data-tema="oscuro"] .btn-ghost:hover { background: var(--sidebar-hover); color: var(--text); }
  html[data-tema="oscuro"] .nav-item,
  html[data-tema="oscuro"] .nav-subitem { color: var(--muted); }
  html[data-tema="oscuro"] .nav-item:hover,
  html[data-tema="oscuro"] .nav-subitem:hover { background: var(--sidebar-hover); color: var(--text); }
  html[data-tema="oscuro"] .nav-item.active { background: var(--sidebar-hover); color: var(--accent-dark); }
  html[data-tema="oscuro"] .sidebar-brand,
  html[data-tema="oscuro"] .topbar-title,
  html[data-tema="oscuro"] .main-title { color: var(--text); }

  /* Tablas y listas */
  html[data-tema="oscuro"] th { background: var(--bg); color: var(--muted); border-color: var(--border); }
  html[data-tema="oscuro"] td { border-color: var(--border); }
  html[data-tema="oscuro"] .tabla-us tbody tr:hover td,
  html[data-tema="oscuro"] .comp-fila:hover { background: rgba(148,163,184,.08); }
  html[data-tema="oscuro"] .caja-cab:hover { background: var(--sidebar-hover); }
  html[data-tema="oscuro"] .caja-vacia,
  html[data-tema="oscuro"] .empty-state { color: var(--muted); }

  /* Etiquetas y chips que nacieron con fondos pastel */
  html[data-tema="oscuro"] .pcm-chip.off,
  html[data-tema="oscuro"] .us-estado.ina,
  html[data-tema="oscuro"] .badge-inactivo,
  html[data-tema="oscuro"] .comp-tipo { background: #1e2940; color: var(--muted); }
  html[data-tema="oscuro"] .pcm-chip.free,
  html[data-tema="oscuro"] .us-estado.act { background: #10352a; color: #4ade80; }
  html[data-tema="oscuro"] .pcm-l-grupo.g-registro  { background: #232d47; color: #a5b4fc; }
  html[data-tema="oscuro"] .pcm-l-grupo.g-ia        { background: #2f2143; color: #d8b4fe; }
  html[data-tema="oscuro"] .pcm-l-grupo.g-objetivos { background: #103b38; color: #5eead4; }
  html[data-tema="oscuro"] .pcm-l-grupo.g-reportes  { background: #1b2b4d; color: #93c5fd; }
  html[data-tema="oscuro"] .pcm-vigencia-cab { background: #103b38; color: #5eead4; }
  html[data-tema="oscuro"] .func-grupo-cuenta { background: #232d47; color: #a5b4fc; }
  html[data-tema="oscuro"] .pcm-pop { background: var(--white); }
  html[data-tema="oscuro"] .us-vacio { color: #45536b; }
  html[data-tema="oscuro"] .aviso-flotante { background: #e6edf7; color: #0b1220; }
  html[data-tema="oscuro"] .modal-overlay { background: rgba(2, 6, 15, .72); }

  /* ═══ CAMPO DEL MENSAJE DE WHATSAPP ═══ */
  .msg-caja {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
  }
  .msg-caja:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
  }
  .msg-caja textarea {
    display: block; width: 100%;
    border: 0; outline: none; background: none; resize: none; overflow-y: auto;
    padding: 11px 13px 4px;
    font-family: 'Inter', sans-serif; font-size: 0.86rem; line-height: 1.5;
    color: var(--text);
  }
  .msg-caja textarea::placeholder { color: #9ca3af; }
  .msg-pie {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 7px 9px;
  }
  .msg-emoji-btn {
    background: none; border: 0; cursor: pointer;
    width: 28px; height: 28px; border-radius: 8px;
    font-size: 1.05rem; line-height: 1; color: var(--muted);
    transition: background var(--transition), color var(--transition);
  }
  .msg-emoji-btn:hover { background: var(--accent-light); color: var(--accent-dark); }
  .msg-cuenta { margin-left: auto; font-size: 0.72rem; color: var(--muted); }

  .msg-emojis {
    display: none;
    position: absolute; z-index: 30;
    left: 6px; right: 6px; top: calc(100% + 6px);
    background: var(--white);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 8px;
    grid-template-columns: repeat(10, 1fr); gap: 2px;
    max-height: 190px; overflow-y: auto;
  }
  .msg-emojis.abierta { display: grid; }
  .msg-emoji {
    background: none; border: 0; cursor: pointer;
    padding: 4px 0; border-radius: 7px;
    font-size: 1.05rem; line-height: 1.2;
    transition: background var(--transition);
  }
  .msg-emoji:hover { background: var(--accent-light); }

  @media (max-width: 640px) {
    .msg-emojis { grid-template-columns: repeat(7, 1fr); }
  }

  /* Edición en la propia fila de la tabla de usuarios */
  .us-input {
    width: 100%; min-width: 110px;
    padding: 5px 9px;
    border: 1px solid var(--border); border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--text);
    background: var(--white); outline: none;
  }
  .us-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
  .tabla-us tr.us-editando td { background: var(--accent-light); }
  .us-acc { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }

  /* Ficha de solo lectura en la ventana de editar */
  .ed-ficha {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
  }
  .ed-ficha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ed-ficha-etq { font-size: 0.7rem; font-weight: 600; color: var(--muted); }
  .ed-ficha-val {
    font-size: 0.86rem; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .us-btn {
    background: none; border: 0; cursor: pointer;
    font-size: 0.85rem; line-height: 1;
    padding: 4px 6px; border-radius: 7px; color: var(--muted);
    transition: background var(--transition);
  }
  .us-btn:hover { background: rgba(99,102,241,.14); }
  .us-guardar { white-space: nowrap; }

  /* Los filtros usan el desplegable de la aplicación */
  .us-filtros .fdd-btn { padding: 6px 11px; border-radius: 9px; font-size: 0.82rem; }
  .us-filtros .fdd { min-width: 150px; }
  .tabla-us .fdd-btn { padding: 5px 9px; border-radius: 8px; font-size: 0.8rem; }
  .tabla-us .fdd { min-width: 120px; }

  /* El recuadro entero invita a plegarse */
  .caja { cursor: pointer; }
  .caja .caja-cuerpo { cursor: default; }

  /* ═══ QUE NADA SE MONTE SOBRE NADA ═══
     Reglas de seguridad: los hijos de una rejilla no encogen por debajo de su
     contenido salvo que se les diga, y ahí es cuando los textos se salen de su
     recuadro y se pisan entre sí. */
  .ur-item, .pcm-limite, .pcm-periodo, .comp-fila, .us-filtros,
  .caja-barra, .pcm-boton-fila, .campo-fila > .campo, .alta-multi-item {
    min-width: 0;
  }
  .ur-etq, .ur-sub, .comp-nombre, .pcm-l-nombre, .func-item-nombre,
  .func-item-ayuda, .caja-nota, .comp-ayuda {
    overflow-wrap: anywhere;
  }
  .pcm-l-nombre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .caja-cab h4 { min-width: 0; overflow-wrap: anywhere; }
  .cm-card, .caja, .modal { overflow-wrap: break-word; }

  /* ═══ CATEGORÍAS ═══ */
  .cat-barra {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .cat-barra .btn-primario { flex: 0 0 auto; }
  .cat-barra .cm-msg { margin: 0; }

  .cat-lista { display: block; }
  .cat-fila {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    gap: 10px; align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
  }
  .cat-fila:last-child { border-bottom: 0; }
  .cat-emoji { font-size: 1.25rem; text-align: center; line-height: 1; }
  .cat-nombre {
    width: 100%; padding: 7px 11px;
    border: 1px solid var(--border); border-radius: 9px;
    font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--text);
    background: var(--white); outline: none;
  }
  .cat-nombre:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

  /* Activa o inactiva: un solo botón que dice en qué estado está */
  .cat-estado {
    min-width: 84px; text-align: center;
    padding: 5px 12px; border-radius: 999px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 700;
    border: 1px solid transparent;
    transition: filter var(--transition);
  }
  .cat-estado:hover { filter: brightness(0.95); }
  .cat-estado.on  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
  .cat-estado.off { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

  .cat-acciones { display: inline-flex; gap: 6px; }
  .cat-btn {
    padding: 6px 13px; border-radius: 9px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 600;
    border: 1px solid var(--border); background: var(--white); color: var(--text);
    transition: all var(--transition);
  }
  .cat-btn.guardar:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .cat-btn.borrar { color: var(--expense); }
  .cat-btn.borrar:hover { background: var(--expense); border-color: var(--expense); color: #fff; }

  /* Campo de un solo emoji, con su selector al lado */
  .msg-caja.emoji-solo { display: flex; align-items: center; gap: 2px; padding-right: 4px; }
  .msg-caja.emoji-solo input {
    width: 100%; min-width: 0; border: 0; outline: none; background: none;
    padding: 9px 4px 9px 11px; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 1.15rem; color: var(--text);
  }
  .msg-caja.emoji-solo .msg-emojis { left: 0; right: auto; width: 260px; }

  @media (max-width: 640px) {
    .cat-fila { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px; }
    .cat-estado, .cat-acciones { grid-column: 2; justify-self: start; }
  }

  /* En oscuro, la barra de búsqueda no lleva recuadro interno sombreado */
  html[data-tema="oscuro"] .us-buscador {
    background: transparent;
    border-color: var(--border);
  }
  html[data-tema="oscuro"] .us-buscador input { background: transparent; }
  html[data-tema="oscuro"] .cat-estado.on  { background: #10352a; color: #4ade80; border-color: #1c5741; }
  html[data-tema="oscuro"] .cat-estado.off { background: #3a1c20; color: #fca5a5; border-color: #5c2a2f; }
  html[data-tema="oscuro"] .cat-btn { background: var(--white); }

  /* Filas de medios de pago: se arrastran para ordenarlas */
  .medio-fila { cursor: default; }
  .medio-fila .carac-agarre { cursor: grab; }
  .medio-fila.arrastrando { opacity: .45; }
  .medio-fila.destino { background: var(--accent-light); }

  /* Nota corta debajo de un campo del formulario */
  .campo-nota { font-size: 0.74rem; color: var(--muted); line-height: 1.4; }

  /* Aviso informativo dentro de un formulario: explica algo que el usuario
     no tiene que rellenar. No es un error ni una advertencia, así que va en
     el color de acento y no en rojo. */
  .campo-aviso {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--accent-light);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.5;
  }

  /* Días que le quedan al plan del usuario */
  .us-vigencia {
    display: inline-block; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    font-size: 0.73rem; font-weight: 600;
    background: var(--bg); color: var(--muted);
  }
  .us-vigencia.ok    { background: #eef2ff; color: #4338ca; }
  .us-vigencia.aviso { background: #fef3c7; color: #b45309; }
  .us-vigencia.mal   { background: #fee2e2; color: #b91c1c; }
  html[data-tema="oscuro"] .us-vigencia       { background: #1e2940; color: var(--muted); }
  html[data-tema="oscuro"] .us-vigencia.ok    { background: #232d47; color: #a5b4fc; }
  html[data-tema="oscuro"] .us-vigencia.aviso { background: #3b2f14; color: #fbbf24; }
  html[data-tema="oscuro"] .us-vigencia.mal   { background: #3a1c20; color: #fca5a5; }

  /* ═══════════════════════════════════════════════════════════════════════
     FINANZAS DE ALVA (Control Maestro)
     ═══════════════════════════════════════════════════════════════════════ */
  .fin-filtros {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    margin-bottom: 16px;
  }
  .fin-f { display: flex; flex-direction: column; gap: 5px; width: 170px; }
  .fin-f label {
    font-size: 0.65rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  /* El botón de crear va al final y en color lleno: de todo lo que hay en esa
     barra, es lo único que añade algo. Los filtros solo recortan. */
  .fin-nuevo {
    margin-left: auto;
    background: var(--accent); color: #fff;
    border: none; border-radius: 10px;
    padding: 9px 18px;
    font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: background .15s ease;
  }
  .fin-nuevo:hover { background: var(--accent-dark); }

  .fin-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-bottom: 16px;
  }
  .fin-kpi {
    background: var(--white); border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 14px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .fin-kpi.ok  { border-left-color: var(--income); }
  .fin-kpi.mal { border-left-color: var(--expense); }
  .fin-kpi-etq {
    font-size: 0.66rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .fin-kpi-val { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
  .fin-kpi.ok .fin-kpi-val  { color: var(--income); }
  .fin-kpi.mal .fin-kpi-val { color: var(--expense); }
  .fin-kpi-pie { font-size: 0.74rem; color: var(--muted); }

  .fin-graficos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
  .fin-t { font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0 0 2px; }
  .fin-sub { font-size: 0.78rem; color: var(--muted); margin: 0 0 12px; }
  .fin-lienzo { height: 260px; position: relative; }

  .fin-cab-tabla {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  }
  .fin-cuenta {
    background: var(--bg); color: var(--muted);
    border-radius: 999px; padding: 2px 11px;
    font-size: 0.76rem; font-weight: 700;
  }
  .fin-chip {
    display: inline-block; border-radius: 999px;
    padding: 2px 10px; font-size: 0.7rem; font-weight: 700;
  }
  .fin-chip.ingreso { background: var(--income-bg); color: var(--income); }
  .fin-chip.egreso  { background: var(--expense-bg); color: var(--expense); }
  .fin-monto { font-weight: 700; font-variant-numeric: tabular-nums; }
  .fin-monto.ingreso { color: var(--income); }
  .fin-monto.egreso  { color: var(--expense); }

  @media (max-width: 900px) {
    .fin-graficos { grid-template-columns: 1fr; }
    .fin-kpis { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .fin-f { width: 100%; }
    .fin-nuevo { margin-left: 0; width: 100%; }
  }

  /* ═══ RECARGAR TODO (pie de la barra lateral) ═══ */
  .recargar-btn {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: none; border: none;
    padding: 10px 12px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 0.84rem; font-weight: 600;
    color: var(--muted); cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .recargar-btn:hover { background: var(--sidebar-hover); color: var(--accent-dark); }
  .recargar-btn:disabled { cursor: progress; opacity: .7; }
  .recargar-ico { font-size: 1rem; line-height: 1; display: inline-block; }
  .recargar-btn.girando .recargar-ico { animation: recargar-giro .8s linear infinite; }
  @keyframes recargar-giro { to { transform: rotate(360deg); } }

  /* Sección del menú sin rótulo: se le quita el hueco que dejaba el título. */
  .sidebar-section.sin-rotulo { padding-top: 6px; }

  /* ═══ SESIONES ABIERTAS ═══
     Aquí vivían .ses-cab y .ses-ayuda, la cabecera con el título y el párrafo
     explicativo. Se retiraron: el subtítulo de la pantalla ya dice qué es
     esto y el texto repetía lo que se ve en la propia lista. */
  .ses-lista {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .ses-fila {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px; align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--white);
  }
  .ses-fila:last-child { border-bottom: 0; }
  .ses-fila.actual { background: var(--accent-light); }
  .ses-icono { font-size: 1.3rem; text-align: center; line-height: 1; }
  .ses-nombre {
    font-size: 0.88rem; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .ses-detalle { font-size: 0.76rem; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
  .ses-chip {
    background: var(--accent); color: #fff;
    border-radius: 999px; padding: 2px 9px;
    font-size: 0.68rem; font-weight: 700;
  }
  @media (max-width: 560px) {
    .ses-fila { grid-template-columns: 30px minmax(0, 1fr); }
    .ses-fila .cat-btn { grid-column: 2; justify-self: start; }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     MÓVIL · REPASO DE TODO LO NUEVO
     El criterio no es "otra aplicación más simple", sino la misma de siempre
     con el ancho que hay. Lo que cambia es cómo se reparte el espacio, no lo
     que se puede hacer.
     ═══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    /* La cabecera se parte en dos líneas: el título arriba y los controles
       debajo, en vez de apretarse los tres en una fila. */
    .main-header { flex-wrap: wrap; row-gap: 10px; }
    .btn-actualizar { margin-left: 0; }
    .last-update { order: 3; }

    /* Los filtros de objetivos sí ocupan todo el ancho aquí: con 360 px no
       hay sitio para ponerlos en fila y de otro modo quedarían diminutos. */
    #vista-objetivos .filter-group { width: 100%; }

    /* Las tablas de usuarios vuelven a poder desplazarse: en un teléfono no
       caben once columnas por mucho que se recorten, y es preferible arrastrar
       a lo ancho que leer celdas de veinte píxeles. Se respeta el ancho que
       cada quien haya fijado arrastrando. */
    .tabla-us { table-layout: auto; }
    .tabla-us td { white-space: nowrap; }
    .tabla-us-scroll { -webkit-overflow-scrolling: touch; }

    /* El tirador de columnas se esconde: con el dedo no se acierta, y el
       arrastre lateral de la tabla se lo comería. */
    .col-tirador { display: none; }

    /* El desplegable de estado deja de tener tope de ancho para que no quede
       un botón minúsculo perdido en la celda. */
    .us-estado-sel { max-width: none; min-width: 130px; }

    /* El botón de borrar seleccionados necesita ser cómodo de pulsar. */
    .btn-delete { padding: 9px 14px; font-size: 0.78rem; }

    /* Botón de probar gratis y su nota, en la web pública. */
    .btn-prueba { padding: 12px 16px; }
    .prueba-nota { font-size: 0.75rem; }
  }

  @media (max-width: 480px) {
    /* La ficha del usuario pasa de tres datos en fila a uno debajo de otro:
       "Estado actual" con su chip no cabe al lado de los otros dos. */
    .ed-ficha { grid-template-columns: 1fr; gap: 10px; }

    /* Las ventanas emergentes ganan aire: pegadas a los bordes se leen mal
       y los botones quedan al filo de la pantalla. */
    .modal { width: calc(100vw - 24px); }
    .modal-btns { flex-wrap: wrap; }
    .modal-btns button { flex: 1 1 140px; }

    /* Dos campos por fila no entran; se apilan. */
    .campo-fila { flex-direction: column; align-items: stretch; }
    .campo-fila > .campo { max-width: none !important; }
  }