/* ═══════════════════════════════════════════════════════════════
   Finclever Panel · estilos globales
   Extraído del bloque <style> inline de index.html (arquitectura:
   separación presentación / estructura). Render idéntico.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --navy:#0f1923;--navy-2:#1a2838;--gold:#c9a84c;--gold-dark:#a08530;
  --bg:#ffffff;--bg-alt:#fafafa;
  --line:#e8e8e8;--line-soft:#f0f0f0;
  /* Scale de texto · text-5 subido a #737373 (5.7:1 sobre blanco) para
     cumplir WCAG AA. Antes era #b0b0b0 (2.6:1 — fallaba). */
  --text:#1a1a1a;--text-2:#4a4a4a;--text-3:#6a7280;--text-4:#8a8a8a;--text-5:#737373;
  --green:#0d7c4a;--green-bg:#e0f2ed;--green-text:#14644a;
  --blue:#1a5091;--blue-bg:#dde8f5;--blue-text:#1a5091;
  --amber:#b7791f;--amber-bg:#fef9e7;--amber-text:#854f0b;
  --red:#c44536;--red-bg:#fbeae8;--red-text:#791f1f;
  --r:5px;--r-md:6px;--r-lg:8px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  /* Shell: barra superior + navegación lateral (sidebar) */
  --topbar-h:44px;
  --sidebar-w:232px;
  --sidebar-w-collapsed:64px;

  /* Z-INDEX SCALE · documenta capas. Toda nueva capa debe usar uno de estos
     o agregarse aquí. Los nombres reflejan jerarquía visual. */
  --z-base:1;          /* fondo de UI: timeline-dot, hd sticky de modal/drawer */
  --z-sticky:5;        /* thead sticky en tablas */
  --z-topbar:40;       /* barra superior */
  --z-menu:50;         /* user menu desplegable */
  --z-drawer-bg:150;   /* backdrop del drawer derecho (cliente) */
  --z-drawer:151;      /* panel del drawer derecho */
  --z-nav-bg:155;      /* backdrop del nav drawer izquierdo (mobile) */
  --z-nav:160;         /* panel del nav drawer izquierdo */
  --z-modal:200;       /* modales estándar */
  --z-modal-on-modal:250; /* modales encima de otro modal (PDFs huérfanos) */
  --z-modal-top:260;   /* modales encima de los anteriores (crear usuario) */
  --z-toast:300;       /* toasts no bloquean modales */
  --z-loader:9999;     /* pantalla de carga inicial */

  /* ANIMATION TOKENS · duraciones y easing unificados (ui-ux-pro-max P7) */
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:400ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);  /* entrar suave */
  --ease-in:cubic-bezier(0.4,0,1,1);      /* salir rápido */
  --ease-std:cubic-bezier(0.4,0,0.2,1);   /* propósito general */
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);background:var(--bg-alt);color:var(--text);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;}
input,select,textarea,button{font-family:inherit;}
.tn{font-variant-numeric:tabular-nums;}

