:root{ 
  /* Fondo base navy + halos centrados (un poco más azul) */
  --bg:#0b1d3a;
  --bg-grad:
    radial-gradient(1000px 700px at 50% 28%, rgba(120,180,255,.18), transparent 52%),
    radial-gradient(850px 600px at 50% 72%, rgba(92,214,198,.10), transparent 56%),
    linear-gradient(180deg,#0b1d3a,#0a1530 60%,#0b1d3a);

  --glass: rgba(255,255,255,.12);
  --glass-strong: rgba(255,255,255,.18);
  --glass-border: rgba(255,255,255,.22);
  --text:#eef3ff;
  --muted:#aab6d6;
  --accent:#5cd6c6;
  --blue:#64a5ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --chip-radius:16px;

  /* Layout global (para alinear header/KPIs/tabs/panel) */
  --page-max: 1200px;
  --page-gutter: 16px;
}
@media (prefers-color-scheme: light){
  :root{ --text:#10131a; --muted:#2f3a56; --glass:rgba(255,255,255,.7); --glass-border:rgba(0,0,0,.08); --bg:#e7eefc; --bg-grad:linear-gradient(180deg,#e7eefc,#dfe7fb); --shadow: 0 6px 18px rgba(0,0,0,.08); }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: var(--bg-grad), var(--bg);
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{max-width:1200px;margin:24px auto;padding:0 16px}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 16px;margin:16px auto;border-radius:var(--radius);backdrop-filter: blur(18px);background:var(--glass);box-shadow:var(--shadow);border:1px solid var(--glass-border)}
.topbar h1{margin:0;font-size:24px;letter-spacing:.2px}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
.topbar-right{display:flex;gap:10px;align-items:center}

.btn{appearance:none;border:1px solid var(--glass-border);background:rgba(255,255,255,.06);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;transition:transform .15s ease, opacity .2s ease;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,rgba(99,160,255,.35),rgba(99,160,255,.2));border-color:rgba(99,160,255,.45)}
.btn.subtle{background:rgba(255,255,255,.04)}
.btn.small{padding:6px 10px;border-radius:10px;font-size:12px}

.chip{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:var(--chip-radius);border:1px solid var(--glass-border);background:rgba(255,255,255,.06);cursor:pointer;user-select:none}
.chip input[type="checkbox"]{accent-color:var(--blue)}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.card{border-radius:var(--radius);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter: blur(14px);box-shadow:var(--shadow);padding:16px}
.kpi{display:flex;gap:12px;align-items:center;outline:none}
.kpi:focus{box-shadow:0 0 0 3px rgba(99,160,255,.4)}
.kpi-icon{font-size:22px}
.kpi-title{color:var(--muted);font-size:12px}
.kpi-value{font-size:24px;font-weight:700}

.tabs{display:flex;gap:8px;margin:10px 0 16px}
.tabs .chip.active{border-color:rgba(0,0,0,0);background:linear-gradient(180deg,rgba(92,214,198,.3),rgba(92,214,198,.18))}

.panel{border-radius:var(--radius);border:1px solid var(--glass-border);background:rgba(255,255,255,.08);backdrop-filter: blur(12px);box-shadow:var(--shadow);padding:10px}
.toolbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px;border-bottom:1px solid var(--glass-border)}
.tools-left,.tools-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input,.select{border-radius:12px;border:1px solid var(--glass-border);padding:10px 12px;background:rgba(255,255,255,.06);color:var(--text);outline:none}
.input:focus,.select:focus{box-shadow:0 0 0 3px rgba(92,214,198,.35)}

.table-wrap{overflow:auto;padding:6px 2px}
table{width:100%;border-collapse:separate;border-spacing:0 10px}
thead th{text-align:left;font-size:12px;color:var(--muted);padding:0 12px}
tbody tr{background:rgba(255,255,255,.1);border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;transition:transform .12s ease}
tbody tr:hover{transform:translateY(-1px)}
tbody td{padding:12px}
.th-actions, td.actions{text-align:right}

/* ===== Estado → colores finales (glass + gradiente) ===== */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid transparent;
  background:rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.15);
}

