/* ============================================================
   Libélula · capa visual 2026
   Se carga DESPUÉS de styles.css. Solo retoca clases y variables
   existentes, y siempre a partir del color del tema activo
   (--primary / --accent), así funciona en todos los temas.
   ============================================================ */
:root {
  --l26-ease: cubic-bezier(.2,.8,.2,1);
  --l26-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
  --l26-line: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 55%, transparent), transparent);
}
@keyframes l26-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes l26-pop { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes l26-sheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(130%) skewX(-18deg); } }

/* ---------- Ambiente: luces suaves del color del tema tras el contenido ---------- */
/* z-index NEGATIVO: queda detrás del contenido sin crear contextos de apilamiento nuevos
   (dar z-index a los hijos de .main-area rompía los desplegables de la barra superior) */
.main-area::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(900px 520px at 88% -12%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 62%),
    radial-gradient(760px 460px at -8% 108%, color-mix(in srgb, var(--accent, var(--primary)) 9%, transparent), transparent 62%);
}
[data-flat="1"] .main-area::before { opacity: .55; }
::selection { background: color-mix(in srgb, var(--primary) 28%, transparent); }

/* ---------- Scroll ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 45%, var(--border)); background-clip: padding-box; }

/* ---------- Barra superior ---------- */
.topbar { backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-bottom-color: color-mix(in srgb, var(--primary) 14%, var(--border)); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--l26-line); pointer-events: none; }
.topbar-title { letter-spacing: -.035em; }
.search-box input { border-radius: 999px; background: color-mix(in srgb, var(--bg-input) 85%, transparent); }
.search-box input:focus { box-shadow: var(--l26-ring), 0 10px 26px -14px var(--primary); }
.topbar-btn { transition: transform .18s var(--l26-ease), background .18s, color .18s; }
.topbar-btn:hover { transform: translateY(-1px); }
.topbar-btn:active { transform: scale(.94); }

/* ---------- Menú lateral ---------- */
.sidebar { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sidebar-logo h1 { letter-spacing: -.04em; }
.nav-item { border-radius: 12px; transition: background .18s, color .18s, transform .18s var(--l26-ease); }
.nav-item::before { content: ''; position: absolute; left: -12px; top: 50%; width: 3px; height: 0; border-radius: 3px; background: linear-gradient(180deg, var(--primary), var(--accent, var(--primary))); transform: translateY(-50%); transition: height .25s var(--l26-ease), opacity .2s; opacity: 0; }
.nav-item.active::before { height: 62%; opacity: 1; }
.nav-item.active { box-shadow: none; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--primary) 4%, transparent) 95%); }
.nav-item:hover { transform: translateX(2px); }
.nav-item .icon { transition: transform .2s var(--l26-ease); }
.nav-item:hover .icon, .nav-item.active .icon { transform: scale(1.1); }
[data-sidebar="color"] .nav-item::before { background: #fff; }
[data-sidebar="color"] .nav-item.active { background: rgba(255,255,255,.16); box-shadow: none; }
.sidebar-user { border-radius: 12px; }
.sidebar-user .avatar-sm { transition: transform .2s var(--l26-ease); }
.sidebar-user:hover .avatar-sm { transform: scale(1.06); }

/* ---------- Contenido: entrada suave de cada pantalla ---------- */
.content > * { animation: l26-in .32s var(--l26-ease) backwards; }
.ws-header { border-bottom: none; position: relative; padding-bottom: 18px; }
.ws-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 50%, transparent), color-mix(in srgb, var(--primary) 12%, transparent) 55%, transparent); }
.ws-header h1, .ws-header h2, .page-header h1, .page-header h2 { letter-spacing: -.03em; }

/* ---------- Tarjetas ---------- */
.card { border-radius: 20px; transition: transform .22s var(--l26-ease), box-shadow .22s, border-color .22s; }
.card::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: var(--l26-line); opacity: .75; pointer-events: none; z-index: 1; }
.card:hover { transform: translateY(-2px); }
[data-flat="1"] .card { border-radius: 16px; }
[data-flat="1"] .card::before { opacity: .45; }
.card-header { border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent); }
.chart-card { border-radius: 18px; position: relative; overflow: hidden; transition: transform .22s var(--l26-ease), box-shadow .22s, border-color .22s; }
.chart-card::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: var(--l26-line); opacity: .7; pointer-events: none; }
.chart-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); box-shadow: 0 18px 40px -22px rgba(0,0,0,.45), 0 0 30px -18px var(--primary); }
.hover-lift { transition: transform .22s var(--l26-ease), box-shadow .22s; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(0,0,0,.5), 0 0 28px -16px var(--primary); }
.stat-tile { border-radius: 16px; }
.stat-tile .tile-value, .tile-value, .cc-title, .hero-greet { font-variant-numeric: tabular-nums; }
.dash-hero { border-radius: 22px; }
.dash-hero::before { background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 65%); }
.dash-hero::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent), transparent 65%); }

/* ---------- Botones ---------- */
.btn { border-radius: 12px; letter-spacing: -.01em; transition: transform .18s var(--l26-ease), box-shadow .18s, background .18s, color .18s, border-color .18s; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 2px; }
.btn-primary { position: relative; overflow: hidden; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 75%, transparent); }
.btn-primary::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-130%) skewX(-18deg); pointer-events: none; }
.btn-primary:hover::after { animation: l26-sheen .7s var(--l26-ease); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--primary) 85%, transparent); }
.btn-secondary { backdrop-filter: blur(8px); border-width: 1px; }
.btn-secondary:hover { background: color-mix(in srgb, var(--primary) 8%, var(--bg-elevated)); transform: translateY(-1px); }
.btn-ghost { border-radius: 10px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.btn-icon { border-radius: 12px; }
.btn-danger { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--danger) 80%, transparent); }
.btn-success { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--success) 80%, transparent); }
.hero-actions .qa { border-radius: 12px; }

/* ---------- Formularios ---------- */
.form-group label { font-size: 12.5px; color: var(--text-secondary); }
.form-input { border-radius: 12px; border-width: 1px; transition: border-color .18s, box-shadow .18s, background .18s; }
.form-input:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.form-input:focus { border-color: var(--primary); box-shadow: var(--l26-ring); }
.form-input:disabled { opacity: .6; }
select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8aa0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
textarea.form-input { border-radius: 14px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.toggle { transition: background .2s, box-shadow .2s; }
.toggle.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ---------- Tabs ---------- */
.tabs { border-radius: 14px; padding: 4px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); }
.tab { border-radius: 10px; transition: background .18s, color .18s, box-shadow .18s, transform .18s var(--l26-ease); }
.tab:hover:not(.active) { color: var(--text); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.tab.active { box-shadow: 0 6px 14px -8px rgba(0,0,0,.45), inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent); }

/* ---------- Tablas ---------- */
thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; color: var(--text-light); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }

/* ---------- Chips y estados ---------- */
.status-chip, .hero-chip, .tag-chip { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.kanban-count { border-radius: 999px; }

/* ---------- Modales ---------- */
.modal-overlay { background: rgba(4,7,18,.55); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
[data-theme="light"] .modal-overlay { background: rgba(15,23,42,.38); }
.modal { border-radius: 24px; border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border)); box-shadow: 0 40px 100px -30px rgba(0,0,0,.65), 0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent), 0 0 60px -30px var(--primary); animation: l26-pop .32s var(--l26-ease); position: relative; }
.modal::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: var(--l26-line); pointer-events: none; }
.modal-header h2 { letter-spacing: -.02em; }
.modal-close { transition: background .18s, color .18s, transform .25s var(--l26-ease); }
.modal-close:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); transform: rotate(90deg); }
.notif-dropdown { border-radius: 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: color-mix(in srgb, var(--primary) 16%, var(--border)); }
.notif-item { transition: background .15s, transform .15s var(--l26-ease); }
.notif-item:hover { transform: translateX(2px); }

/* ---------- Kanban / tareas ---------- */
.kanban-column { border-radius: 16px; background: color-mix(in srgb, var(--bg-elevated) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kanban-column-header { border-bottom-color: color-mix(in srgb, var(--primary) 14%, var(--border)); }
.task-card { border-radius: 12px; transition: transform .2s var(--l26-ease), box-shadow .2s, border-color .2s; }
.task-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 12px 26px -14px rgba(0,0,0,.5), 0 0 22px -14px var(--primary); }

/* ---------- Vacíos, carga, progreso ---------- */
.empty-state { border-radius: 20px; }
.progress-bar { height: 8px; background: color-mix(in srgb, var(--border) 70%, transparent); }
.progress-fill { box-shadow: 0 0 14px -4px var(--primary); }
.skeleton { border-radius: 10px; }
.spinner { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 45%, transparent)); }

/* ============================================================
   v2 · toques más visibles (siempre a partir del color del tema)
   ============================================================ */
/* Rejilla de puntos + luces más presentes, desvanecidas hacia abajo */
.main-area::before {
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--primary) 16%, transparent) 1px, transparent 1.5px) 0 0 / 26px 26px,
    radial-gradient(1000px 560px at 88% -14%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%),
    radial-gradient(820px 500px at -10% 110%, color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent), transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,.35) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,.35) 100%);
}
[data-flat="1"] .main-area::before { opacity: .45; }

/* Títulos de sección con degradado hacia el color del tema */
.topbar-title, .ws-header h1, .page-header h1, .content > * > h1:first-child, .content h1.page-title {
  background: linear-gradient(90deg, var(--text) 35%, color-mix(in srgb, var(--text) 35%, var(--primary)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.modal-header h2 { background: linear-gradient(90deg, var(--text) 45%, color-mix(in srgb, var(--text) 40%, var(--primary))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Menú: iconos en "baldosas" que se encienden */
.nav-item { padding: 9px 12px; }
.nav-item .icon { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--text-sidebar) 9%, transparent); transition: background .2s, color .2s, transform .2s var(--l26-ease), box-shadow .2s; }
.nav-item:hover .icon { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.nav-item.active .icon { background: linear-gradient(135deg, var(--primary), var(--accent, var(--primary))); color: #fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 80%, transparent); transform: scale(1.06); }
[data-sidebar="color"] .nav-item .icon { background: rgba(255,255,255,.10); }
[data-sidebar="color"] .nav-item:hover .icon { background: rgba(255,255,255,.2); color: #fff; }
[data-sidebar="color"] .nav-item.active .icon { background: rgba(255,255,255,.26); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 16px -8px rgba(0,0,0,.4); }
[data-sidebar="color"] .nav-item.active .icon i, [data-sidebar="color"] .nav-item .icon i { color: inherit; }
/* El icono activo siempre en blanco sobre la baldosa de color (styles.css lo pintaba del color del tema en temas claros → invisible) */
.nav-item.active .icon i, .nav-item.active .icon .icon-neon, [data-flat="1"] .nav-item.active .icon-neon { color: #fff !important; text-shadow: none !important; }
.nav-item:hover:not(.active) .icon i, .nav-item:hover:not(.active) .icon .icon-neon { color: var(--primary) !important; text-shadow: none !important; }
[data-sidebar="color"] .nav-item:hover:not(.active) .icon i, [data-sidebar="color"] .nav-item:hover:not(.active) .icon .icon-neon { color: #fff !important; }
.sidebar-section-title { display: flex; align-items: center; gap: 10px; }
.sidebar-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--text-sidebar) 30%, transparent), transparent); }
.sidebar-user .avatar-sm { box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 0 4px color-mix(in srgb, var(--sidebar-accent, var(--primary)) 70%, transparent); border-color: transparent; }

/* Tarjetas: borde que se ilumina al pasar y sombra con el color del tema */
.card:hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--card-border, var(--border))); box-shadow: 0 22px 44px -24px rgba(0,0,0,.45), 0 0 36px -20px var(--primary); }
.card:hover::before { opacity: 1; left: 4%; right: 4%; }
.chart-card:hover::before { opacity: 1; left: 4%; right: 4%; }
.card::before, .chart-card::before { transition: left .3s var(--l26-ease), right .3s var(--l26-ease), opacity .3s; }

/* Botones principales: brillo interior */
.btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -8px color-mix(in srgb, var(--primary) 75%, transparent); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px -8px color-mix(in srgb, var(--primary) 85%, transparent); }