#loading{position:fixed;inset:0;background:var(--navy);display:flex;align-items:center;justify-content:center;z-index:var(--z-loader);transition:opacity var(--dur-base) var(--ease-out);}
#loading .loading-content{display:flex;flex-direction:column;align-items:center;gap:14px;}
#loading img{width:52px;height:52px;border-radius:10px;animation:pulse 1.5s ease-in-out infinite;}
#loading .loading-text{color:rgba(255,255,255,0.7);font-size:12px;letter-spacing:0.5px;font-weight:500;}
@media (prefers-reduced-motion: reduce){#loading img{animation:none;opacity:0.8;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
#loading.hide{opacity:0;pointer-events:none;}

#auth{display:none;min-height:100dvh;background:var(--navy);align-items:center;justify-content:center;padding:1rem;}
.auth-card{background:#fff;border-radius:10px;padding:2rem 1.75rem;width:100%;max-width:360px;text-align:center;}
.auth-card img{width:48px;height:48px;border-radius:8px;margin-bottom:1rem;}
.auth-card h1{font-size:18px;font-weight:600;color:var(--navy);}
.auth-card p{font-size:12px;color:var(--text-3);margin-bottom:1.5rem;}
.auth-card input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;margin-bottom:8px;outline:none;}
.auth-card input:focus{border-color:var(--navy);}
.auth-card button{width:100%;padding:10px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;}
.auth-card button:hover{background:var(--navy-2);}
.auth-card .err{color:var(--red);font-size:12px;margin-top:8px;display:none;}

#app{display:none;min-height:100dvh;}

.topbar{background:var(--navy);color:#fff;padding:0 16px;position:sticky;top:0;z-index:var(--z-topbar);}
.topbar-row1{display:flex;align-items:center;gap:12px;height:44px;border-bottom:1px solid rgba(255,255,255,0.06);}
.tb-brand{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;text-decoration:none;color:#fff;}
.tb-brand img{height:32px;width:auto;display:block;mix-blend-mode:screen;}
.tb-section{color:rgba(255,255,255,0.55);font-size:12px;}
.tb-section::before{content:'·';margin:0 6px;color:rgba(255,255,255,0.3);}
.tb-ticker{margin-left:auto;display:flex;gap:14px;font-size:11px;overflow-x:auto;max-width:60%;scrollbar-width:none;}
.tb-ticker::-webkit-scrollbar{display:none;}
.tb-ticker-item{display:flex;gap:4px;white-space:nowrap;}
.tb-ticker-label{color:rgba(255,255,255,0.5);}
.tb-ticker-val{color:#fff;font-variant-numeric:tabular-nums;}
.tb-user{margin-left:12px;}
.tb-user-avatar{width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:11px;cursor:pointer;}
.tb-menu-btn{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:6px;margin-left:auto;}

/* ░░ NAVEGACIÓN LATERAL (sidebar izquierdo · desktop) ░░
   La antigua topbar-row2 ahora es una columna fija a la izquierda, debajo
   de la barra superior (44px). En ≤768px se transforma en drawer
   off-canvas (media query más abajo, sin cambios de markup). */
.topbar-row2{
  position:fixed;top:var(--topbar-h);left:0;bottom:0;
  width:var(--sidebar-w);
  display:flex;flex-direction:column;align-items:stretch;
  background:var(--navy);
  border-right:1px solid rgba(255,255,255,0.06);
  overflow-y:auto;overflow-x:hidden;
  z-index:30;
  padding:8px 0 12px;
  transition:width var(--dur-base) var(--ease-std);
}
.topbar-row2::-webkit-scrollbar{width:6px;}
.topbar-row2::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px;}
.topbar-row2 a{
  color:rgba(255,255,255,0.62);font-size:13px;
  padding:9px 18px;cursor:pointer;
  display:flex;align-items:center;gap:11px;
  border-left:3px solid transparent;
  white-space:nowrap;text-decoration:none;overflow:hidden;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.topbar-row2 a:hover{color:#fff;background:rgba(255,255,255,0.05);}
.topbar-row2 a.on{color:#fff;border-left-color:var(--gold);background:rgba(255,255,255,0.07);}
.topbar-row2 a svg{width:17px;height:17px;opacity:0.75;flex-shrink:0;}
.topbar-row2 a.on svg{opacity:1;}

/* Botón de colapsar el sidebar (riel de iconos). Anclado al fondo. */
.sidebar-collapse{
  margin-top:auto;
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:none;border-top:1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.5);font-size:12px;cursor:pointer;
  padding:11px 18px;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.sidebar-collapse:hover{color:#fff;background:rgba(255,255,255,0.05);}
.sidebar-collapse svg{width:17px;height:17px;flex-shrink:0;transition:transform var(--dur-base) var(--ease-std);}
body.sidebar-collapsed .sidebar-collapse svg{transform:rotate(180deg);}

/* ── Sidebar colapsado a riel de iconos (solo desktop ≥769px) ── */
@media (min-width:769px){
  body.sidebar-collapsed .topbar-row2{width:var(--sidebar-w-collapsed);}
  body.sidebar-collapsed .main{margin-left:var(--sidebar-w-collapsed);}
  body.sidebar-collapsed .topbar-row2 a,
  body.sidebar-collapsed .nav-cluster-trigger,
  body.sidebar-collapsed .nav-cluster-menu a,
  body.sidebar-collapsed .sidebar-collapse{
    font-size:0;gap:0;justify-content:center;padding-left:0;padding-right:0;
  }
  body.sidebar-collapsed .topbar-row2 a svg,
  body.sidebar-collapsed .nav-cluster-menu a svg{opacity:0.85;}
  body.sidebar-collapsed .nav-group-header{display:none;}
  body.sidebar-collapsed .nav-cluster-trigger{display:none;}
  body.sidebar-collapsed .nav-cluster-menu{display:flex !important;}
}

/* Encabezados de grupo (Tablero/Parámetros/Egresos/Patrimonio) visibles en
   el sidebar como sub-secciones. Sin separadores: los headers ya marcan la
   división. El cluster "Ingresos" no choca porque su grupo se llama
   "Parámetros". Mismo criterio en desktop y en el drawer móvil. */
.nav-group-header{
  display:block;
  padding:15px 18px 5px;
  font-size:10px;text-transform:uppercase;letter-spacing:0.8px;
  color:rgba(255,255,255,0.4);font-weight:600;
}
.nav-group-header:first-child{padding-top:4px;}
.nav-group-sep{display:none;}

/* Clusters (Ingresos, Equipo) como acordeón vertical: el trigger es el
   padre, los hijos (.nav-cluster-menu) se muestran indentados cuando el
   cluster tiene .open. Por defecto van abiertos (clase open en el markup). */
.nav-cluster{display:flex;flex-direction:column;align-items:stretch;}
.nav-cluster-trigger{
  color:rgba(255,255,255,0.62);font-size:13px;padding:9px 18px;cursor:pointer;
  display:flex;align-items:center;gap:11px;
  border-left:3px solid transparent;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
  white-space:nowrap;text-decoration:none;
}
.nav-cluster-trigger:hover{color:#fff;background:rgba(255,255,255,0.05);}
.nav-cluster-trigger svg{width:17px;height:17px;opacity:0.75;flex-shrink:0;}
.nav-cluster-trigger.on{color:#fff;}
.nav-cluster-trigger.on svg{opacity:1;}
.nav-cluster-caret{font-size:9px;opacity:0.55;margin-left:auto;display:inline-block;transition:transform var(--dur-fast) var(--ease-out);}
.nav-cluster:not(.open) .nav-cluster-caret{transform:rotate(-90deg);}
.nav-cluster-menu{display:none;flex-direction:column;}
.nav-cluster.open .nav-cluster-menu{display:flex;}
.nav-cluster-menu a{
  color:rgba(255,255,255,0.6);font-size:12.5px;
  padding:8px 18px 8px 42px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  border-left:3px solid transparent;
  white-space:nowrap;text-decoration:none;overflow:hidden;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.nav-cluster-menu a:hover{color:#fff;background:rgba(255,255,255,0.05);}
.nav-cluster-menu a.on{color:#fff;border-left-color:var(--gold);background:rgba(255,255,255,0.07);}
.nav-cluster-menu a svg{width:15px;height:15px;opacity:0.7;flex-shrink:0;}
.nav-cluster-menu a.on svg{opacity:1;}

/* Sub-fila del topbar — franja secundaria con los items del cluster
   activo. Aparece solo cuando hay un submenu abierto (.on). Empuja el
   contenido principal hacia abajo (no flota encima). */
.topbar-row3{
  display:none;
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,0.05);
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
  height:38px;
  align-items:stretch;
}
.topbar-row3::-webkit-scrollbar{display:none;}
.topbar-row3.on{display:flex;}
.nav-submenu-content{display:none;align-items:stretch;}
.nav-submenu-content.active{display:flex;}
.nav-submenu-content a{
  color:rgba(255,255,255,0.65);
  font-size:12px;
  padding:10px 14px;
  cursor:pointer;
  display:flex;align-items:center;gap:6px;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.nav-submenu-content a:hover{color:rgba(255,255,255,0.9);}
.nav-submenu-content a.on{color:#fff;border-bottom-color:var(--gold);}
.nav-submenu-content a svg{width:14px;height:14px;opacity:0.7;}
.nav-submenu-content a.on svg{opacity:1;}

/* Items admin-only ocultos por defecto. Solo visibles cuando body tiene .role-admin.
   Esto evita el "flash" de pestañas al hacer login: el HTML carga ya oculto y solo
   se muestra después de confirmar el rol. */
[data-admin-only]{display:none !important;}
body.role-admin [data-admin-only]{display:flex !important;}
body.role-admin .user-menu-item[data-admin-only]{display:block !important;}

.user-menu{position:absolute;top:44px;right:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 2px 8px rgba(0,0,0,0.08);padding:6px;min-width:200px;z-index:var(--z-menu);display:none;}
.user-menu.on{display:block;}
.user-menu-info{padding:10px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;}
.user-menu-name{font-size:12px;font-weight:500;color:var(--text);}
.user-menu-email{font-size:11px;color:var(--text-3);}
.user-menu-item{padding:8px 12px;font-size:12px;color:var(--text-2);cursor:pointer;border-radius:var(--r);}
.user-menu-item:hover{background:var(--bg-alt);}

/* Contenido principal: corrido a la derecha del sidebar y tope de ancho.
   En ≤768px el margin-left se resetea a 0 (media query del drawer). */
.main{padding:20px 24px;max-width:1600px;margin-left:var(--sidebar-w);margin-right:auto;transition:margin-left var(--dur-base) var(--ease-std);}
.page-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.page-hd h1{font-size:20px;font-weight:500;letter-spacing:-0.3px;}
.page-hd .actions{display:flex;gap:6px;align-items:center;}

.metrics{display:grid;gap:10px;margin-bottom:16px;}
.metrics-4{grid-template-columns:repeat(4,1fr);}
.metrics-3{grid-template-columns:repeat(3,1fr);}

.metric{background:var(--bg-alt);padding:11px 14px;border-radius:var(--r-md);}
.metric-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;}
.metric-val{font-size:20px;font-weight:500;margin-top:3px;letter-spacing:-0.3px;font-variant-numeric:tabular-nums;}
.metric-sub{font-size:10px;color:var(--text-3);margin-top:2px;}
.metric-sub.pos{color:var(--green);}
.metric-sub.neg{color:var(--red);}
.metric-sub.warn{color:var(--amber);}
.metric-val.pos{color:var(--green);}
.metric-val.neg{color:var(--red);}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px;overflow:hidden;}
.card-body{padding:14px 18px;}
.card-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);}
.card-hd h3{font-size:13px;font-weight:500;}

.card-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;}
.g23{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;}


.table-wrap{overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl thead tr{background:var(--bg-alt);}
.tbl th{text-align:left;color:var(--text-4);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;padding:9px 12px;white-space:nowrap;}
.tbl td{padding:10px 12px;border-top:1px solid var(--line-soft);vertical-align:middle;}
.tbl tbody tr:first-child td{border-top:1px solid var(--line);}
.tbl tbody tr{cursor:pointer;transition:background var(--dur-fast);}
/* tbl-notif: filas NO son clickeables (tienen inputs/botones internos
   con sus propios hover). El cursor:pointer y el hover global de fila
   causaban parpadeo al mover el mouse entre elementos.
   Override: cursor default, sin transición de fila, sin hover de fila. */
.tbl-notif tbody tr{cursor:default;transition:none !important;}
.tbl-notif tbody tr:hover{background-color:transparent !important;}
.tbl tbody tr:hover{background:var(--bg-alt);}

/* ════════════════════════════════════════════════════════════════════
   GENERIC TABLE → CARDS EN MOBILE (ui-ux-pro-max P5 layout-responsive)
   Toda <table class="tbl"> (excepto .tbl-notif que tiene su propio
   tratamiento más arriba) se transforma en cards apilados en ≤768px.
   Cada <tr> queda como tarjeta; el primer <td> hace de header del item;
   el resto son filas "label : valor" usando data-label como ::before.
   Los data-label los popula applyDataLabels() leyendo del <thead>.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .tbl:not(.tbl-notif){display:block;width:100%;border:none;}
  .tbl:not(.tbl-notif) thead{display:none;}
  .tbl:not(.tbl-notif) tbody,
  .tbl:not(.tbl-notif) tr,
  .tbl:not(.tbl-notif) td{display:block;width:100%;max-width:100%;}
  .tbl:not(.tbl-notif) tr{
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:#fff !important;
    margin-bottom:10px;
    overflow:hidden;
  }
  .tbl:not(.tbl-notif) tbody tr:first-child td{border-top:none;}
  .tbl:not(.tbl-notif) td{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:8px 12px;
    padding:10px 14px !important;
    border-top:1px solid var(--line-soft);
    text-align:left !important;
    font-size:13px !important;
    white-space:normal;
  }
  .tbl:not(.tbl-notif) tbody tr td:first-child{
    border-top:none;
    background:var(--bg-alt);
    font-weight:500;
    padding:12px 14px !important;
    flex-direction:column;
    align-items:flex-start;
  }
  /* Label automático antes del valor (data-label se popula desde JS) */
  .tbl:not(.tbl-notif) td[data-label]::before{
    content:attr(data-label);
    font-size:11px;
    font-weight:500;
    color:var(--text-3);
    text-transform:uppercase;
    letter-spacing:0.4px;
    flex-shrink:0;
  }
  /* Sin label en el header (primer td) */
  .tbl:not(.tbl-notif) tbody tr td:first-child[data-label]::before{content:none;}
  /* Celdas alineadas a la derecha (.r): el valor queda a la derecha */
  .tbl:not(.tbl-notif) td.r{justify-content:space-between;text-align:right !important;}
  /* Filas "no-hover" (.nh) — mensajes vacíos */
  .tbl:not(.tbl-notif) tbody tr.nh td{justify-content:center;text-align:center !important;color:var(--text-3);padding:18px 14px !important;background:#fff !important;}
  .tbl:not(.tbl-notif) tbody tr.nh td::before{content:none !important;}
  /* tbl-sub: subline del cliente (RUT, etc.) */
  .tbl:not(.tbl-notif) .tbl-sub{font-size:11px;color:var(--text-3);font-weight:400;margin-top:2px;}
  /* Chips dentro de tablas-cards: wrap natural */
  .tbl:not(.tbl-notif) .chip{font-size:11px;}
}
.tbl tbody tr.nh{cursor:default;}
.tbl tbody tr.nh:hover{background:transparent;}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums;}

/* Tabla maestra de notificaciones: header sticky para que los títulos
   queden fijos cuando el usuario scrollea las filas. La tabla NO va dentro de
   un contenedor con overflow para que el sticky funcione respecto al viewport. */
.tbl-notif thead th{
  position:sticky;
  top:var(--topbar-h); /* barra superior (44px); el menú es lateral, no ocupa fila */
  background:var(--bg-alt);
  z-index:var(--z-sticky);
  box-shadow:inset 0 -1px 0 var(--line);
}
/* Notificaciones · tabla → cards apilados en ≤768px (ui-ux-pro-max P5).
   Cada <tr> queda como tarjeta; el primer <td> hace de header del cliente;
   el resto son filas "label : valor" usando data-label como pseudo-elemento. */
@media (max-width:768px){
  .tbl-notif{font-size:13px !important;border:none;display:block;width:100%;}
  .tbl-notif thead{display:none;}
  .tbl-notif tbody,.tbl-notif tr,.tbl-notif td{display:block;width:100%;max-width:100%;}
  .tbl-notif tr{
    border:1px solid var(--line) !important;
    border-radius:var(--r-lg);
    background:#fff !important;
    margin-bottom:12px;
    overflow:hidden;
  }
  .tbl-notif td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 14px !important;
    border-top:1px solid var(--line-soft);
    min-width:0 !important;
    text-align:left !important;
    font-size:13px !important;
  }
  .tbl-notif td:first-child{
    display:block;
    border-top:none;
    background:var(--bg-alt);
    padding:12px 14px !important;
  }
  .tbl-notif td[data-label]::before{
    content:attr(data-label);
    font-size:12px;
    font-weight:500;
    color:var(--text-3);
    flex-shrink:0;
  }
  .tbl-notif td:last-child{
    background:var(--bg-alt);
    font-size:15px !important;
    font-weight:600;
  }
  .tbl-notif input{
    font-size:14px !important;
    padding:8px 10px !important;
    width:auto !important;
    min-width:110px !important;
    text-align:right;
    margin-left:auto;
  }
  .tbl-notif select{font-size:13px;padding:6px 8px;margin-left:auto;}
  /* Botones de fila (estado, agregar extra) — mantener tappables */
  .tbl-notif button{min-height:36px;}
}
.tbl td.pri{font-weight:500;}
.tbl-sub{font-size:10px;color:var(--text-3);}

.chip{display:inline-flex;align-items:center;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:500;white-space:nowrap;}
.chip-gap{margin-right:3px;}
.chip-green{background:var(--green-bg);color:var(--green-text);}
.chip-blue{background:var(--blue-bg);color:var(--blue-text);}
.chip-amber{background:var(--amber-bg);color:var(--amber-text);}

.chip-gray{background:#f0f0f0;color:var(--text-2);}
.chip-nf{background:transparent;border:1px dashed currentColor;padding:1px 7px;}
.chip-nf.chip-green{color:var(--green-text);}
.chip-nf.chip-blue{color:var(--blue-text);}

.tag{display:inline-flex;align-items:center;font-size:9px;padding:2px 6px;border-radius:3px;font-weight:500;letter-spacing:0.3px;text-transform:uppercase;}
.tag-sys{background:#eef0f2;color:var(--text-2);}
.tag-mo{background:var(--green-bg);color:var(--green-text);}
.tag-sp{background:var(--amber-bg);color:var(--amber-text);}
.tag-partner{background:var(--amber-bg);color:var(--amber-text);}
.tag-ext{background:var(--blue-bg);color:var(--blue-text);}
.tag-ref{background:var(--green-bg);color:var(--green-text);}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:-1px;}
.dot-green{background:var(--green);}
.dot-amber{background:var(--amber);}
.dot-red{background:var(--red);}

.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r);font-size:12px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);white-space:nowrap;}
.btn-sm{padding:4px 10px;font-size:11px;}
.btn-xs{padding:3px 8px;font-size:10px;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-2);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-dark);}
.btn-out{background:#fff;color:var(--text-2);border-color:var(--line);}
.btn-out:hover{background:var(--bg-alt);border-color:var(--text-4);}
.btn-red{background:#fff;color:var(--red);border-color:var(--line);}
.btn-red:hover{background:var(--red-bg);}

.tabs{display:flex;gap:2px;padding:2px;background:var(--bg-alt);border-radius:var(--r-md);width:max-content;margin-bottom:14px;}
.tabs button{background:transparent;border:none;padding:6px 14px;font-size:11px;font-weight:500;color:var(--text-3);cursor:pointer;border-radius:var(--r);}
.tabs button.on{background:var(--navy);color:#fff;}

.form-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.form-g{flex:1;min-width:140px;}
.form-g label{display:block;font-size:11px;color:var(--text-3);margin-bottom:4px;font-weight:500;}
.form-g input,.form-g select,.form-g textarea{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;color:var(--text);background:#fff;outline:none;}
.form-g input:focus,.form-g select:focus,.form-g textarea:focus{border-color:var(--navy);}
.form-g textarea{min-height:60px;resize:vertical;font-family:inherit;}
.form-chk{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;}
.form-chk input{width:auto;margin:0;}
.form-section-label{font-size:10px;font-weight:500;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;margin:14px 0 8px;}

.search-bar{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 11px;flex:1;min-width:180px;}
.search-bar input{flex:1;border:none;outline:none;font-size:12px;background:transparent;}
/* Foco visible: era el único input del sistema sin reemplazo del outline (UX-13) */
.search-bar:focus-within{border-color:var(--navy);box-shadow:0 0 0 2px rgba(15,25,35,0.12);}
.filter-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}

.modal-bg{display:none;position:fixed;inset:0;background:rgba(15,25,35,0.5);z-index:var(--z-modal);align-items:center;justify-content:center;padding:1rem;}
.modal-bg.on{display:flex;}
.modal-box{background:#fff;border-radius:var(--r-lg);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;}
.modal-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:var(--z-base);}
.modal-hd h3{font-size:14px;font-weight:500;}
.modal-hd .x{background:none;border:none;font-size:20px;color:var(--text-4);cursor:pointer;padding:0;line-height:1;}
.modal-bd{padding:16px 18px;}
.modal-ft{display:flex;justify-content:flex-end;gap:6px;padding:12px 18px;border-top:1px solid var(--line);background:var(--bg-alt);}

.drawer-bg{display:none;position:fixed;inset:0;background:rgba(15,25,35,0.4);z-index:var(--z-drawer-bg);}
.drawer-bg.on{display:block;}
.drawer{position:fixed;top:0;right:-520px;bottom:0;width:480px;max-width:100vw;background:#fff;z-index:var(--z-drawer);transition:right var(--dur-base) var(--ease-out);overflow-y:auto;}
.drawer.on{right:0;}
.drawer-hd{position:sticky;top:0;background:#fff;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;z-index:var(--z-base);}
.drawer-hd h3{font-size:15px;font-weight:500;}
.drawer-hd .x{background:none;border:none;font-size:22px;color:var(--text-4);cursor:pointer;}
.drawer-bd{padding:16px 18px;}

.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:var(--r-md);font-size:12px;font-weight:500;z-index:var(--z-toast);opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1;}

.empty{text-align:center;padding:32px 20px;color:var(--text-3);font-size:12px;} /* text-3: text-4 quedaba bajo AA (UX-14) */

/* ── Empty state rico (con icono + título + CTA opcional) ─────────
   Usar via helper JS emptyHTML() o markup directo:
   <div class="empty-state">
     <svg class="empty-state-ico">...</svg>
     <div class="empty-state-title">No hay clientes activos</div>
     <div class="empty-state-msg">Crea el primero para empezar a operar.</div>
     <button class="btn btn-navy btn-sm">+ Nuevo cliente</button>
   </div>
   ui-ux-pro-max P8 empty-states */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 20px;gap:10px;}
.empty-state-ico{width:42px;height:42px;color:var(--text-4);opacity:0.6;}
.empty-state-title{font-size:14px;font-weight:500;color:var(--text-2);}
.empty-state-msg{font-size:12px;color:var(--text-3);max-width:320px;line-height:1.5;}

/* ── Skeleton loaders (ui-ux-pro-max P3 progressive-loading) ───────
   Aplicar .skeleton a placeholders mientras se carga data async.
   Respeta prefers-reduced-motion. */
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.skeleton{
  display:inline-block;
  background:linear-gradient(90deg,var(--line-soft) 25%,var(--bg-alt) 50%,var(--line-soft) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:var(--r);
  color:transparent !important;
  user-select:none;
  pointer-events:none;
}
.skeleton-line{height:12px;width:100%;margin:4px 0;}
.skeleton-line.sm{height:10px;width:60%;}
.skeleton-line.lg{height:18px;width:40%;}

@media (prefers-reduced-motion: reduce){
  .skeleton{animation:none;background:var(--line-soft);}
}
.text-3{color:var(--text-3);}
.text-sm{font-size:11px;}
.text-xs{font-size:10px;}

.prog{width:50px;height:5px;background:var(--line-soft);border-radius:3px;overflow:hidden;}






.timeline{position:relative;display:flex;justify-content:space-between;padding:14px 8px 0;}
.timeline-line{position:absolute;top:22px;left:8px;right:8px;height:2px;background:var(--line);}
.timeline-line-fill{position:absolute;top:22px;left:8px;height:2px;background:var(--green);}
.timeline-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:0;}
.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--line);border:2px solid #fff;box-shadow:0 0 0 1px var(--text-5);z-index:var(--z-base);}
.timeline-dot.done{background:var(--green);box-shadow:0 0 0 1px var(--green);}
.timeline-dot.now{background:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.timeline-label{font-size:10px;margin-top:5px;color:var(--text-2);line-height:1.3;}
.timeline-label.now{font-weight:500;}
.timeline-label.future{color:var(--text-3);}

.tcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;background:#fff;flex-wrap:wrap;}
.tcard-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;flex-shrink:0;}
.tcard-info{flex:1;min-width:120px;}
.tcard-name{font-size:13px;font-weight:500;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.tcard-sub{font-size:10px;color:var(--text-3);margin-top:1px;}
.tcard-col{text-align:right;min-width:90px;}
.tcard-col-lbl{font-size:10px;color:var(--text-3);}
.tcard-col-val{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:1px;}
.tcard-col-val.lg{font-size:15px;}





















.svccard{border:1px solid var(--line);border-left:3px solid var(--text-4);border-radius:var(--r-md);padding:14px 16px;background:#fff;margin-bottom:12px;}
.svccard.green{border-left-color:var(--green);}
.svccard.blue{border-left-color:var(--blue);}
.svccard.amber{border-left-color:var(--amber);}
.svccard-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.svccard-title{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;flex-wrap:wrap;}
.svccard-desc{font-size:11px;color:var(--text-3);margin-top:3px;}
.svccard-actions{display:flex;gap:5px;flex-wrap:wrap;}
.svccard-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-bottom:10px;}
.svccard-m-lbl{font-size:10px;color:var(--text-3);}
.svccard-m-val{font-size:16px;font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-0.2px;}
.svccard-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.svccard-jira{background:var(--bg-alt);border-radius:var(--r);padding:8px 10px;font-size:11px;}
.svccard-jira-row{display:flex;justify-content:space-between;padding:2px 0;}
.svccard-jira-lbl{color:var(--text-3);}
.svccard-expand{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);}
.svccard-expand-btn{background:transparent;border:none;color:var(--blue);font-size:11px;cursor:pointer;padding:4px 0;font-weight:500;}
.svccard-expand-btn:hover{text-decoration:underline;}
.svc-clients{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease-out);}
.svc-clients.open{max-height:2400px;margin-top:10px;}
.svc-client-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--line-soft);font-size:12px;gap:8px;}
.svc-client-row:first-child{border-top:none;}
.svc-client-row .sc-name{flex:1;font-weight:500;min-width:0;display:flex;flex-direction:column;}
.svc-client-row .sc-rut{font-weight:400;font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:1px;}
.svc-client-row .sc-rate{font-variant-numeric:tabular-nums;color:var(--text-3);min-width:70px;text-align:right;}
.svc-client-row .sc-clp{font-variant-numeric:tabular-nums;color:var(--text-3);min-width:90px;text-align:right;font-size:11px;}

.intcard{padding:10px 0;}
.intcard-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.intcard-name{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;}
.intcard-status{font-size:9px;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--text-3);}
.intcard-status.live{border-style:solid;color:var(--green-text);background:var(--green-bg);border-color:var(--green-bg);}
.intcard-status.soon{border-style:dashed;}





.dj-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:24px;align-items:start;}
@media (max-width:760px){.dj-grid{grid-template-columns:1fr;gap:18px;}}