/* Frío — azul */
.badge.frio{
  color:#cfe3ff;
  background: linear-gradient(180deg,#1b2c4c,#12233f);
  border-color:#315a8e;
}

/* Calentando — más amarillo (ámbar) */
.badge.calentando{
  color:#ffec9a; /* antes #ffe9b3 */
  background: linear-gradient(180deg, #554119, #443315); /* un pelín más cálido */
  border-color:#cfa238; /* antes #b18b3a */
}

/* Caliente — más naranja tostado */
.badge.caliente{
  color:#ffd0a3; /* antes #ffd8b5 */
  background: linear-gradient(180deg, #5a2f14, #49240f); /* más naranja, menos marrón */
  border-color:#d07a2c; /* antes #c17a3a */
}


/* Cerrado — verde/agua */
.badge.cerrado{
  color:#c9fff5;
  background: linear-gradient(180deg,#1a4b3f,#123b31);
  border-color:#2bbfa7;
}

/* Problemas — rojo vino */
.badge.problemas{
  color:#ffd1db;
  background: linear-gradient(180deg,#4b1b2a,#3b1421);
  border-color:#c24a6a;
}

/* Cancelado — gris */
.badge.cancelado{
  color:#d8dee9;
  background: linear-gradient(180deg,#2f3542,#252a35);
  border-color:#5a6474;
}

.row-actions{display:flex;gap:8px;justify-content:flex-end}

.pagination{display:flex;justify-content:space-between;align-items:center;padding:10px}
.dropzone{margin:18px 0;padding:16px;border:2px dashed var(--glass-border);border-radius:16px;background:rgba(255,255,255,.06);text-align:center;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);opacity:0;background:rgba(0,0,0,.7);color:#fff;padding:10px 14px;border-radius:10px;transition:transform .2s ease,opacity .2s ease;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

body.compact thead th{font-size:11px}
body.compact tbody td{padding:8px}

/* ===== Modal ===== */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:1000}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.modal-card{position:relative;width:min(720px,92vw);border-radius:18px;background:rgba(20,24,36,.96);border:1px solid var(--glass-border);box-shadow:var(--shadow);padding:14px 14px 16px}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal-body{padding:8px 4px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:12px;color:var(--muted)}
.field.full{grid-column:1 / -1}
.modal-card .input, .modal-card .select, .modal-card textarea{width:100%}

/* ===== Tabla plana (sin rectángulo gris por fila, conservando fondos de badges/botones) ===== */
.table-wrap { padding: 6px 2px }
table{ border-collapse: collapse; border-spacing: 0 } /* anula el spacing tipo “tarjeta” */
tbody tr{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
tbody tr:hover{ background: rgba(255,255,255,.04) } /* realce suave al hover */
tbody td{
  padding: 14px 12px;
  background: transparent;
}
thead th{ padding: 12px; border-bottom: 1px solid var(--glass-border) } /* separador encabezado */
tbody tr + tr td{ border-top: 1px solid rgba(255,255,255,.08) }       /* separador entre filas */

/* No borrar fondos de chips/botones */
td > .row-actions,
td > div,
td > span:not(.badge),
td > a:not(.btn):not(.badge){
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== Header compacto (sin recuadro) y alineado al contenido ===== */
.topbar{
  padding: 0 !important;
  margin: 12px auto 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  /* clave: limitar ancho y aplicar gutters como el resto */
  width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
.topbar h1{
  margin: 0;
  font-size: 28px;
  letter-spacing: .2px;
}
.topbar p{
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.topbar-right{ gap: 8px }

/* ===== KPIs SIN gap lateral: alineados exacto con el panel/lista ===== */
.kpis{
  width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
  margin: 10px auto 16px;
  padding-left: 0 !important;   /* sin gutters laterales */
  padding-right: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;                    /* espacio solo entre tarjetas */
  box-sizing: border-box;
}
.kpis > .card{ margin: 0 }

/* ===== KPIs y panel: MISMO TRACK CENTRADO (sin hacks ni transform) ===== */

/* Pista central reutilizable: mismo ancho para todo el contenido */
:root{
  --track-width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
}

/* El panel/lista ya se ve centrado; le damos explícitamente el mismo track */
.panel{
  width: var(--track-width);
  margin-left: auto;
  margin-right: auto;
}

/* Las 3 KPIs usan el MISMO track y quedan centradas de verdad */
.kpis{
  width: var(--track-width);
  margin: 10px auto 16px;        /* centrado real */
  padding-left: 0;
  padding-right: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;                      /* espacio solo entre tarjetas */
  box-sizing: border-box;
}

/* Asegura que las tarjetas no metan márgenes extra */
.kpis > .card{ margin: 0 }

/* (Opcional) alinear tabs al mismo track */
.tabs{
  width: var(--track-width);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   ESCALADO GLOBAL (UI más grande sin romper)
   ========================================= */
:root{
  /* Ajusta este valor para escalar toda la UI */
  --ui-scale: 1.08; /* 1.00 = sin cambios | 1.06–1.12 recomendado */
}

/* Tipografías clave */
.topbar h1        { font-size: calc(28px * var(--ui-scale)); }
.topbar p         { font-size: calc(12px * var(--ui-scale)); }
.kpi-title        { font-size: calc(12px * var(--ui-scale)); }
.kpi-value        { font-size: calc(24px * var(--ui-scale)); }
thead th          { font-size: calc(12px * var(--ui-scale)); }
.badge            { font-size: calc(12px * var(--ui-scale)); }

/* Botones, chips, inputs */
.btn{
  padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
  border-radius: calc(12px * var(--ui-scale));
  font-size: calc(14px * var(--ui-scale));
}
.btn.small{
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
  border-radius: calc(10px * var(--ui-scale));
  font-size: calc(12px * var(--ui-scale));
}
.input,.select{
  padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border-radius: calc(12px * var(--ui-scale));
  font-size: calc(14px * var(--ui-scale));
}
.chip{
  padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border-radius: calc(var(--chip-radius) * var(--ui-scale));
  font-size: calc(13px * var(--ui-scale));
}

/* Badges */
.badge{
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
  border-radius: 999px;
}

/* Tabla */
tbody td{ padding: calc(12px * var(--ui-scale)); }
body.compact tbody td{ padding: calc(8px * var(--ui-scale)); }

/* Tarjetas, paneles, modales */
.card, .panel, .modal-card{
  border-radius: calc(var(--radius) * var(--ui-scale));
}
.card{ padding: calc(16px * var(--ui-scale)); }
.panel{ padding: calc(10px * var(--ui-scale)); }
.modal-card{ padding: calc(14px * var(--ui-scale)) calc(16px * var(--ui-scale)); }

/* Modal interior */
.modal-body  { padding: calc(8px * var(--ui-scale)) calc(4px * var(--ui-scale)); }
.modal-footer{ gap: calc(8px * var(--ui-scale)); margin-top: calc(10px * var(--ui-scale)); }

/* Toolbar / paginación */
.pagination{ padding: calc(10px * var(--ui-scale)); }
.toolbar{
  gap: calc(8px * var(--ui-scale));
  padding: calc(8px * var(--ui-scale));
}
.tools-left,.tools-right{ gap: calc(8px * var(--ui-scale)); }

/* Tabs y KPIs (dejamos el gap base para no romper el track) */
.tabs{ gap: calc(8px * var(--ui-scale)); margin: calc(10px * var(--ui-scale)) auto calc(16px * var(--ui-scale)); }

/* Dropzone y toast */
.dropzone{
  margin: calc(18px * var(--ui-scale)) 0;
  padding: calc(16px * var(--ui-scale));
}
.toast{
  bottom: calc(24px * var(--ui-scale));
  padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
}


/* ============================
   Mejora encabezado de la tabla
   ============================ */
.table-wrap thead th{
  font-weight: 700;                         /* negrita */
  color: #f4f7ff;                           /* blanco un poco más fuerte */
  font-size: calc(14px * var(--ui-scale));  /* un poco más grande */
  letter-spacing: .2px;                     /* leve separación */
  /* mantenemos el border-bottom definido antes */
}

/* ============================
   Botón "Eliminar" en rojo
   ============================ */
/* Aplica a los botones de acción con data-action="eliminar" */
.btn.small[data-action="eliminar"],
.btn.danger{
  color:#fff;
  background: linear-gradient(180deg,#ff6b6b,#ff4141);
  border-color:#ff4b5e;
 
}

.btn.small[data-action="eliminar"]:hover,
.btn.danger:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn.small[data-action="eliminar"]:active,
.btn.danger:active{
  transform: translateY(0);
}

/* ===== Encabezados: +7px y alineados como sus columnas ===== */
:root{ --th-extra: 1px; } /* cambia este valor si quieres más/menos tamaño */

.table-wrap table thead th{
  /* 12px era tu base → +px y respetando el escalado global */
  font-size: calc((12px + var(--th-extra)) * var(--ui-scale)) !important;
  font-weight: 700;
  color: #f4f7ff;
  letter-spacing: .2px;
}

/* Alineación por columna: th iguales a los td */
.table-wrap table thead th,
.table-wrap table tbody td{ text-align: left; }       /* por defecto, izquierda */

/* 4) Monto → derecha */
.table-wrap table thead th:nth-child(4),
.table-wrap table tbody td:nth-child(4){ text-align: right; }

/* 5) Tiempo → centro (si lo quieres izq, borra estas dos reglas) */
.table-wrap table thead th:nth-child(5),
.table-wrap table tbody td:nth-child(5){ text-align: center; }

/* 8) Acciones → derecha */
.table-wrap table thead th:nth-child(8),
.table-wrap table tbody td:nth-child(8){ text-align: right; }

/* (Opcional) 7) Creado → derecha. Descomenta si lo prefieres así */
/*
.table-wrap table thead th:nth-child(7),
.table-wrap table tbody td:nth-child(7){ text-align: right; }
*/


/* Nudge fino: mover el TEXTO de los encabezados un pelín a la izquierda */
:root{ --th-nudge-left: 6px; } /* ajusta 4–8px según tu ojo */

.table-wrap thead th{
  /* mantenemos el ancho total del th, solo desplazamos el contenido */
  padding-left: calc(12px - var(--th-nudge-left)) !important;
  padding-right: calc(12px + var(--th-nudge-left)) !important;
}


/* Texto blanco en las tabs y bordes más redondeados */
.tabs .chip{
  color: #fff !important;                 /* texto blanco */
  border-radius: 12px;                     /* ajusta el radio aquí */
  border-color: rgba(255,255,255,.22);     /* (opcional) borde un pelín más visible */
}

/* Asegura blanco también cuando está activa */
.tabs .chip.active{
  color: #fff !important;
}


/* Centrado perfecto del texto en las tabs */
.tabs .chip{
  display: inline-flex;        /* ya lo tienes, lo reafirmamos aquí solo para las tabs */
  align-items: center;         /* centra verticalmente */
  justify-content: center;     /* centra horizontalmente */
  text-align: center;          /* por si hay varias líneas */
  line-height: 1;              /* evita desajustes por line-height */
  min-height: 36px;            /* altura mínima uniforme */
  padding: 0 14px;             /* padding simétrico; vertical lo da min-height */
}


/* ===== Acciones: mismo tamaño y alineación (compacto) ===== */
:root{
  --action-h: 32px;        /* antes 36px */
  --action-minw: 88px;     /* antes 96px */
  --action-radius: 10px;   /* antes 12px */
}

/* Columna Acciones algo más estrecha */
.th-actions,
td.actions{
  width: 300px;            /* antes 320px — ajusta si hace falta */
}

/* Contenedor de acciones */
.row-actions{
  display: flex;
  gap: 8px;                /* antes 10px */
  align-items: center;
}

/* Botón base (Editar / Cerrar / Cancelar) */
.row-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--action-h);
  min-width: var(--action-minw);
  padding: 0 12px;             /* antes 14px */
  border-radius: var(--action-radius);
  line-height: 1;
  white-space: nowrap;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-weight: 600;
}

.row-actions .btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.row-actions .btn:active{
  transform: translateY(0);
}

/* Botón Eliminar (rojo) */
.row-actions .btn.danger,
.row-actions .btn[data-action="eliminar"]{
  color:#fff;
  background: linear-gradient(180deg,#ff6b6b,#ff4141);
  border-color:#ff4b5e;
}
.row-actions .btn.danger:hover,
.row-actions .btn[data-action="eliminar"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* === KPI icon: glassy chip sin borde === */
:root{
  --icon-glass: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  --icon-shadow: 0 6px 16px rgba(0,0,0,.22);
  --icon-inset: inset 0 1px 0 rgba(255,255,255,.25);
}

@media (prefers-color-scheme: light){
  :root{
    --icon-glass: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
    --icon-shadow: 0 4px 12px rgba(0,0,0,.10);
    --icon-inset: inset 0 1px 0 rgba(255,255,255,.9);
  }
}

.kpi-icon{
  display: inline-grid;
  place-items: center;
  width: calc(34px * var(--ui-scale));
  height: calc(34px * var(--ui-scale));
  border-radius: 12px;

  /* Glass */
  background: var(--icon-glass);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);

  /* Sin borde, solo luces/sombras suaves */
  border: none;
  box-shadow: var(--icon-inset), var(--icon-shadow);

  /* Emoji/tamaño */
  font-size: calc(18px * var(--ui-scale));
  line-height: 1;
}

/* (opcional) un poco más de aire con el texto */
.kpi{ gap: calc(12px * var(--ui-scale)); }


/* === LIMPIAR: latido más pequeño y más lento === */
#btn-limpiar:hover{
  color:#fff;
  background: linear-gradient(180deg,#ff6b6b,#ff3b3b);
  border-color: rgba(255,80,80,.9);
  box-shadow: 0 3px 12px rgba(255,72,72,.22);
  /* duración más lenta y amplitud menor */
  animation: heartbeat-soft 1.8s ease-in-out .25s infinite;
}

/* Latido suave: menos escala y menos “glow” */
@keyframes heartbeat-soft{
  0%   { transform: translateY(-1px) scale(1);      box-shadow: 0 3px 12px rgba(255,72,72,.22); }
  20%  { transform: translateY(-1px) scale(1.03);   box-shadow: 0 0 0 6px rgba(255,72,72,.16), 0 5px 16px rgba(0,0,0,.35); }
  40%  { transform: translateY(-1px) scale(1.015);  box-shadow: 0 0 0 4px rgba(255,72,72,.12), 0 5px 16px rgba(0,0,0,.35); }
  60%  { transform: translateY(-1px) scale(1.035);  box-shadow: 0 0 0 7px rgba(255,72,72,.14), 0 5px 16px rgba(0,0,0,.35); }
  100% { transform: translateY(-1px) scale(1);      box-shadow: 0 3px 12px rgba(255,72,72,.22); }
}

/* Respeto a reduced motion */
@media (prefers-reduced-motion: reduce){
  #btn-limpiar:hover{ animation: none; }
}

/* Estado base del botón Limpiar: con transiciones para entrar/salir */
#btn-limpiar{
  transition:
    background 260ms ease,
    border-color 260ms ease,
    color 200ms ease,
    box-shadow 320ms ease,
    transform 180ms ease;
}

/* Hover: rojo + latido suave (ya reducido) */
#btn-limpiar:hover{
  color:#fff;
  background: linear-gradient(180deg,#ff6b6b,#ff3b3b);
  border-color: rgba(255,80,80,.9);
  box-shadow: 0 3px 12px rgba(255,72,72,.22);
  animation: heartbeat-soft 1.8s ease-in-out .25s infinite;
}

/* Focus por teclado: mismo color pero sin latido continuo */
#btn-limpiar:focus-visible{
  color:#fff;
  background: linear-gradient(180deg,#ff6b6b,#ff3b3b);
  border-color: rgba(255,80,80,.9);
  box-shadow: 0 0 0 3px rgba(255,80,80,.35), 0 3px 12px rgba(255,72,72,.22);
}

/* Latido suave */
@keyframes heartbeat-soft{
  0%   { transform: translateY(-1px) scale(1);      box-shadow: 0 3px 12px rgba(255,72,72,.22); }
  20%  { transform: translateY(-1px) scale(1.03);   box-shadow: 0 0 0 6px rgba(255,72,72,.16), 0 5px 16px rgba(0,0,0,.35); }
  40%  { transform: translateY(-1px) scale(1.015);  box-shadow: 0 0 0 4px rgba(255,72,72,.12), 0 5px 16px rgba(0,0,0,.35); }
  60%  { transform: translateY(-1px) scale(1.035);  box-shadow: 0 0 0 7px rgba(255,72,72,.14), 0 5px 16px rgba(0,0,0,.35); }
  100% { transform: translateY(-1px) scale(1);      box-shadow: 0 3px 12px rgba(255,72,72,.22); }
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  #btn-limpiar,
  #btn-limpiar:hover,
  #btn-limpiar:focus-visible{
    animation: none !important;
    transform: none !important;
  }
}


/* Botón "Nuevo Lead" en verde estilo 'Cerrado' (un poco más fuerte) */
#btn-nuevo-lead{
  /* colores inspirados en .badge.cerrado pero más intensos */
  background: linear-gradient(180deg, #1f6a58, #144e40); /* más fuerte que #1a4b3f → #123b31 */
  border-color: #2dd4bf;   /* similar a #2bbfa7 pero un pelín más vivo */
  color: #e7fffa;          /* texto claro tipo badge cerrado */
  font-weight: 700;

  /* mantiene el look & feel del resto */
  box-shadow: var(--shadow);
  transition: filter .18s ease, transform .15s ease, box-shadow .2s ease;
}

/* Hover: un toque de brillo y leve “lift” */
#btn-nuevo-lead:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

/* Active: sin lift */
#btn-nuevo-lead:active{
  transform: translateY(0);
  filter: brightness(1.02);
}

/* Focus accesible */
#btn-nuevo-lead:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .35), var(--shadow); /* aro turquesa */
}


/* ====== Select: forzar texto negro en el desplegable ====== */
/* Estado cerrado (el campo sigue con tu estilo actual) */
.select { color: var(--text); }

/* Panel abierto (opciones) */
.select option,
.select optgroup {
  color: #0b0f19 !important;     /* negro suave */
  background: #ffffff !important; /* fondo blanco para contraste */
}

/* Opcional: color de la opción seleccionada dentro del panel */
.select option:checked {
  color: #ffffff !important;
  background: #2563eb !important; /* azul de realce del sistema */
}

/* Compat extra para selects con multiple/size */
select[multiple] option,
select[size] option {
  color: #0b0f19 !important;
  background: #ffffff !important;
}

/* ===== Banda de color para el encabezado de la tabla ===== */
.table-wrap table thead tr{
  /* banda sutil tipo “glass” detrás de todos los <th> */
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.table-wrap table thead th{
  /* mantenemos lo que ya tienes + ligero refuerzo del separador inferior */
  border-bottom: 1px solid rgba(255,255,255,.12);
  /* el texto y paddings permanecen igual por tus reglas previas */
}

/* Un pelín más discreto en modo compacto */
body.compact .table-wrap table thead tr{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

/* ===== Hover suave en las 3 KPIs ===== */
.kpis .card{
  transition:
    transform 220ms cubic-bezier(.2,.7,.2,1),
    box-shadow 220ms ease;
  will-change: transform;
  transform-origin: center;
}

.kpis .card:hover{
  transform: scale(1.022);               /* un pelín más grande */
  box-shadow: 0 14px 34px rgba(0,0,0,.38);/* leve elevación */
}

.kpis .card:active{
  transform: scale(1.012);               /* feedback al click */
}

/* Accesibilidad: foco por teclado sin “bote” extra */
.kpis .card:focus-within,
.kpis .card:focus-visible{
  box-shadow: 0 0 0 3px rgba(99,160,255,.35), var(--shadow);
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce){
  .kpis .card{ transition: box-shadow 180ms ease; }
  .kpis .card:hover,
  .kpis .card:active{
    transform: none;
  }
}


/* La card de AIM se comporta como botón */
.kpi.aim{
  cursor: pointer;
}
.kpi.aim:focus-visible{
  box-shadow: 0 0 0 3px rgba(99,160,255,.4), var(--shadow);
  outline: none;
}


/* === Ajustes finos de separación (sin cambiar el resto) === */

/* Baja un poco la cabecera (“Bienvenido de nuevo…”) */
.topbar{
  margin-top: 39px !important;   /* antes ~12px */
  padding-top: 6px !important;   /* un pelín de aire dentro */
  margin-bottom:40px !important;/* mantiene el equilibrio con lo de abajo */
}

/* Más espacio contra el borde inferior del viewport para la dropzone */
.dropzone{
  margin-top: calc(12px * var(--ui-scale)) !important;    /* leve separación arriba */
  margin-bottom: calc(16px * var(--ui-scale)) !important; /* más aire abajo */
}

/* Más aire bajo el panel/lista */
:root{ --panel-bottom-gap: 14px; }  /* ajusta 32–64px a tu gusto */

.panel{
  margin-bottom: var(--panel-bottom-gap) !important;
}

/* (opcional) un poco de colchón general por si el panel llega al final */
.container{
  padding-bottom: calc(var(--panel-bottom-gap) / 2);
}


/* === Resaltado de fila en la tabla (hover/focus) ===================== */
/* Asegura transición suave del color de fondo */
.table-wrap tbody tr{
  transition: background-color 140ms ease;
}

/* Hover: gris suave tipo glass (forzado con !important para ganar a la regla anterior) */
.table-wrap tbody tr:hover{
  background: rgba(255,255,255,.07) !important;
}

/* Accesibilidad: cuando cualquier celda tiene foco por teclado */
.table-wrap tbody tr:focus-within{
  background: rgba(255,255,255,.09) !important;
}

/* Mantén celdas transparentes sobre el hover del tr */
.table-wrap tbody tr:hover td,
.table-wrap tbody tr:focus-within td{
  background: transparent !important;
}


/* Nuevo Lead: un poco más grande */
#btn-nuevo-lead{
  /* +3px alto, +4px ancho sobre la base */
  padding-block: calc((10px + 3px) * var(--ui-scale));
  padding-inline: calc((14px + 4px) * var(--ui-scale));
  /* +1px de tamaño de texto y radio para que todo escale proporcionado */
  font-size: calc((14px + 1px) * var(--ui-scale));
  border-radius: calc((12px + 1px) * var(--ui-scale));
}

/* ===== KPIs en móvil: 1 columna, ancho completo ===== */
@media (max-width: 640px){
  .kpis{
    width: var(--track-width);
    margin: 12px auto 14px;
    grid-template-columns: 1fr !important; /* sobreescribe las 3 columnas */
    gap: 12px;
  }
  .kpis > .card{
    width: 100%;
    padding: 14px;              /* un pelín más compacto en mobile */
  }

  /* Ajustes finos para que todo respire bien en pantallas pequeñas */
  .kpi{
    gap: 10px;
    align-items: center;
  }
  .kpi-icon{
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .kpi-value{
    font-size: clamp(20px, 6vw, 24px);  /* evita saltos de línea feos */
  }
  .kpi-title{
    font-size: 12px;                     /* consistente con tu escala */
  }
}


/* ===== Analítica: layout ===== */
.analytics-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  padding: 8px;
}

@media (max-width: 900px){
  .analytics-grid{ grid-template-columns: 1fr; }
}

/* Encabezado peque de cada tarjeta de analítica */
.card-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }


/* ocultación genérica para alternar paneles */
.hidden{ display:none !important; }

/* 1) Canvas genéricos: no forzar ancho, solo limitarlo */
.analytics-grid canvas{
  max-width: 100%;       /* en vez de width:100% !important */
  height: auto;          /* mantiene proporción */
  display: block;
}

/* 2) Donut "Ratio de cierre": tamaño real más pequeño y centrado */
#ch-ratio{
  width: clamp(260px, 65%, 360px) !important;  /* ⇠ ajusta aquí el tamaño */
  aspect-ratio: 1 / 1;                         /* cuadrado perfecto */
  height: auto !important;
  margin: 10px auto 14px;                      /* centrado en la tarjeta */
}

/* 3) Centrar óptico dentro de su tarjeta (título arriba, gráfico debajo) */
.analytics-grid .card:has(#ch-ratio){
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;                            /* evita tarjetas gigantes */
}
/* === Canvas genéricos: no estirar a 100% de alto === */
.analytics-grid canvas{
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Donut "Ratio de cierre": tamaño más pequeño, centrado y nítido === */
/* cubre ambos ids por si el canvas sigue con el id antiguo */
#ch-ratio,
#ch-leads-mes{
  /* tamaño real del donut (cuadrado y más pequeño) */
  width: clamp(220px, 52%, 340px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin: 8px auto 16px;         /* centrado dentro de la tarjeta */
}

/* Centrar ópticamente el donut dentro de su tarjeta */
.analytics-grid .card:has(#ch-ratio),
.analytics-grid .card:has(#ch-leads-mes){
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;             /* evita tarjetas gigantes pero deja respirar */
}

/* Fino: separación del donut con el título y menos hueco abajo */
#ch-ratio,
#ch-leads-mes{
  margin-top: 25px !important;    /* + separación arriba (bajo el título) */
  margin-bottom: -4px !important; /* - hueco abajo */
  /* el tamaño sigue controlado por width/aspect-ratio, no se toca */
}

/* ===== Confeti CSS (se muestra cuando <body> tiene .party) ===== */
#confetti {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  display: none;            /* por defecto oculto */
}

body.party #confetti { display: block; }

#confetti .p {
  position: absolute;
  top: -8vh;
  width: 8px;
  height: 12px;
  opacity: 0.95;
  border-radius: 2px;
  transform: translate3d(0,0,0) rotate(0deg);
  animation: confetti-fall var(--t,1400ms) linear forwards,
             confetti-spin var(--t,1400ms) linear forwards;
}

/* Colores base (se repiten en CSS variables que inyectamos) */
#confetti .p.c1 { background: #64a5ff; }
#confetti .p.c2 { background: #5cd6c6; }
#confetti .p.c3 { background: #ffd166; }
#confetti .p.c4 { background: #ff6b6b; }
#confetti .p.c5 { background: #7bd88f; }

/* Caída */
@keyframes confetti-fall {
  to { transform: translate3d(var(--dx,0px), 110vh, 0) rotate(var(--r, 360deg)); }
}

/* Giro / aleteo */
@keyframes confetti-spin {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(0,55vh,0) rotate(calc(var(--r,360deg) * .5)); }
  100% { transform: translate3d(var(--dx,0px), 110vh,0) rotate(var(--r,360deg)); }
}


/* ===== AGENDA ===== */
.agenda-toolbar{
  display:flex; justify-content:space-between; gap:10px; padding:8px 8px 14px; border-bottom:1px solid var(--glass-border);
}
.chips-quick .chip{ margin-right:6px }
.agenda-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px;
}
.agenda-card{ min-height:520px }

/* Calendario */
.ag-cal-head{ display:grid; grid-template-columns:40px 1fr 40px; align-items:center; margin-bottom:6px }
.ag-cal-head h3{ text-align:center; margin:0; font-weight:700; letter-spacing:.2px }
.ag-cal-head .nav{
  height:36px; width:36px; border-radius:12px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06); cursor:pointer; box-shadow:var(--shadow);
}
.ag-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:8px 0 6px; color:var(--muted); font-size:12px
}
.ag-weekdays span{ text-align:center }
.ag-grid{
  display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:76px; gap:6px;
}
.ag-cell{
  position:relative; border:1px solid var(--glass-border); border-radius:18px;
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
  padding:8px; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ag-cell:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.25) }