/* Barra superior: chips y botones con cristal */
.topbar-btn { background: color-mix(in srgb, var(--bg-card) 40%, transparent); border: 1px solid transparent; }
.topbar-btn:hover { border-color: color-mix(in srgb, var(--primary) 30%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Vacíos: icono con halo */
.empty-state i, .empty-state .es-icon { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--primary) 35%, transparent)); }

/* ============================================================
   v6 · más vida: entradas escalonadas, anillos que se dibujan,
   barras que crecen, iconos que reaccionan, pulsos de aviso
   ============================================================ */
@keyframes l26-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes l26-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes l26-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes l26-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes l26-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } }
@keyframes l26-halo { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes l26-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes l26-popnum { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes l26-donut { from { --p: 0; } }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

/* Tarjetas, gráficos y KPIs entran en cascada */
.content .card, .content .chart-card, .content .stat-tile, .content .dash-hero { animation: l26-rise .45s var(--l26-ease) backwards; }
.content .card:nth-child(2), .content .chart-card:nth-child(2), .content .stat-tile:nth-child(2) { animation-delay: .06s; }
.content .card:nth-child(3), .content .chart-card:nth-child(3), .content .stat-tile:nth-child(3) { animation-delay: .12s; }
.content .card:nth-child(4), .content .chart-card:nth-child(4), .content .stat-tile:nth-child(4) { animation-delay: .18s; }
.content .card:nth-child(5), .content .chart-card:nth-child(5), .content .stat-tile:nth-child(5) { animation-delay: .24s; }
.content .card:nth-child(6), .content .chart-card:nth-child(6), .content .stat-tile:nth-child(6) { animation-delay: .30s; }
.content .card:nth-child(n+7), .content .chart-card:nth-child(n+7), .content .stat-tile:nth-child(n+7) { animation-delay: .34s; }
.stat-tile .tile-value, .cc-title { animation: l26-popnum .5s var(--l26-ease) .2s both; }
.stat-tile .tile-icon { transition: transform .25s var(--l26-ease), box-shadow .25s; }
.stat-tile:hover .tile-icon { transform: rotate(-6deg) scale(1.12); box-shadow: 0 8px 18px -8px var(--tile-accent), inset 0 0 0 1px color-mix(in srgb, var(--tile-accent) 45%, transparent); }

/* Filas de tablas y listas de notificaciones, en cascada corta */
tbody tr { animation: l26-rise .3s var(--l26-ease) backwards; }
tbody tr:nth-child(2) { animation-delay: .03s; } tbody tr:nth-child(3) { animation-delay: .06s; } tbody tr:nth-child(4) { animation-delay: .09s; }
tbody tr:nth-child(5) { animation-delay: .12s; } tbody tr:nth-child(6) { animation-delay: .15s; } tbody tr:nth-child(7) { animation-delay: .18s; }
tbody tr:nth-child(8) { animation-delay: .21s; } tbody tr:nth-child(9) { animation-delay: .24s; } tbody tr:nth-child(n+10) { animation-delay: .26s; }
.notif-item { animation: l26-slide .25s var(--l26-ease) backwards; }
.notif-item:nth-child(2) { animation-delay: .04s; } .notif-item:nth-child(3) { animation-delay: .08s; } .notif-item:nth-child(4) { animation-delay: .12s; } .notif-item:nth-child(n+5) { animation-delay: .15s; }

/* Menú lateral: los elementos entran deslizando al cargar */
.nav-item { animation: l26-slide .35s var(--l26-ease) backwards; }
.sidebar-section .nav-item:nth-child(1) { animation-delay: .02s; } .sidebar-section .nav-item:nth-child(2) { animation-delay: .05s; }
.sidebar-section .nav-item:nth-child(3) { animation-delay: .08s; } .sidebar-section .nav-item:nth-child(4) { animation-delay: .11s; }
.sidebar-section .nav-item:nth-child(5) { animation-delay: .14s; } .sidebar-section .nav-item:nth-child(6) { animation-delay: .17s; }
.sidebar-section .nav-item:nth-child(7) { animation-delay: .20s; } .sidebar-section .nav-item:nth-child(8) { animation-delay: .23s; }
.sidebar-section .nav-item:nth-child(9) { animation-delay: .26s; } .sidebar-section .nav-item:nth-child(n+10) { animation-delay: .29s; }
.sidebar-logo h1 { transition: letter-spacing .3s var(--l26-ease); }
.sidebar-logo:hover h1 { letter-spacing: 0; }
.sidebar-logo:hover img, .sidebar-logo:hover svg { animation: l26-float 1.6s ease-in-out infinite; }

/* Cabeceras: la línea del título se dibuja */
.ws-header::after { transform-origin: left; animation: l26-draw .7s var(--l26-ease) .15s both; }
.topbar::after { transform-origin: left; animation: l26-draw 1s var(--l26-ease) backwards; }

/* Progreso: barras que crecen y anillos que se dibujan */
.progress-fill { transform-origin: left; animation: l26-grow .9s var(--l26-ease) backwards; }
.donut-ring { animation: l26-donut 1.1s var(--l26-ease) backwards; }
.toggle::after { transition: left .25s var(--l26-ease), transform .25s; }
.toggle:active::after { transform: scaleX(1.15); }

/* Avisos: el punto rojo late; el botón de Lumi respira */
.topbar-btn .notif-dot, .nav-item .badge { animation: l26-pulse 2s ease-out infinite; }
.lumi-fab { position: relative; }
.lumi-fab::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); animation: l26-halo 2.4s ease-out infinite; pointer-events: none; }

/* Vacíos: el icono flota */
.empty-state i, .empty-state .es-icon { animation: l26-float 3.2s ease-in-out infinite; display: inline-block; }

/* Botones y chips: micro-respuesta al pulsar */
.btn-icon:hover { transform: rotate(-8deg) scale(1.08); }
.status-chip, .hero-chip, .tag-chip { transition: transform .18s var(--l26-ease); }
.status-chip:hover, .hero-chip:hover, .tag-chip:hover { transform: translateY(-1px); }
.form-group label { transition: color .18s; }
.form-group:focus-within label { color: var(--primary); }

/* ============================================================
   v7 · KPIs sin tarjeta: SOLO los .stat-tile del dashboard (con clases).
   La heurística por estructura (cajas de rejilla con icono+cifra o
   etiqueta+cifra) se retiró el 6-sep-2026: se colaba en el admin, en la
   ficha de usuario y en Rendimiento y rompía la tipografía.
   ============================================================ */
.stat-tile { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 4px 4px 4px 0 !important; transform: none !important; overflow: visible !important; }
.stat-tile::before, .stat-tile::after { display: none !important; }
.stat-tile .tile-icon { width: auto !important; height: auto !important; min-width: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: center; gap: 12px; align-self: stretch; font-size: 17px !important; opacity: .95; }
.stat-tile .tile-icon::before { content: ''; width: 4px; align-self: stretch; min-height: 46px; border-radius: 4px; background: currentColor; opacity: .9; box-shadow: 0 0 16px -3px currentColor; transform-origin: center; animation: l26-grow .5s var(--l26-ease) backwards; }
.stat-tile .tile-value { font-size: 30px !important; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.05 !important; }
.stat-tile .tile-label { letter-spacing: .8px; }
.stat-tile:hover { transform: translateX(3px) !important; box-shadow: none !important; }
.stat-tile:hover .tile-icon::before { box-shadow: 0 0 22px -2px currentColor; }
.stat-tile:hover .tile-icon { transform: none; }
.stat-tile .tile-go { display: none; }

/* ============================================================
   Pulso del negocio (dashboard de admin): paneles con icono, anillos y barras
   ============================================================ */