.chart-title{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;}
.chart-legend{font-size:9px;color:var(--text-4);text-transform:none;letter-spacing:0;}

@media (max-width:1024px){
  
  .g23{grid-template-columns:1fr;}
  .metrics-4{grid-template-columns:repeat(2,1fr);}
  .main{padding:16px;}
}
@media (max-width:768px){
  .topbar{padding:0 12px;}
  .tb-ticker{display:none;}
  .tb-menu-btn{display:block;}
  /* Navegación móvil: off-canvas drawer desde la izquierda (ui-ux-pro-max P9 drawer-usage) */
  .topbar-row2{
    display:flex;
    position:fixed;
    top:0;left:-300px;bottom:0;
    width:280px;max-width:85vw;
    height:100dvh;
    flex-direction:column;
    background:var(--navy);
    z-index:var(--z-nav);
    overflow-y:auto;
    box-shadow:2px 0 18px rgba(0,0,0,0.35);
    transition:left var(--dur-base) var(--ease-out);
    padding:14px 0 24px;
    gap:0;
  }
  .topbar-row2.mob-open{left:0;}
  /* En mobile el contenido ocupa todo el ancho y el botón colapsar no aplica */
  .main{margin-left:0;}
  .sidebar-collapse{display:none;}
  .topbar-row2 a{
    padding:14px 20px;
    font-size:14px;
    color:rgba(255,255,255,0.75);
    border-bottom:1px solid rgba(255,255,255,0.05);
    border-left:3px solid transparent;
    gap:10px;
  }
  .topbar-row2 a svg{width:18px;height:18px;}
  .topbar-row2 a.on{
    border-bottom-color:rgba(255,255,255,0.05);
    border-left-color:var(--gold);
    background:rgba(255,255,255,0.06);
    color:#fff;
  }
  /* En el drawer móvil los encabezados de grupo se ven igual que en el
     sidebar (regla base); no se necesitan overrides aquí. */
  /* Nav clusters en mobile: aplanar. Oculto el trigger y muestro los
     items del menú interno como links normales en el drawer vertical.
     La topbar-row3 (sub-fila de desktop) no aplica en mobile. */
  .topbar-row3{display:none !important;}
  .nav-cluster{display:contents;}
  .nav-cluster-trigger{display:none;}
  .nav-cluster-menu{
    display:block !important;
    position:static;background:transparent;border:none;box-shadow:none;
    min-width:0;padding:0;
  }
  .nav-cluster-menu a{
    padding:14px 20px;font-size:14px;
    color:rgba(255,255,255,0.75);
    border-bottom:1px solid rgba(255,255,255,0.05);
    border-left:3px solid transparent;gap:10px;
  }
  .nav-cluster-menu a svg{width:18px;height:18px;}
  .nav-cluster-menu a.on{
    border-left-color:var(--gold);
    background:rgba(255,255,255,0.06);
    color:#fff;
  }
  /* Backdrop del drawer · cierra al tocar fuera */
  .nav-drawer-bg{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,25,35,0.55);
    z-index:var(--z-nav-bg);
  }
  .nav-drawer-bg.on{display:block;}
  /* Contención de overflow horizontal SOLO en móvil. En desktop dejamos
     que el body scroll-X funcione naturalmente (necesario para que el
     thead sticky de tbl-notif se posicione respecto al viewport). */
  html,body{max-width:100vw;overflow-x:clip;}
  .main{padding:12px;}
  .page-hd{align-items:stretch;}
  .page-hd h1{font-size:17px;}
  /* Actions: que se acomoden en su propia fila y los botones llenen el ancho cuando sean varios */
  .page-hd .actions{flex-wrap:wrap;width:100%;gap:8px;}
  .page-hd .actions > .btn{flex:1 1 auto;justify-content:center;}
  .metrics-3,.g2,.g3,.g4{grid-template-columns:1fr;gap:8px;}
  .metrics-4{grid-template-columns:1fr 1fr;gap:8px;}
  /* Cinturón anti-overflow en cards y wraps de tablas */
  .card,.table-wrap{max-width:100%;}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .svccard-metrics{grid-template-columns:repeat(2,1fr);}
  .svccard-body{grid-template-columns:1fr;}
  .metric-val{font-size:18px;}
  .card-body{padding:12px 14px;}
  .card-hd{padding:11px 14px;}
  .tcard{gap:8px;padding:10px 12px;}
  .tcard-col{min-width:70px;}
  .tcard-col-val{font-size:12px;}
  .tcard-col-val.lg{font-size:13px;}
  .drawer{width:100vw;right:-100vw;}
  .modal-box{max-width:100%;}
  .form-row{flex-direction:column;gap:10px;}
  .form-g input,.form-g select,.form-g textarea{font-size:16px;padding:10px;}
  .tbl th,.tbl td{padding:8px 10px;}
  .tabs{width:100%;}
  .tabs button{flex:1;}
}
@media (max-width:480px){
  .svccard-metrics{grid-template-columns:1fr 1fr;gap:8px;}
  .topbar-row1{height:40px;}
  .tb-brand{font-size:12px;}
  .tb-section{display:none;}
}