.ag-day{ font-weight:700 }
.ag-out{ opacity:.45 }
.ag-today{ box-shadow:0 0 0 2px rgba(99,160,255,.6) inset }
.ag-selected{ background:linear-gradient(180deg, rgba(92,214,198,.32), rgba(92,214,198,.18)); color:#fff }
.ag-pill{
  position:absolute; top:8px; left:8px; padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid var(--glass-border); display:none;
}
.ag-selected .ag-pill{ display:inline-block }
.ag-dots{
  position:absolute; left:0; right:0; bottom:8px; display:flex; gap:6px; justify-content:center; align-items:center;
}
.ag-dot{ width:8px; height:8px; border-radius:999px; box-shadow:0 0 0 2px rgba(0,0,0,.25) }
.ag-more{ font-size:11px; color:var(--muted); margin-left:2px }

/* microtooltip */
.ag-tip{
  position:absolute; bottom:86px; left:50%; transform:translateX(-50%) translateY(4px);
  background:rgba(12,16,28,.96); color:#fff; padding:6px 8px; border-radius:10px;
  border:1px solid var(--glass-border); box-shadow:var(--shadow); font-size:12px;
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease;
  white-space:nowrap;
}
.ag-cell:hover .ag-tip{ opacity:1; transform:translateX(-50%) translateY(0) }

/* Lista */
.ag-list-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.chip.small{ padding:4px 8px; font-size:12px; border-radius:12px }
.chip.small.hidden{ display:none }

.ag-list-body{ position:relative; height:calc(520px - 40px); overflow:auto; padding-right:4px }
.ag-item{
  display:grid; grid-template-columns:18px 80px 1fr auto; gap:12px; align-items:center;
  padding:10px 8px; border-radius:12px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06); margin-bottom:8px; transition:background .12s ease, transform .12s ease;
}
.ag-item:hover{ background:rgba(255,255,255,.1); transform:translateY(-1px) }
.ag-bullet{ width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 2px rgba(0,0,0,.25) }
.ag-time{ font-weight:800 }
.ag-meta{ color:var(--muted); font-size:12px }
.ag-del{ opacity:0; transition:opacity .12s ease }
.ag-item:hover .ag-del{ opacity:1 }