.pulse-panel { --pc: var(--primary); background: var(--bg-card-gradient, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--pc) 22%, var(--border)); border-radius: 20px; padding: 16px 18px 18px; position: relative; overflow: hidden; box-shadow: var(--card-shadow, none); animation: l26-rise .45s var(--l26-ease) backwards; }
.pulse-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--pc), transparent 70%); }
.pulse-panel::after { content: ''; position: absolute; top: -80px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 16%, transparent), transparent 65%); pointer-events: none; }
.pulse-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; z-index: 1; }
.pulse-head-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #6366f1)); box-shadow: 0 8px 18px -8px var(--pc); flex-shrink: 0; }
.pulse-title { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.pulse-sub { font-size: 11.5px; color: var(--text-light); }
.pulse-chip { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent); white-space: nowrap; }
.pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; position: relative; z-index: 1; }
.pulse-kpi { --kc: var(--primary); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); border: 1px solid var(--border); position: relative; transition: transform .2s var(--l26-ease), border-color .2s, box-shadow .2s; min-width: 0; }
.pulse-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kc) 45%, var(--border)); box-shadow: 0 14px 28px -18px var(--kc); }
.pulse-ic { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 28%, transparent); }
.pulse-val { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--kc); line-height: 1.1; font-variant-numeric: tabular-nums; animation: l26-popnum .5s var(--l26-ease) .15s backwards; }
.pulse-lbl { font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }
.pulse-sub2 { font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.pulse-bar { height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--border) 80%, transparent); overflow: hidden; margin-top: 8px; }
.pulse-bar > div { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--kc), color-mix(in srgb, var(--kc) 60%, #fff)); transform-origin: left; animation: l26-grow .8s var(--l26-ease) .2s backwards; }
.pulse-dot { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--kc); box-shadow: 0 0 10px var(--kc); }
.pulse-kpi .pulse-ring { width: 60px; height: 60px; flex-shrink: 0; box-shadow: 0 0 18px -6px var(--donut-color); }
.pulse-kpi .pulse-ring .donut-hole { width: 46px; height: 46px; font-size: 12.5px; background: var(--bg-card); }
.pulse-kpi .pulse-ring .donut-hole small { font-size: 9px; color: var(--text-light); font-weight: 700; }
.pulse-kpi:not(:hover) .pulse-ring { transition: none; }
.pulse-list { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
.pulse-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); border: 1px solid var(--border); flex-wrap: wrap; transition: transform .2s var(--l26-ease), border-color .2s; }
.pulse-row:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.pulse-av { width: 38px; height: 38px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; box-shadow: 0 8px 16px -8px rgba(0,0,0,.5); }
.pulse-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.pulse-tag { --tc: var(--text-light); display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 12%, transparent); color: var(--tc); }
@media (max-width: 640px) { .pulse-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Torre de control de la asesoría (dashboard de la matriz)
   ============================================================ */
.ase-dash { --ase-a: #1fb6ff; --ase-b: #6d6cff; --ase-c: #c084fc; }
.ase-hero { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 28px 22px; color: #fff; margin-bottom: 18px; isolation: isolate;
  background: radial-gradient(900px 420px at 10% -20%, rgba(31,182,255,.35), transparent 60%), radial-gradient(700px 380px at 95% 10%, rgba(192,132,252,.38), transparent 60%), linear-gradient(135deg, #0d0b2a 0%, #16113f 55%, #1c1650 100%);
  box-shadow: 0 30px 70px -30px rgba(20,10,60,.7), inset 0 1px 0 rgba(255,255,255,.08); animation: l26-rise .5s var(--l26-ease) backwards; }
.ase-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; z-index: -1; }
.ase-hero::after { content: ''; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255,255,255,.04); pointer-events: none; z-index: -1; }
.ase-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); gap: 26px; align-items: center; }
.ase-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 8px; }
.ase-eyebrow i { color: var(--ase-a); font-size: 15px; }
.ase-greet { font-size: 30px; font-weight: 800; letter-spacing: -.035em; margin: 6px 0 4px; color: #fff; background: linear-gradient(90deg, #fff 30%, #cfe9ff 70%, #e9d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ase-sub { font-size: 13.5px; color: rgba(255,255,255,.72); }
.ase-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ase-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); cursor: pointer; transition: transform .18s var(--l26-ease), background .18s; backdrop-filter: blur(8px); }
.ase-btn:hover { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.ase-btn-primary { background: linear-gradient(135deg, var(--ase-a), var(--ase-b)); border-color: transparent; box-shadow: 0 10px 24px -10px var(--ase-a); }
.ase-storage { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: rgba(255,255,255,.62); }
.ase-storage-bar { flex: 0 0 140px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.ase-storage-bar > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); }
.ase-hero-center { display: flex; align-items: center; gap: 16px; padding: 0 8px; }
.ase-ring { --p: 0; width: 126px; height: 126px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; position: relative;
  background: conic-gradient(from -90deg, var(--ase-a) 0, var(--ase-c) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); box-shadow: 0 0 40px -10px var(--ase-b), inset 0 0 0 1px rgba(255,255,255,.08); animation: l26-donut 1.2s var(--l26-ease) backwards; }