/* ════════════════════════════════════════════════════════════════════
   SPRINT 1 · UX/UI hardening (ui-ux-pro-max rules)
   Reglas aplicadas:
   - touch-target-size (P2 CRITICAL) — min 44×44pt en dispositivos touch
   - touch-spacing (P2 CRITICAL) — ≥8px gap entre targets táctiles
   - reduced-motion (P1/P7) — respetar prefers-reduced-motion del SO
   - tap-delay (P2) — touch-action: manipulation elimina el delay de 300ms
   - aria-labels (P1 CRITICAL) — aplicado en HTML a botones-icono
   ════════════════════════════════════════════════════════════════════ */

/* Reduced motion: si el usuario lo pidió a nivel SO, anular animaciones.
   Mantenemos un mínimo no-cero (0.01ms) para que JS basado en transitionend
   siga funcionando. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Tap delay: elimina los 300ms de espera de doble-tap en mobile.
   Aplicado solo a elementos interactivos para no afectar scroll. */
.btn,button,a,input,select,textarea,[role="button"]{touch-action:manipulation;}

/* Touch hardening: solo en dispositivos con puntero "coarse" (touch).
   Mantenemos densidad visual en desktop, expandimos hit area en mobile. */
@media (pointer:coarse){
  .btn{min-height:44px;}
  .btn-sm{min-height:40px;padding:8px 12px;}
  .btn-xs{min-height:36px;padding:7px 12px;font-size:11px;}
  /* Botones × de cerrar modales/drawer: 44×44 hit area sin agrandar la "×" visual */
  .modal-hd .x,.drawer-hd .x{
    min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;
    padding:8px;margin:-8px -8px -8px 0;
  }
  /* Hamburger del topbar: hit area 44 */
  .tb-menu-btn{min-width:44px;min-height:44px;padding:10px;}
  /* Iconos clickeables en filas (×, ✓, etc.): apuntan a hit area mín 32 */
  .tbl button,.svccard button,.svc-client-row button{min-height:32px;min-width:32px;}
  /* Botones de borrar de Firenze (18px) y cashflow (15px): precisamente donde
     un misclick duele; hit area 32 en touch sin cambiar el look desktop (UX-09) */
  .fz-del,.cf-del{min-width:32px;min-height:32px;}
  /* Gap mínimo 8px en filas de botones agrupados */
  .modal-ft,.svccard-actions,.filter-bar{gap:8px;}
}