/* vacíos, esqueletos, error */
.ag-empty{ display:grid; place-items:center; height:100%; color:var(--muted) }
.ag-skel{ height:44px; border-radius:12px; background:linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.12), rgba(255,255,255,.07));
  background-size:200% 100%; animation:shimmer 1.2s linear infinite; margin-bottom:8px }
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.ag-error{ border-top:3px solid #ff4b5e }

/* scroll fade */
.ag-list-body:after{
  content:""; position:sticky; bottom:-1px; height:24px; display:block;
  background:linear-gradient(180deg, transparent, rgba(11,29,58,.9)); pointer-events:none
}

/* vibración sutil */
@keyframes vibra{ 0%,100%{transform:translate(0,0)} 25%{transform:translate(1px,0)} 50%{transform:translate(-1px,0)} 75%{transform:translate(1px,0)} }
.ag-jump{ animation:vibra .18s ease 1 }


/* === Agenda: quitar la sombra/degradado al final de la lista de reuniones === */
#panel-agenda #ag-list .ag-list-body::after {
  content: none !important;      /* elimina el pseudo-elemento */
  display: none !important;      /* por si estuviera forzado a mostrarse */
  background: none !important;   /* redundante: evita cualquier fondo */
  box-shadow: none !important;   /* por si el fade se implementó con sombra */
}