.ase-ring::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.15); animation: lumiSpinSlow 40s linear infinite; }
@keyframes lumiSpinSlow { to { transform: rotate(360deg); } }
.ase-ring-in { width: 100px; height: 100px; border-radius: 50%; background: #120f33; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ase-ring-big { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: linear-gradient(135deg, #fff, #cfe9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ase-ring-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.6); margin-top: 3px; }
.ase-ring-t { font-size: 14px; font-weight: 800; }
.ase-ring-s { font-size: 12px; color: rgba(255,255,255,.66); }
.ase-hero-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ase-kpi { --kc: var(--ase-a); display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.ase-kpi i { font-size: 20px; color: var(--kc); flex-shrink: 0; }
.ase-kpi b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ase-kpi span { font-size: 10.5px; color: rgba(255,255,255,.62); line-height: 1.3; display: block; }
.ase-strip { display: flex; gap: 8px; overflow-x: auto; padding: 18px 2px 4px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); scrollbar-width: none; }
.ase-strip::-webkit-scrollbar { display: none; }
.ase-chipco { --uc: #10b981; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: transform .18s var(--l26-ease), background .18s; }
.ase-chipco:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.ase-chipco-av { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: #1b1747; box-shadow: 0 0 0 2px var(--uc), 0 0 12px -2px var(--uc); overflow: hidden; }
.ase-chipco-av img { width: 100%; height: 100%; object-fit: cover; }
.ase-chipco-b { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--uc); color: #fff; }
.ase-onb { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 14px 18px; margin-bottom: 18px; }
.ase-onb-x { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text-light); cursor: pointer; font-size: 20px; }
.ase-onb-h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13.5px; margin-bottom: 10px; padding-right: 28px; }
.ase-onb-h i { color: var(--primary); } .ase-onb-h span { font-size: 11px; color: var(--text-light); font-weight: 700; }
.ase-onb-bar { flex: 1; max-width: 220px; height: 6px; border-radius: 6px; background: var(--bg-elevated); overflow: hidden; }
.ase-onb-bar > div { height: 100%; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); }
.ase-onb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ase-onb-step { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-elevated); font-size: 12.5px; font-weight: 600; }
.ase-onb-step i { color: var(--text-light); font-size: 17px; } .ase-onb-step.done { opacity: .6; text-decoration: line-through; } .ase-onb-step.done i { color: #10b981; }
.ase-onb-step span { flex: 1; }
.ase-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: 18px; align-items: start; }
.ase-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--text-secondary); margin: 6px 0 12px; }
.ase-h i { color: var(--primary); font-size: 17px; } .ase-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.ase-h-sub { font-size: 11px; font-weight: 700; color: var(--text-light); text-transform: none; letter-spacing: 0; }
.ase-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ase-filter { --fc: var(--primary); display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .18s var(--l26-ease); }
.ase-filter i { color: var(--fc); } .ase-filter b { padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--fc) 14%, transparent); color: var(--fc); font-size: 11px; }
.ase-filter:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--fc) 45%, var(--border)); }
.ase-filter.on { background: color-mix(in srgb, var(--fc) 12%, var(--bg-card)); border-color: var(--fc); color: var(--fc); }
.ase-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.ase-card { --uc: #10b981; --p: 100; position: relative; background: var(--bg-card-gradient, var(--bg-card)); border: 1px solid var(--card-border, var(--border)); border-radius: 20px; padding: 16px 16px 14px; overflow: hidden; transition: transform .22s var(--l26-ease), box-shadow .22s, border-color .22s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--uc); box-shadow: 0 0 14px -2px var(--uc); }
.ase-card::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--uc) 14%, transparent), transparent 65%); pointer-events: none; }
.ase-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--uc) 45%, var(--border)); box-shadow: 0 22px 40px -22px rgba(0,0,0,.45), 0 0 30px -18px var(--uc); }
.ase-card-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ase-card-av { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(from -90deg, #10b981 0, #10b981 calc(var(--p) * 1%), color-mix(in srgb, var(--border) 80%, transparent) 0); }
.ase-card-av span { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ase-b), var(--ase-c)); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid var(--bg-card); }
.ase-card-av img { width: 100%; height: 100%; object-fit: cover; }
.ase-card-name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ase-est { --ec: #10b981; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ec) 14%, transparent); color: var(--ec); }
.ase-card-meta { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }
.ase-enter { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--primary); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .18s; }
.ase-enter:hover { background: var(--primary); color: #fff; }
.ase-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.ase-card-stats > div { background: color-mix(in srgb, var(--bg-elevated) 75%, transparent); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.ase-card-stats small { display: block; font-size: 9.5px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .5px; }
.ase-card-stats b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-models { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ase-model { --mc: #f59e0b; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mc) 40%, transparent); background: color-mix(in srgb, var(--mc) 12%, transparent); color: var(--mc); font-size: 11.5px; font-weight: 800; cursor: pointer; transition: transform .15s; }
.ase-model:hover { transform: translateY(-1px); } .ase-model em { font-style: normal; font-weight: 600; opacity: .85; } .ase-model.none { --mc: #94a3b8; cursor: default; }
.ase-alerts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ase-alert { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #b45309; }
.ase-alert.vence, .ase-alert.vf, .ase-alert.vencidas { color: #ef4444; } .ase-alert.inactiva, .ase-alert.vacia { color: var(--text-light); }
.ase-card-foot { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--border); padding-top: 10px; }
.ase-card-owner { margin-left: auto; font-size: 11px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.ase-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; }
.ase-panel { background: var(--bg-card-gradient, var(--bg-card)); border: 1px solid var(--card-border, var(--border)); border-radius: 18px; padding: 14px 16px; }
.ase-mini-empty { font-size: 12.5px; color: var(--text-light); padding: 6px 0 4px; }
.ase-timeline { display: flex; flex-direction: column; gap: 10px; position: relative; }
.ase-timeline::before { content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--ase-a), var(--ase-c)); opacity: .35; }
.ase-tl { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.ase-tl-date { width: 44px; flex-shrink: 0; text-align: center; border-radius: 12px; padding: 5px 0; background: var(--bg-elevated); border: 1px solid var(--border); position: relative; z-index: 1; }
.ase-tl-date b { display: block; font-size: 16px; line-height: 1; font-weight: 800; } .ase-tl-date span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-light); font-weight: 700; }
.ase-tl.hot .ase-tl-date { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--bg-elevated)); } .ase-tl.hot .ase-tl-date b { color: #ef4444; }
.ase-tl.done .ase-tl-date { border-color: #10b981; } .ase-tl.done .ase-tl-date b { color: #10b981; }
.ase-tl-body { flex: 1; min-width: 0; }
.ase-tl-t { font-size: 13px; font-weight: 800; display: flex; justify-content: space-between; gap: 8px; } .ase-tl-t span { font-size: 11px; font-weight: 700; color: var(--text-light); }
.ase-tl-bar { height: 5px; border-radius: 5px; background: var(--border); overflow: hidden; margin: 5px 0 4px; } .ase-tl-bar > div { height: 100%; background: linear-gradient(90deg, var(--ase-a), #10b981); border-radius: 5px; }
.ase-tl-s { font-size: 11px; color: var(--text-light); }
.ase-moves { display: flex; flex-direction: column; gap: 4px; }
.ase-move { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.ase-move:hover { background: var(--bg-elevated); } .ase-move i { font-size: 18px; } .ase-move b { display: block; font-size: 12.5px; } .ase-move span { font-size: 11px; color: var(--text-light); }
.ase-bars { display: flex; align-items: flex-end; gap: 5px; height: 76px; }
.ase-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ase-bar-e { width: 100%; border-radius: 5px; background: color-mix(in srgb, #6d6cff 25%, transparent); display: flex; align-items: flex-end; overflow: hidden; }
.ase-bar-c { width: 100%; background: linear-gradient(180deg, var(--ase-a), var(--ase-b)); border-radius: 5px; }
.ase-bar span { font-size: 9px; color: var(--text-light); }
.ase-legend { display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--text-light); margin-top: 8px; }
.ase-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ase-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 20px; border: 1px dashed var(--border); border-radius: 18px; text-align: center; font-size: 13.5px; color: var(--text-secondary); }
.ase-empty i { font-size: 34px; color: var(--primary); }
@media (max-width: 1000px) { .ase-hero-grid { grid-template-columns: 1fr; } .ase-hero-center { justify-content: flex-start; } .ase-main { grid-template-columns: 1fr; } .ase-rail { position: static; } }
@media (max-width: 640px) { .ase-cards { grid-template-columns: 1fr; } .ase-card-stats { grid-template-columns: repeat(2, 1fr); } .ase-hero { padding: 20px; } .ase-greet { font-size: 24px; } }


/* ---------- Variantes del hero "torre de control": Mis empresas y panel de admin ---------- */
.ase-strip-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.55); padding-right: 6px; white-space: nowrap; flex-shrink: 0; align-self: center; }
.ase-strip-lbl i { color: var(--ase-a); font-size: 14px; }
a.ase-chipco { text-decoration: none; }
.ase-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: currentColor; box-shadow: 0 0 10px currentColor; }
.ase-admin { --ase-a: #22d3ee; --ase-b: #6366f1; --ase-c: #f472b6; }
.ase-admin .ase-hero { background: radial-gradient(900px 420px at 10% -20%, rgba(34,211,238,.3), transparent 60%), radial-gradient(700px 380px at 95% 10%, rgba(244,114,182,.28), transparent 60%), linear-gradient(135deg, #070b1f 0%, #101a3f 55%, #141c4e 100%); margin-bottom: 22px; }
.ase-admin .ase-greet { background: linear-gradient(90deg, #fff 30%, #cffafe 70%, #fce7f3); -webkit-background-clip: text; background-clip: text; }
.ase-admin .ase-ring-in { background: #0b1030; }
.ase-misemp .ase-hero { margin-bottom: 14px; }
.ase-misemp .ase-storage { flex-wrap: wrap; row-gap: 6px; }
.ase-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px; padding: 4px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border); width: fit-content; max-width: 100%; }
.ase-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: none; background: transparent; color: var(--text-light); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .18s var(--l26-ease); }
.ase-tab i { font-size: 16px; }
.ase-tab:hover { color: var(--text); background: color-mix(in srgb, var(--bg-card) 70%, transparent); }
.ase-tab.on { background: var(--bg-card); color: var(--primary); box-shadow: 0 6px 16px -10px rgba(0,0,0,.45); }
.ase-tab.on i { color: var(--primary); }
.ase-misemp .ase-card { padding-left: 22px; }
.ase-misemp .ase-card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset, 0 0 24px -14px var(--primary); }


/* ---------- Mis empresas: hero "cartera" (esmeralda/violeta, barra de cobro segmentada, baldosas) ---------- */
.ase-misemp { --ase-a: #34d399; --ase-b: #2dd4bf; --ase-c: #a78bfa; }
.ase-misemp .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(52,211,153,.26), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(167,139,250,.34), transparent 60%), linear-gradient(135deg, #091126 0%, #101a3d 55%, #171a4e 100%); }
.ase-misemp .ase-greet { background: linear-gradient(90deg, #fff 30%, #d1fae5 70%, #ede9fe); -webkit-background-clip: text; background-clip: text; }
.ase-me-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.05fr); gap: 28px; align-items: center; }
.ase-me-cobro { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 16px 18px; backdrop-filter: blur(8px); }
.ase-me-cobro-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ase-me-cobro-h i { color: var(--ase-a); font-size: 15px; vertical-align: -2px; margin-right: 4px; }
.ase-me-cobro-h b { font-size: 32px; letter-spacing: -.04em; line-height: 1; background: linear-gradient(135deg, #fff, #a7f3d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ase-gauge { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.1); margin: 10px 0 8px; gap: 2px; }
.ase-gauge > div { height: 100%; transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
@keyframes l26-growx { from { transform: scaleX(0); } }
.ase-gauge .g-c { background: linear-gradient(90deg, #34d399, #2dd4bf); box-shadow: 0 0 14px -2px #34d399; } .ase-gauge .g-p { background: #fbbf24; } .ase-gauge .g-v { background: #fb7185; }
.ase-gauge-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: rgba(255,255,255,.66); }
.ase-gauge-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ase-statrow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.ase-statrow > div { padding: 0 10px; border-left: 1px solid rgba(255,255,255,.1); min-width: 0; } .ase-statrow > div:first-child { padding-left: 0; border-left: none; }
.ase-statrow b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sc, #fff); }
.ase-statrow span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.55); font-weight: 700; white-space: nowrap; }
.ase-me-tiles { display: flex; gap: 10px; overflow-x: auto; padding: 16px 2px 4px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); scrollbar-width: none; align-items: stretch; }
.ase-me-tiles::-webkit-scrollbar { display: none; }
.ase-tile { --uc: #10b981; flex: 0 0 196px; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer; text-align: left; position: relative; overflow: hidden; transition: transform .18s var(--l26-ease), background .18s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--uc); box-shadow: 0 0 12px var(--uc); }
.ase-tile:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.ase-tile-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ase-tile-av { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--ase-b), var(--ase-c)); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; overflow: hidden; flex-shrink: 0; }
.ase-tile-av img { width: 100%; height: 100%; object-fit: cover; }
.ase-tile-n { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-tile-s { font-size: 10.5px; color: rgba(255,255,255,.62); display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; } .ase-tile-s b { color: var(--uc); }
@media (max-width: 900px) { .ase-me-grid { grid-template-columns: 1fr; } .ase-statrow { grid-template-columns: 1fr 1fr; row-gap: 10px; } .ase-statrow > div:nth-child(3) { border-left: none; padding-left: 0; } }

/* ---------- Admin: hero "sala de máquinas" (cian/rosa, barras de altas, filas de pulso, mini-tarjetas) ---------- */
.ase-ad-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(250px, .85fr) minmax(250px, .8fr); gap: 24px; align-items: stretch; }
.ase-ad-chart { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 12px; display: flex; flex-direction: column; backdrop-filter: blur(8px); }
.ase-ad-chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ase-ad-chart-h i { color: var(--ase-a); font-size: 14px; vertical-align: -2px; margin-right: 3px; }
.ase-ad-chart-h b { font-size: 26px; letter-spacing: -.03em; color: #fff; line-height: 1; }
.ase-ad-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: 10px; }
.ase-ad-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.ase-ad-bar > div { width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--ase-a), var(--ase-b)); transform-origin: bottom; animation: l26-growy .7s var(--l26-ease) backwards; box-shadow: 0 0 14px -4px var(--ase-a); }
.ase-ad-bar.today > div { background: linear-gradient(180deg, #fff, var(--ase-c)); box-shadow: 0 0 16px -4px var(--ase-c); }
.ase-ad-bar span { font-size: 9.5px; color: rgba(255,255,255,.5); font-weight: 700; text-transform: uppercase; }
.ase-ad-bar.today span { color: #fff; }
@keyframes l26-growy { from { transform: scaleY(0); } }
.ase-ad-chart-f { font-size: 11px; color: rgba(255,255,255,.62); margin-top: 8px; line-height: 1.4; }
.ase-ad-rows { display: flex; flex-direction: column; justify-content: center; }
.ase-adrow { --kc: var(--ase-a); display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.ase-adrow:last-child { border-bottom: none; }
.ase-adrow-v { font-size: 21px; font-weight: 800; letter-spacing: -.03em; min-width: 68px; text-align: right; font-variant-numeric: tabular-nums; color: var(--kc); white-space: nowrap; text-shadow: 0 0 18px color-mix(in srgb, var(--kc) 60%, transparent); }
.ase-adrow-t { flex: 1; min-width: 0; }
.ase-adrow-t > span { display: block; font-size: 11.5px; color: rgba(255,255,255,.74); line-height: 1.3; }
.ase-adrow-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; }
.ase-adrow-bar > div { height: 100%; background: var(--kc); border-radius: 4px; transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
.ase-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #34d399; margin-right: 6px; vertical-align: 0; animation: asePing 1.8s ease-out infinite; }
@keyframes asePing { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 100% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } }
.ase-ad-cool { display: flex; gap: 10px; overflow-x: auto; padding: 16px 2px 4px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.08); scrollbar-width: none; }
.ase-ad-cool::-webkit-scrollbar { display: none; }
.ase-cool { --uc: #f59e0b; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none; transition: transform .18s var(--l26-ease), background .18s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-cool:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.ase-cool-av { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: linear-gradient(135deg, var(--ase-b), var(--ase-c)); position: relative; flex-shrink: 0; }
.ase-cool-av::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--uc); border: 2px solid #0f1535; box-shadow: 0 0 8px var(--uc); }
.ase-cool-n { font-size: 12.5px; font-weight: 800; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.ase-cool-s { font-size: 10.5px; color: rgba(255,255,255,.6); white-space: nowrap; } .ase-cool-s b { color: var(--uc); }
.ase-cool i.bx-envelope { color: rgba(255,255,255,.5); font-size: 16px; margin-left: 2px; }
@media (max-width: 1100px) { .ase-ad-grid { grid-template-columns: 1fr 1fr; } .ase-ad-grid .ase-hero-left { grid-column: 1 / -1; } }
@media (max-width: 720px) { .ase-ad-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ase-hero, .ase-ring, .ase-card, .ase-tile, .ase-cool, .ase-gauge > div, .ase-ad-bar > div, .ase-adrow-bar > div, .ase-live { animation: none !important; } }


/* ---------- Piezas compartidas de los heros de sección ---------- */
.ase-panel-h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 8px; }
.ase-panel-h i { color: var(--ase-a); font-size: 15px; } .ase-panel-h b { margin-left: auto; font-size: 11px; color: #fff; letter-spacing: 0; text-transform: none; font-weight: 700; }
.ase-select { padding: 9px 30px 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; border: 1px solid rgba(255,255,255,.14); appearance: none; -webkit-appearance: none; cursor: pointer; }
.ase-select option { color: #111; }
.ase-btn-sm { padding: 7px 11px; font-size: 12px; }
.ase-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ase-tab-b { background: #F59E0B; color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 10.5px; font-weight: 800; margin-left: 4px; }
.ase-numrow { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.ase-num { --nc: #fff; display: flex; align-items: baseline; gap: 8px; position: relative; padding-left: 14px; }
.ase-num::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--nc); box-shadow: 0 0 10px var(--nc); transform: translateY(-50%); }
.ase-num b { font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.ase-num span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: rgba(255,255,255,.6); font-weight: 700; }
.ase-emp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ase-chipk { --kc: var(--ase-a); display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.88); text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ase-chipk i { color: var(--kc); font-size: 14px; }
a.ase-chipk:hover { background: rgba(255,255,255,.15); }

/* ---------- Proyectos: hero "tablero de obra" (ámbar/naranja/violeta, próximas entregas, carriles) ---------- */
.ase-proj { --ase-a: #fbbf24; --ase-b: #f97316; --ase-c: #a78bfa; }
.ase-proj .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(251,191,36,.24), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(167,139,250,.32), transparent 60%), linear-gradient(135deg, #1a1026 0%, #221238 55%, #1c1650 100%); }
.ase-proj .ase-greet { background: linear-gradient(90deg, #fff 30%, #fde68a 70%, #ede9fe); -webkit-background-clip: text; background-clip: text; }
.ase-pj-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .9fr); gap: 26px; align-items: center; }
.ase-deadlines { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 8px; backdrop-filter: blur(8px); }
.ase-dl { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: transform .15s var(--l26-ease); }
.ase-dl:last-child { border-bottom: none; } .ase-dl:hover { transform: translateX(3px); }
.ase-dl-d { width: 44px; flex-shrink: 0; text-align: center; border-radius: 10px; background: rgba(255,255,255,.08); padding: 4px 0; font-size: 9.5px; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 700; letter-spacing: .5px; }
.ase-dl-d b { display: block; font-size: 16px; color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.ase-dl.warm .ase-dl-d { background: rgba(251,191,36,.22); } .ase-dl.warm .ase-dl-d b { color: #fde68a; }
.ase-dl.hot .ase-dl-d { background: rgba(239,68,68,.25); } .ase-dl.hot .ase-dl-d b { color: #fca5a5; }
.ase-dl-n { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-dl-n span { display: block; font-size: 10.5px; color: rgba(255,255,255,.55); font-weight: 600; }
.ase-dl-p { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ase-lanes { display: flex; gap: 10px; overflow-x: auto; padding: 16px 2px 4px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); scrollbar-width: none; }
.ase-lanes::-webkit-scrollbar { display: none; }
.ase-lane { --pc: #fbbf24; flex: 0 0 196px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 10px 12px; color: #fff; cursor: pointer; text-align: left; transition: transform .18s var(--l26-ease), background .18s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-lane:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.ase-lane-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-lane-h i { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); flex-shrink: 0; box-shadow: 0 0 8px var(--pc); }
.ase-lane-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); margin: 8px 0 6px; overflow: hidden; }
.ase-lane-bar > div { height: 100%; background: linear-gradient(90deg, var(--pc), #fff); border-radius: 5px; transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
.ase-lane-s { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(255,255,255,.6); } .ase-lane-s b { color: #fff; }
@media (max-width: 900px) { .ase-pj-grid { grid-template-columns: 1fr; } }

/* ---------- Gastos: hero "mapa de calor" (rosa/ámbar, 12 meses en celdas, top proveedores) ---------- */
.ase-gastos { --ase-a: #fb7185; --ase-b: #f43f5e; --ase-c: #fbbf24; }
.ase-gastos .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(251,113,133,.26), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(251,191,36,.26), transparent 60%), linear-gradient(135deg, #1c0b1e 0%, #2a1030 55%, #1f1240 100%); }
.ase-gastos .ase-greet { background: linear-gradient(90deg, #fff 30%, #fecdd3 70%, #fde68a); -webkit-background-clip: text; background-clip: text; }
.ase-gastos .ase-num b { font-size: 20px; }
.ase-ga-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .95fr) minmax(230px, .75fr); gap: 22px; align-items: stretch; }
.ase-heat-wrap, .ase-hbars-wrap { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px; backdrop-filter: blur(8px); display: flex; flex-direction: column; }
.ase-heat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin: 8px 0 22px; }
.ase-heat > div { aspect-ratio: 1; border-radius: 7px; background: rgba(255,255,255,.08); position: relative; transition: transform .15s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-heat > div:hover { transform: scale(1.12); }
.ase-heat > div::after { content: attr(data-m); position: absolute; left: 0; right: 0; bottom: -15px; font-size: 8.5px; text-align: center; color: rgba(255,255,255,.5); text-transform: uppercase; font-weight: 700; }
.ase-heat > div.l1 { background: rgba(251,113,133,.28); } .ase-heat > div.l2 { background: rgba(251,113,133,.5); } .ase-heat > div.l3 { background: rgba(251,113,133,.75); } .ase-heat > div.l4 { background: #fb7185; box-shadow: 0 0 14px -2px #fb7185; }
.ase-heat > div.now { outline: 1.5px solid #fff; outline-offset: 1px; }
.ase-heat-f { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: rgba(255,255,255,.62); } .ase-heat-f b { color: #fff; font-variant-numeric: tabular-nums; }
.ase-hbar { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 3px 10px; align-items: center; font-size: 11.5px; padding: 4px 0; }
.ase-hbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ase-hbar b { text-align: right; font-variant-numeric: tabular-nums; font-size: 11.5px; color: rgba(255,255,255,.85); }
.ase-hbar-t { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.ase-hbar-t > div { height: 100%; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); border-radius: 6px; transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
@media (max-width: 1100px) { .ase-ga-grid { grid-template-columns: 1fr 1fr; } .ase-ga-grid .ase-hero-left { grid-column: 1 / -1; } }
@media (max-width: 700px) { .ase-ga-grid { grid-template-columns: 1fr; } }

/* ---------- Informes: hero "gráfico vivo" (azul/cian, área de 12 meses) ---------- */
.ase-rep { --ase-a: #38bdf8; --ase-b: #2563eb; --ase-c: #22d3ee; }
.ase-rep .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(56,189,248,.28), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(37,99,235,.35), transparent 60%), linear-gradient(135deg, #061029 0%, #0b1d4a 55%, #0f1f5c 100%); }
.ase-rep .ase-greet { background: linear-gradient(90deg, #fff 30%, #bae6fd 70%, #cffafe); -webkit-background-clip: text; background-clip: text; }
.ase-rep-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.4fr); gap: 26px; align-items: center; }
.ase-spark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 12px; backdrop-filter: blur(8px); }
.ase-spark svg { width: 100%; height: 110px; display: block; margin-top: 8px; overflow: visible; }
.ase-spark-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ase-spark-h i.bx { color: var(--ase-a); font-size: 14px; vertical-align: -2px; margin-right: 3px; }
.ase-spark-leg { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px; } .ase-spark-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px; }
.ase-spark-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: aseDraw 1.6s var(--l26-ease) forwards; }
@keyframes aseDraw { to { stroke-dashoffset: 0; } }
.ase-spark-kpis { display: flex; gap: 22px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.ase-spark-kpis b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ase-spark-kpis span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.55); font-weight: 700; }
@media (max-width: 900px) { .ase-rep-grid { grid-template-columns: 1fr; } }

/* ---------- Empresa: hero "ficha de identidad" (teal/índigo, logo grande, tarjeta de datos fiscales) ---------- */
.ase-emp { --ase-a: #5eead4; --ase-b: #0ea5e9; --ase-c: #818cf8; }
.ase-emp .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(94,234,212,.22), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(129,140,248,.34), transparent 60%), linear-gradient(135deg, #071a22 0%, #0c2038 55%, #10204d 100%); margin-bottom: 24px; }
.ase-emp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .95fr); gap: 26px; align-items: center; }
.ase-emp-id { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.ase-emp-logo { width: 96px; height: 96px; border-radius: 28px; background: linear-gradient(135deg, var(--ase-b), var(--ase-c)); display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 24px 40px -20px var(--ase-b); animation: l26-rise .5s var(--l26-ease) backwards; }
.ase-emp-logo img { width: 100%; height: 100%; object-fit: cover; }
.ase-emp-name { font-size: 28px; margin: 4px 0 0; background: linear-gradient(90deg, #fff 30%, #ccfbf1 70%, #e0e7ff); -webkit-background-clip: text; background-clip: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-emp-desc { font-size: 12.5px; color: rgba(255,255,255,.7); line-height: 1.55; margin: 10px 0 0; max-width: 560px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ase-idcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px; backdrop-filter: blur(8px); position: relative; overflow: hidden; }
.ase-idcard::before { content: ''; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(94,234,212,.22), transparent 65%); pointer-events: none; }
.ase-idgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin-top: 4px; }
.ase-idgrid small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.5); font-weight: 800; }
.ase-idgrid b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; margin-top: 1px; }
.ase-idgrid b.miss { color: #fbbf24; }
.ase-idbar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); margin-top: 12px; overflow: hidden; }
.ase-idbar > div { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
.ase-idwarn { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: #fde68a; margin-top: 10px; line-height: 1.4; } .ase-idwarn i { font-size: 14px; flex-shrink: 0; }
@media (max-width: 900px) { .ase-emp-grid { grid-template-columns: 1fr; } .ase-emp-name { white-space: normal; font-size: 24px; } }

/* ---------- Empresa cliente de asesoría: hero "calendario + libro" (violeta/rosa) ---------- */
.ase-hija { --ase-a: #c084fc; --ase-b: #8b5cf6; --ase-c: #f472b6; }
.ase-hija .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(192,132,252,.3), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(244,114,182,.26), transparent 60%), linear-gradient(135deg, #150b2a 0%, #221244 55%, #2a1250 100%); margin-bottom: 16px; }
.ase-hija .ase-greet { background: linear-gradient(90deg, #fff 30%, #f3e8ff 70%, #fce7f3); -webkit-background-clip: text; background-clip: text; }
.ase-hj-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(240px, .85fr); gap: 24px; align-items: center; }
.ase-cals { display: flex; gap: 8px; align-items: stretch; }
.ase-cal { --cc: #c084fc; width: 82px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); padding: 10px 6px 9px; text-align: center; position: relative; overflow: hidden; cursor: pointer; transition: transform .18s var(--l26-ease), background .18s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-cal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc); box-shadow: 0 0 12px var(--cc); }
.ase-cal:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.ase-cal-d { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.ase-cal-m { font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.55); font-weight: 800; margin-top: 3px; }
.ase-cal-t { font-size: 11.5px; font-weight: 800; margin-top: 7px; color: var(--cc); }
.ase-cal-s { font-size: 9.5px; color: rgba(255,255,255,.62); margin-top: 1px; }
.ase-cal.done { opacity: .6; }
.ase-cal-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.2); font-size: 11.5px; color: rgba(255,255,255,.7); text-align: center; max-width: 170px; }
.ase-cal-empty i { font-size: 22px; color: #34d399; }
.ase-ledger { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 10px; backdrop-filter: blur(8px); }
.ase-ll { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 12.5px; }
.ase-ll span { color: rgba(255,255,255,.72); white-space: nowrap; } .ase-ll i { flex: 1; border-bottom: 1px dotted rgba(255,255,255,.3); transform: translateY(-4px); min-width: 12px; }
.ase-ll b { --lc: #fff; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--lc); white-space: nowrap; }
.ase-ll.total { border-top: 1px solid rgba(255,255,255,.15); margin-top: 4px; padding-top: 9px; font-size: 13.5px; }
@media (max-width: 1000px) { .ase-hj-grid { grid-template-columns: 1fr 1fr; } .ase-hj-grid .ase-hero-left { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ase-hj-grid { grid-template-columns: 1fr; } .ase-cals { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .ase-lane, .ase-lane-bar > div, .ase-heat > div, .ase-hbar-t > div, .ase-spark-line, .ase-emp-logo, .ase-idbar > div, .ase-cal { animation: none !important; } .ase-spark-line { stroke-dashoffset: 0; } }


/* ---------- Piezas compartidas (2.ª tanda) ---------- */
.ase-input { padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); color-scheme: dark; }
.ase-typerow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ase-type { --tc: var(--ase-a); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: 11.5px; color: rgba(255,255,255,.7); font-weight: 600; }
.ase-type i { color: var(--tc); font-size: 16px; } .ase-type b { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Facturación: hero "mosaico de documentos" (índigo/verde) ---------- */
.ase-inv { --ase-a: #a5b4fc; --ase-b: #6366f1; --ase-c: #34d399; }
.ase-inv .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(99,102,241,.32), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(52,211,153,.24), transparent 60%), linear-gradient(135deg, #0b0f2e 0%, #141a4a 55%, #0f2340 100%); margin-bottom: 20px; }
.ase-inv .ase-greet { background: linear-gradient(90deg, #fff 30%, #e0e7ff 70%, #d1fae5); -webkit-background-clip: text; background-clip: text; }
.ase-inv .ase-num b { font-size: 21px; }
.ase-inv-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .95fr); gap: 26px; align-items: center; }
.ase-dots-wrap { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 12px; backdrop-filter: blur(8px); }
.ase-dots { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; margin: 6px 0 10px; }
.ase-dots > span { --dc: #64748b; aspect-ratio: 1; border-radius: 4px; background: var(--dc); box-shadow: 0 0 8px -2px var(--dc); cursor: pointer; transition: transform .15s; animation: l26-rise .35s var(--l26-ease) backwards; }
.ase-dots > span:hover { transform: scale(1.35); z-index: 1; }
.ase-dots-leg { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: rgba(255,255,255,.62); }
.ase-dots-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 900px) { .ase-inv-grid { grid-template-columns: 1fr; } .ase-dots { grid-template-columns: repeat(12, 1fr); } }

/* ---------- Clientes: hero "cartera y portal" (cielo/ámbar) ---------- */
.ase-cli { --ase-a: #38bdf8; --ase-b: #0284c7; --ase-c: #fbbf24; }
.ase-cli .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(56,189,248,.3), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(251,191,36,.22), transparent 60%), linear-gradient(135deg, #061a2e 0%, #0b2544 55%, #12224f 100%); margin-bottom: 16px; }
.ase-cli .ase-greet { background: linear-gradient(90deg, #fff 30%, #bae6fd 70%, #fde68a); -webkit-background-clip: text; background-clip: text; }
.ase-cli-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .85fr); gap: 26px; align-items: center; }
.ase-portal { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px; backdrop-filter: blur(8px); }
.ase-portal-m { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ase-portal-track { flex: 1; height: 10px; border-radius: 10px; background: rgba(255,255,255,.1); overflow: hidden; }
.ase-portal-track > div { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
.ase-portal-m span { font-size: 18px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ase-portal-s { font-size: 11.5px; color: rgba(255,255,255,.66); line-height: 1.45; margin-top: 8px; }
.ase-tagcloud { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ase-tagk { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); color: #fde68a; cursor: pointer; transition: background .15s; }
.ase-tagk:hover { background: rgba(255,255,255,.18); } .ase-tagk.dim { color: rgba(255,255,255,.55); cursor: default; }
@media (max-width: 900px) { .ase-cli-grid { grid-template-columns: 1fr; } }

/* ---------- Productos: hero "marcador de almacén" (lima/cielo, contadores grandes, estantería) ---------- */
.ase-prod { --ase-a: #a3e635; --ase-b: #16a34a; --ase-c: #38bdf8; }
.ase-prod .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(163,230,53,.2), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(56,189,248,.28), transparent 60%), linear-gradient(135deg, #0a1a12 0%, #0f2a2a 55%, #0f1f4a 100%); }
.ase-prod .ase-greet { background: linear-gradient(90deg, #fff 30%, #ecfccb 70%, #e0f2fe); -webkit-background-clip: text; background-clip: text; }
.ase-prod-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr); gap: 26px; align-items: center; }
.ase-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ase-board-c { --bc: var(--ase-a); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 12px 12px 10px; position: relative; overflow: hidden; min-width: 0; animation: l26-rise .45s var(--l26-ease) backwards; }
.ase-board-c::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--bc); box-shadow: 0 0 12px var(--bc); border-radius: 2px; }
.ase-board-c small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.55); font-weight: 800; }
.ase-board-c b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin: 5px 0 3px; color: var(--bc); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 18px color-mix(in srgb, var(--bc) 50%, transparent); }
.ase-board-c span { font-size: 10.5px; color: rgba(255,255,255,.6); line-height: 1.3; display: block; }
.ase-board-c:nth-child(2) { animation-delay: 80ms; } .ase-board-c:nth-child(3) { animation-delay: 160ms; }
.ase-shelf { display: flex; gap: 8px; overflow-x: auto; padding: 16px 2px 4px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); scrollbar-width: none; }
.ase-shelf::-webkit-scrollbar { display: none; }
.ase-shelf-it { --sc: #fbbf24; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--sc); color: #fff; cursor: pointer; transition: transform .18s var(--l26-ease), background .18s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-shelf-it:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.ase-shelf-n { font-size: 12.5px; font-weight: 700; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-shelf-q { font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; } .ase-shelf-q b { color: var(--sc); font-size: 13px; }
@media (max-width: 900px) { .ase-prod-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ase-board { grid-template-columns: 1fr; } }

/* ---------- Tesorería: hero "flujo y conciliación" (esmeralda/rojo) ---------- */
.ase-tes { --ase-a: #34d399; --ase-b: #059669; --ase-c: #fb7185; }
.ase-tes .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(52,211,153,.26), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(251,113,133,.2), transparent 60%), linear-gradient(135deg, #061b1a 0%, #0a2a2f 55%, #101f4a 100%); margin-bottom: 16px; }
.ase-tes .ase-greet { background: linear-gradient(90deg, #fff 30%, #d1fae5 70%, #ffe4e6); -webkit-background-clip: text; background-clip: text; }
.ase-tes-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .9fr) minmax(250px, .8fr); gap: 22px; align-items: center; }
.ase-flow { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px; backdrop-filter: blur(8px); }
.ase-flow-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; font-size: 11.5px; padding: 5px 0; }
.ase-flow-row span { color: rgba(255,255,255,.65); font-weight: 700; } .ase-flow-row b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ase-flow-t { height: 10px; border-radius: 10px; background: rgba(255,255,255,.1); overflow: hidden; }
.ase-flow-t > div { height: 100%; border-radius: 10px; transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
.ase-flow-t > .in { background: linear-gradient(90deg, #34d399, #6ee7b7); box-shadow: 0 0 12px -2px #34d399; } .ase-flow-t > .out { background: linear-gradient(90deg, #fb7185, #fda4af); box-shadow: 0 0 12px -2px #fb7185; }
.ase-flow-s { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 6px; }
.ase-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 4px; position: relative; }
.ase-step { --sc: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; }
.ase-step b { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 800; background: rgba(255,255,255,.06); border: 2px solid var(--sc); color: var(--sc); box-shadow: 0 0 16px -4px var(--sc); font-variant-numeric: tabular-nums; animation: l26-donut .8s var(--l26-ease) backwards; }
.ase-step span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.6); font-weight: 700; }
.ase-step-ln { flex: 1; min-width: 14px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.4)); border-radius: 2px; margin-bottom: 16px; }
.ase-steps-f { flex-basis: 100%; font-size: 11px; color: rgba(255,255,255,.62); margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.ase-steps-bar { flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; } .ase-steps-bar > div { height: 100%; background: linear-gradient(90deg, #fbbf24, #34d399); border-radius: 5px; transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
@media (max-width: 1100px) { .ase-tes-grid { grid-template-columns: 1fr 1fr; } .ase-tes-grid .ase-hero-left { grid-column: 1 / -1; } }
@media (max-width: 700px) { .ase-tes-grid { grid-template-columns: 1fr; } }

/* ---------- Impuestos: hero "vía de trimestres" (dorado/índigo) ---------- */
.ase-tax { --ase-a: #fbbf24; --ase-b: #d97706; --ase-c: #a5b4fc; }
.ase-tax .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(251,191,36,.22), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(165,180,252,.3), transparent 60%), linear-gradient(135deg, #1a1208 0%, #241a2e 55%, #171a4e 100%); margin-bottom: 18px; }
.ase-tax .ase-greet { background: linear-gradient(90deg, #fff 30%, #fde68a 70%, #e0e7ff); -webkit-background-clip: text; background-clip: text; }
.ase-tax .ase-num b { font-size: 21px; }
.ase-tax-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); gap: 26px; align-items: center; }
.ase-qtrack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
.ase-qtrack::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.05)); z-index: 0; }
.ase-q { position: relative; z-index: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 10px 10px 9px; min-width: 0; animation: l26-rise .45s var(--l26-ease) backwards; }
.ase-q:nth-child(2) { animation-delay: 60ms; } .ase-q:nth-child(3) { animation-delay: 120ms; } .ase-q:nth-child(4) { animation-delay: 180ms; }
.ase-q.past { opacity: .72; } .ase-q.future { opacity: .55; border-style: dashed; }
.ase-q.now { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.55); box-shadow: 0 0 24px -8px #fbbf24; opacity: 1; }
.ase-q-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 800; } .ase-q-h i { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.55); font-weight: 700; }
.ase-q.now .ase-q-h i { color: #fde68a; }
.ase-q-v { font-size: 17px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-q-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.5); font-weight: 700; }
.ase-q-s { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: rgba(255,255,255,.62); margin-top: 6px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 5px; }
.ase-tax .ase-hero-actions > div { min-width: 200px; }
@media (max-width: 900px) { .ase-tax-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ase-qtrack { grid-template-columns: 1fr 1fr; } .ase-qtrack::before { display: none; } }

/* ---------- Equipo: hero "quién está" (coral/violeta, caras con estado) ---------- */
.ase-team { --ase-a: #fb923c; --ase-b: #e11d48; --ase-c: #a78bfa; }
.ase-team .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(251,146,60,.22), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(167,139,250,.32), transparent 60%), linear-gradient(135deg, #1c0d14 0%, #2a1230 55%, #1c1650 100%); margin-bottom: 18px; }
.ase-team .ase-greet { background: linear-gradient(90deg, #fff 30%, #fed7aa 70%, #ede9fe); -webkit-background-clip: text; background-clip: text; }
.ase-team-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); gap: 26px; align-items: center; }
.ase-deptrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ase-dept { --dc: #a5b4fc; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.ase-dept i { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 8px var(--dc); } .ase-dept b { color: rgba(255,255,255,.6); font-weight: 700; }
.ase-presence { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 12px; backdrop-filter: blur(8px); }
.ase-faces { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ase-face { --fc: rgba(255,255,255,.25); width: 42px; height: 42px; border-radius: 50%; position: relative; cursor: pointer; background: linear-gradient(135deg, var(--ase-b), var(--ase-c)); display: grid; place-items: center; font-weight: 800; font-size: 15px; box-shadow: 0 0 0 2px #1a1030, 0 0 0 4px var(--fc); transition: transform .18s var(--l26-ease); animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ase-face:hover { transform: translateY(-3px) scale(1.06); z-index: 1; }
.ase-face em { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #34d399; color: #062; display: grid; place-items: center; font-size: 11px; border: 2px solid #1a1030; }
.ase-face.more { background: rgba(255,255,255,.1); font-size: 12px; box-shadow: none; cursor: default; }
.ase-faces-leg { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: rgba(255,255,255,.6); }
.ase-faces-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 900px) { .ase-team-grid { grid-template-columns: 1fr; } }

/* ---------- Control horario: hero "reloj y semana" (cian/verde) ---------- */
.ase-time { --ase-a: #22d3ee; --ase-b: #0891b2; --ase-c: #34d399; }
.ase-time .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(34,211,238,.26), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(52,211,153,.24), transparent 60%), linear-gradient(135deg, #061622 0%, #0a2238 55%, #0f1f4a 100%); margin-bottom: 18px; }
.ase-time .ase-greet { background: linear-gradient(90deg, #fff 30%, #cffafe 70%, #d1fae5); -webkit-background-clip: text; background-clip: text; }
.ase-time-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .9fr); gap: 26px; align-items: center; }
.ase-clock { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); }
.ase-clock-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.2); flex-shrink: 0; }
.ase-clock-dot.on { background: #34d399; animation: asePing 1.6s ease-out infinite; }
.ase-clock-t { flex: 1; min-width: 0; }
.ase-clock-t b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ase-clock-t span { display: block; font-size: 11px; color: rgba(255,255,255,.62); margin-top: 3px; }
.ase-clock-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); margin-top: 7px; overflow: hidden; max-width: 260px; } .ase-clock-bar > div { height: 100%; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); border-radius: 4px; }
.ase-week { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 10px; backdrop-filter: blur(8px); }
.ase-wrow { display: grid; grid-template-columns: 34px 1fr 62px; gap: 10px; align-items: center; font-size: 11.5px; padding: 3px 0; }
.ase-wrow span { color: rgba(255,255,255,.6); font-weight: 700; } .ase-wrow b { text-align: right; font-variant-numeric: tabular-nums; font-size: 11.5px; color: rgba(255,255,255,.85); }
.ase-wrow.today span, .ase-wrow.today b { color: #fff; } .ase-wrow.future { opacity: .45; }
.ase-wrow-t { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.ase-wrow-t > div { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
.ase-wrow.today .ase-wrow-t { outline: 1px solid rgba(255,255,255,.3); }
@media (max-width: 900px) { .ase-time-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ase-dots > span, .ase-portal-track > div, .ase-board-c, .ase-shelf-it, .ase-flow-t > div, .ase-step b, .ase-steps-bar > div, .ase-q, .ase-face, .ase-clock-dot, .ase-wrow-t > div { animation: none !important; } }


/* ---------- Agenda: hero "semana a la vista" (azul/lila) + calendario mensual ---------- */
.ase-agd { --ase-a: #60a5fa; --ase-b: #2563eb; --ase-c: #f0abfc; }
.ase-agd .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(96,165,250,.3), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(240,171,252,.24), transparent 60%), linear-gradient(135deg, #070d2a 0%, #0e1747 55%, #1a1450 100%); margin-bottom: 16px; }
.ase-agd .ase-greet { background: linear-gradient(90deg, #fff 30%, #dbeafe 70%, #fae8ff); -webkit-background-clip: text; background-clip: text; }
.ase-agd-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(430px, 1.35fr); gap: 26px; align-items: center; }
.ase-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ase-day { min-width: 0; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 10px 4px 9px; color: #fff; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .18s var(--l26-ease), background .18s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-day:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.ase-day.today { background: rgba(96,165,250,.18); border-color: rgba(96,165,250,.6); box-shadow: 0 0 22px -8px #60a5fa; }
.ase-day-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px; color: rgba(255,255,255,.55); font-weight: 800; } .ase-day.today .ase-day-l { color: #bfdbfe; }
.ase-day b { font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ase-day-dots { display: flex; gap: 3px; height: 8px; align-items: center; } .ase-day-dots i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 6px currentColor; } .ase-day-dots em { font-size: 9px; font-style: normal; color: rgba(255,255,255,.6); }
.ase-day-n { font-size: 9.5px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .ase-day.has .ase-day-n { color: rgba(255,255,255,.85); }
@media (max-width: 1000px) { .ase-agd-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ase-days { grid-template-columns: repeat(4, 1fr); } }
.agd-card { overflow: hidden; padding: 0 !important; }
.agd-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.agd-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.agd-nav { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); cursor: pointer; display: grid; place-items: center; font-size: 20px; transition: all .18s var(--l26-ease); }
.agd-nav:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.agd-close:hover { border-color: #ef4444; color: #ef4444; }
.agd-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); } .agd-dow div { padding: 9px 4px; text-align: center; font-size: 10.5px; font-weight: 800; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.2px; }
.agd-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.agd-cell { min-height: 92px; padding: 8px; cursor: pointer; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .15s; position: relative; min-width: 0; }
.agd-cell:nth-child(7n) { border-right: none; }
.agd-cell.empty { background: color-mix(in srgb, var(--bg) 60%, transparent); cursor: default; }
.agd-cell.we:not(.empty) { background: color-mix(in srgb, var(--bg-elevated) 40%, transparent); }
.agd-cell:not(.empty):hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.agd-cell.sel { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; box-shadow: inset 0 0 0 2px var(--primary); border-radius: 10px; z-index: 1; }
.agd-cell-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.agd-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--text); }
.agd-cell.we .agd-num { color: var(--text-light); }
.agd-cell.today .agd-num { background: var(--primary); color: #fff; font-weight: 800; box-shadow: 0 0 12px -2px var(--primary); }
.agd-cell.sel .agd-num { color: var(--primary); font-weight: 800; } .agd-cell.sel.today .agd-num { color: #fff; }
.agd-cnt { font-size: 10px; font-weight: 800; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 999px; padding: 0 6px; }
.agd-ev { --ec: var(--primary); font-size: 10.5px; padding: 2px 6px; border-radius: 5px; margin-bottom: 2px; background: color-mix(in srgb, var(--ec) 14%, transparent); color: var(--ec); font-weight: 700; border-left: 2px solid var(--ec); display: flex; align-items: center; gap: 4px; }
.agd-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .agd-ev.done { opacity: .6; text-decoration: line-through; } .agd-ev i { color: #10b981; }
.agd-more { font-size: 9.5px; color: var(--text-light); padding-left: 4px; }
.agd-panel { align-self: flex-start; position: sticky; top: 80px; padding: 0 !important; overflow: hidden; animation: l26-rise .3s var(--l26-ease) backwards; }
.agd-panel-h { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent); }
.agd-panel-d { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .agd-panel-m { font-size: 12px; color: var(--text-light); margin-top: 3px; text-transform: capitalize; }
@media (max-width: 900px) { .agd-layout { grid-template-columns: 1fr !important; } .agd-panel { position: static; } .agd-cell { min-height: 64px; padding: 5px; } }
@media (prefers-reduced-motion: reduce) { .ase-day, .agd-panel { animation: none !important; } }


/* ---------- Informes de la asesoría: hero "matriz vs clientes" + ranking ---------- */
.ase-repa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1.1fr); gap: 26px; align-items: center; }
.ase-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.ase-vs-col { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 12px 14px; min-width: 0; backdrop-filter: blur(8px); }
.ase-vs-col > b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ase-vs-col > span { font-size: 10px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.ase-vs-rows { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 6px; }
.ase-vs-rows > div { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; padding: 2px 0; } .ase-vs-rows span { color: rgba(255,255,255,.65); } .ase-vs-rows b { font-variant-numeric: tabular-nums; }
.ase-vs-sep { display: flex; align-items: center; }
.ase-vs-sep span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; text-transform: uppercase; background: linear-gradient(135deg, var(--ase-a), var(--ase-c)); color: #0b1236; box-shadow: 0 0 16px -4px var(--ase-a); }
.ase-rank { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.ase-rank .ase-strip-lbl { margin-bottom: 4px; align-self: flex-start; }
.ase-rank-it { display: grid; grid-template-columns: 26px minmax(0, 220px) 1fr 100px; gap: 10px; align-items: center; font-size: 12px; padding: 3px 6px; border-radius: 10px; transition: background .15s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-rank-it:hover { background: rgba(255,255,255,.08); }
.ase-rank-n { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 11px; background: rgba(255,255,255,.1); }
.ase-rank-it:nth-of-type(1) .ase-rank-n { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2a00; box-shadow: 0 0 12px -3px #fbbf24; }
.ase-rank-it:nth-of-type(2) .ase-rank-n { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; }
.ase-rank-it:nth-of-type(3) .ase-rank-n { background: linear-gradient(135deg, #fdba74, #b45309); color: #2a1200; }
.ase-rank-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-rank-bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.ase-rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); border-radius: 8px; transform-origin: left; animation: l26-growx .8s var(--l26-ease) backwards; }
.ase-rank-it b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ase-repa-grid { grid-template-columns: 1fr; } .ase-vs { grid-template-columns: 1fr; } .ase-vs-sep { display: none; } .ase-rank-it { grid-template-columns: 26px 1fr 90px; } .ase-rank-bar { display: none; } }


/* ---------- Contabilidad: hero "balanza" (pizarra/índigo, pilares activo vs pasivo+neto) ---------- */
.ase-conta { --ase-a: #94a3b8; --ase-b: #475569; --ase-c: #a5b4fc; }
.ase-conta .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(148,163,184,.22), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(165,180,252,.3), transparent 60%), linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #1a1f4d 100%); margin-bottom: 16px; }
.ase-conta .ase-greet { background: linear-gradient(90deg, #fff 30%, #e2e8f0 70%, #e0e7ff); -webkit-background-clip: text; background-clip: text; }
.ase-conta .ase-num b { font-size: 21px; }
.ase-conta-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .8fr); gap: 26px; align-items: center; }
.ase-conta .ase-hero-actions > div { min-width: 200px; }
.ase-balanza { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 12px; backdrop-filter: blur(8px); }
.ase-pillars { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; height: 150px; margin-top: 6px; }
.ase-pillar { --pc: #38bdf8; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.ase-pillar > b { font-size: 14px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ase-pillar-t { flex: 1; width: 100%; max-width: 110px; border-radius: 12px 12px 6px 6px; background: rgba(255,255,255,.08); display: flex; align-items: flex-end; overflow: hidden; }
.ase-pillar-t > div { width: 100%; background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #000)); border-radius: 12px 12px 0 0; transform-origin: bottom; animation: l26-growy .9s var(--l26-ease) backwards; box-shadow: 0 0 20px -6px var(--pc); }
.ase-pillar > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px; color: rgba(255,255,255,.6); font-weight: 800; }
.ase-pillar-eq { font-size: 26px; font-weight: 800; color: rgba(255,255,255,.35); padding-bottom: 36px; }
.ase-balanza-f { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 8px; text-align: center; }
@media (max-width: 900px) { .ase-conta-grid { grid-template-columns: 1fr; } }

/* ---------- Espacio de Archivos: hero "archivador" (ámbar/cielo, migas, disco con marcas) ---------- */
.ase-files { --ase-a: #fbbf24; --ase-b: #f59e0b; --ase-c: #38bdf8; }
.ase-files .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(251,191,36,.22), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(56,189,248,.3), transparent 60%), linear-gradient(135deg, #1a1408 0%, #1f1d3a 55%, #0f1f4a 100%); margin-bottom: 16px; }
.ase-files .ase-greet { background: linear-gradient(90deg, #fff 30%, #fde68a 70%, #e0f2fe); -webkit-background-clip: text; background-clip: text; }
.ase-files-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); gap: 26px; align-items: center; }
.ase-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.ase-crumb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-crumb:hover { background: rgba(255,255,255,.15); } .ase-crumb.on { background: rgba(251,191,36,.18); border-color: rgba(251,191,36,.5); color: #fff; }
.ase-crumb i { color: var(--ase-a); font-size: 14px; }
.ase-crumb-sep { color: rgba(255,255,255,.35); font-size: 16px; }
.ase-disk { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 12px; backdrop-filter: blur(8px); }
.ase-disk-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 4px; }
.ase-disk-fill { height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--ase-a), var(--ase-c)); transform-origin: left; animation: l26-growx .9s var(--l26-ease) backwards; box-shadow: 0 0 14px -2px var(--ase-a); }
.ase-disk-bar > i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.35); }
.ase-disk-s { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.62); margin-top: 6px; }
.ase-ftypes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.ase-ftypes > div { --tc: #fff; text-align: center; min-width: 0; }
.ase-ftypes i { color: var(--tc); font-size: 18px; display: block; }
.ase-ftypes b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.ase-ftypes span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.55); font-weight: 700; }
@media (max-width: 900px) { .ase-files-grid { grid-template-columns: 1fr; } }

/* ---------- Calendario: hero "tipos del mes" (violeta/azul, rejilla de tipos) ---------- */
.ase-calp { --ase-a: #a78bfa; --ase-b: #6d28d9; --ase-c: #60a5fa; }
.ase-calp .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(167,139,250,.3), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(96,165,250,.26), transparent 60%), linear-gradient(135deg, #12082a 0%, #1e1250 55%, #0f1f4a 100%); margin-bottom: 16px; }
.ase-calp .ase-greet { background: linear-gradient(90deg, #fff 30%, #ede9fe 70%, #dbeafe); -webkit-background-clip: text; background-clip: text; }
.ase-calp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr); gap: 26px; align-items: center; }
.ase-typegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ase-typet { --tc: #fff; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 10px 8px 9px; text-align: center; min-width: 0; opacity: .55; transition: transform .18s var(--l26-ease), background .18s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-typet.has { opacity: 1; background: color-mix(in srgb, var(--tc) 14%, rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: 0 0 18px -8px var(--tc); }
.ase-typet:hover { transform: translateY(-2px); }
.ase-typet i { color: var(--tc); font-size: 18px; display: block; }
.ase-typet b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: 2px; }
.ase-typet span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.6); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 900px) { .ase-calp-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ase-typegrid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Membresías: hero "planes" (rosa/violeta) ---------- */
.ase-memb { --ase-a: #f472b6; --ase-b: #be185d; --ase-c: #a78bfa; }
.ase-memb .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(244,114,182,.26), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(167,139,250,.3), transparent 60%), linear-gradient(135deg, #24091c 0%, #2a1236 55%, #1c1650 100%); margin-bottom: 18px; }
.ase-memb .ase-greet { background: linear-gradient(90deg, #fff 30%, #fce7f3 70%, #ede9fe); -webkit-background-clip: text; background-clip: text; }
.ase-memb-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); gap: 26px; align-items: center; }
.ase-plans { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px 16px 10px; backdrop-filter: blur(8px); }
.ase-plan-list { display: flex; flex-direction: column; gap: 4px; }
.ase-plan { --pc: #00bfff; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 12px; cursor: pointer; transition: background .15s; animation: l26-rise .4s var(--l26-ease) backwards; }
.ase-plan:hover { background: rgba(255,255,255,.08); }
.ase-plan > i { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); box-shadow: 0 0 10px var(--pc); }
.ase-plan-n { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-plan-p { font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; }
.ase-plan > b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .ase-plan > b small { font-size: 10px; color: rgba(255,255,255,.55); font-weight: 700; }
@media (max-width: 900px) { .ase-memb-grid { grid-template-columns: 1fr; } }

/* ---------- Mi Landing: hero "escaparate" (naranja/rosa, enlace + ticket de caja) ---------- */
.ase-land { --ase-a: #fb923c; --ase-b: #ea580c; --ase-c: #f472b6; }
.ase-land .ase-hero { background: radial-gradient(900px 420px at 8% -20%, rgba(251,146,60,.26), transparent 60%), radial-gradient(700px 380px at 95% 15%, rgba(244,114,182,.26), transparent 60%), linear-gradient(135deg, #1f0d08 0%, #2a1230 55%, #1c1650 100%); margin-bottom: 14px; }
.ase-land .ase-greet { background: linear-gradient(90deg, #fff 30%, #fed7aa 70%, #fce7f3); -webkit-background-clip: text; background-clip: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ase-land-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr); gap: 26px; align-items: center; }
.ase-url { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); max-width: 100%; }
.ase-url a { color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.ase-url button { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background .15s; } .ase-url button:hover { background: rgba(255,255,255,.22); }
.ase-url-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); flex-shrink: 0; } .ase-url-dot.on { background: #34d399; box-shadow: 0 0 10px #34d399; animation: asePing 1.8s ease-out infinite; }
.ase-receipt { position: relative; background: #fffbeb; color: #1f1a17; border-radius: 6px; padding: 14px 16px 12px; font-family: 'Courier New', ui-monospace, monospace; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); transform: rotate(-1deg); animation: l26-rise .5s var(--l26-ease) backwards; }
.ase-receipt::before, .ase-receipt::after { content: ''; position: absolute; left: 0; right: 0; height: 8px; background-image: radial-gradient(circle at 6px 4px, transparent 5px, #fffbeb 5.5px); background-size: 12px 8px; }
.ase-receipt::before { top: -7px; } .ase-receipt::after { bottom: -7px; transform: rotate(180deg); }
.ase-receipt-h { font-size: 10px; letter-spacing: 1.5px; text-align: center; border-bottom: 1px dashed #b8a98a; padding-bottom: 8px; margin-bottom: 8px; color: #6b5f4d; text-transform: uppercase; }
.ase-rl { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; } .ase-rl b { font-variant-numeric: tabular-nums; }
.ase-rl.total { border-top: 1px dashed #b8a98a; margin-top: 6px; padding-top: 8px; font-weight: 800; }
.ase-receipt-f { text-align: center; font-size: 10px; color: #8a7d68; margin-top: 10px; letter-spacing: .5px; }
@media (max-width: 900px) { .ase-land-grid { grid-template-columns: 1fr; } .ase-receipt { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ase-pillar-t > div, .ase-disk-fill, .ase-typet, .ase-plan, .ase-receipt, .ase-url-dot { animation: none !important; } }


/* ---------- Expedientes: plantillas (modal) y lista de documentación (kanban) ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tpl-card { --tc: var(--primary); position: relative; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 10px; background: var(--bg-card); cursor: pointer; transition: transform .18s var(--l26-ease), border-color .18s, box-shadow .18s; overflow: hidden; }
.tpl-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--tc); box-shadow: 0 0 12px -2px var(--tc); }
.tpl-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tc) 50%, var(--border)); box-shadow: 0 14px 30px -18px rgba(0,0,0,.4); }
.tpl-name { font-weight: 800; font-size: 13.5px; padding-left: 8px; display: flex; align-items: center; gap: 6px; }
.tpl-own { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); }
.tpl-desc { font-size: 11.5px; color: var(--text-light); line-height: 1.4; padding-left: 8px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-secondary); font-weight: 700; padding-left: 8px; margin-top: 8px; } .tpl-meta i { color: var(--tc); margin-right: 2px; }
.tpl-del { position: absolute; top: 8px; right: 8px; border: none; background: transparent; color: var(--text-light); cursor: pointer; font-size: 15px; padding: 4px; border-radius: 6px; } .tpl-del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.tpl-preview { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--bg-elevated); font-size: 12px; }
.tpl-preview b { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-bottom: 4px; } .tpl-preview b i { color: var(--primary); }
.tpl-preview ul { margin: 0; padding-left: 16px; color: var(--text-secondary); line-height: 1.5; } .tpl-preview em { font-style: normal; color: var(--text-light); font-size: 10.5px; }
.tpl-chips { display: flex; gap: 4px; flex-wrap: wrap; } .tpl-chips span { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); }
.pdoc { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--bg-card-gradient, var(--bg-card)); border: 1px solid var(--card-border, var(--border)); }
.pdoc-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pdoc-h h3 { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .pdoc-h h3 i { color: var(--primary); font-size: 22px; }
.pdoc-prog { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-light); font-weight: 600; }
.pdoc-bar { width: 160px; height: 7px; border-radius: 7px; background: var(--bg-elevated); overflow: hidden; } .pdoc-bar > div { height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--primary), #10b981); transition: width .4s; }
.pdoc-empty { font-size: 12.5px; color: var(--text-light); padding: 12px 0; }
.pdoc-list { display: flex; flex-direction: column; gap: 6px; }
.pdoc-row { --sc: #94A3B8; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px 8px 12px; border-radius: 12px; background: var(--bg-elevated); border-left: 3px solid var(--sc); }
.pdoc-row.recibido .pdoc-name b { text-decoration: line-through; opacity: .75; } .pdoc-row.no_aplica { opacity: .6; }
.pdoc-st { display: flex; gap: 2px; }
.pdoc-stb { --kc: #94A3B8; width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-light); cursor: pointer; display: grid; place-items: center; font-size: 17px; opacity: .5; transition: all .15s; }
.pdoc-stb:hover { opacity: 1; } .pdoc-stb.on { opacity: 1; color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); border-color: color-mix(in srgb, var(--kc) 40%, transparent); }
.pdoc-stb:disabled { cursor: default; }
.pdoc-name { min-width: 0; } .pdoc-name b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdoc-name b em { font-style: normal; color: var(--danger); margin-left: 2px; }
.pdoc-name span { display: block; font-size: 11px; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdoc-acts { display: flex; gap: 2px; } .pdoc-acts .btn { padding: 4px 7px; }
.pdoc-add { display: flex; gap: 8px; margin-top: 10px; } .pdoc-add .form-input { flex: 1; }
@media (max-width: 640px) { .pdoc-row { grid-template-columns: 1fr; } .pdoc-acts { justify-content: flex-end; } }

/* ---------- Webmail → Tortoise: envío en curso ---------- */
.wm-chip-busy{opacity:.85;cursor:progress}
.wm-export-banner{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:14px;max-width:min(560px,calc(100vw - 32px));padding:14px 18px;border-radius:14px;background:var(--bg-card,#fff);color:var(--text,#111);border:1px solid var(--border,#e5e7eb);box-shadow:0 18px 50px -12px rgba(0,0,0,.35);font-size:13px;line-height:1.45}
.wm-export-banner>i{font-size:26px;color:var(--primary,#7c3aed);flex:0 0 auto}
.wm-export-banner b{display:block;font-size:14px;margin-bottom:2px}
.wm-export-banner div div{color:var(--text-light,#6b7280)}

/* ---------- Accesibilidad / movimiento ---------- */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .content > *, .modal, .btn-primary::after, .content .card, .content .chart-card, .content .stat-tile, .content .dash-hero, .stat-tile .tile-value, .cc-title, tbody tr, .notif-item, .nav-item, .ws-header::after, .topbar::after, .progress-fill, .donut-ring, .notif-dot, .nav-item .badge, .lumi-fab::after, .empty-state i, .empty-state .es-icon, .sidebar-logo:hover img, .sidebar-logo:hover svg { animation: none !important; }
  .card, .chart-card, .task-card, .nav-item, .btn, .topbar-btn, .hover-lift { transition: none !important; }
}
@media (max-width: 768px) {
  .main-area::before { display: none; }
  .content > * { animation-duration: .2s; }
}