/* ░░ FLUJO DE CAJA PROYECTADO · matriz 12 meses (dashboard) ░░
   Tabla propia (NO .tbl) para evitar el transform a cards en mobile: en
   pantallas chicas se desplaza horizontalmente con la 1ª columna fija. */
.cf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cf-table{border-collapse:collapse;width:100%;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.cf-table th,.cf-table td{padding:6px 10px;border-bottom:1px solid var(--line-soft);}
.cf-table thead th{background:var(--bg-alt);font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.3px;font-size:10px;border-bottom:1px solid var(--line);}
.cf-table .cf-num{text-align:right;}
.cf-table .cf-lbl{text-align:left;position:sticky;left:0;background:#fff;z-index:1;border-right:1px solid var(--line);font-weight:500;}
.cf-table thead .cf-lbl{background:var(--bg-alt);z-index:2;}
.cf-table .cf-now{background:rgba(201,168,76,0.06);}
.cf-table thead .cf-now{background:rgba(201,168,76,0.12);color:var(--gold-dark);}
.cf-table .cf-cierre{background:var(--bg-alt);font-weight:600;border-left:2px solid var(--line);}
.cf-table tr.cf-zona td{background:var(--navy);color:#fff;font-size:9px;text-transform:uppercase;letter-spacing:0.6px;font-weight:600;padding:4px 10px;}
.cf-table tr.cf-zona .cf-lbl{background:var(--navy);color:#fff;}
.cf-table tr.cf-total td{font-weight:600;border-top:1px solid var(--line);background:rgba(0,0,0,0.015);}
.cf-table tr.cf-total .cf-lbl{background:#f4f4f2;}
.cf-table tr.cf-saldo td{color:var(--text-2);}
.cf-table tr.cf-neto td{font-weight:600;border-top:1px solid var(--line);}
.cf-table tr.cf-saldofin td{font-weight:700;background:rgba(26,80,145,0.05);border-top:2px solid var(--line);}
.cf-table tr.cf-saldofin .cf-lbl{background:#eaf0f7;}
.cf-tag{font-size:8px;text-transform:uppercase;letter-spacing:0.3px;padding:1px 4px;border-radius:6px;font-weight:600;vertical-align:middle;}
.cf-tag-real{background:var(--green-bg);color:var(--green-text);}
.cf-tag-ppto{background:var(--bg-alt);color:var(--text-4);border:1px solid var(--line);}
.cf-t1{font-size:8px;color:var(--amber-text);background:var(--amber-bg);padding:0 4px;border-radius:5px;font-weight:600;letter-spacing:0.2px;}

/* Celdas editables de la matriz de flujo de caja + controles. */
.cf-inp{width:100%;min-width:62px;border:1px solid transparent;background:transparent;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;font-family:inherit;color:var(--text);padding:2px 4px;border-radius:3px;}
.cf-inp:hover{border-color:var(--line);}
.cf-inp:focus{border-color:var(--blue);background:#fff;outline:none;box-shadow:0 0 0 2px rgba(26,80,145,0.12);}
.cf-add{margin-left:10px;background:rgba(255,255,255,0.14);color:#fff;border:none;border-radius:4px;font-size:9px;font-weight:600;text-transform:none;letter-spacing:0;padding:2px 7px;cursor:pointer;}
.cf-add:hover{background:rgba(255,255,255,0.26);}
.cf-del{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:3px;color:var(--red);cursor:pointer;font-weight:700;font-size:12px;line-height:1;}
.cf-del:hover{background:var(--red-bg);}
.cf-tag-anual{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber-bg);}
.cf-mes-sel{margin-left:6px;background:rgba(255,255,255,0.16);color:#fff;border:1px solid rgba(255,255,255,0.22);border-radius:4px;font-size:10px;padding:1px 5px;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0;}
.cf-mes-sel option{color:#1a1a1a;}