/* (opcional) si ves un borde/sombra propia del card y también la quieres fuera: */
#panel-agenda #ag-list.agenda-card {
  box-shadow: var(--elev-0, none) !important; /* o simplemente 'none' */
}

/* === Agenda: reemplazar rebote por pop suave === */
@keyframes ag-pop {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.06); } /* 6% más grande, puedes bajar a 1.04 si lo quieres aún más sutil */
  100% { transform: scale(1); }
}

/* Sobrescribe la definición anterior de .ag-jump */
.ag-jump{
  animation: ag-pop .22s ease-out both;
}

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


/* Agenda: ocultar la píldora del día seleccionado en todo el calendario */
.ag-pill{ display:none !important; }
.ag-selected .ag-pill{ display:none !important; }

/* (opcional) un poquito más de énfasis al seleccionado sin la pill */
.ag-selected{
  background: linear-gradient(180deg, rgba(92,214,198,.34), rgba(92,214,198,.18));
  color:#fff;
  box-shadow: 0 0 0 2px rgba(92,214,198,.35) inset; /* quítalo si no lo quieres */
}


/* === Agenda: desactivar selección de texto SOLO en el calendario === */
#panel-agenda #ag-cal,
#panel-agenda #ag-cal * {
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antiguo */
  user-select: none;         /* Estándar */
  -webkit-touch-callout: none; /* iOS: evita menú al mantener pulsado */
}


/* === Agenda: chips rápidos en blanco === */
#panel-agenda .chips-quick .chip {
  color: #fff !important;
}

/* (opcional) asegurar contraste también al pasar el mouse/activo */
#panel-agenda .chips-quick .chip:hover,
#panel-agenda .chips-quick .chip:focus,
#panel-agenda .chips-quick .chip.active {
  color: #fff !important;
}


/* === Agenda: flechas de navegación blancas + efecto grow === */
#panel-agenda .ag-cal-head .nav{
  color: #fff !important;             /* símbolos ‹ › en blanco */
  display: grid; place-items: center; /* centra el carácter */
  font-weight: 700;
  line-height: 1;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
  transform-origin: center;
}

/* crecer ~10px (36->46px ≈ 1.28x) al hover / focus / active */
#panel-agenda .ag-cal-head .nav:hover,
#panel-agenda .ag-cal-head .nav:focus-visible,
#panel-agenda .ag-cal-head .nav:active{
  transform: scale(1.28);
}

/* opcional: un pelín de realce al pasar el ratón */
#panel-agenda .ag-cal-head .nav:hover{
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}


/* === Agenda: lista de reuniones sin scrollbar visible y lista “swipeable” === */
#panel-agenda #ag-list .ag-list-body{
  /* sigue siendo scrollable, solo ocultamos la barra */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge antiguo */
  -webkit-overflow-scrolling: touch; /* inercia iOS */
  overscroll-behavior: contain;    /* evita “rebotes” de la página */
}
#panel-agenda #ag-list .ag-list-body::-webkit-scrollbar{
  width: 0; height: 0; display: none;  /* Chrome/Safari/Edge */
}

/* Arrastrar en cualquier parte de la fila para hacer scroll vertical cómodamente */
#panel-agenda #ag-list .ag-item{
  touch-action: pan-y;   /* prioriza el gesto vertical */
  -webkit-tap-highlight-color: transparent; /* mejora tap en móvil */
}

/* Asegura que el botón “x” siga siendo clicable en móvil */
#panel-agenda #ag-list .ag-item .ag-del{
  touch-action: manipulation;
}

/* Agenda: bloquear selección del título "Reuniones" */
#panel-agenda #ag-list .ag-list-head,
#panel-agenda #ag-list .ag-list-head * {
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antiguo */
  user-select: none;         /* Estándar */
}


/* === Agenda: desactivar selección en TODO el contenido de "Reuniones" === */
#panel-agenda #ag-list,
#panel-agenda #ag-list * {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antiguo */
  user-select: none;         /* Estándar */
  -webkit-touch-callout: none; /* iOS: sin menú de copiar */
}

/* si en el futuro quieres permitir copiar solo el texto del nombre:
#panel-agenda #ag-list .ag-name { user-select: text; -webkit-user-select:text; }
*/


/* Agenda: drag-scroll con cursor tipo mano */
#panel-agenda #ag-list .ag-list-body{
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#panel-agenda #ag-list .ag-list-body.dragging{
  cursor: grabbing;
}







/* ===== Splash inicial SIN tocar el HTML ===== */
/* Capa de fondo (degradado) */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:10000;
  background:
    radial-gradient(1200px circle at 50% 40%, #1b2747 0%, #0b1020 60%, #070b16 100%);
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .6s ease, visibility .6s ease;
}

/* Logo centrado (usa /favicon.svg en la raíz del proyecto) */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:10001; pointer-events:none;
  display:block;
  width:120px; height:120px;
  margin:auto; /* centra */
  border-radius:28px;
  background:
    linear-gradient(135deg,#5cd6c6 0%, #63a0ff 100%) padding-box,
    url("/favicon.svg") center/56px 56px no-repeat; /* <— tu logo */
  box-shadow:
    0 24px 70px rgba(99,160,255,.45),
    inset 0 0 0 8px rgba(255,255,255,.08);
  transform:scale(.86);
  opacity:0;
  animation:splash-pop .7s ease .2s forwards;
}
@keyframes splash-pop{
  to{ transform:scale(1); opacity:1 }
}

/* Cuando la app esté lista, ocultar splash */
body.loaded::before,
body.loaded::after{
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .5s ease, visibility .5s ease;
}

/* ===== Animación de entrada de paneles (no afecta a las 3 cards) ===== */
#panel-analitica:not([hidden]),
#panel-agenda:not([hidden]),
section.panel[aria-label="Herramientas y tabla"]:not([hidden]){
  animation:panelFade .44s cubic-bezier(.21,.6,.2,1) both;
}
@keyframes panelFade{
  from{ opacity:0; transform:translateY(6px) scale(.995) }
  to{   opacity:1; transform:translateY(0)  scale(1) }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{
    animation:none !important; transition:none !important;
  }
  #panel-analitica:not([hidden]),
  #panel-agenda:not([hidden]),
  section.panel[aria-label="Herramientas y tabla"]:not([hidden]){
    animation:none !important;
  }
}

/* ===================== SPLASH 100% CSS ===================== */
/* Capa de fondo (degradado) que se auto-oculta tras un delay */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:10000;
  background:
    radial-gradient(1200px circle at 50% 40%, #1b2747 0%, #0b1020 60%, #070b16 100%);
  opacity:1; visibility:visible; pointer-events:auto;
  /* solo fade-out automático, sin tocar HTML/JS */
  animation: splash-hide .9s ease 1.4s forwards;
}

/* Logo centrado (favicon ocupa todo el bloque) */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:10001; pointer-events:none;
  width:120px; height:120px;
  margin:auto;
  border-radius:28px;

  /* --- solo el logo, ocupando 100% del bloque --- */
  background: url("../img/favicon.svg") center/100% 100% no-repeat;

  /* (opcional) sombras que ya tenías */
  box-shadow:
    0 24px 70px rgba(99,160,255,.45),
    inset 0 0 0 8px rgba(255,255,255,.08);

  transform:scale(.86);
  opacity:0;
  animation:
    splash-pop  .7s ease   .2s forwards,
    splash-hide .9s ease  1.4s forwards;
}




@keyframes splash-pop{
  to { transform:scale(1); opacity:1; }
}

@keyframes splash-hide{
  0%   { opacity:1; visibility:visible; }
  99%  { opacity:0; }
  100% { opacity:0; visibility:hidden; pointer-events:none; }
}

/* ===================== ENTRADA SUAVE DE PANELES ===================== */
/* No afecta a las 3 cards de arriba */
#panel-analitica:not([hidden]),
#panel-agenda:not([hidden]),
section.panel[aria-label="Herramientas y tabla"]:not([hidden]){
  animation: panelFade .44s cubic-bezier(.21,.6,.2,1) both;
}
@keyframes panelFade{
  from { opacity:0; transform:translateY(6px) scale(.995); }
  to   { opacity:1; transform:translateY(0)  scale(1); }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{
    animation:none !important; transition:none !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  }
  #panel-analitica:not([hidden]),
  #panel-agenda:not([hidden]),
  section.panel[aria-label="Herramientas y tabla"]:not([hidden]){
    animation:none !important;
  }
}


/* ==== Overrides de timing más lentos y smooth ==== */

/* Splash: entra un poco más despacio y permanece un pelín más */
body::before{
  /* antes: animation: splash-hide .9s ease 1.4s forwards; */
  animation: splash-hide 1.2s ease 1.6s forwards;
}
body::after{
  /* antes: .7s/.2s y .9s/1.4s */
  animation:
    splash-pop  .9s ease   .25s forwards,
    splash-hide 1.2s ease  1.6s  forwards;
}

/* Paneles (Leads / Analítica / Agenda): entrada más lenta */
#panel-analitica:not([hidden]),
#panel-agenda:not([hidden]),
section.panel[aria-label="Herramientas y tabla"]:not([hidden]){
  /* antes: .44s cubic-bezier(.21,.6,.2,1) */
  animation: panelFade .68s cubic-bezier(.22,.61,.2,1) both;
}

/* Opcional: un toque extra de suavidad al inicio */
@keyframes panelFade{
  from{
    opacity:0;
    transform:translateY(8px) scale(.994);
    filter: saturate(.9);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter: saturate(1);
  }
}


/* ===== Anti-flash para esqueletos de Reuniones (solo CSS) ===== */

/* 1) Los esqueletos no aparecen instantáneamente: pequeño delay */
#ag-items .ag-skel{
  opacity: 0;
  pointer-events: none;
  animation: agSkelIn .2s linear .24s forwards; /* delay .24s */
}
@keyframes agSkelIn { to { opacity: .35; } }

/* 2) Si hay items reales o mensaje de vacío, oculta esqueletos del todo */
#ag-items:has(.ag-item)  .ag-skel,
#ag-items:has(.ag-empty) .ag-skel{
  display: none !important;
}

/* 3) (opcional) cuando el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  #ag-items .ag-skel{ animation: none; opacity: 0; }
}

/* ================= RANGE CHIPS — versión suave + persistencia por foco ================ */
/* Paleta: azul más suave y misma sensación que el día seleccionado */
:root{
  --chip-accent: linear-gradient(160deg, #38cdd2 0%, #6aa8ff 100%); /* azul más suave */
  --chip-text-on: #ffffff;
  --chip-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  --chip-shadow-press: 0 12px 34px rgba(0, 0, 0, .28);
}

/* Transiciones suaves para los 3 chips */
#ag-today, #ag-week, #ag-month{
  transition: background .32s ease, color .32s ease, box-shadow .32s ease, border-color .32s ease, filter .32s ease;
}

/* Hover/focus/active = mismo look que el día seleccionado (azul suave) */
#ag-today:hover, #ag-today:focus, #ag-today:focus-visible, #ag-today:active,
#ag-week:hover,  #ag-week:focus,  #ag-week:focus-visible,  #ag-week:active,
#ag-month:hover, #ag-month:focus, #ag-month:focus-visible, #ag-month:active{
  background: var(--chip-accent);
  color: var(--chip-text-on);
  border-color: transparent;
  box-shadow: var(--chip-shadow), inset 0 0 0 1px rgba(255,255,255,.08);
  outline: none;
}

/* Al mantener pulsado (active) – un pelín más de sombra */
#ag-today:active, #ag-week:active, #ag-month:active{
  box-shadow: var(--chip-shadow-press), inset 0 0 0 1px rgba(255,255,255,.10);
}

/* =================== “Persistencia” sin JS =================== */
/* Un botón conserva el foco tras clic, así que el color se mantiene.
   Además, si en el futuro quieres fijarlo totalmente sin depender del foco,
   puedes añadir en HTML o vía JS uno de estos atributos al chip activo:
   [data-active="1"] o aria-pressed="true" — ya está estilado aquí. */
#ag-today[data-active="1"], #ag-week[data-active="1"], #ag-month[data-active="1"],
#ag-today[aria-pressed="true"], #ag-week[aria-pressed="true"], #ag-month[aria-pressed="true"]{
  background: var(--chip-accent);
  color: var(--chip-text-on);
  border-color: transparent;
  box-shadow: var(--chip-shadow), inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Accesibilidad: foco de teclado un poco más notorio */
#ag-today:focus-visible, #ag-week:focus-visible, #ag-month:focus-visible{
  filter: saturate(1.06);
}

/* Respeta usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  #ag-today, #ag-week, #ag-month{ transition: none !important; }
}