:root {
  --c-bg: #0d0c0a;
  --c-bg-gradient-1: rgba(196,148,48,0.06);
  --c-bg-gradient-2: rgba(16,185,129,0.04);
  --c-surface: #111007;
  --c-surface-2: #1a1814;
  --c-surface-3: #2e2b25;
  --c-surface-hover: rgba(255,255,255,0.04);
  --c-border: rgba(196,148,48,0.18);
  --c-border-hover: rgba(196,148,48,0.40);
  --c-border-subtle: rgba(255,255,255,0.06);
  --c-border-strong: rgba(196,148,48,0.35);
  --c-accent: #c49430;
  --c-accent-light: #d4a843;
  --c-accent-dark: #a87c22;
  --c-accent-dim: rgba(196,148,48,0.15);
  --c-accent-dim-2: rgba(196,148,48,0.08);
  --c-text: #e8e6de;
  --c-text-secondary: #b0a994;
  --c-text-muted: #726a58;
  --c-text-faint: #47423a;
  --c-text-accent: #d4a843;
  --c-success: #10b981;
  --c-success-light: #34d399;
  --c-success-dim: rgba(16,185,129,0.15);
  --c-danger: #f43f5e;
  --c-danger-light: #fb7185;
  --c-danger-dim: rgba(244,63,94,0.15);
  --c-warning: #f59e0b;
  --c-warning-light: #fbbf24;
  --c-warning-dim: rgba(245,158,11,0.15);
  --c-info: #3b82f6;
  --c-info-light: #60a5fa;
  --c-info-dim: rgba(59,130,246,0.15);
  --c-sidebar-bg: #0a0906;
  --c-sidebar-border: rgba(196,148,48,0.12);
  --c-sidebar-active-bg: rgba(196,148,48,0.15);
  --c-sidebar-active-border: #c49430;
  --c-sidebar-active-text: #d4a843;
  --c-header-bg: rgba(13,12,10,0.85);
  --c-footer-bg: rgba(10,9,6,0.70);
  --c-scrollbar-track: #1a1814;
  --c-scrollbar-thumb: #47423a;
  --c-scrollbar-hover: #5c5547;
  --font-display: "DM Serif Display", serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;
}



/* ===== PART: _05_animations.css ===== */

/* ===================================================================
   SISTEMA DE ANIMACIONES PRO — Nivel premium
   Todas las animaciones disponibles en cualquier pagina del panel
   =================================================================== */

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES — ENTRADA
══════════════════════════════════════════════════════════════ */

/* Basicas con easing profesional */
@keyframes fadeIn        { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp      { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown    { from{opacity:0;transform:translateY(-32px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft    { from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight   { from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:translateX(0)} }

/* Scale con spring */
@keyframes scaleIn       { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes popIn         { 0%{opacity:0;transform:scale(.5)} 60%{transform:scale(1.12)} 80%{transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }
@keyframes popInDown     { 0%{opacity:0;transform:scale(.5) translateY(-20px)} 60%{transform:scale(1.08) translateY(4px)} 100%{opacity:1;transform:scale(1) translateY(0)} }

/* Perspectiva 3D */
@keyframes flipInX       { from{opacity:0;transform:perspective(600px) rotateX(-35deg) translateY(16px)} to{opacity:1;transform:perspective(600px) rotateX(0) translateY(0)} }
@keyframes flipInY       { from{opacity:0;transform:perspective(600px) rotateY(35deg) translateX(16px)} to{opacity:1;transform:perspective(600px) rotateY(0) translateX(0)} }
@keyframes rotateInBL    { from{opacity:0;transform:perspective(600px) rotate3d(0,0,1,-20deg) scale(.8)} to{opacity:1;transform:perspective(600px) rotate3d(0,0,1,0) scale(1)} }

/* Blur avanzado */
@keyframes blurIn        { from{opacity:0;filter:blur(16px) brightness(.6);transform:scale(.94)} to{opacity:1;filter:blur(0) brightness(1);transform:scale(1)} }
@keyframes blurInUp      { from{opacity:0;filter:blur(12px);transform:translateY(24px) scale(.96)} to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)} }

/* Clip reveal */
@keyframes revealUp      { from{clip-path:inset(100% 0 0 0);opacity:0} to{clip-path:inset(0% 0 0 0);opacity:1} }
@keyframes revealDown    { from{clip-path:inset(0 0 100% 0);opacity:0} to{clip-path:inset(0 0 0% 0);opacity:1} }
@keyframes revealLeft    { from{clip-path:inset(0 100% 0 0);opacity:0} to{clip-path:inset(0 0% 0 0);opacity:1} }
@keyframes revealRight   { from{clip-path:inset(0 0 0 100%);opacity:0} to{clip-path:inset(0 0 0 0%);opacity:1} }

/* Slide desde borde */
@keyframes slideUp       { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes slideDown     { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes slideLeft     { from{transform:translateX(-110%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideRight    { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }

/* Stagger list drop */
@keyframes dropIn        { 0%{opacity:0;transform:translateY(-12px) scale(.97)} 60%{transform:translateY(3px) scale(1.01)} 100%{opacity:1;transform:translateY(0) scale(1)} }

/* Morph entrada */
@keyframes morphIn       { from{opacity:0;border-radius:50%;transform:scale(.4) rotate(-10deg)} to{opacity:1;border-radius:14px;transform:scale(1) rotate(0)} }

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES — CONTINUAS / LOOP
══════════════════════════════════════════════════════════════ */

/* Float con path curvo */
@keyframes floatOrbit    { 0%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(6px,-10px) rotate(2deg)} 50%{transform:translate(0,-14px) rotate(0deg)} 75%{transform:translate(-6px,-10px) rotate(-2deg)} 100%{transform:translate(0,0) rotate(0deg)} }
@keyframes floatY        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes floatX        { 0%,100%{transform:translateX(0)} 50%{transform:translateX(10px)} }

/* Pulso avanzado con glow */
@keyframes pulseGlow     { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,148,48,.5)} 50%{transform:scale(1.04);box-shadow:0 0 0 12px rgba(196,148,48,0)} }
@keyframes pulseDot      { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.7} }
@keyframes breathe       { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.06);opacity:1} }

/* Rotaciones */
@keyframes spin          { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes spinReverse   { from{transform:rotate(360deg)} to{transform:rotate(0deg)} }
@keyframes spinOrbit     { from{transform:rotate(0deg) translateX(28px) rotate(0deg)} to{transform:rotate(360deg) translateX(28px) rotate(-360deg)} }
@keyframes spinWobble    { 0%{transform:rotate(0deg)} 15%{transform:rotate(22deg)} 30%{transform:rotate(-18deg)} 45%{transform:rotate(14deg)} 60%{transform:rotate(-10deg)} 75%{transform:rotate(6deg)} 90%{transform:rotate(-4deg)} 100%{transform:rotate(0deg)} }

/* Gradiente animado de fondo */
@keyframes gradientBg    { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Neon / Glow avanzado */
@keyframes neonPulse     { 0%,100%{text-shadow:0 0 4px var(--c-accent),0 0 10px var(--c-accent),0 0 20px var(--c-accent)} 50%{text-shadow:0 0 8px var(--c-accent),0 0 24px var(--c-accent),0 0 48px var(--c-accent),0 0 60px var(--c-accent)} }
@keyframes neonBorder    { 0%,100%{box-shadow:0 0 4px var(--c-accent),inset 0 0 4px rgba(196,148,48,.2)} 50%{box-shadow:0 0 20px var(--c-accent),0 0 40px rgba(196,148,48,.3),inset 0 0 10px rgba(196,148,48,.15)} }
@keyframes glowRing      { 0%,100%{box-shadow:0 0 0 0 rgba(196,148,48,.6)} 50%{box-shadow:0 0 0 10px rgba(196,148,48,0)} }

/* Shimmer avanzado */
@keyframes shimmer       { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes shimmerDiag   { 0%{background-position:-200% -200%} 100%{background-position:200% 200%} }

/* Bounce fisico */
@keyframes bouncePro     { 0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.8,0,1,1)} 50%{transform:translateY(-18px);animation-timing-function:cubic-bezier(0,0,.2,1)} }
@keyframes bounceIn      { 0%{transform:scale(.3);opacity:0} 50%{transform:scale(1.05)} 70%{transform:scale(.9)} 100%{transform:scale(1);opacity:1} }
@keyframes jello         { 0%,100%{transform:scale3d(1,1,1)} 30%{transform:scale3d(1.25,.75,1)} 40%{transform:scale3d(.75,1.25,1)} 50%{transform:scale3d(1.15,.85,1)} 65%{transform:scale3d(.95,1.05,1)} 75%{transform:scale3d(1.05,.95,1)} }

/* Shake pro */
@keyframes shake         { 0%,100%{transform:translate(0,0) rotate(0)} 15%{transform:translate(-5px,1px) rotate(-1deg)} 30%{transform:translate(4px,-1px) rotate(1deg)} 45%{transform:translate(-4px,2px) rotate(-1deg)} 60%{transform:translate(4px,-1px) rotate(.5deg)} 75%{transform:translate(-3px,1px) rotate(-.5deg)} 90%{transform:translate(2px,0) rotate(.2deg)} }
@keyframes shakeHard     { 0%,100%{transform:translateX(0)} 10%{transform:translateX(-10px)} 20%{transform:translateX(10px)} 30%{transform:translateX(-10px)} 40%{transform:translateX(10px)} 50%{transform:translateX(-8px)} 60%{transform:translateX(8px)} 70%{transform:translateX(-5px)} 80%{transform:translateX(5px)} 90%{transform:translateX(-3px)} }

/* Typing dots */
@keyframes dotFlash      { 0%,80%,100%{transform:scale(0);opacity:0} 40%{transform:scale(1);opacity:1} }
@keyframes dotPulse      { 0%,100%{transform:scaleY(.4);opacity:.5} 40%{transform:scaleY(1);opacity:1} }

/* Ripple */
@keyframes ripple        { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.8);opacity:0} }
@keyframes rippleDouble  { 0%{box-shadow:0 0 0 0 rgba(196,148,48,.5),0 0 0 0 rgba(196,148,48,.3)} 70%{box-shadow:0 0 0 14px rgba(196,148,48,0),0 0 0 28px rgba(196,148,48,0)} 100%{box-shadow:0 0 0 0 rgba(196,148,48,0),0 0 0 0 rgba(196,148,48,0)} }

/* Heartbeat pro */
@keyframes heartbeat     { 0%{transform:scale(1)} 14%{transform:scale(1.2)} 28%{transform:scale(1)} 42%{transform:scale(1.15)} 70%{transform:scale(1)} }

/* Blink terminal */
@keyframes blink         { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Ticker / marquee */
@keyframes marquee       { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Particle drift */
@keyframes drift         { 0%{transform:translate(0,0) rotate(0deg);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translate(var(--dx,20px),var(--dy,-60px)) rotate(var(--dr,180deg));opacity:0} }

/* Counter roll */
@keyframes rollUp        { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes rollDown      { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }

/* Typewriter */
@keyframes typewriter    { from{width:0} to{width:100%} }
@keyframes caretBlink    { 0%,100%{border-color:var(--c-accent)} 50%{border-color:transparent} }

/* Underline reveal */
@keyframes underlineGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* Progress */
@keyframes progressFill  { from{width:0%;opacity:.6} to{width:100%;opacity:1} }

/* ══════════════════════════════════════════════════════════════
   CLASES — ENTRADA
══════════════════════════════════════════════════════════════ */

.anim-fade          { animation: fadeIn        .5s cubic-bezier(.25,.46,.45,.94) both }
.anim-fade-up       { animation: fadeInUp      .55s cubic-bezier(.25,.46,.45,.94) both }
.anim-fade-down     { animation: fadeInDown    .55s cubic-bezier(.25,.46,.45,.94) both }
.anim-fade-left     { animation: fadeInLeft    .55s cubic-bezier(.25,.46,.45,.94) both }
.anim-fade-right    { animation: fadeInRight   .55s cubic-bezier(.25,.46,.45,.94) both }
.anim-scale         { animation: scaleIn       .4s cubic-bezier(.34,1.56,.64,1) both }
.anim-pop           { animation: popIn         .55s cubic-bezier(.34,1.56,.64,1) both }
.anim-pop-down      { animation: popInDown     .5s cubic-bezier(.34,1.56,.64,1) both }
.anim-flip          { animation: flipInX       .6s cubic-bezier(.23,1.32,.68,1) both }
.anim-flip-y        { animation: flipInY       .6s cubic-bezier(.23,1.32,.68,1) both }
.anim-rotate-in     { animation: rotateInBL    .55s cubic-bezier(.34,1.56,.64,1) both }
.anim-blur          { animation: blurIn        .6s cubic-bezier(.25,.46,.45,.94) both }
.anim-blur-up       { animation: blurInUp      .6s cubic-bezier(.25,.46,.45,.94) both }
.anim-reveal-up     { animation: revealUp      .6s cubic-bezier(.77,0,.18,1) both }
.anim-reveal-down   { animation: revealDown    .6s cubic-bezier(.77,0,.18,1) both }
.anim-reveal-left   { animation: revealLeft    .55s cubic-bezier(.77,0,.18,1) both }
.anim-reveal-right  { animation: revealRight   .55s cubic-bezier(.77,0,.18,1) both }
.anim-slide-up      { animation: slideUp       .5s cubic-bezier(.23,1,.32,1) both }
.anim-slide-down    { animation: slideDown     .5s cubic-bezier(.23,1,.32,1) both }
.anim-slide-left    { animation: slideLeft     .5s cubic-bezier(.23,1,.32,1) both }
.anim-slide-right   { animation: slideRight    .5s cubic-bezier(.23,1,.32,1) both }
.anim-drop          { animation: dropIn        .5s cubic-bezier(.34,1.56,.64,1) both }
.anim-morph         { animation: morphIn       .7s cubic-bezier(.34,1.56,.64,1) both }
.anim-bounce-in     { animation: bounceIn      .8s both }
.anim-jello         { animation: jello         .9s both }
.anim-roll-up       { animation: rollUp        .4s cubic-bezier(.23,1,.32,1) both }
.anim-roll-down     { animation: rollDown      .4s cubic-bezier(.23,1,.32,1) both }

/* ── Delays escalonados ───────────────────────────────────── */
.anim-d1  { animation-delay: .06s }
.anim-d2  { animation-delay: .12s }
.anim-d3  { animation-delay: .18s }
.anim-d4  { animation-delay: .24s }
.anim-d5  { animation-delay: .30s }
.anim-d6  { animation-delay: .36s }
.anim-d7  { animation-delay: .42s }
.anim-d8  { animation-delay: .48s }
.anim-d9  { animation-delay: .54s }
.anim-d10 { animation-delay: .60s }
.anim-d12 { animation-delay: .72s }
.anim-d15 { animation-delay: .90s }
.anim-d20 { animation-delay: 1.2s }

/* ── Duraciones ───────────────────────────────────────────── */
.anim-instant { animation-duration: .15s }
.anim-fast    { animation-duration: .3s }
.anim-slow    { animation-duration: .9s }
.anim-slower  { animation-duration: 1.4s }
.anim-lazy    { animation-duration: 2s }

/* ══════════════════════════════════════════════════════════════
   CLASES — CONTINUAS
══════════════════════════════════════════════════════════════ */

.anim-float         { animation: floatY       3.5s ease-in-out infinite }
.anim-float-orbit   { animation: floatOrbit   6s ease-in-out infinite }
.anim-float-x       { animation: floatX       4s ease-in-out infinite }
.anim-breathe       { animation: breathe      3s ease-in-out infinite }
.anim-pulse         { animation: pulseGlow    2.2s ease-in-out infinite }
.anim-pulse-dot     { animation: pulseDot     1.8s ease-in-out infinite }
.anim-bounce        { animation: bouncePro    1.4s infinite }
.anim-bounce-soft   { animation: floatY       2.5s ease-in-out infinite }
.anim-spin          { animation: spin         .9s linear infinite }
.anim-spin-slow     { animation: spin         4s linear infinite }
.anim-spin-reverse  { animation: spinReverse  4s linear infinite }
.anim-spin-wobble   { animation: spinWobble   2s ease-in-out infinite }
.anim-heartbeat     { animation: heartbeat    1.5s ease-in-out infinite }
.anim-blink         { animation: blink        1.1s step-end infinite }
.anim-glow          { animation: neonBorder   2.5s ease-in-out infinite }
.anim-glow-ring     { animation: glowRing     2s ease-in-out infinite }
.anim-ripple        { animation: rippleDouble 2s ease-out infinite }
.anim-jello-loop    { animation: jello        2.5s ease-in-out infinite }
.anim-marquee       { animation: marquee      12s linear infinite }

/* ══════════════════════════════════════════════════════════════
   TEXTO — PROFESIONAL
══════════════════════════════════════════════════════════════ */

/* Neon */
.anim-neon {
    animation: neonPulse 2.5s ease-in-out infinite;
    color: var(--c-accent-light);
}

/* Gradiente multicolor animado */
.anim-gradient-text {
    background: linear-gradient(135deg, var(--c-accent-light), #7dd3fc, #a78bfa, var(--c-accent-light));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 5s ease infinite;
}

/* Gradiente de fondo de elemento */
.anim-gradient-bg {
    background: linear-gradient(135deg, var(--c-accent), #7c3aed, #0ea5e9, var(--c-accent));
    background-size: 300% 300%;
    animation: gradientBg 6s ease infinite;
}

/* Typewriter con cursor */
.anim-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--c-accent);
    animation: typewriter 2.5s steps(40,end) both, caretBlink .75s step-end infinite;
}
.anim-typewriter-fast {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--c-accent);
    animation: typewriter 1.2s steps(30,end) both, caretBlink .75s step-end infinite;
}

/* Underline reveal animado */
.anim-underline {
    position: relative;
    display: inline-block;
}
.anim-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--c-accent);
    transform-origin: left;
    animation: underlineGrow .6s cubic-bezier(.77,0,.18,1) both;
}

/* Counter roll up */
.anim-count { overflow: hidden; display: inline-block; }
.anim-count span { display: inline-block; animation: rollUp .5s cubic-bezier(.23,1,.32,1) both }

/* ══════════════════════════════════════════════════════════════
   UTILIDADES / LOADERS
══════════════════════════════════════════════════════════════ */

/* Shimmer premium */
.anim-shimmer {
    background: linear-gradient(90deg,
        var(--c-surface-2) 0%,
        var(--c-surface-3) 30%,
        rgba(255,255,255,.04) 50%,
        var(--c-surface-3) 70%,
        var(--c-surface-2) 100%);
    background-size: 300% 100%;
    animation: shimmer 2s ease-in-out infinite;
}
.anim-shimmer-diag {
    background: linear-gradient(135deg,
        var(--c-surface-2) 0%,
        var(--c-surface-3) 30%,
        rgba(255,255,255,.06) 50%,
        var(--c-surface-3) 70%,
        var(--c-surface-2) 100%);
    background-size: 300% 300%;
    animation: shimmerDiag 2.5s ease-in-out infinite;
}

/* Shake pro */
.anim-shake      { animation: shake     .5s cubic-bezier(.36,.07,.19,.97) both }
.anim-shake-hard { animation: shakeHard .6s cubic-bezier(.36,.07,.19,.97) both }

/* Dots loader */
.anim-dots { display: inline-flex; gap: 5px; align-items: center }
.anim-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    animation: dotFlash 1.4s ease-in-out infinite both;
}
.anim-dots span:nth-child(2) { animation-delay: .22s }
.anim-dots span:nth-child(3) { animation-delay: .44s }

/* Bar loader */
.anim-bars { display: inline-flex; gap: 4px; align-items: flex-end; height: 20px }
.anim-bars span {
    width: 4px; border-radius: 2px;
    background: currentColor;
    animation: dotPulse 1.2s ease-in-out infinite both;
}
.anim-bars span:nth-child(1) { height: 12px; animation-delay: 0s }
.anim-bars span:nth-child(2) { height: 20px; animation-delay: .15s }
.anim-bars span:nth-child(3) { height: 8px;  animation-delay: .30s }
.anim-bars span:nth-child(4) { height: 16px; animation-delay: .45s }
.anim-bars span:nth-child(5) { height: 10px; animation-delay: .60s }

/* Ripple wrapper (halo de ping) */
.anim-ripple-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.anim-ripple-wrap::before,
.anim-ripple-wrap::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    animation: ripple 2s ease-out infinite;
}
.anim-ripple-wrap::after { animation-delay: 1s }

/* Progress bar animada */
.anim-progress-fill { animation: progressFill 1.5s cubic-bezier(.77,0,.18,1) both }

/* Marquee horizontal */
.anim-marquee-wrap { overflow: hidden; white-space: nowrap }
.anim-marquee-track { display: inline-flex; animation: marquee 14s linear infinite }

/* Pausa al hover */
.anim-pause-hover:hover { animation-play-state: paused }

/* ══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ===== PART: _06_animaciones-demo.css ===== */

/* ===== Animaciones Demo Page ===== */
.ad-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.ad-title{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--c-text);margin:0 0 .25rem}
.ad-sub{font-size:.82rem;color:var(--c-text-muted);margin:0}

/* Tabs de categoria */
.ad-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.5rem}
.ad-tab{padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:500;border:1px solid var(--c-border-subtle);background:var(--c-surface-2);color:var(--c-text-secondary);cursor:pointer;transition:all .15s;white-space:nowrap}
.ad-tab:hover{background:var(--c-surface-hover);color:var(--c-text)}
.ad-tab.active{background:var(--c-accent);border-color:var(--c-accent);color:#fff}

/* Seccion de categoria */
.ad-section{display:none;margin-bottom:1.5rem}
.ad-section.active{display:block}
.ad-section-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--c-accent-light);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--c-border-subtle)}

/* Grid de cards de animacion */
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1rem;margin-bottom:1.25rem}

/* Card individual */
.ad-card{background:var(--c-surface);border:1px solid var(--c-border-subtle);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ad-card-preview{height:140px;background:var(--c-surface-2);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--c-border-subtle);cursor:pointer;position:relative;overflow:hidden}
.ad-card-preview:hover .ad-replay-btn{opacity:1}
.ad-replay-btn{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:3px 8px;font-size:.65rem;color:#fff;cursor:pointer;opacity:0;transition:opacity .15s;backdrop-filter:blur(4px)}
.ad-card-body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:8px}
.ad-card-name{font-size:.88rem;font-weight:700;color:var(--c-text);margin:0;display:flex;align-items:center;gap:6px}
.ad-card-desc{font-size:.75rem;color:var(--c-text-muted);margin:0;line-height:1.5}
.ad-card-code{background:var(--c-surface-3);border:1px solid var(--c-border-subtle);border-radius:8px;padding:8px 10px;font-family:var(--font-mono);font-size:.72rem;color:var(--c-accent-light);display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.ad-card-code span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-copy-btn{background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:2px;border-radius:4px;display:flex;align-items:center;flex-shrink:0;transition:color .12s}
.ad-copy-btn:hover{color:var(--c-accent-light)}
.ad-copy-btn svg{width:12px;height:12px}

/* Badge tipo */
.ad-badge-enter{background:rgba(88,166,255,.12);color:#58a6ff;border:1px solid rgba(88,166,255,.2);padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:700}
.ad-badge-loop{background:rgba(139,92,246,.12);color:#a78bfa;border:1px solid rgba(139,92,246,.2);padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:700}
.ad-badge-text{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.2);padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:700}
.ad-badge-util{background:rgba(63,185,80,.12);color:#3fb950;border:1px solid rgba(63,185,80,.2);padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:700}

/* Preview elements */
.ad-box{width:52px;height:52px;border-radius:12px;background:var(--c-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ad-circle{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--c-accent),#7c3aed);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ad-text-demo{font-size:1.1rem;font-weight:700;color:var(--c-text)}
.ad-img-demo{width:60px;height:60px;border-radius:12px;object-fit:cover;background:var(--c-surface-3)}
.ad-card-demo{width:120px;height:70px;background:var(--c-surface);border:1px solid var(--c-border-subtle);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}
.ad-card-demo-bar{height:6px;border-radius:3px;background:var(--c-accent);opacity:.7}
.ad-card-demo-bar:last-child{width:60%;background:var(--c-surface-3)}

/* Dot loader preview */
.ad-dots-demo{display:inline-flex;gap:5px;align-items:center}
.ad-dots-demo span{width:8px;height:8px;border-radius:50%;background:var(--c-accent);animation:dotFlash 1.4s ease-in-out infinite both}
.ad-dots-demo span:nth-child(2){animation-delay:.2s}
.ad-dots-demo span:nth-child(3){animation-delay:.4s}

/* Shimmer preview */
.ad-shimmer-demo{width:120px;display:flex;flex-direction:column;gap:8px}
.ad-shimmer-line{height:10px;border-radius:5px}
.ad-shimmer-line:last-child{width:70%}

/* Gradient text preview */
.ad-grad-text{font-size:1.4rem;font-weight:800}

/* Typewriter preview */
.ad-tw{font-size:.95rem;font-weight:600;font-family:var(--font-mono)}

/* Toast de copiado */
.ad-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--c-surface-3);border:1px solid var(--c-border-subtle);border-radius:10px;padding:8px 18px;font-size:.8rem;color:var(--c-text);display:flex;align-items:center;gap:8px;opacity:0;transition:all .25s;z-index:9999;pointer-events:none;white-space:nowrap}
.ad-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ad-toast svg{width:14px;height:14px;color:var(--c-success-light)}

/* Delay picker */
.ad-delay-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.ad-delay-btn{padding:4px 12px;border-radius:8px;font-size:.75rem;border:1px solid var(--c-border-subtle);background:var(--c-surface-2);color:var(--c-text-secondary);cursor:pointer;transition:all .15s;font-family:var(--font-mono)}
.ad-delay-btn:hover,.ad-delay-btn.active{background:var(--c-accent-dim);color:var(--c-accent-light);border-color:var(--c-border)}


/* ===== PART: _10_app_base.css ===== */


/* ── Reset y base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
/* Fix flexbox scroll — sin min-height:0 el flex-1 child puede exceder el padre */
.flex-1 { min-height: 0; min-width: 0; }
body {
    font-family: var(--font-body);
    background-color: var(--c-bg);
    background-image:
        radial-gradient(ellipse at 15% 50%, var(--c-bg-gradient-1) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 15%, var(--c-bg-gradient-2) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 90%, var(--c-bg-gradient-1) 0%, transparent 40%);
    color: var(--c-text);
}

/* ── Tipografía ───────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

/* ── Scrollbar personalizada ──────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: var(--c-scrollbar-track); }
::-webkit-scrollbar-thumb    { background: var(--c-scrollbar-thumb); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-hover); }

/* ── Sidebar ──────────────────────────────────────── */
#sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-sidebar-bg);
    border-right: 1px solid var(--c-sidebar-border);
}

/* Logo area */
#sidebar-logo {
    padding: 20px;
    border-bottom: 1px solid var(--c-border-subtle);
    flex-shrink: 0;
}
#sidebar-logo-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
#sidebar-logo-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--c-accent-dim);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#sidebar-logo-icon svg { width: 16px; height: 16px; color: var(--c-accent-light); }
.sidebar-logo-name {
    font-family: var(--font-display);
    color: var(--c-accent-light);
    font-size: 0.9rem;
    line-height: 1;
    margin: 0;
}
.sidebar-logo-sub {
    color: var(--c-text-muted);
    font-size: 0.7rem;
    margin: 3px 0 0;
}

/* Nav */
#sidebar-nav {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-section-title {
    color: var(--c-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 12px 4px;
    margin: 0;
}
.sidebar-section-title + .sidebar-section-title,
.sidebar-link ~ .sidebar-section-title {
    padding-top: 16px;
}

/* Links */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: all 0.18s ease;
}
.sidebar-link:hover:not(.active) {
    background: var(--c-surface-hover);
    color: var(--c-text);
}
.sidebar-link.active {
    background: var(--c-sidebar-active-bg);
    border-color: var(--c-sidebar-active-border);
    color: var(--c-sidebar-active-text);
}
.sidebar-link .nav-icon { color: inherit; opacity: 0.7; }
.sidebar-link.active .nav-icon,
.sidebar-link:hover .nav-icon { opacity: 1; }
.sidebar-section-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-faint);
    padding: 0 0.75rem;
    margin-bottom: 0.375rem;
}

/* Badge en links */
.sidebar-badge {
    margin-left: auto;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--c-accent-dim);
    color: var(--c-accent-light);
    font-family: var(--font-mono);
}

/* User menu */
#sidebar-user {
    padding: 12px;
    border-top: 1px solid var(--c-border-subtle);
    flex-shrink: 0;
}
#sidebar-user-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border-radius: 8px;
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
#sidebar-user-btn:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border-subtle);
}
.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-accent-dim);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent-light);
    font-family: var(--font-display);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.sidebar-user-name {
    color: var(--c-text);
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-email {
    color: var(--c-text-muted);
    font-size: 0.7rem;
    margin: 2px 0 0;
}
.sidebar-user-chevron {
    width: 14px;
    height: 14px;
    color: var(--c-text-muted);
    flex-shrink: 0;
}

/* User dropdown */
#userMenuDropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-subtle);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
    z-index: 100;
}
.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.83rem;
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.sidebar-menu-link:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
}
.sidebar-menu-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.sidebar-menu-link--danger { color: var(--c-danger-light); }
.sidebar-menu-link--danger:hover { background: var(--c-danger-dim); color: var(--c-danger-light); }
.sidebar-menu-divider { height: 1px; background: var(--c-border-subtle); margin: 2px 0; }

/* ── Header / Footer ──────────────────────────────── */
#main-header {
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--c-border-subtle);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#main-footer {
    background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent), var(--c-footer-bg);
    border-top: 1px solid var(--c-border-subtle);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.app-footer {
    min-height: 52px;
    padding: 0.55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--c-text-secondary);
}
.app-footer__brand,
.app-footer__links,
.app-footer__meta,
.app-footer__chip {
    display: flex;
    align-items: center;
}
.app-footer__brand {
    gap: 0.625rem;
    min-width: 0;
}
.app-footer__mark {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent-light);
    background: linear-gradient(135deg, var(--c-accent-dim), rgba(255,255,255,0.025));
    border: 1px solid var(--c-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    flex: 0 0 auto;
}
.app-footer__mark svg { width: 0.95rem; height: 0.95rem; }
.app-footer__name {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text);
    font-size: 0.78rem;
    font-weight: 600;
}
.app-footer__links {
    gap: 0.35rem;
    margin-left: auto;
}
.app-footer__links a {
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: 0.74rem;
    line-height: 1;
    padding: 0.45rem 0.62rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.app-footer__links a:hover {
    color: var(--c-accent-light);
    background: var(--c-accent-dim-2);
    border-color: var(--c-border-subtle);
}
.app-footer__meta {
    gap: 0.6rem;
    margin-left: 0.35rem;
    white-space: nowrap;
    color: var(--c-text-faint);
    font-size: 0.72rem;
    font-family: var(--font-mono);
}
.app-footer__chip {
    gap: 0.42rem;
    padding: 0.32rem 0.58rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(16,185,129,0.16);
    background: var(--c-success-dim);
    color: var(--c-success-light);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
}
.app-footer__pulse {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: var(--radius-full);
    background: var(--c-success-light);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.10);
    animation: pulse-dot 2s ease-in-out infinite;
}
.app-footer__sep {
    width: 1px;
    height: 1rem;
    background: var(--c-border-subtle);
}
.app-footer__runtime { color: var(--c-text-muted); }
@media (max-width: 900px) {
    .app-footer { padding-inline: 1rem; }
    .app-footer__links { display: none; }
    .app-footer__meta { margin-left: auto; }
}
@media (max-width: 560px) {
    .app-footer { min-height: 48px; gap: 0.75rem; }
    .app-footer__name { max-width: 11rem; }
    .app-footer__runtime,
    .app-footer__sep--wide { display: none; }
    .app-footer__chip { padding-inline: 0.5rem; }
}
@media (max-width: 420px) {
    .app-footer__name { max-width: 8rem; }
    .app-footer__version,
    .app-footer__sep { display: none; }
}


/* ── Cards, Badges, Buttons, Forms ────────────────── */
/* Movidos a archivos separados:
   - _71_cards.css (Cards y KPIs)
   - _72_buttons-badges.css (Badges y Botones)
   - _73_forms.css (Inputs, Selects, Toggles)
*/

/* ── Tablas ───────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
    background: var(--c-surface-3);
    color: var(--c-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--c-border-subtle);
}
.data-table tbody tr { border-bottom: 1px solid var(--c-border-subtle); transition: background 0.15s; }
.data-table tbody tr:hover { background: var(--c-surface-hover); }
.data-table tbody td { padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--c-text-secondary); vertical-align: middle; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table { min-width: 760px; }
.data-table th, .data-table td { white-space: nowrap; }
@media (max-width: 768px) { .data-table { min-width: 920px; } }

/* ── Table wrap (responsive) ──────────────────────── */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--c-scrollbar-thumb); border-radius: 99px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }

/* ── Progress bar ─────────────────────────────────── */
/* Movido a _74_progress.css */

/* ── Animaciones ──────────────────────────────────── */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadein { animation: fadeInUp 0.35s ease both; }
@keyframes fbFadeIn { from{opacity:0} to{opacity:1} }
@keyframes loaderSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ── Drawer móvil ─────────────────────────────────── */
.drawer-overlay {
    display: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.drawer-overlay.open { display: block; }
@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
        position: fixed;
        z-index: 50;
        height: 100vh;
        top: 0; left: 0;
        /* Sidebar siempre opaco en móvil — sin transparencias */
        background: var(--c-sidebar-bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        box-shadow: 4px 0 32px rgba(0,0,0,0.6);
    }
    #sidebar.drawer-open { transform: translateX(0); }
}

/* ── Tooltip ──────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-surface-3);
    color: var(--c-text);
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    border: 1px solid var(--c-border-subtle);
    z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Divider / Dot ────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--c-border-subtle); margin: 1rem 0; }
.notif-dot { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; background: var(--c-danger); border-radius: 50%; border: 1px solid var(--c-bg); }

/* ── Code blocks ──────────────────────────────────── */
/* Movido a _75_code-blocks.css */

/* ── SweetAlert2 dark theme ───────────────────────── */
/* Movido a _76_modals.css */



/* ===== PART: _20_auth.css ===== */

/* ── Reset y base ──────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; }
        html, body { height: 100%; margin: 0; padding: 0; }

        body {
            font-family: var(--font-body);
            background-color: var(--c-bg);
            color: var(--c-text);
            min-height: 100vh;
        }

        /* ── Scrollbar personalizada ───────────────────────── */
        ::-webkit-scrollbar          { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track    { background: var(--c-scrollbar-track); }
        ::-webkit-scrollbar-thumb    { background: var(--c-scrollbar-thumb); border-radius: 99px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-hover); }

        /* ── Tipografía ────────────────────────────────────── */
        .font-display { font-family: var(--font-display); }
        .font-mono    { font-family: var(--font-mono); }

        /* ── Auth layout wrapper ───────────────────────────── */
        .auth-wrapper {
            display: flex;
            min-height: 100vh;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        /* ── Animated background blobs ─────────────────────── */
        .auth-wrapper::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse at 15% 50%, var(--c-bg-gradient-1) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 15%, var(--c-bg-gradient-2) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 95%, var(--c-bg-gradient-1) 0%, transparent 40%);
            animation: bgShift 14s ease-in-out infinite alternate;
            pointer-events: none;
            z-index: 0;
        }

        @keyframes bgShift {
            0%   { opacity: 0.7; transform: scale(1); }
            50%  { opacity: 1;   transform: scale(1.04); }
            100% { opacity: 0.8; transform: scale(1.01); }
        }

        @keyframes floatOrb {
            0%, 100% { transform: translateY(0px) scale(1); }
            50%       { transform: translateY(-18px) scale(1.03); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-20px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.35; }
        }

        /* ── LEFT COLUMN — Brand panel ─────────────────────── */
        .auth-brand {
            position: relative;
            width: 40%;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 3.5rem 3rem 3.5rem 3.5rem;
            overflow: hidden;
            z-index: 1;
        }

        /* Decorative radial glow orbs */
        .auth-brand::before,
        .auth-brand::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }
        .auth-brand::before {
            width: 440px;
            height: 440px;
            top: -100px;
            left: -130px;
            background: radial-gradient(circle, var(--c-accent-dim) 0%, transparent 70%);
            animation: floatOrb 9s ease-in-out infinite;
        }
        .auth-brand::after {
            width: 320px;
            height: 320px;
            bottom: -70px;
            right: -70px;
            background: radial-gradient(circle, var(--c-accent-dim) 0%, transparent 65%);
            animation: floatOrb 12s ease-in-out infinite reverse;
        }

        /* Vertical separator */
        .auth-brand-divider {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                var(--c-border) 25%,
                var(--c-border-hover) 50%,
                var(--c-border) 75%,
                transparent 100%
            );
        }

        .auth-brand-inner {
            position: relative;
            z-index: 2;
            animation: fadeInLeft 0.55s ease both;
        }

        /* Logo mark */
        .auth-logo-mark {
            width: 52px;
            height: 52px;
            border-radius: var(--radius-lg);
            background: linear-gradient(135deg, var(--c-accent-dim) 0%, var(--c-accent-dim-2) 100%);
            border: 1px solid var(--c-border-strong);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 0 32px var(--c-accent-dim);
            color: var(--c-accent-light);
        }

        .auth-app-name {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--c-text);
            margin: 0 0 0.5rem 0;
            line-height: 1.15;
            letter-spacing: -0.01em;
        }

        .auth-tagline {
            font-size: 0.9rem;
            color: var(--c-text-secondary);
            margin: 0 0 2.75rem 0;
            line-height: 1.6;
            max-width: 22rem;
        }

        /* Feature bullets */
        .auth-features {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 1.1rem;
        }

        .auth-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 0.875rem;
        }

        .auth-feature-icon {
            width: 34px;
            height: 34px;
            border-radius: var(--radius-md);
            background: var(--c-accent-dim);
            border: 1px solid var(--c-border);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--c-accent-light);
        }

        .auth-feature-text strong {
            display: block;
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--c-text);
            margin-bottom: 0.1rem;
        }

        .auth-feature-text span {
            font-size: 0.77rem;
            color: var(--c-text-muted);
            line-height: 1.45;
        }

        /* Version badge */
        .auth-brand-badge {
            margin-top: 3rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.85rem;
            border-radius: var(--radius-full);
            background: var(--c-accent-dim-2);
            border: 1px solid var(--c-border);
            font-size: 0.72rem;
            font-family: var(--font-mono);
            color: var(--c-text-muted);
            letter-spacing: 0.05em;
        }

        .auth-brand-badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--c-accent);
            box-shadow: 0 0 6px var(--c-accent);
            animation: pulse-dot 2.5s ease-in-out infinite;
        }

        /* ── RIGHT COLUMN — Content area ───────────────────── */
        .auth-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem 2rem;
            position: relative;
            z-index: 1;
            overflow-y: auto;
        }

        .auth-card {
            background: var(--c-surface);
            border: 1px solid var(--c-border-subtle);
            border-radius: var(--radius-xl);
            width: 100%;
            max-width: 420px;
            padding: 2.5rem 2.25rem;
            box-shadow:
                0 0 0 1px var(--c-border-subtle),
                0 20px 60px rgba(0, 0, 0, 0.45),
                0 4px 16px rgba(0, 0, 0, 0.25);
            animation: fadeInUp 0.4s ease both;
            position: relative;
        }

        /* Mobile-only top logo */
        .auth-mobile-logo {
            display: none;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 1.75rem;
        }

        .auth-mobile-logo-mark {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            background: var(--c-accent-dim);
            border: 1px solid var(--c-border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--c-accent-light);
        }

        .auth-mobile-logo-name {
            font-family: var(--font-display);
            font-size: 1.1rem;
            color: var(--c-text);
        }

        /* ── Responsive ────────────────────────────────────── */
        @media (max-width: 767px) {
            .auth-brand { display: none; }
            .auth-content {
                padding: 1.5rem 1rem;
                align-items: flex-start;
                padding-top: 2rem;
            }
            .auth-card {
                max-width: 100%;
                padding: 1.75rem 1.5rem;
                border-radius: var(--radius-lg);
            }
            .auth-mobile-logo { display: flex; }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .auth-brand {
                width: 38%;
                padding: 2.5rem 2rem 2.5rem 2.5rem;
            }
        }

        /* ══════════════════════════════════════════════════════
           SHARED AUTH FORM COMPONENTS
           Usadas por: auth-login, auth-register, auth-forgot
        ══════════════════════════════════════════════════════ */

        /* ── Field wrapper ─────────────────────────────────── */
        .auth-field {
            margin-bottom: 1.1rem;
        }

        /* ── Label ─────────────────────────────────────────── */
        .auth-label {
            display: block;
            font-size: 0.775rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            color: var(--c-text-secondary);
            margin-bottom: 0.4rem;
        }

        /* ── Input ─────────────────────────────────────────── */
        .auth-input {
            width: 100%;
            background: var(--c-surface-2);
            border: 1px solid var(--c-border);
            color: var(--c-text);
            border-radius: var(--radius-md);
            padding: 0.65rem 0.9rem;
            font-size: 0.875rem;
            font-family: var(--font-body);
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            box-sizing: border-box;
        }
        .auth-input:focus {
            border-color: var(--c-accent);
            box-shadow: 0 0 0 3px var(--c-accent-dim-2);
        }
        .auth-input::placeholder {
            color: var(--c-text-faint, var(--c-text-muted));
        }
        .auth-input:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        /* ── Select ────────────────────────────────────────── */
        .auth-select {
            width: 100%;
            background: var(--c-surface-2);
            border: 1px solid var(--c-border);
            color: var(--c-text);
            border-radius: var(--radius-md);
            padding: 0.65rem 2.25rem 0.65rem 0.9rem;
            font-size: 0.875rem;
            font-family: var(--font-body);
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
            outline: none;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238e8572'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1rem;
            box-sizing: border-box;
        }
        .auth-select:focus {
            border-color: var(--c-accent);
            box-shadow: 0 0 0 3px var(--c-accent-dim-2);
        }
        .auth-select option {
            background: var(--c-surface-2);
            color: var(--c-text);
        }

        /* ── Textarea ──────────────────────────────────────── */
        .auth-textarea {
            width: 100%;
            min-height: 110px;
            background: var(--c-surface-2);
            border: 1px solid var(--c-border);
            color: var(--c-text);
            border-radius: var(--radius-md);
            padding: 0.65rem 0.9rem;
            font-size: 0.875rem;
            font-family: var(--font-body);
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
            outline: none;
            resize: vertical;
            line-height: 1.6;
            box-sizing: border-box;
        }
        .auth-textarea:focus {
            border-color: var(--c-accent);
            box-shadow: 0 0 0 3px var(--c-accent-dim-2);
        }
        .auth-textarea::placeholder {
            color: var(--c-text-faint, var(--c-text-muted));
        }

        /* ── Primary submit button ─────────────────────────── */
        .auth-btn-primary {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.72rem 1.25rem;
            background: var(--c-accent);
            color: var(--c-bg);
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.9rem;
            font-weight: 600;
            font-family: var(--font-body);
            cursor: pointer;
            transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
            letter-spacing: 0.01em;
            text-decoration: none;
            text-align: center;
        }
        .auth-btn-primary:hover {
            background: var(--c-accent-light);
            box-shadow: 0 4px 20px var(--c-accent-dim);
            transform: translateY(-1px);
        }
        .auth-btn-primary:active  { transform: translateY(0); }
        .auth-btn-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* ── Secondary ghost button ────────────────────────── */
        .auth-btn-secondary {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.65rem 1.25rem;
            background: transparent;
            color: var(--c-text-secondary);
            border: 1px solid var(--c-border);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            font-family: var(--font-body);
            cursor: pointer;
            transition: all 0.18s ease;
            text-decoration: none;
            text-align: center;
        }
        .auth-btn-secondary:hover {
            background: var(--c-surface-hover);
            border-color: var(--c-border-hover);
            color: var(--c-text);
        }

        /* ── Divider ───────────────────────────────────────── */
        .auth-divider {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin: 1.4rem 0;
        }
        .auth-divider-line {
            flex: 1;
            height: 1px;
            background: var(--c-border-subtle);
        }
        .auth-divider-text {
            font-size: 0.73rem;
            color: var(--c-text-muted);
            white-space: nowrap;
            letter-spacing: 0.03em;
        }

        /* ── Footer row (ej: "¿No tienes cuenta? Regístrate") ─ */
        .auth-footer-text {
            text-align: center;
            font-size: 0.8rem;
            color: var(--c-text-muted);
            margin-top: 1.25rem;
            margin-bottom: 0;
        }

        .auth-link {
            color: var(--c-accent-light);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.15s;
        }
        .auth-link:hover {
            color: var(--c-accent);
            text-decoration: underline;
        }

        /* ── Error / helper text ───────────────────────────── */
        .auth-field-error {
            font-size: 0.74rem;
            color: var(--c-danger-light, #fb7185);
            margin-top: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        .auth-field-hint {
            font-size: 0.74rem;
            color: var(--c-text-muted);
            margin-top: 0.3rem;
        }

        /* ── Two-column row ────────────────────────────────── */
        .auth-row-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.875rem;
        }
        @media (max-width: 480px) {
            .auth-row-2 { grid-template-columns: 1fr; }
        }

        /* ── Shared button base (used by modal) ────────────── */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 1rem;
            border-radius: var(--radius-md);
            font-size: 0.82rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.18s ease;
            border: 1px solid transparent;
            text-decoration: none;
            font-family: var(--font-body);
        }
        .btn-ghost {
            background: transparent;
            color: var(--c-text-secondary);
            border-color: var(--c-border-subtle);
        }
        .btn-ghost:hover { background: var(--c-surface-hover); color: var(--c-text); border-color: var(--c-border); }
        .btn-primary {
            background: var(--c-accent);
            color: var(--c-bg);
            border-color: var(--c-accent);
        }
        .btn-primary:hover { background: var(--c-accent-light); border-color: var(--c-accent-light); }
        .btn-success {
            background: var(--c-success-dim);
            color: var(--c-success-light);
            border-color: var(--c-success-dim);
        }
        .btn-success:hover { background: var(--c-success); color: white; }
        .btn-warning {
            background: var(--c-warning-dim);
            color: var(--c-warning-light);
            border-color: var(--c-warning-dim);
        }
        .btn-warning:hover { background: var(--c-warning); color: white; }
        .btn-danger {
            background: var(--c-danger-dim);
            color: var(--c-danger-light);
            border-color: var(--c-danger-dim);
        }
        .btn-danger:hover { background: var(--c-danger); color: white; }



/* ===== PART: _30_editor.css ===== */

/* ===== editor (integrado al bundle) ===== */
/* NOTE: Quill CSS sigue viniendo de CDN (quill.snow.css). Este bloque solo tema/lay out del panel. */
.editor-shell{display:flex;flex-direction:column;gap:14px}
.editor-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:12px}
@media(max-width:1024px){.editor-grid{grid-template-columns:1fr}}
.editor-card{background:var(--c-surface);border:1px solid var(--c-border-subtle);border-radius:16px;overflow:hidden}
.editor-card__head{padding:14px;border-bottom:1px solid var(--c-border-subtle);display:flex;align-items:center;justify-content:space-between;gap:12px}
.editor-card__body{padding:14px}
.editor-title{width:100%;padding:12px 12px;border-radius:12px;background:var(--c-surface-3);border:1px solid var(--c-border-subtle);color:var(--c-text);font-weight:700}
.editor-title:focus{outline:none;box-shadow:0 0 0 3px var(--c-accent-dim-2);border-color:var(--c-border)}
.kw-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kw-input{flex:1;min-width:220px;padding:10px 10px;border-radius:12px;background:var(--c-surface-3);border:1px solid var(--c-border-subtle);color:var(--c-text)}
.kw-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--c-surface-3);border:1px solid var(--c-border-subtle);color:var(--c-text-secondary);font-size:.8rem}
.kw-chip button{background:transparent;border:none;color:var(--c-text-muted);cursor:pointer;font-size:14px;line-height:1}
.ql-toolbar.ql-snow{border:1px solid var(--c-border-subtle);border-radius:14px 14px 0 0;background:var(--c-surface-2)}
.ql-container.ql-snow{border:1px solid var(--c-border-subtle);border-top:none;border-radius:0 0 14px 14px;background:var(--c-surface-3);color:var(--c-text);min-height:360px}
.ql-editor{min-height:360px;font-size:0.95rem}
.ql-snow .ql-stroke{stroke: var(--c-text-muted)}
.ql-snow .ql-fill{fill: var(--c-text-muted)}
.ql-snow .ql-picker{color: var(--c-text-muted)}
.ql-snow .ql-picker-options{background: var(--c-surface);border-color: var(--c-border-subtle)}
.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color: var(--c-border-subtle)}
.ql-snow .ql-tooltip{background: var(--c-surface);border-color: var(--c-border-subtle);color: var(--c-text)}
.ql-snow .ql-tooltip input[type=text]{background: var(--c-surface-3);border:1px solid var(--c-border-subtle);color: var(--c-text)}
#preview h1,#preview h2,#preview h3{color:var(--c-text)}
#preview a{color:var(--c-accent-light)}


/* ===== PART: _40_terminal2.css ===== */

/* ===== docker-tab ===== */
.docker-tab{padding:9px 16px;font-size:.82rem;font-weight:600;color:var(--c-text-muted);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap}
.docker-tab:hover{color:var(--c-text)}
.docker-tab.active{color:var(--c-text);border-bottom-color:var(--c-accent)}

/* ===== Terminal2 — xterm.js estilo Cockpit ===== */

/* ---------- Layout raiz ---------- */
/* El panel principal usa flex-column; necesitamos que el terminal ocupe
   todo el alto disponible sin scroll en la pagina. Se sobreescribe el
   padding del <main> solo para esta pagina via clase en el root. */

.xt-root {
  display: flex;
  flex-direction: column;
  /* alto disponible = viewport - header panel (3.5rem) - statusbar footer (2.5rem) */
  height: calc(100vh - 3.5rem - 2rem);
  min-height: 480px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--c-border-subtle);
  background: #0d1117;
}

/* ---------- Toolbar ---------- */
.xt-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 42px;
  min-height: 42px;
  padding: 0 6px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border-subtle);
  overflow: hidden;
}

/* ---------- Tabs ---------- */
.xt-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  max-width: 55%;
  flex-shrink: 0;
}
.xt-tabs::-webkit-scrollbar { display: none; }

.xt-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 12px;
  height: 42px;
  font-size: .78rem;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  user-select: none;
  transition: color .15s, border-color .15s, background .15s;
}
.xt-tab:hover { color: var(--c-text); background: var(--c-surface-hover); }
.xt-tab.active {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}
.xt-tab.xt-tab--connecting { color: var(--c-warning); }
.xt-tab.xt-tab--error     { color: var(--c-danger); }

.xt-tab__dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--c-border);
  flex-shrink: 0;
}
.xt-tab.active          .xt-tab__dot { background: var(--c-success); }
.xt-tab.xt-tab--connecting .xt-tab__dot { background: var(--c-warning); animation: xt-pulse .8s infinite; }
.xt-tab.xt-tab--error      .xt-tab__dot { background: var(--c-danger); }

@keyframes xt-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.3; }
}

.xt-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--c-text-faint);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 12px;
  line-height: 1;
  transition: background .12s, color .12s;
}
.xt-tab__close:hover { background: var(--c-danger-dim); color: var(--c-danger-light); }

.xt-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 2px;
  transition: background .12s, color .12s;
}
.xt-tab-add svg { width: 15px; height: 15px; }
.xt-tab-add:hover { background: var(--c-surface-hover); color: var(--c-text); }

/* ---------- Separadores y elementos toolbar ---------- */
.xt-toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--c-border-subtle);
  flex-shrink: 0;
  margin: 0 4px;
}

.xt-status-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.xt-status-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--c-border);
  flex-shrink: 0;
}
.xt-status-dot.ok   { background: var(--c-success); box-shadow: 0 0 0 2px var(--c-success-dim); }
.xt-status-dot.warn { background: var(--c-warning);  animation: xt-pulse .8s infinite; }
.xt-status-dot.bad  { background: var(--c-danger); }
.xt-status-label {
  font-size: .75rem;
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* Busqueda -->  */
.xt-search-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}
.xt-search-input {
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--c-border-subtle);
  background: var(--c-surface-3);
  color: var(--c-text);
  font-size: .78rem;
  font-family: var(--font-mono);
  width: 160px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.xt-search-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-dim); }

/* Botones icono toolbar */
.xt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.xt-icon-btn svg { width: 15px; height: 15px; }
.xt-icon-btn:hover { background: var(--c-surface-hover); color: var(--c-text); }
.xt-icon-btn:active { background: var(--c-accent-dim); color: var(--c-accent-light); }

.xt-dim {
  font-size: .72rem;
  font-family: var(--font-mono);
  color: var(--c-text-faint);
  padding: 0 4px;
  white-space: nowrap;
}
.xt-font-size {
  font-size: .75rem;
  font-family: var(--font-mono);
  color: var(--c-text-muted);
  min-width: 20px;
  text-align: center;
}

.xt-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* ---------- Cuerpo terminal ---------- */
.xt-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0d1117;
}

/* Cada instancia de xterm.js montada */
.xt-pane {
  position: absolute;
  inset: 0;
  display: none;
}
.xt-pane.active { display: block; }

/* Asegurar que xterm ocupe todo el pane */
.xt-pane .xterm,
.xt-pane .xterm-viewport,
.xt-pane .xterm-screen {
  width: 100% !important;
  height: 100% !important;
}
.xt-pane .xterm { height: 100%; }
.xterm-viewport { overflow-y: scroll; }

/* ---------- Statusbar ---------- */
.xt-statusbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  background: var(--c-surface-3);
  border-top: 1px solid var(--c-border-subtle);
  overflow: hidden;
}

.xt-sb-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.xt-sb-icon { width: 11px; height: 11px; flex-shrink: 0; }
.xt-sb-sep  { color: var(--c-border-subtle); font-size: .72rem; padding: 0 2px; }
.xt-sb-hint { font-size: .68rem; color: var(--c-text-faint); }

/* ---------- Modal de conexion ---------- */
.xt-conn-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  padding: 16px;
}
.xt-conn-modal.hidden { display: none; }

.xt-conn-dialog {
  width: 100%;
  max-width: 460px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.xt-conn-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-border-subtle);
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-text);
}

.xt-conn-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xt-conn-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--c-border-subtle);
}

.xt-field { display: flex; flex-direction: column; gap: 5px; }
.xt-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-text-muted);
}
.xt-input {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--c-border-subtle);
  background: var(--c-surface-3);
  color: var(--c-text);
  font-size: .9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.xt-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-dim); }
.xt-input--mono { font-family: var(--font-mono); font-size: .82rem; }
.xt-field-hint  { margin: 4px 0 0; font-size: .75rem; color: var(--c-text-muted); line-height: 1.45; }
.xt-field-hint code { font-family: var(--font-mono); font-size: .85em; color: var(--c-accent-light); }

/* ---------- Sobreescribir padding de main solo para terminal2 ---------- */
/* El <main> del layout tiene padding; lo anulamos para que la terminal
   use todo el espacio sin barra de scroll lateral/inferior. */
body:has(.xt-root) main { padding: 0 !important; overflow: hidden !important; }


/* ===== PART: _41_almacenamiento.css ===== */

/* ===== Almacenamiento ===== */
.alm-page{display:flex;flex-direction:column;gap:0}

/* Header */
.alm-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.alm-title{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--c-text);margin:0}
.alm-sub{color:var(--c-text-muted);font-size:.88rem;margin:4px 0 0}
.alm-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.alm-search{padding:9px 12px;border-radius:10px;background:var(--c-surface-2);border:1px solid var(--c-border-subtle);color:var(--c-text);font-size:.88rem;width:240px;max-width:100%;box-sizing:border-box;outline:none}
.alm-search:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-dim)}

/* KPI grid */
.alm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:900px){.alm-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.alm-kpis{grid-template-columns:1fr}}

.alm-kpi{background:var(--c-surface);border:1px solid var(--c-border-subtle);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:0}
.alm-kpi-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.alm-kpi-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.alm-kpi-icon--accent{background:var(--c-accent-dim);color:var(--c-accent-light)}
.alm-kpi-icon--ok{background:rgba(63,185,80,.12);color:#3fb950}
.alm-kpi-icon--warn{background:rgba(245,158,11,.12);color:#f59e0b}
.alm-kpi-icon--danger{background:rgba(239,68,68,.12);color:#ef4444}
.alm-kpi-val{font-size:1.55rem;font-family:var(--font-mono);font-weight:700;color:var(--c-text);line-height:1;margin:0}
.alm-kpi-label{font-size:.78rem;font-weight:700;color:var(--c-text-muted);margin:5px 0 2px}
.alm-kpi-sub{font-size:.73rem;color:var(--c-text-faint);margin:0}
.alm-kpi-bar{height:4px;border-radius:999px;background:var(--c-surface-3);margin-top:14px;overflow:hidden}
.alm-kpi-bar-fill{height:100%;border-radius:999px;transition:width .4s}
.alm-kpi-bar-fill--accent{background:var(--c-accent)}

/* Badges */
.alm-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:600;border:1px solid transparent}
.alm-badge--accent{background:var(--c-accent-dim);color:var(--c-accent-light);border-color:var(--c-border)}
.alm-badge--ok{background:rgba(63,185,80,.12);color:#3fb950;border-color:rgba(63,185,80,.2)}
.alm-badge--warn{background:rgba(245,158,11,.12);color:#f59e0b;border-color:rgba(245,158,11,.2)}
.alm-badge--danger{background:rgba(239,68,68,.12);color:#ef4444;border-color:rgba(239,68,68,.2)}
.alm-badge--swap{background:rgba(188,140,255,.1);color:#bc8cff;border-color:rgba(188,140,255,.2)}
.alm-badge--fs{background:var(--c-surface-3);color:var(--c-text-muted);border-color:var(--c-border-subtle)}

/* Disco card */
.alm-disk{background:var(--c-surface);border:1px solid var(--c-border-subtle);border-radius:16px;overflow:hidden;margin-bottom:16px}

.alm-disk-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 18px;border-bottom:1px solid var(--c-border-subtle)}
.alm-disk-left{display:flex;align-items:center;gap:12px;min-width:0}
.alm-disk-ico{width:38px;height:38px;border-radius:10px;background:var(--c-surface-2);border:1px solid var(--c-border-subtle);display:flex;align-items:center;justify-content:center;color:var(--c-accent);flex-shrink:0}
.alm-disk-name-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.alm-disk-name{font-family:var(--font-mono);font-size:.95rem;font-weight:800;color:var(--c-text)}
.alm-disk-desc{font-size:.75rem;color:var(--c-text-muted);margin:0}
.alm-disk-usage{display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:0;max-width:320px}
.alm-disk-track{flex:1;height:6px;border-radius:999px;background:var(--c-surface-3);overflow:hidden;min-width:0}
.alm-disk-fill{height:100%;border-radius:999px;transition:width .4s}
.alm-disk-pct{font-size:.78rem;font-family:var(--font-mono);min-width:34px;text-align:right;flex-shrink:0}
.alm-disk-size{font-size:.73rem;color:var(--c-text-muted);white-space:nowrap;flex-shrink:0}

/* Graficas */
.alm-charts{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--c-border-subtle)}
@media(max-width:640px){.alm-charts{grid-template-columns:1fr}}
.alm-chart-box{padding:14px}
.alm-chart-box--r{border-left:1px solid var(--c-border-subtle)}
@media(max-width:640px){.alm-chart-box--r{border-left:none;border-top:1px solid var(--c-border-subtle)}}
.alm-chart-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--c-text-muted);margin:0 0 8px}
.alm-chart-mount{height:190px;width:100%}

/* Tabla */
.alm-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.alm-table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:520px}
.alm-table th{padding:10px 14px;text-align:left;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-muted);border-bottom:1px solid var(--c-border-subtle);white-space:nowrap;background:var(--c-surface-2)}
.alm-table td{padding:10px 14px;border-bottom:1px solid var(--c-border-subtle);color:var(--c-text-secondary);vertical-align:middle}
.alm-table tr:last-child td{border-bottom:none}
.alm-table tr:hover td{background:var(--c-surface-hover)}

/* Celdas especiales */
.alm-mono{font-family:var(--font-mono);font-size:.8rem}
.alm-mount{color:var(--c-accent-light)}
.alm-muted{color:var(--c-text-muted)}
.alm-flags{font-size:.75rem;color:var(--c-text-faint)}
.alm-td-bar{min-width:120px}
.alm-bar-wrap{display:flex;align-items:center;gap:6px}
.alm-bar-track{flex:1;height:4px;border-radius:999px;background:var(--c-surface-3);overflow:hidden;min-width:0}
.alm-bar-fill{height:100%;border-radius:999px}
.alm-bar-pct{font-size:.72rem;font-family:var(--font-mono);min-width:30px;text-align:right;flex-shrink:0}

/* Vacio */
.alm-empty{text-align:center;padding:48px 0;color:var(--c-text-muted);font-size:.9rem}


/* ===== PART: _50_chats.css ===== */

/* ══════════════════════════════════════════════
   CHATS — Mensajería interna
   Prefijo: .ch-
══════════════════════════════════════════════ */

/* FULL-SCREEN OVERRIDE */
.ch-page-main{padding:0!important;overflow:hidden!important}

/* Layout principal */
.ch-wrap{display:grid;grid-template-columns:320px 1fr;height:100%;min-height:0;background:var(--c-surface);border:none;border-radius:0;overflow:hidden}
@media(max-width:900px){.ch-wrap{grid-template-columns:1fr;height:auto}}

/* ── Sidebar conversaciones ─────────────────── */
.ch-sidebar{border-right:1px solid var(--c-border);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ch-sidebar-header{padding:0.9rem 1rem;border-bottom:1px solid var(--c-border-subtle);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.ch-sidebar-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--c-text);margin:0}
.ch-sidebar-search{padding:0.6rem 0.9rem;border-bottom:1px solid var(--c-border-subtle);flex-shrink:0}
.ch-search-inp{width:100%;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:0.38rem 0.75rem;color:var(--c-text);font-size:0.8rem;font-family:inherit;box-sizing:border-box}
.ch-search-inp:focus{outline:none;border-color:var(--c-accent)}
.ch-conv-list{flex:1;overflow-y:auto}

/* Conversación item */
.ch-conv-item{display:flex;align-items:center;gap:0.7rem;padding:0.7rem 1rem;cursor:pointer;border-bottom:1px solid var(--c-border-subtle);transition:background 0.12s;position:relative}
.ch-conv-item:hover{background:var(--c-surface-2)}
.ch-conv-item.active{background:var(--c-surface-2);border-left:3px solid var(--c-accent)}
.ch-conv-item.active .ch-conv-name{color:var(--c-accent)}
.ch-conv-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.82rem;font-weight:700;flex-shrink:0;font-family:var(--font-display)}
.ch-conv-meta{flex:1;min-width:0}
.ch-conv-name{font-size:0.84rem;font-weight:600;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-conv-preview{font-size:0.74rem;color:var(--c-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0.1rem}
.ch-conv-time{font-size:0.68rem;color:var(--c-text-faint);white-space:nowrap;margin-left:auto;align-self:flex-start;padding-top:0.1rem}
.ch-conv-unread{position:absolute;top:0.55rem;right:0.75rem;width:18px;height:18px;border-radius:50%;background:var(--c-accent);color:#000;font-size:0.65rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.ch-conv-ended{opacity:.5}
.ch-conv-ended-tag{font-size:0.64rem;background:rgba(107,114,128,.18);color:var(--c-text-muted);padding:0.08rem 0.35rem;border-radius:var(--radius-full);border:1px solid rgba(107,114,128,.35);margin-top:0.2rem;display:inline-block;font-weight:600}

/* Botón nueva conversación */
.ch-new-btn{display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.6rem 1rem;border-top:1px solid var(--c-border-subtle);font-size:0.8rem;font-weight:600;color:var(--c-accent);cursor:pointer;background:transparent;border-left:none;border-right:none;border-bottom:none;font-family:inherit;transition:background 0.12s;flex-shrink:0}
.ch-new-btn:hover{background:var(--c-surface-2)}

@media(max-width:900px){
  .ch-sidebar{border-right:none;border-bottom:1px solid var(--c-border);max-height:280px}
  .ch-conv-list{max-height:200px}
}

/* ── Área de chat ───────────────────────────── */
.ch-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* Header del chat */
.ch-chat-header{padding:0.75rem 1.1rem;border-bottom:1px solid var(--c-border-subtle);display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
.ch-chat-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;flex-shrink:0;font-family:var(--font-display)}
.ch-chat-user{flex:1;min-width:0}
.ch-chat-name{font-weight:700;font-size:0.9rem;color:var(--c-text)}
.ch-chat-status{font-size:0.72rem;color:var(--c-text-muted)}
.ch-chat-status.online{color:var(--c-success)}
.ch-chat-actions{display:flex;gap:0.4rem;margin-left:auto}
.ch-icon-btn{width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--c-border);background:transparent;color:var(--c-text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.12s}
.ch-icon-btn:hover{background:var(--c-surface-2);color:var(--c-text)}
.ch-icon-btn.danger:hover{background:rgba(244,63,94,.12);color:var(--c-danger);border-color:rgba(244,63,94,.3)}
.ch-icon-btn svg{width:15px;height:15px}

/* Mensajes */
.ch-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.6rem}
.ch-day-label{text-align:center;font-size:0.7rem;color:var(--c-text-faint);margin:0.4rem 0;display:flex;align-items:center;gap:0.5rem}
.ch-day-label::before,.ch-day-label::after{content:'';flex:1;height:1px;background:var(--c-border-subtle)}

/* Burbujas */
.ch-bubble-wrap{display:flex;flex-direction:column;max-width:72%}
.ch-bubble-wrap.me{align-self:flex-end;align-items:flex-end}
.ch-bubble-wrap.them{align-self:flex-start;align-items:flex-start}
.ch-bubble{padding:0.55rem 0.85rem;border-radius:var(--radius-lg);font-size:0.83rem;line-height:1.45;word-break:break-word;position:relative}
.ch-bubble-wrap.me .ch-bubble{background:var(--c-accent);color:#000;border-bottom-right-radius:4px}
.ch-bubble-wrap.them .ch-bubble{background:var(--c-surface-2);color:var(--c-text);border-bottom-left-radius:4px;border:1px solid var(--c-border-subtle)}
.ch-bubble-time{font-size:0.65rem;color:var(--c-text-faint);margin-top:0.2rem;padding:0 0.2rem}
.ch-bubble-sender{font-size:0.68rem;color:var(--c-text-muted);margin-bottom:0.15rem;font-weight:600;padding:0 0.2rem}

/* Imagen en burbuja */
.ch-bubble-img{max-width:240px;max-height:200px;border-radius:var(--radius-md);cursor:pointer;display:block;object-fit:cover;transition:opacity 0.15s}
.ch-bubble-img:hover{opacity:.88}
.ch-bubble-wrap.me .ch-bubble-img{border-bottom-right-radius:4px}
.ch-bubble-wrap.them .ch-bubble-img{border-bottom-left-radius:4px}
.ch-img-bubble{padding:0.3rem!important}

/* Mensajes de sistema */
.ch-sys-msg{text-align:center;font-size:0.72rem;color:#a0a0a0;padding:0.25rem 0.75rem;background:rgba(107,114,128,.18);border-radius:var(--radius-full);align-self:center;border:1px solid rgba(107,114,128,.35);font-weight:500}

/* Banner conversación terminada */
.ch-ended-banner{background:rgba(107,114,128,.1);border:1px solid var(--c-border-subtle);border-radius:var(--radius-md);padding:0.75rem 1rem;text-align:center;font-size:0.8rem;color:var(--c-text-muted);align-self:stretch;margin:0.25rem 0}

/* Typing indicator */
.ch-typing{display:none;align-self:flex-start;padding:0.45rem 0.9rem;background:var(--c-surface-2);border-radius:var(--radius-lg);border-bottom-left-radius:4px;border:1px solid var(--c-border-subtle)}
.ch-typing.visible{display:flex;gap:0.3rem;align-items:center}
.ch-typing span{width:6px;height:6px;border-radius:50%;background:var(--c-text-muted);animation:chType 1.2s infinite}
.ch-typing span:nth-child(2){animation-delay:.2s}
.ch-typing span:nth-child(3){animation-delay:.4s}
@keyframes chType{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* Barra de compresión */
.ch-compress-bar{display:none;align-items:center;gap:0.6rem;padding:0.5rem 0.9rem;background:rgba(196,148,48,.08);border-top:1px solid rgba(196,148,48,.2);font-size:0.75rem;color:var(--c-accent);flex-shrink:0}
.ch-compress-bar.visible{display:flex}
.ch-compress-track{flex:1;height:4px;background:var(--c-surface-3);border-radius:2px;overflow:hidden}
.ch-compress-fill{height:100%;background:var(--c-accent);border-radius:2px;transition:width 0.2s;width:0%}

/* Input area */
.ch-input-area{border-top:1px solid var(--c-border-subtle);padding:0.75rem 1rem;display:flex;align-items:flex-end;gap:0.6rem;flex-shrink:0}
.ch-input-area.disabled{opacity:.5;pointer-events:none}
.ch-input-wrap{flex:1;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-lg);display:flex;align-items:flex-end;gap:0.4rem;padding:0.45rem 0.75rem;min-width:0}
.ch-input-wrap:focus-within{border-color:var(--c-accent)}
.ch-textarea{flex:1;background:transparent;border:none;outline:none;color:var(--c-text);font-size:0.83rem;font-family:inherit;resize:none;max-height:120px;line-height:1.45;min-height:22px}
.ch-textarea::placeholder{color:var(--c-text-faint)}
.ch-attach-btn{width:28px;height:28px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--c-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.12s}
.ch-attach-btn:hover{color:var(--c-accent)}
.ch-attach-btn svg{width:16px;height:16px}
.ch-send-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--c-accent);color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity 0.12s}
.ch-send-btn:hover{opacity:.85}
.ch-send-btn svg{width:17px;height:17px}

/* Empty state */
.ch-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--c-text-muted);gap:0.75rem;padding:2rem}
.ch-empty svg{width:52px;height:52px;opacity:.25}
.ch-empty h3{font-size:1rem;color:var(--c-text);margin:0}
.ch-empty p{font-size:0.82rem;margin:0;text-align:center}

/* Lightbox */
.ch-lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;flex-direction:column;gap:1rem}
.ch-lightbox.open{display:flex}
.ch-lightbox img{max-width:90vw;max-height:80vh;border-radius:var(--radius-lg);object-fit:contain;box-shadow:0 8px 48px rgba(0,0,0,.6)}
.ch-lightbox-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ch-lightbox-close svg{width:18px;height:18px}
.ch-lightbox-info{font-size:0.78rem;color:rgba(255,255,255,.55)}

/* ── Widget solicitud entrante ──────────────── */
.ch-incoming{position:fixed;bottom:1.5rem;right:1.5rem;z-index:8888;display:flex;flex-direction:column;gap:0.6rem;pointer-events:none}
.ch-incoming-card{pointer-events:all;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.35);width:320px;overflow:hidden;transform:translateX(360px);opacity:0;transition:transform 0.35s cubic-bezier(.34,1.56,.64,1),opacity 0.3s}
.ch-incoming-card.show{transform:translateX(0);opacity:1}
.ch-incoming-card.hide{transform:translateX(360px);opacity:0}
.ch-incoming-top{display:flex;align-items:center;gap:0.65rem;padding:0.75rem 0.9rem;border-bottom:1px solid var(--c-border-subtle)}
.ch-incoming-label{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-accent);background:rgba(196,148,48,.12);padding:0.12rem 0.45rem;border-radius:var(--radius-full);border:1px solid rgba(196,148,48,.25)}
.ch-incoming-dot{width:8px;height:8px;border-radius:50%;background:var(--c-success);margin-left:auto;flex-shrink:0;animation:chDotPulse 1.4s infinite}
@keyframes chDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.ch-incoming-body{padding:0.7rem 0.9rem;display:flex;align-items:center;gap:0.7rem}
.ch-incoming-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:700;flex-shrink:0;font-family:var(--font-display);position:relative}
.ch-incoming-avatar-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--c-accent);animation:chRing 1.8s ease-in-out infinite}
@keyframes chRing{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:.2;transform:scale(1.15)}}
.ch-incoming-info{flex:1;min-width:0}
.ch-incoming-name{font-weight:700;font-size:0.88rem;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-incoming-meta{font-size:0.72rem;color:var(--c-text-muted);margin-top:0.1rem}
.ch-incoming-msg{font-size:0.78rem;color:var(--c-text-muted);background:var(--c-surface-2);border-radius:var(--radius-md);padding:0.45rem 0.7rem;margin:0 0.9rem 0.7rem;border:1px solid var(--c-border-subtle);line-height:1.4;font-style:italic}
.ch-incoming-actions{display:flex;gap:0.5rem;padding:0 0.9rem 0.85rem}
.ch-incoming-btn{flex:1;padding:0.45rem 0;border-radius:var(--radius-md);font-size:0.78rem;font-weight:600;cursor:pointer;border:1px solid transparent;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:0.35rem;transition:all 0.15s}
.ch-incoming-btn-accept{background:var(--c-accent);color:#000;border-color:var(--c-accent)}
.ch-incoming-btn-accept:hover{opacity:.85}
.ch-incoming-btn-decline{background:transparent;color:var(--c-text-muted);border-color:var(--c-border)}
.ch-incoming-btn-decline:hover{background:var(--c-surface-2);color:var(--c-text)}
.ch-incoming-timer{height:3px;background:var(--c-accent);transform-origin:left;animation:chTimer linear forwards}
@keyframes chTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}


/* ===== PART: _51_alertas-unidades.css ===== */

/* ══════════════════════════════════════════════
   ALERTAS DE UNIDADES
   Prefijo: .al-
══════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────── */
.al-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.al-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--c-text);margin:0}
.al-sub{color:var(--c-text-muted);font-size:0.84rem;margin:0.2rem 0 0}
/* ── Banner de alerta activa ──────────────────────── */
.al-banner{display:none;align-items:center;gap:0.75rem;background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.35);border-radius:var(--radius-lg);padding:0.85rem 1.1rem;margin-bottom:1.2rem;animation:alPulseB 2s infinite}
.al-banner.visible{display:flex}
@keyframes alPulseB{0%,100%{border-color:rgba(244,63,94,.35)}50%{border-color:rgba(244,63,94,.75)}}
.al-banner-dot{width:10px;height:10px;border-radius:50%;background:var(--c-danger);flex-shrink:0;animation:alDot 1.2s infinite}
@keyframes alDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.al-banner-msg{font-size:0.85rem;color:var(--c-danger);font-weight:600;flex:1}
.al-banner-count{font-size:0.78rem;font-weight:700;background:var(--c-danger);color:#fff;border-radius:var(--radius-full);padding:0.15rem 0.55rem;white-space:nowrap}
/* ── KPIs ─────────────────────────────────────────── */
.al-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0.9rem;margin-bottom:1.4rem}
@media(max-width:900px){.al-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.al-kpis{grid-template-columns:1fr 1fr}}
.al-kpi{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:0.9rem 1rem;display:flex;align-items:center;gap:0.75rem}
.al-kpi-icon{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.al-kpi-icon svg{width:18px;height:18px}
.al-kpi-label{font-size:0.72rem;color:var(--c-text-muted);margin:0 0 0.1rem}
.al-kpi-value{font-size:1.25rem;font-weight:700;color:var(--c-text);margin:0;font-family:var(--font-display)}
/* ── Toolbar ──────────────────────────────────────── */
.al-toolbar{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem}
.al-search{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:0.42rem 0.8rem;color:var(--c-text);font-size:0.82rem;width:220px;max-width:100%;box-sizing:border-box;font-family:inherit}
.al-search:focus{outline:none;border-color:var(--c-accent)}
.al-select{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:0.42rem 0.7rem;color:var(--c-text);font-size:0.8rem;font-family:inherit;cursor:pointer}
.al-select:focus{outline:none;border-color:var(--c-accent)}
.al-sep{flex:1}
/* ── Botones ──────────────────────────────────────── */
.al-btn{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:600;padding:0.42rem 0.9rem;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:all 0.15s;font-family:inherit;white-space:nowrap}
.al-btn-primary{background:var(--c-accent);color:#000;border-color:var(--c-accent)}
.al-btn-primary:hover{opacity:0.85}
.al-btn-ghost{background:transparent;color:var(--c-text-muted);border-color:var(--c-border)}
.al-btn-ghost:hover{background:var(--c-surface-2);color:var(--c-text)}
.al-btn-danger{background:rgba(244,63,94,.12);color:var(--c-danger);border-color:rgba(244,63,94,.3)}
.al-btn-danger:hover{background:var(--c-danger);color:#fff}
.al-btn-sm{padding:0.28rem 0.7rem;font-size:0.74rem}
/* ── Grid de alertas ──────────────────────────────── */
.al-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(max-width:900px){.al-grid{grid-template-columns:1fr}}
/* ── Card de alerta ───────────────────────────────── */
.al-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow 0.15s}
.al-card:hover{box-shadow:0 4px 24px rgba(0,0,0,.15)}
.al-card.al-card-danger{border-color:rgba(244,63,94,.4)}
.al-card.al-card-warning{border-color:rgba(245,158,11,.4)}
.al-card-header{display:flex;align-items:center;gap:0.75rem;padding:0.85rem 1rem;border-bottom:1px solid var(--c-border-subtle)}
.al-card-icon{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.al-card-icon svg{width:17px;height:17px}
.al-card-name{font-weight:700;font-size:0.9rem;color:var(--c-text)}
.al-card-plate{font-size:0.72rem;color:var(--c-text-muted);font-family:var(--font-mono);margin:0.1rem 0 0}
.al-card-badge{margin-left:auto}
.al-badge{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.7rem;font-weight:600;padding:0.18rem 0.5rem;border-radius:var(--radius-full);white-space:nowrap}
.al-badge-danger{background:rgba(244,63,94,.15);color:var(--c-danger)}
.al-badge-warning{background:rgba(245,158,11,.15);color:var(--c-warning)}
.al-badge-ok{background:rgba(16,185,129,.15);color:var(--c-success)}
.al-badge-moving{background:rgba(96,165,250,.15);color:#60a5fa}
/* ── Card body ────────────────────────────────────── */
.al-card-body{padding:0.9rem 1rem}
.al-info-row{display:flex;align-items:center;justify-content:space-between;padding:0.32rem 0;border-bottom:1px solid var(--c-border-subtle);font-size:0.81rem}
.al-info-row:last-child{border-bottom:none}
.al-info-key{color:var(--c-text-muted);font-weight:600}
.al-info-val{color:var(--c-text);font-weight:500;text-align:right}
/* ── Tiempo detenido ──────────────────────────────── */
.al-stopped-time{font-size:1.6rem;font-weight:800;color:var(--c-danger);font-family:var(--font-display);line-height:1}
.al-stopped-label{font-size:0.72rem;color:var(--c-text-muted);margin-top:0.15rem}
/* ── Recomendación ────────────────────────────────── */
.al-recom{display:flex;gap:0.65rem;align-items:flex-start;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.2);border-radius:var(--radius-md);padding:0.75rem 0.9rem;margin-top:0.8rem}
.al-recom-icon{flex-shrink:0;margin-top:0.05rem}
.al-recom-icon svg{width:16px;height:16px;stroke:var(--c-danger)}
.al-recom-text{font-size:0.78rem;color:var(--c-text-muted);line-height:1.5}
.al-recom-text strong{color:var(--c-danger)}
/* ── Card footer ──────────────────────────────────── */
.al-card-footer{display:flex;gap:0.5rem;padding:0.75rem 1rem;border-top:1px solid var(--c-border-subtle);flex-wrap:wrap}
/* ── Empty state ──────────────────────────────────── */
.al-empty{grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--c-text-muted);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg)}
.al-empty svg{width:48px;height:48px;margin:0 auto 1rem;display:block;opacity:.3}
.al-empty h3{font-size:1rem;color:var(--c-text);margin:0 0 0.4rem}
.al-empty p{font-size:0.83rem;margin:0}
/* ── Conductor mini card ──────────────────────────── */
.al-driver{display:flex;align-items:center;gap:0.6rem;background:var(--c-surface-2);border:1px solid var(--c-border-subtle);border-radius:var(--radius-md);padding:0.55rem 0.75rem;margin-top:0.65rem}
.al-driver-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0}
.al-driver-name{font-size:0.82rem;font-weight:600;color:var(--c-text)}
.al-driver-phone{font-size:0.72rem;color:var(--c-text-muted);font-family:var(--font-mono)}
/* ── Swal detalle driver ──────────────────────────── */
.al-swal-driver{background:var(--c-surface-3);border:1px solid var(--c-border-subtle);border-radius:var(--radius-lg);padding:1rem;text-align:left}
.al-swal-row{display:flex;align-items:center;justify-content:space-between;padding:0.38rem 0;border-bottom:1px solid var(--c-border-subtle);font-size:0.82rem}
.al-swal-row:last-child{border-bottom:none}
.al-swal-key{color:var(--c-text-muted);font-weight:600}
.al-swal-val{color:var(--c-text);font-weight:600;text-align:right}


/* ===== PART: _52_detalle-unidad.css ===== */

/* ══════════════════════════════════════════════
   DETALLE DE UNIDAD
   Prefijo: .du-
══════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────── */
.du-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.du-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--c-text);margin:0}
.du-sub{color:var(--c-text-muted);font-size:0.84rem;margin:0.2rem 0 0}
.du-back{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:600;padding:0.42rem 0.9rem;border-radius:var(--radius-md);border:1px solid var(--c-border);background:transparent;color:var(--c-text-muted);cursor:pointer;transition:all 0.15s;font-family:inherit}
.du-back:hover{background:var(--c-surface-2);color:var(--c-text)}
/* ── Status banner ────────────────────────────────── */
.du-status-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:0.85rem 1.2rem;margin-bottom:1.2rem}
.du-status-bar.du-danger{border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.05)}
.du-status-bar.du-warning{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.04)}
.du-status-bar.du-moving{border-color:rgba(96,165,250,.3)}
.du-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.du-dot-danger{background:var(--c-danger);animation:duPulse 1.2s infinite}
.du-dot-warning{background:var(--c-warning);animation:duPulse 1.6s infinite}
.du-dot-moving{background:#60a5fa}
.du-dot-ok{background:var(--c-success)}
@keyframes duPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.du-status-label{font-size:0.9rem;font-weight:700;color:var(--c-text)}
.du-status-time{font-size:0.82rem;color:var(--c-text-muted)}
.du-badge{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.72rem;font-weight:600;padding:0.2rem 0.55rem;border-radius:var(--radius-full);white-space:nowrap}
.du-badge-danger{background:rgba(244,63,94,.15);color:var(--c-danger)}
.du-badge-warning{background:rgba(245,158,11,.15);color:var(--c-warning)}
.du-badge-moving{background:rgba(96,165,250,.15);color:#60a5fa}
.du-badge-ok{background:rgba(16,185,129,.15);color:var(--c-success)}
/* ── Grid principal ───────────────────────────────── */
.du-grid{display:grid;grid-template-columns:1fr 340px;gap:1rem;align-items:start}
@media(max-width:1100px){.du-grid{grid-template-columns:1fr}}
/* ── Mapa ─────────────────────────────────────────── */
.du-map-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden}
.du-map-header{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 1rem;border-bottom:1px solid var(--c-border-subtle)}
.du-map-title{font-weight:600;font-size:0.9rem;color:var(--c-text);margin:0;display:flex;align-items:center;gap:0.5rem}
#duMap{height:420px;width:100%}
@media(max-width:700px){#duMap{height:280px}}
/* ── Panel lateral ────────────────────────────────── */
.du-panel{display:flex;flex-direction:column;gap:1rem}
/* ── Cards ────────────────────────────────────────── */
.du-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden}
.du-card-header{padding:0.75rem 1rem;border-bottom:1px solid var(--c-border-subtle);font-weight:600;font-size:0.85rem;color:var(--c-text);display:flex;align-items:center;gap:0.5rem}
.du-card-header svg{width:15px;height:15px;flex-shrink:0}
.du-card-body{padding:0.85rem 1rem}
/* ── Info rows ────────────────────────────────────── */
.du-row{display:flex;align-items:center;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid var(--c-border-subtle);font-size:0.81rem}
.du-row:last-child{border-bottom:none}
.du-row-key{color:var(--c-text-muted);font-weight:600}
.du-row-val{color:var(--c-text);font-weight:500;text-align:right}
/* ── Tiempo detenida grande ───────────────────────── */
.du-big-stopped{text-align:center;padding:0.75rem 0 0.5rem}
.du-big-num{font-size:3rem;font-weight:800;font-family:var(--font-display);line-height:1;color:var(--c-danger)}
.du-big-num.warning{color:var(--c-warning)}
.du-big-label{font-size:0.78rem;color:var(--c-text-muted);margin-top:0.2rem}
/* ── Recomendación ────────────────────────────────── */
.du-recom{display:flex;gap:0.65rem;align-items:flex-start;background:rgba(244,63,94,.07);border:1px solid rgba(244,63,94,.2);border-radius:var(--radius-md);padding:0.8rem 0.9rem;margin-top:0.75rem}
.du-recom.warning{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.25)}
.du-recom svg{width:16px;height:16px;flex-shrink:0;margin-top:0.05rem}
.du-recom-text{font-size:0.78rem;color:var(--c-text-muted);line-height:1.5}
.du-recom-text strong{color:var(--c-danger)}
.du-recom.warning .du-recom-text strong{color:var(--c-warning)}
/* ── Driver avatar ────────────────────────────────── */
.du-driver-hero{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.85rem}
.du-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.9rem;font-weight:700;flex-shrink:0;font-family:var(--font-display)}
.du-driver-name{font-weight:700;font-size:0.95rem;color:var(--c-text)}
.du-driver-role{font-size:0.72rem;color:var(--c-text-muted);margin-top:0.1rem}
/* ── Botones ──────────────────────────────────────── */
.du-btn{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:600;padding:0.42rem 0.9rem;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:all 0.15s;font-family:inherit;white-space:nowrap;width:100%;justify-content:center;margin-bottom:0.4rem}
.du-btn:last-child{margin-bottom:0}
.du-btn-danger{background:rgba(244,63,94,.12);color:var(--c-danger);border-color:rgba(244,63,94,.3)}
.du-btn-danger:hover{background:var(--c-danger);color:#fff}
.du-btn-ghost{background:transparent;color:var(--c-text-muted);border-color:var(--c-border)}
.du-btn-ghost:hover{background:var(--c-surface-2);color:var(--c-text)}
.du-btn-success{background:rgba(16,185,129,.12);color:var(--c-success);border-color:rgba(16,185,129,.3)}
.du-btn-success:hover{background:var(--c-success);color:#fff}
/* ── Speed indicator ──────────────────────────────── */
.du-speed{text-align:center;padding:0.5rem 0}
.du-speed-num{font-size:2.2rem;font-weight:800;font-family:var(--font-display);color:var(--c-text);line-height:1}
.du-speed-unit{font-size:0.75rem;color:var(--c-text-muted);margin-top:0.15rem}
/* ── Swal ─────────────────────────────────────────── */
.du-swal-box{background:var(--c-surface-3);border:1px solid var(--c-border-subtle);border-radius:var(--radius-lg);padding:1rem;text-align:left}
.du-swal-row{display:flex;align-items:center;justify-content:space-between;padding:0.38rem 0;border-bottom:1px solid var(--c-border-subtle);font-size:0.82rem}
.du-swal-row:last-child{border-bottom:none}
.du-swal-key{color:var(--c-text-muted);font-weight:600}
.du-swal-val{color:var(--c-text);font-weight:600;text-align:right}


/* ===== PART: _53_asignar-unidad.css ===== */

/* ══════════════════════════════════════════════
   ASIGNAR UNIDAD
   Prefijo: .au-
══════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────── */
.au-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.au-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--c-text);margin:0}
.au-sub{color:var(--c-text-muted);font-size:0.84rem;margin:0.2rem 0 0}
/* ── KPIs ─────────────────────────────────────────── */
.au-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0.9rem;margin-bottom:1.4rem}
@media(max-width:900px){.au-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.au-kpis{grid-template-columns:1fr 1fr}}
.au-kpi{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:0.9rem 1rem;display:flex;align-items:center;gap:0.7rem}
.au-kpi-icon{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.au-kpi-icon svg{width:17px;height:17px}
.au-kpi-label{font-size:0.72rem;color:var(--c-text-muted);margin:0 0 0.1rem}
.au-kpi-value{font-size:1.25rem;font-weight:700;color:var(--c-text);margin:0;font-family:var(--font-display)}
/* ── Toolbar ──────────────────────────────────────── */
.au-toolbar{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem}
.au-search{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:0.42rem 0.8rem;color:var(--c-text);font-size:0.82rem;width:240px;max-width:100%;box-sizing:border-box;font-family:inherit}
.au-search:focus{outline:none;border-color:var(--c-accent)}
.au-select{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:0.42rem 0.7rem;color:var(--c-text);font-size:0.8rem;font-family:inherit;cursor:pointer}
.au-select:focus{outline:none;border-color:var(--c-accent)}
.au-sep{flex:1}
/* ── Botones ──────────────────────────────────────── */
.au-btn{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:600;padding:0.42rem 0.9rem;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:all 0.15s;font-family:inherit;white-space:nowrap}
.au-btn-primary{background:var(--c-accent);color:#000;border-color:var(--c-accent)}
.au-btn-primary:hover{opacity:0.85}
.au-btn-ghost{background:transparent;color:var(--c-text-muted);border-color:var(--c-border)}
.au-btn-ghost:hover{background:var(--c-surface-2);color:var(--c-text)}
.au-btn-success{background:rgba(16,185,129,.12);color:var(--c-success);border-color:rgba(16,185,129,.3)}
.au-btn-success:hover{background:var(--c-success);color:#fff}
.au-btn-sm{padding:0.28rem 0.7rem;font-size:0.74rem}
/* ── Tabla ────────────────────────────────────────── */
.au-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden}
.au-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.au-table{width:100%;min-width:700px;border-collapse:collapse;font-size:0.82rem}
.au-table th{padding:0.6rem 1rem;text-align:left;color:var(--c-text-muted);font-weight:600;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--c-border-subtle);white-space:nowrap}
.au-table td{padding:0.65rem 1rem;border-bottom:1px solid var(--c-border-subtle);color:var(--c-text);vertical-align:middle}
.au-table tr:last-child td{border-bottom:none}
.au-table tbody tr:hover{background:var(--c-surface-2)}
/* ── Avatar ───────────────────────────────────────── */
.au-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;flex-shrink:0;font-family:var(--font-display)}
.au-user-cell{display:flex;align-items:center;gap:0.65rem}
.au-user-name{font-weight:600;font-size:0.83rem;color:var(--c-text)}
.au-user-email{font-size:0.72rem;color:var(--c-text-muted)}
/* ── Badges ───────────────────────────────────────── */
.au-badge{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.7rem;font-weight:600;padding:0.18rem 0.5rem;border-radius:var(--radius-full);white-space:nowrap}
.au-badge-asignada{background:rgba(16,185,129,.15);color:var(--c-success)}
.au-badge-libre{background:var(--c-surface-2);color:var(--c-text-muted);border:1px solid var(--c-border-subtle)}
.au-badge-rol-admin{background:rgba(196,148,48,.15);color:var(--c-accent)}
.au-badge-rol-operator{background:rgba(59,130,246,.15);color:#60a5fa}
.au-badge-rol-editor{background:rgba(16,185,129,.15);color:var(--c-success)}
.au-badge-rol-viewer{background:rgba(167,139,250,.15);color:#a78bfa}
/* ── Empty state ──────────────────────────────────── */
.au-empty{text-align:center;padding:3.5rem 2rem;color:var(--c-text-muted)}
.au-empty svg{width:44px;height:44px;margin:0 auto 1rem;display:block;opacity:.35}
.au-empty h3{font-size:1rem;color:var(--c-text);margin:0 0 0.4rem}
.au-empty p{font-size:0.83rem;margin:0}
/* ── Count ────────────────────────────────────────── */
.au-count{font-size:0.78rem;color:var(--c-text-muted)}
/* ── Swal custom select list ──────────────────────── */
.au-swal-search{width:100%;background:var(--c-surface-3);border:1px solid var(--c-border-subtle);border-radius:var(--radius-md);padding:0.5rem 0.75rem;color:var(--c-text);font-size:0.85rem;font-family:var(--font-body);box-sizing:border-box;margin-bottom:0.6rem;outline:none}
.au-swal-search:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-dim)}
.au-swal-list{max-height:220px;overflow-y:auto;border:1px solid var(--c-border-subtle);border-radius:var(--radius-md);background:var(--c-surface-3)}
.au-swal-item{display:flex;align-items:center;gap:0.65rem;padding:0.55rem 0.8rem;cursor:pointer;transition:background 0.12s;border-bottom:1px solid var(--c-border-subtle)}
.au-swal-item:last-child{border-bottom:none}
.au-swal-item:hover{background:var(--c-surface-hover)}
.au-swal-item.selected{background:var(--c-accent-dim);border-left:3px solid var(--c-accent)}
.au-swal-item-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(196,148,48,.12)}
.au-swal-item-icon svg{width:15px;height:15px;stroke:var(--c-accent)}
.au-swal-item-name{font-size:0.83rem;font-weight:600;color:var(--c-text)}
.au-swal-item-plate{font-size:0.72rem;color:var(--c-text-muted);font-family:var(--font-mono)}
.au-swal-empty{text-align:center;padding:1.5rem;color:var(--c-text-muted);font-size:0.82rem}
.au-swal-assigned-tag{font-size:0.68rem;font-weight:600;padding:0.1rem 0.4rem;border-radius:var(--radius-full);background:rgba(16,185,129,.15);color:var(--c-success);margin-left:auto;white-space:nowrap}
.au-swal-label{font-size:0.78rem;color:var(--c-text-muted);margin-bottom:0.35rem;text-align:left;font-weight:600}
.au-swal-none{font-size:0.78rem;color:var(--c-text-faint);font-style:italic}
/* ── Summary card in Swal ─────────────────────────── */
.au-summary{background:var(--c-surface-3);border:1px solid var(--c-border-subtle);border-radius:var(--radius-lg);padding:1rem;text-align:left;margin-top:0.25rem}
.au-summary-row{display:flex;align-items:center;justify-content:space-between;padding:0.4rem 0;border-bottom:1px solid var(--c-border-subtle);font-size:0.82rem}
.au-summary-row:last-child{border-bottom:none}
.au-summary-key{color:var(--c-text-muted);font-weight:600}
.au-summary-val{color:var(--c-text);font-weight:600;text-align:right}
.au-summary-title{font-size:0.9rem;font-weight:700;color:var(--c-text);margin:0 0 0.75rem;display:flex;align-items:center;gap:0.4rem}


/* ===== PART: _54_viajes.css ===== */

/* ══════════════════════════════════════════════════════════════ */
/* VIAJES PAGE STYLES (.vj- prefix)                              */
/* ══════════════════════════════════════════════════════════════ */

.vj-container {
    max-width: 1400px;
    margin: 0 auto;
}

.vj-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.vj-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.2;
}

.vj-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.vj-kpi-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.vj-kpi-card:hover {
    border-color: var(--c-border);
    background: var(--c-surface-2);
}

.vj-kpi-label {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vj-kpi-value {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--c-accent);
}

.vj-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .vj-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.vj-filters {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .vj-filters {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
}

.vj-search-input,
.vj-filter-select {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    color: var(--c-text);
    font-family: var(--font-body);
    transition: all 0.2s ease;
}

.vj-search-input:focus,
.vj-filter-select:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-surface-2);
    box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), 0.1);
}

.vj-search-input::placeholder {
    color: var(--c-text-faint);
}

.vj-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.vj-btn-primary {
    background: var(--c-accent);
    color: var(--c-bg);
}

.vj-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.vj-table-wrapper {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow-x: auto;
}

.vj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.vj-table th {
    background: var(--c-surface-2);
    color: var(--c-text-muted);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--c-border-subtle);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.vj-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--c-border-subtle);
    color: var(--c-text);
}

.vj-table tbody tr:hover {
    background: var(--c-surface-2);
}

.vj-table tbody tr:last-child td {
    border-bottom: none;
}

.vj-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vj-badge-transit {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(59, 130, 246);
}

.vj-badge-completed {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(34, 197, 94);
}

.vj-badge-pending {
    background: rgba(234, 179, 8, 0.15);
    color: rgb(234, 179, 8);
}

.vj-badge-cancelled {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(239, 68, 68);
}

.vj-route {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.vj-route-arrow {
    margin: 0 0.25rem;
    color: var(--c-accent);
}

.vj-actions {
    display: flex;
    gap: 0.5rem;
}

.vj-action-btn {
    padding: 0.375rem 0.75rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.vj-action-btn:hover {
    background: var(--c-accent);
    color: var(--c-bg);
    border-color: var(--c-accent);
}

.vj-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--c-text-muted);
}

.vj-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.vj-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 0.5rem;
}

.vj-empty-desc {
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
    .vj-table {
        font-size: 0.8125rem;
    }

    .vj-table th,
    .vj-table td {
        padding: 0.75rem 0.5rem;
    }

    .vj-title {
        font-size: 1.5rem;
    }

    .vj-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vj-search-input {
        width: 100%;
    }
}

/* ===== PART: _55_detalle-viaje.css ===== */

/* ══════════════════════════════════════════════════════════════ */
/* DETALLE VIAJE PAGE STYLES (.dv- prefix)                        */
/* ══════════════════════════════════════════════════════════════ */

.dv-container {
    max-width: 1600px;
    margin: 0 auto;
}

.dv-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dv-back-btn {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--c-text-muted);
    transition: all 0.2s ease;
    font-family: var(--font-body);
    font-size: 0.9375rem;
}

.dv-back-btn:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}

.dv-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--c-text);
}

.dv-status-bar {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.dv-status-label {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.dv-status-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9375rem;
}

.dv-status-transit {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(59, 130, 246);
    animation: pulse-transit 2s ease-in-out infinite;
}

@keyframes pulse-transit {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.dv-status-completed {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(34, 197, 94);
}

.dv-main-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .dv-main-grid {
        grid-template-columns: 1fr;
    }

    .dv-main-grid > div:last-child {
        order: -1;
    }
}

.dv-map-wrapper {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 450px;
}

#dv-map {
    width: 100%;
    height: 450px;
}

.dv-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: fit-content;
}

.dv-panel-section {
    border-bottom: 1px solid var(--c-border-subtle);
    padding-bottom: 1rem;
}

.dv-panel-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dv-panel-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 0.75rem;
}

.dv-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.dv-info-label {
    color: var(--c-text-muted);
    font-weight: 500;
}

.dv-info-value {
    color: var(--c-text);
    font-weight: 600;
    text-align: right;
}

.dv-operator-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--c-surface-2);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.dv-operator-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-bg);
    font-weight: 600;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.dv-operator-info {
    flex: 1;
    min-width: 0;
}

.dv-operator-name {
    font-weight: 600;
    color: var(--c-text);
    word-break: break-word;
}

.dv-operator-phone {
    font-size: 0.8125rem;
    color: var(--c-text-muted);
    margin-top: 0.25rem;
}

.dv-timeline {
    margin-top: 1rem;
}

.dv-timeline-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 1rem;
}

.dv-timeline-item::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c-accent);
    border: 2px solid var(--c-surface);
}

.dv-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -0.41rem;
    top: 12px;
    width: 2px;
    height: calc(100% + 0.5rem);
    background: var(--c-border-subtle);
}

.dv-timeline-time {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    font-family: var(--font-mono);
    min-width: 70px;
}

.dv-timeline-content {
    font-size: 0.9375rem;
    color: var(--c-text);
}

.dv-expenses-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.dv-expenses-table th {
    background: var(--c-surface-2);
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--c-text-muted);
    border-bottom: 1px solid var(--c-border-subtle);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dv-expenses-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--c-border-subtle);
    color: var(--c-text);
}

.dv-expenses-table tbody tr:last-child td {
    border-bottom: none;
}

.dv-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.dv-btn {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: var(--font-body);
    font-size: 0.9375rem;
}

.dv-btn-primary {
    background: var(--c-accent);
    color: var(--c-bg);
}

.dv-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.dv-btn-secondary {
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}

.dv-btn-secondary:hover {
    background: var(--c-surface-3);
}

.dv-full-width {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .dv-title {
        font-size: 1.5rem;
    }

    .dv-main-grid {
        grid-template-columns: 1fr;
    }

    .dv-panel {
        padding: 1rem;
    }

    #dv-map {
        height: 350px;
    }

    .dv-status-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== PART: _56_gastos-viaje.css ===== */

/* GASTOS VIAJE PAGE STYLES (.gv- prefix) */
.gv-container {
    max-width: 1400px;
    margin: 0 auto;
}

.gv-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gv-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.2;
}

.gv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gv-kpi-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.gv-kpi-card:hover {
    border-color: var(--c-border);
    background: var(--c-surface-2);
}

.gv-kpi-label {
    font-size: 0.875rem;
    color: var(--c-text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gv-kpi-value {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--c-accent);
}

.gv-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .gv-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

.gv-filters {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .gv-filters {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
}

.gv-search-input,
.gv-filter-select {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    color: var(--c-text);
    font-family: var(--font-body);
    transition: all 0.2s ease;
}

.gv-search-input:focus,
.gv-filter-select:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-surface-2);
}

.gv-search-input::placeholder {
    color: var(--c-text-faint);
}

.gv-btn-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 40;
}

.gv-btn-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .gv-btn-fab {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 52px;
        height: 52px;
        font-size: 1.25rem;
    }
}

.gv-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.gv-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.gv-card:hover {
    border-color: var(--c-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gv-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gv-card-icon {
    font-size: 1.75rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-2);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.gv-card-category {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.gv-card-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.gv-status-approved {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(34, 197, 94);
}

.gv-status-pending {
    background: rgba(234, 179, 8, 0.15);
    color: rgb(234, 179, 8);
}

.gv-status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(239, 68, 68);
}

.gv-card-amount {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-accent);
    margin: 0.75rem 0;
}

.gv-card-desc {
    font-size: 0.9375rem;
    color: var(--c-text);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.gv-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border-subtle);
    font-size: 0.8125rem;
}

.gv-card-meta-row {
    display: flex;
    justify-content: space-between;
    color: var(--c-text-muted);
}

.gv-card-meta-value {
    color: var(--c-text);
    font-weight: 500;
}

.gv-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--c-text-muted);
}

.gv-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.gv-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .gv-title {
        font-size: 1.5rem;
    }

    .gv-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gv-cards-grid {
        grid-template-columns: 1fr;
    }

    .gv-search-input {
        width: 100%;
    }
}

/* ===== PART: _57_tickets-caseta.css ===== */

.tc-container {
  padding: 1.5rem;
}

.tc-kpi-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .tc-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tc-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tc-kpi-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
}

.tc-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
  font-family: var(--font-display);
  margin: 0.5rem 0;
}

.tc-kpi-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tc-toolbar {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .tc-toolbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tc-toolbar {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tc-toolbar input,
.tc-toolbar select {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  color: var(--c-text);
  font-size: 0.875rem;
}

.tc-toolbar input::placeholder {
  color: var(--c-text-faint);
}

.tc-button-upload {
  grid-column: 1 / -1;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.2s;
}

.tc-button-upload:hover {
  opacity: 0.9;
}

.tc-gallery-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .tc-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tc-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tc-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tc-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
}

.tc-card-body {
  padding: 1.5rem;
}

.tc-card-header {
  margin-bottom: 1rem;
}

.tc-card-caseta {
  font-weight: 600;
  color: var(--c-text);
  font-size: 1rem;
}

.tc-card-carretera {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-top: 0.25rem;
}

.tc-card-importe {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--c-accent);
  margin: 1rem 0;
  font-family: var(--font-display);
}

.tc-card-meta {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.tc-card-meta-item {
  margin-bottom: 0.25rem;
}

.tc-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tc-badge-validado {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.tc-badge-pendiente {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.tc-badge-rechazado {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.tc-card-actions {
  display: grid;
  gap: 0.75rem;
}

.tc-card-actions button {
  padding: 0.625rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.tc-action-ver {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.tc-action-ver:hover {
  opacity: 0.8;
}

.tc-action-validar {
  background: #22c55e;
  color: #fff;
}

.tc-action-validar:hover {
  opacity: 0.9;
}

.tc-action-rechazar {
  background: #ef4444;
  color: #fff;
}

.tc-action-rechazar:hover {
  opacity: 0.9;
}

.tc-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.tc-lightbox.active {
  display: flex;
}

.tc-lightbox-content {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .tc-lightbox-content {
    grid-template-columns: 1fr 1fr;
  }
}

.tc-lightbox-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.tc-lightbox-data {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tc-lightbox-info {
  margin-bottom: 1.5rem;
}

.tc-lightbox-field {
  margin-bottom: 1.5rem;
}

.tc-lightbox-field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--c-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.tc-lightbox-field-value {
  font-size: 1.125rem;
  color: var(--c-text);
  font-weight: 500;
}

.tc-lightbox-actions {
  display: grid;
  gap: 0.75rem;
}

.tc-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.tc-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}


/* ===== PART: _58_liquidacion-operador.css ===== */

.lq-container {
  padding: 1.5rem;
}

.lq-kpi-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .lq-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lq-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lq-kpi-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
}

.lq-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
  font-family: var(--font-display);
  margin: 0.5rem 0;
}

.lq-kpi-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lq-table-wrapper {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lq-table {
  width: 100%;
  border-collapse: collapse;
}

.lq-table th {
  background: var(--c-surface-3);
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--c-border-subtle);
}

.lq-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-text);
}

.lq-table tbody tr:hover {
  background: var(--c-surface-3);
  cursor: pointer;
}

.lq-table tbody tr:last-child td {
  border-bottom: none;
}

.lq-operador-nombre {
  font-weight: 600;
}

.lq-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lq-badge-pendiente {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.lq-badge-aprobado {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.lq-badge-rechazado {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.lq-importe {
  font-family: var(--font-mono);
  font-weight: 600;
}

.lq-panel {
  max-width: 600px;
  padding: 2rem;
}

.lq-panel-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-border-subtle);
}

.lq-panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

.lq-panel-section {
  margin-bottom: 2rem;
}

.lq-panel-section-title {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--c-text-muted);
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 1rem;
}

.lq-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c-border-subtle);
}

.lq-panel-row:last-child {
  border-bottom: none;
}

.lq-panel-label {
  color: var(--c-text-muted);
  font-size: 0.875rem;
}

.lq-panel-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--c-text);
}

.lq-panel-saldo {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  text-align: center;
  margin: 1.5rem 0;
}

.lq-panel-saldo-favor {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.lq-panel-saldo-recuperar {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.lq-panel-actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

.lq-panel-actions button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.lq-btn-aprobar {
  background: #22c55e;
  color: #fff;
}

.lq-btn-aprobar:hover {
  opacity: 0.9;
}

.lq-btn-rechazar {
  background: #ef4444;
  color: #fff;
}

.lq-btn-rechazar:hover {
  opacity: 0.9;
}

.lq-btn-comprobantes {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.lq-btn-comprobantes:hover {
  opacity: 0.8;
}


/* ===== PART: _59_siniestros.css ===== */

.sn-container {
  padding: 1.5rem;
}

.sn-kpi-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .sn-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sn-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sn-kpi-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
}

.sn-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
  font-family: var(--font-display);
  margin: 0.5rem 0;
}

.sn-kpi-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sn-filters {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .sn-filters {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .sn-filters {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sn-filters input,
.sn-filters select {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  color: var(--c-text);
  font-size: 0.875rem;
}

.sn-filters input::placeholder {
  color: var(--c-text-faint);
}

.sn-btn-nuevo {
  grid-column: 1 / -1;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.2s;
}

.sn-btn-nuevo:hover {
  opacity: 0.9;
}

.sn-table-wrapper {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.sn-table th {
  background: var(--c-surface-3);
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--c-border-subtle);
}

.sn-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-text);
}

.sn-table tbody tr:hover {
  background: var(--c-surface-3);
}

.sn-table tbody tr:last-child td {
  border-bottom: none;
}

.sn-folio {
  font-family: var(--font-mono);
  font-weight: 600;
}

.sn-tipo {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sn-tipo-auto {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.sn-tipo-hogar {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.sn-tipo-carga {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.sn-tipo-vida {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.sn-estado {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sn-estado-pendiente {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}

.sn-estado-proceso {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.sn-estado-cerrado {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.sn-monto {
  font-family: var(--font-mono);
  font-weight: 600;
}

.sn-acciones {
  display: flex;
  gap: 0.5rem;
}

.sn-btn-accion {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.75rem;
  transition: opacity 0.2s;
}

.sn-btn-accion:hover {
  opacity: 0.8;
}

.sn-btn-detalle {
  background: var(--c-accent);
  color: #fff;
  border: none;
}

.sn-btn-asignar {
  background: #3b82f6;
  color: #fff;
  border: none;
}


/* ===== PART: _60_detalle-siniestro.css ===== */

.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.ds-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.ds-back-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-border);
}

.ds-status-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
}

.ds-status-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ds-status-value {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.ds-status-badge {
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ds-status-badge.active {
  background: var(--c-success);
  color: white;
}

.ds-status-badge.pending {
  background: var(--c-warning);
  color: white;
}

.ds-status-badge.closed {
  background: var(--c-surface-3);
  color: var(--c-text-muted);
}

.ds-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .ds-container {
    grid-template-columns: 1.75fr 1fr;
  }
}

.ds-panel {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.ds-panel-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ds-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .ds-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

.ds-photo-item {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-border-subtle);
  transition: all 0.2s ease;
}

.ds-photo-item:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

.ds-photo-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ds-photo-item:hover .ds-photo-overlay {
  opacity: 1;
}

.ds-photo-icon {
  width: 2rem;
  height: 2rem;
  background: var(--c-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.ds-timeline {
  position: relative;
  padding-left: 2rem;
}

.ds-timeline-item {
  position: relative;
  padding-bottom: 1.75rem;
  margin-bottom: 1.5rem;
}

.ds-timeline-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.ds-timeline-dot {
  position: absolute;
  left: -1.375rem;
  top: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--c-accent);
  border: 3px solid var(--c-surface-2);
  z-index: 2;
}

.ds-timeline-item.completed .ds-timeline-dot {
  background: var(--c-success);
}

.ds-timeline-line {
  position: absolute;
  left: -0.75rem;
  top: 1.75rem;
  bottom: -1.5rem;
  width: 2px;
  background: var(--c-border-subtle);
}

.ds-timeline-item:last-child .ds-timeline-line {
  display: none;
}

.ds-timeline-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-bottom: 0.375rem;
}

.ds-timeline-title {
  font-weight: 600;
  color: var(--c-text);
  font-size: 0.95rem;
}

.ds-dictamen-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-top: 1.5rem;
}

.ds-dictamen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  .ds-dictamen-grid {
    grid-template-columns: 1fr;
  }
}

.ds-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ds-field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  font-weight: 600;
}

.ds-field-value {
  font-size: 0.95rem;
  color: var(--c-text);
  font-weight: 500;
}

.ds-info-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ds-info-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.ds-info-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.ds-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border-subtle);
}

.ds-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ds-info-key {
  font-size: 0.875rem;
  color: var(--c-text-muted);
}

.ds-info-val {
  font-size: 0.95rem;
  color: var(--c-text);
  font-weight: 500;
}

.ds-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-accent), var(--c-warning));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1rem;
}

.ds-ajustador-info {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ds-ajustador-name {
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 0.25rem;
}

.ds-ajustador-speciality {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.ds-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .ds-actions {
    grid-template-columns: 1fr;
  }
}

.ds-btn {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.ds-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.ds-btn.primary {
  background: var(--c-accent);
  color: white;
  border-color: var(--c-accent);
}

.ds-btn.primary:hover {
  opacity: 0.9;
}

.ds-btn.danger {
  background: var(--c-danger);
  color: white;
  border-color: var(--c-danger);
}

.ds-btn.danger:hover {
  opacity: 0.9;
}

.ds-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ds-lightbox.active {
  display: flex;
}

.ds-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--c-surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ds-lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ds-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ds-lightbox-close:hover {
  background: rgba(0,0,0,0.7);
}


/* ===== PART: _61_agenda-ajustadores.css ===== */

.ag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.ag-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--c-text);
}

.ag-btn-agendar {
  padding: 0.75rem 1.5rem;
  background: var(--c-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ag-btn-agendar:hover {
  opacity: 0.9;
}

.ag-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .ag-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ag-kpi-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.ag-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 0.5rem;
}

.ag-kpi-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.ag-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .ag-container {
    grid-template-columns: 250px 1fr;
  }
}

.ag-calendar {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: fit-content;
  position: sticky;
  top: 100px;
}

.ag-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.ag-calendar-month {
  font-weight: 600;
  color: var(--c-text);
  font-size: 0.95rem;
}

.ag-calendar-nav {
  display: flex;
  gap: 0.5rem;
}

.ag-calendar-btn {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--c-border-subtle);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--c-text);
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.ag-calendar-btn:hover {
  background: var(--c-surface-3);
  border-color: var(--c-accent);
}

.ag-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ag-calendar-day-header {
  text-align: center;
  font-size: 0.7rem;
  color: var(--c-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.5rem 0;
}

.ag-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border: 1px solid transparent;
}

.ag-calendar-day:hover {
  background: var(--c-surface-3);
  border-color: var(--c-border);
}

.ag-calendar-day.today {
  background: var(--c-accent);
  color: white;
  font-weight: 600;
}

.ag-calendar-day.has-visits::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  background: var(--c-warning);
  border-radius: 50%;
}

.ag-calendar-day.selected {
  border-color: var(--c-accent);
  background: var(--c-surface-3);
}

.ag-visits-section {
  flex: 1;
}

.ag-visits-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 1.5rem;
}

.ag-visits-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (max-width: 1023px) {
  .ag-visits-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

.ag-visit-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.ag-visit-card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ag-visit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.ag-visit-time {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-accent);
}

.ag-visit-status {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ag-visit-status.confirmada {
  background: var(--c-success);
  color: white;
}

.ag-visit-status.pendiente {
  background: var(--c-warning);
  color: white;
}

.ag-visit-status.realizada {
  background: var(--c-success);
  color: white;
}

.ag-visit-ajustador {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.ag-visit-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--c-accent), var(--c-warning));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.ag-visit-ajustador-info {
  flex: 1;
}

.ag-visit-ajustador-name {
  font-weight: 600;
  color: var(--c-text);
  font-size: 0.95rem;
}

.ag-visit-ajustador-type {
  font-size: 0.8rem;
  color: var(--c-text-muted);
}

.ag-visit-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-border-subtle);
}

.ag-visit-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.ag-visit-info-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--c-text-muted);
  margin-top: 0.125rem;
}

.ag-visit-info-text {
  color: var(--c-text);
}

.ag-visit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

.ag-btn-action {
  padding: 0.5rem;
  border: 1px solid var(--c-border-subtle);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ag-btn-action:hover {
  background: var(--c-surface-3);
  border-color: var(--c-accent);
}

.ag-btn-action.danger:hover {
  background: var(--c-danger);
  color: white;
  border-color: var(--c-danger);
}

.ag-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--c-text-muted);
}

.ag-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.ag-empty-text {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}


/* ===== PART: _62_envios.css ===== */

.en-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.en-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--c-text);
}

.en-btn-nuevo {
  padding: 0.75rem 1.5rem;
  background: var(--c-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.en-btn-nuevo:hover {
  opacity: 0.9;
}

.en-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .en-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.en-kpi-card {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.en-kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 0.5rem;
}

.en-kpi-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.en-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.en-search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.en-search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.en-search-input:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-surface-3);
}

.en-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
}

.en-filter-select {
  padding: 0.75rem 1rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.en-filter-select:hover,
.en-filter-select:focus {
  border-color: var(--c-accent);
  background: var(--c-surface-3);
  outline: none;
}

.en-table-container {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}

.en-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.en-table thead {
  background: var(--c-surface-3);
  border-bottom: 1px solid var(--c-border-subtle);
}

.en-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--c-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.en-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-text);
}

.en-table tbody tr:hover {
  background: var(--c-surface-3);
}

.en-table tbody tr:last-child td {
  border-bottom: none;
}

.en-tracking {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--c-accent);
  font-size: 0.8rem;
}

.en-status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

.en-status-badge.pendiente {
  background: var(--c-warning);
  color: white;
}

.en-status-badge.transito {
  background: var(--c-accent);
  color: white;
}

.en-status-badge.reparto {
  background: var(--c-accent);
  color: white;
}

.en-status-badge.entregado {
  background: var(--c-success);
  color: white;
}

.en-status-badge.retrasado {
  background: var(--c-danger);
  color: white;
}

.en-days-badge {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;
  background: var(--c-surface);
}

.en-days-badge.green {
  background: var(--c-success);
  color: white;
}

.en-days-badge.yellow {
  background: var(--c-warning);
  color: white;
}

.en-days-badge.red {
  background: var(--c-danger);
  color: white;
}

.en-actions {
  display: flex;
  gap: 0.5rem;
}

.en-btn-action {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--c-border-subtle);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.en-btn-action:hover {
  background: var(--c-surface-3);
  border-color: var(--c-accent);
}

.en-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--c-text-muted);
}

.en-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.en-empty-text {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .en-table {
    font-size: 0.75rem;
  }
  
  .en-table th,
  .en-table td {
    padding: 0.75rem 0.5rem;
  }
  
  .en-tracking {
    font-size: 0.7rem;
  }
}


/* ===== PART: _63_tracking.css ===== */

.tr-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.tr-header {
  background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface-3) 100%);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--c-border);
}

.tr-tracking-number {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--c-accent);
  margin-bottom: 0.5rem;
}

.tr-status-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--c-success);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
}

.tr-status-badge.pending {
  background: var(--c-warning);
}

.tr-status-badge.delayed {
  background: var(--c-danger);
}

.tr-header-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.tr-info-item {
  padding: 0.75rem;
  background: var(--c-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-subtle);
}

.tr-info-label {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.25rem;
}

.tr-info-value {
  font-weight: 600;
  color: var(--c-text);
  font-size: 1rem;
}

.tr-main-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 1024px) {
  .tr-main-grid {
    grid-template-columns: 1fr;
  }
}

.tr-timeline {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.tr-timeline-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
}

.tr-timeline-event {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.tr-timeline-event:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 50px;
  width: 2px;
  height: calc(100% + 1rem);
  background: var(--c-border);
}

.tr-timeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.tr-timeline-icon.success {
  background: var(--c-success);
}

.tr-timeline-icon.pending {
  background: var(--c-warning);
}

.tr-timeline-content {
  flex: 1;
  padding-top: 0.25rem;
}

.tr-timeline-time {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.25rem;
}

.tr-timeline-status {
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.tr-timeline-location {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  margin-top: 0.5rem;
}

.tr-progress-section {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.tr-progress-label {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  margin-bottom: 0.75rem;
}

.tr-progress-bar {
  width: 100%;
  height: 12px;
  background: var(--c-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-success) 100%);
  width: 0%;
  transition: width 0.6s ease;
}

.tr-progress-percent {
  text-align: center;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--c-accent);
  font-size: 1rem;
}

.tr-map-container {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 500px;
  margin-bottom: 2rem;
}

.tr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tr-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.tr-panel-title {
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 1rem;
  font-size: 1rem;
  font-family: var(--font-display);
}

.tr-panel-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c-border-subtle);
  font-size: 0.9rem;
}

.tr-panel-item:last-child {
  border-bottom: none;
}

.tr-panel-label {
  color: var(--c-text-muted);
}

.tr-panel-value {
  color: var(--c-text);
  font-weight: 600;
}

.tr-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tr-btn {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  text-align: center;
}

.tr-btn-primary {
  background: var(--c-accent);
  color: white;
}

.tr-btn-primary:hover {
  background: #b8860b;
  transform: translateY(-2px);
}

.tr-btn-secondary {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.tr-btn-secondary:hover {
  background: var(--c-surface-3);
  border-color: var(--c-border);
}

.tr-shipment-select {
  width: 100%;
  padding: 0.75rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.tr-shipment-select:focus {
  outline: none;
  border-color: var(--c-accent);
}

@media (max-width: 768px) {
  .tr-container {
    padding: 1rem;
  }

  .tr-header {
    padding: 1.5rem;
  }

  .tr-tracking-number {
    font-size: 1.5rem;
  }

  .tr-header-info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tr-map-container {
    height: 300px;
  }
}


/* ===== PART: _64_reportes-gastos.css ===== */

.rg-container {
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.rg-title {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--c-text);
  margin-bottom: 2rem;
}

.rg-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .rg-kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.rg-kpi {
  background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface-3) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.rg-kpi-label {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rg-kpi-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
}

.rg-kpi-change {
  font-size: 0.85rem;
  color: var(--c-success);
  font-weight: 600;
}

.rg-kpi-change.negative {
  color: var(--c-danger);
}

.rg-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.rg-filter-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.rg-filter-label {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  font-weight: 600;
}

.rg-filter-select {
  padding: 0.5rem 1rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 150px;
}

.rg-filter-select:focus {
  outline: none;
  border-color: var(--c-accent);
}

.rg-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 1200px) {
  .rg-charts-grid {
    grid-template-columns: 1fr;
  }
}

.rg-chart-container {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.rg-chart-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
}

.rg-chart {
  width: 100%;
  height: 300px;
  min-height: 300px;
}

.rg-chart-full {
  height: 400px;
}

.rg-table-container {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}

.rg-table-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  padding: 1.5rem;
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-display);
}

.rg-table {
  width: 100%;
  border-collapse: collapse;
}

.rg-table th {
  background: var(--c-surface-2);
  padding: 1rem 1.5rem;
  text-align: left;
  font-weight: 700;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rg-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-text);
  font-size: 0.9rem;
}

.rg-table tr:hover {
  background: var(--c-surface-2);
}

.rg-table tr:last-child td {
  border-bottom: none;
}

.rg-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
}

.rg-badge-success {
  background: var(--c-success);
  color: white;
}

.rg-badge-warning {
  background: var(--c-warning);
  color: white;
}

.rg-badge-danger {
  background: var(--c-danger);
  color: white;
}

.rg-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  font-size: 0.9rem;
}

.rg-breakdown-item {
  background: var(--c-surface-2);
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--c-accent);
}

.rg-breakdown-label {
  color: var(--c-text-muted);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.rg-breakdown-value {
  color: var(--c-text);
  font-weight: 700;
}

.rg-button-group {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: flex-end;
}

.rg-btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.rg-btn-primary {
  background: var(--c-accent);
  color: white;
}

.rg-btn-primary:hover {
  background: #b8860b;
  transform: translateY(-2px);
}

.rg-btn-secondary {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.rg-btn-secondary:hover {
  background: var(--c-surface-3);
}

@media (max-width: 768px) {
  .rg-container {
    padding: 1rem;
  }

  .rg-title {
    font-size: 1.5rem;
  }

  .rg-filters {
    flex-direction: column;
  }

  .rg-filter-select {
    width: 100%;
    min-width: auto;
  }

  .rg-table {
    font-size: 0.8rem;
  }

  .rg-table th,
  .rg-table td {
    padding: 0.75rem;
  }

  .rg-button-group {
    flex-direction: column;
  }

  .rg-btn {
    width: 100%;
  }
}


/* ===== PART: _65_aprobaciones.css ===== */

.ap-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.ap-title {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--c-text);
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ap-notification-badge {
  background: var(--c-danger);
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.ap-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .ap-kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.ap-kpi {
  background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface-3) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.ap-kpi-label {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ap-kpi-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
}

.ap-kpi-subtext {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.ap-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.ap-filter-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ap-filter-label {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  font-weight: 600;
}

.ap-filter-select {
  padding: 0.5rem 1rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 150px;
}

.ap-filter-select:focus {
  outline: none;
  border-color: var(--c-accent);
}

.ap-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--c-border);
}

.ap-tab {
  padding: 1rem 1.5rem;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.ap-tab.active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.ap-tab:hover {
  color: var(--c-text);
}

.ap-content {
  display: none;
}

.ap-content.active {
  display: block;
}

.ap-requests {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ap-request-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.ap-request-card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 4px 12px rgba(196, 148, 48, 0.1);
}

.ap-request-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.ap-request-type {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex: 1;
}

.ap-badge {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ap-badge-gasto {
  background: var(--c-accent);
  color: white;
}

.ap-badge-liquidacion {
  background: var(--c-success);
  color: white;
}

.ap-badge-permiso {
  background: var(--c-warning);
  color: white;
}

.ap-badge-documento {
  background: #60a5fa;
  color: white;
}

.ap-request-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.25rem;
}

.ap-request-desc {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.ap-request-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--c-surface-2);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .ap-request-meta {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

.ap-meta-item {
  font-size: 0.85rem;
}

.ap-meta-label {
  color: var(--c-text-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.ap-meta-value {
  color: var(--c-text);
  font-weight: 700;
}

.ap-requester {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.ap-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.ap-requester-info {
  flex: 1;
}

.ap-requester-name {
  font-weight: 600;
  color: var(--c-text);
  font-size: 0.95rem;
}

.ap-requester-date {
  font-size: 0.8rem;
  color: var(--c-text-muted);
}

.ap-amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-accent);
}

.ap-request-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.ap-btn {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  flex: 1;
}

.ap-btn-approve {
  background: var(--c-success);
  color: white;
}

.ap-btn-approve:hover {
  background: #059669;
  transform: translateY(-2px);
}

.ap-btn-reject {
  background: var(--c-danger);
  color: white;
}

.ap-btn-reject:hover {
  background: #be123c;
  transform: translateY(-2px);
}

.ap-btn-detail {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.ap-btn-detail:hover {
  background: var(--c-surface-3);
}

.ap-history-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ap-history-table th {
  background: var(--c-surface-2);
  padding: 1rem 1.5rem;
  text-align: left;
  font-weight: 700;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ap-history-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--c-border-subtle);
  color: var(--c-text);
  font-size: 0.9rem;
}

.ap-history-table tr:hover {
  background: var(--c-surface-2);
}

.ap-history-table tr:last-child td {
  border-bottom: none;
}

.ap-status-approved {
  color: var(--c-success);
  font-weight: 700;
}

.ap-status-rejected {
  color: var(--c-danger);
  font-weight: 700;
}

@media (max-width: 768px) {
  .ap-container {
    padding: 1rem;
  }

  .ap-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 1rem;
  }

  .ap-request-header {
    flex-direction: column;
  }

  .ap-request-actions {
    flex-direction: column;
  }

  .ap-filters {
    flex-direction: column;
  }

  .ap-filter-select {
    width: 100%;
    min-width: auto;
  }
}


/* ===== PART: _66_rutas.css ===== */

.rt-container {
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.rt-title {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--c-text);
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rt-btn-new {
  padding: 0.75rem 1.5rem;
  background: var(--c-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.rt-btn-new:hover {
  background: #b8860b;
  transform: translateY(-2px);
}

.rt-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .rt-kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.rt-kpi {
  background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface-3) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.rt-kpi-label {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rt-kpi-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
}

.rt-kpi-unit {
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.rt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

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

.rt-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.rt-card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 4px 12px rgba(196, 148, 48, 0.1);
}

.rt-card-map {
  width: 100%;
  height: 150px;
  background: var(--c-surface-2);
  position: relative;
}

.rt-card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rt-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
}

.rt-card-route {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--c-text-muted);
  font-size: 0.9rem;
}

.rt-route-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rt-arrow {
  color: var(--c-accent);
  font-weight: bold;
}

.rt-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.rt-stat {
  font-size: 0.85rem;
}

.rt-stat-label {
  color: var(--c-text-muted);
  display: block;
  margin-bottom: 0.25rem;
}

.rt-stat-value {
  color: var(--c-text);
  font-weight: 700;
  font-size: 1rem;
}

.rt-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: var(--c-surface-2);
  color: var(--c-accent);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.rt-card-actions {
  display: flex;
  gap: 0.75rem;
}

.rt-btn {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
}

.rt-btn-primary {
  background: var(--c-accent);
  color: white;
}

.rt-btn-primary:hover {
  background: #b8860b;
  transform: translateY(-2px);
}

.rt-btn-secondary {
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}

.rt-btn-secondary:hover {
  background: var(--c-surface-3);
}

.rt-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.rt-modal.active {
  display: flex;
}

.rt-modal-content {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.rt-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--c-surface-2);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.rt-modal-close:hover {
  background: var(--c-surface-3);
}

.rt-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
}

.rt-modal-map {
  width: 100%;
  height: 500px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  margin-bottom: 1.5rem;
}

.rt-modal-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.rt-modal-item {
  padding: 1rem;
  background: var(--c-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
}

.rt-modal-item-label {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}

.rt-modal-item-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
}

@media (max-width: 768px) {
  .rt-container {
    padding: 1rem;
  }

  .rt-title {
    flex-direction: column;
    gap: 1rem;
    font-size: 1.5rem;
  }

  .rt-btn-new {
    width: 100%;
  }

  .rt-modal-content {
    padding: 1.5rem;
  }

  .rt-modal-map {
    height: 300px;
  }
}


/* ===== PART: _67_subir-siniestro.css ===== */

/* ══════════════════════════════════════════════════════════════
   SUBIR SINIESTRO — CSS
   Prefijo: .ss-*
   ══════════════════════════════════════════════════════════════ */

.ss-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.ss-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}
.ss-sub {
    color: var(--c-text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* ── Form layout ── */
.ss-form {
    max-width: 860px;
    margin: 0 auto;
}
.ss-section {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.ss-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--c-border-subtle);
}
.ss-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
    .ss-row { grid-template-columns: 1fr; }
}
.ss-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ss-field.ss-full {
    grid-column: 1 / -1;
}
.ss-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c-text-secondary);
}
.ss-required {
    color: var(--c-danger-light);
}

/* ── Inputs ── */
.ss-input,
.ss-select,
.ss-textarea {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.ss-input:focus,
.ss-select:focus,
.ss-textarea:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-dim);
}
.ss-input::placeholder,
.ss-textarea::placeholder {
    color: var(--c-text-faint);
}
.ss-textarea {
    min-height: 80px;
    max-height: 400px;
    resize: none;
    overflow-y: hidden;
    line-height: 1.5;
}
.ss-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23726a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

/* ── Custom searchable select ── */
.ss-search-select {
    position: relative;
}
.ss-search-select .ss-input {
    cursor: pointer;
}
.ss-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--c-surface-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.ss-search-dropdown.open {
    display: block;
}
.ss-search-opt {
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.15s;
}
.ss-search-opt:hover,
.ss-search-opt.highlighted {
    background: var(--c-accent-dim);
    color: var(--c-accent-light);
}
.ss-search-opt.selected {
    background: var(--c-accent-dim-2);
    color: var(--c-accent-light);
    font-weight: 500;
}
.ss-search-empty {
    padding: 0.75rem;
    font-size: 0.8rem;
    color: var(--c-text-faint);
    text-align: center;
}

/* ── Drop zone ── */
.ss-dropzone {
    border: 2px dashed var(--c-border);
    border-radius: var(--radius-md);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--c-surface-3);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.ss-dropzone:hover,
.ss-dropzone.dragover {
    border-color: var(--c-accent);
    background: var(--c-accent-dim-2);
}
.ss-dropzone-icon {
    color: var(--c-text-faint);
}
.ss-dropzone-text {
    font-size: 0.85rem;
    color: var(--c-text-muted);
}
.ss-dropzone-text strong {
    color: var(--c-accent-light);
    cursor: pointer;
}
.ss-dropzone-hint {
    font-size: 0.7rem;
    color: var(--c-text-faint);
}

/* ── File previews ── */
.ss-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.ss-file-card {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}
.ss-file-card:hover {
    border-color: var(--c-border-hover);
}
.ss-file-thumb {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    background: var(--c-surface-3);
}
.ss-file-thumb-pdf {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-3);
}
.ss-file-thumb-pdf canvas {
    max-width: 100%;
    max-height: 100px;
    display: block;
}
.ss-file-info {
    padding: 0.4rem 0.5rem;
}
.ss-file-name {
    font-size: 0.7rem;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-file-size {
    font-size: 0.65rem;
    color: var(--c-text-faint);
    font-family: var(--font-mono);
}
.ss-file-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.ss-file-badge--img {
    background: var(--c-info-dim);
    color: var(--c-info-light);
}
.ss-file-badge--pdf {
    background: var(--c-danger-dim);
    color: var(--c-danger-light);
}
.ss-file-badge--compressed {
    background: var(--c-success-dim);
    color: var(--c-success-light);
}
.ss-file-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    border: none;
    color: var(--c-danger-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.ss-file-card:hover .ss-file-remove {
    opacity: 1;
}

/* ── Submit bar ── */
.ss-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-border-subtle);
}
.ss-btn {
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
}
.ss-btn:active { transform: scale(0.97); }
.ss-btn--primary {
    background: var(--c-accent);
    color: #fff;
}
.ss-btn--primary:hover {
    background: var(--c-accent-dark);
}
.ss-btn--ghost {
    background: transparent;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border-subtle);
}
.ss-btn--ghost:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
}

/* ── Files counter ── */
.ss-files-count {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin-top: 0.5rem;
}
.ss-files-count strong {
    color: var(--c-accent-light);
}


/* ===== PART: _68_detalle-siniestro-v2.css ===== */

/* ══════════════════════════════════════════════════════════════
   DETALLE SINIESTRO V2 — CSS
   Prefijo: .dsv-*
   ══════════════════════════════════════════════════════════════ */

.dsv-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Header ── */
.dsv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.dsv-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--c-text-muted);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.dsv-back:hover { background: var(--c-surface-3); color: var(--c-text); }
.dsv-actions-top { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Status alert ── */
.dsv-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.dsv-alert--pending {
    background: var(--c-warning-dim);
    border: 1px solid rgba(245,158,11,0.25);
    color: var(--c-warning-light);
}
.dsv-alert--approved {
    background: var(--c-success-dim);
    border: 1px solid rgba(16,185,129,0.25);
    color: var(--c-success-light);
}
.dsv-alert--rejected {
    background: var(--c-danger-dim);
    border: 1px solid rgba(244,63,94,0.25);
    color: var(--c-danger-light);
}
.dsv-alert svg { flex-shrink: 0; width: 18px; height: 18px; }

/* ── Main grid ── */
.dsv-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
}
@media (max-width: 960px) {
    .dsv-grid { grid-template-columns: 1fr; }
}

/* ── Panels ── */
.dsv-panel {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.dsv-panel-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dsv-panel-title svg { width: 14px; height: 14px; color: var(--c-accent); }

/* ── Info rows ── */
.dsv-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .dsv-info-grid { grid-template-columns: 1fr; }
}
.dsv-info-item {}
.dsv-info-label {
    font-size: 0.7rem;
    color: var(--c-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.dsv-info-value {
    font-size: 0.85rem;
    color: var(--c-text);
    font-weight: 500;
}
.dsv-info-value.mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

/* ── Conclusion text ── */
.dsv-conclusion {
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    line-height: 1.65;
    white-space: pre-wrap;
    background: var(--c-surface-3);
    border-radius: var(--radius-sm);
    padding: 1rem;
    border: 1px solid var(--c-border-subtle);
}

/* ── Gallery ── */
.dsv-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.dsv-thumb {
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 1px solid var(--c-border-subtle);
    transition: border-color 0.2s, transform 0.15s;
}
.dsv-thumb:hover { border-color: var(--c-accent); transform: scale(1.02); }
.dsv-thumb img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.dsv-thumb-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
}
.dsv-thumb-badge--img { background: var(--c-info-dim); color: var(--c-info-light); }
.dsv-thumb-badge--pdf { background: var(--c-danger-dim); color: var(--c-danger-light); }
.dsv-pdf-thumb {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-3);
}

/* ── Sidebar card ── */
.dsv-sidebar-card {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.dsv-sidebar-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    margin-bottom: 1rem;
}
.dsv-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.dsv-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.dsv-person-name {
    font-size: 0.8rem;
    color: var(--c-text);
    font-weight: 500;
}
.dsv-person-role {
    font-size: 0.7rem;
    color: var(--c-text-faint);
}

/* ── Timeline ── */
.dsv-timeline {
    position: relative;
    padding-left: 1.5rem;
}
.dsv-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--c-border-subtle);
    border-radius: 2px;
}
.dsv-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}
.dsv-timeline-item:last-child { padding-bottom: 0; }
.dsv-timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: var(--c-surface-2);
}
.dsv-timeline-dot.active {
    border-color: var(--c-accent);
    background: var(--c-accent);
}
.dsv-timeline-dot.success {
    border-color: var(--c-success);
    background: var(--c-success);
}
.dsv-timeline-dot.danger {
    border-color: var(--c-danger);
    background: var(--c-danger);
}
.dsv-timeline-text {
    font-size: 0.78rem;
    color: var(--c-text);
}
.dsv-timeline-date {
    font-size: 0.68rem;
    color: var(--c-text-faint);
    font-family: var(--font-mono);
    margin-top: 0.15rem;
}

/* ── Buttons ── */
.dsv-btn {
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s, transform 0.1s;
}
.dsv-btn:active { transform: scale(0.97); }
.dsv-btn svg { width: 14px; height: 14px; }
.dsv-btn--approve {
    background: var(--c-success);
    color: #fff;
}
.dsv-btn--approve:hover { background: #059669; }
.dsv-btn--reject {
    background: var(--c-danger);
    color: #fff;
}
.dsv-btn--reject:hover { background: #e11d48; }
.dsv-btn--ghost {
    background: transparent;
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text-muted);
}
.dsv-btn--ghost:hover { background: var(--c-surface-hover); color: var(--c-text); }

/* ── Rejection reason ── */
.dsv-rejection {
    background: var(--c-danger-dim);
    border: 1px solid rgba(244,63,94,0.2);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-top: 1rem;
}
.dsv-rejection-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--c-danger-light);
    margin-bottom: 0.35rem;
}
.dsv-rejection-text {
    font-size: 0.8rem;
    color: var(--c-text);
    line-height: 1.5;
}


/* ===== PART: _70_tables.css ===== */

/* ══════════════════════════════════════════════════════════════
   TABLAS UNIVERSALES - Sistema Global de Tablas
   ══════════════════════════════════════════════════════════════
   
   Este archivo contiene estilos universales para todas las tablas
   del panel. Proporciona una base consistente y profesional para
   mostrar datos tabulares en todo el sistema.
   
   Clases principales:
   - .universal-table: Tabla base con estilos predeterminados
   - .compact: Versión compacta con menos padding
   - .striped: Filas alternadas con fondo
   - .hoverable: Efecto hover en filas
   - .bordered: Bordes completos en celdas
   
   ══════════════════════════════════════════════════════════════ */

/* ── Tabla Base ──────────────────────────────────────────────── */
.universal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    min-width: 600px;
}

/* ── Encabezado de Tabla ─────────────────────────────────────── */
.universal-table thead {
    background: var(--c-surface-3);
    border-bottom: 1px solid var(--c-border-subtle);
}

.universal-table thead th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Alineación de encabezados */
.universal-table thead th.text-center {
    text-align: center;
}

.universal-table thead th.text-right {
    text-align: right;
}

/* ── Cuerpo de Tabla ─────────────────────────────────────────── */
.universal-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--c-border-subtle);
    color: var(--c-text);
    vertical-align: middle;
}

.universal-table tbody tr:last-child td {
    border-bottom: none;
}

/* Alineación de celdas */
.universal-table tbody td.text-center {
    text-align: center;
}

.universal-table tbody td.text-right {
    text-align: right;
}

/* ── Hover en Filas ──────────────────────────────────────────── */
.universal-table.hoverable tbody tr {
    transition: background 0.15s ease;
}

.universal-table.hoverable tbody tr:hover {
    background: var(--c-surface-hover);
}

/* ── Filas Alternadas ────────────────────────────────────────── */
.universal-table.striped tbody tr:nth-child(even) {
    background: var(--c-surface-2);
}

.universal-table.striped.hoverable tbody tr:nth-child(even):hover {
    background: var(--c-surface-hover);
}

/* ── Tabla Compacta ──────────────────────────────────────────── */
.universal-table.compact thead th,
.universal-table.compact tbody td {
    padding: 0.75rem;
}

/* ── Tabla con Bordes ────────────────────────────────────────── */
.universal-table.bordered thead th,
.universal-table.bordered tbody td {
    border: 1px solid var(--c-border-subtle);
}

/* ── Tabla Responsiva ────────────────────────────────────────── */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--c-scrollbar-thumb);
    border-radius: 99px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Badges en Tablas ────────────────────────────────────────── */
.table-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.table-badge.success {
    background: var(--c-success-dim);
    color: var(--c-success-light);
}

.table-badge.warning {
    background: var(--c-warning-dim);
    color: var(--c-warning-light);
}

.table-badge.danger {
    background: var(--c-danger-dim);
    color: var(--c-danger-light);
}

.table-badge.info {
    background: var(--c-info-dim);
    color: var(--c-info-light);
}

.table-badge.accent {
    background: var(--c-accent-dim);
    color: var(--c-accent-light);
}

.table-badge.muted {
    background: var(--c-surface-3);
    color: var(--c-text-muted);
}

/* ── Botones en Tablas ───────────────────────────────────────── */
.table-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.table-actions.center {
    justify-content: center;
}

.table-actions.end {
    justify-content: flex-end;
}

.table-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--c-border-subtle);
    background: var(--c-surface);
    color: var(--c-text);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.table-btn:hover {
    background: var(--c-surface-3);
    border-color: var(--c-accent);
    color: var(--c-accent-light);
}

.table-btn.primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: white;
}

.table-btn.primary:hover {
    background: var(--c-accent-light);
    border-color: var(--c-accent-light);
}

.table-btn.danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: white;
}

.table-btn.danger:hover {
    background: var(--c-danger-light);
    border-color: var(--c-danger-light);
}

.table-btn.success {
    background: var(--c-success);
    border-color: var(--c-success);
    color: white;
}

.table-btn.success:hover {
    background: var(--c-success-light);
    border-color: var(--c-success-light);
}

.table-btn.ghost {
    background: transparent;
    border-color: transparent;
}

.table-btn.ghost:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-subtle);
}

/* ── Iconos en Botones ───────────────────────────────────────── */
.table-btn svg {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

.table-btn.icon-only {
    padding: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Checkboxes en Tablas ────────────────────────────────────── */
.table-checkbox {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--c-accent);
}

/* ── Estados de Fila ─────────────────────────────────────────── */
.universal-table tbody tr.selected {
    background: var(--c-accent-dim-2);
}

.universal-table tbody tr.disabled {
    opacity: 0.5;
}

.universal-table tbody tr.highlight {
    background: var(--c-warning-dim);
}

/* ── Estado Vacío ────────────────────────────────────────────── */
.table-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--c-text-muted);
}

.table-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.table-empty-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-text);
}

.table-empty-desc {
    font-size: 0.875rem;
}

/* ── Paginación ──────────────────────────────────────────────── */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.table-pagination-info {
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

.table-pagination-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.table-pagination-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--c-border-subtle);
    background: var(--c-surface);
    color: var(--c-text);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 2.5rem;
    text-align: center;
}

.table-pagination-btn:hover:not(:disabled) {
    background: var(--c-surface-hover);
    border-color: var(--c-accent);
}

.table-pagination-btn.active {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: white;
}

.table-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Barra de Selección Múltiple ─────────────────────────────── */
.table-bulk-bar {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--c-accent-dim-2);
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.table-bulk-bar.active {
    display: flex;
}

.table-bulk-bar-info {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-accent-light);
}

.table-bulk-bar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Elementos Especiales en Celdas ──────────────────────────── */
.table-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--c-accent-dim);
    color: var(--c-accent-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.table-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-user-name {
    font-weight: 600;
    color: var(--c-text);
}

.table-user-email {
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

.table-code {
    font-family: var(--font-mono);
    background: var(--c-surface-3);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--c-accent-light);
    white-space: nowrap;
}

.table-mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

/* ── Barras de Progreso en Tablas ────────────────────────────── */
.table-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--c-surface-3);
    border-radius: var(--radius-full);
    overflow: hidden;
    min-width: 60px;
}

.table-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-light));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.table-progress-fill.success {
    background: linear-gradient(90deg, var(--c-success), var(--c-success-light));
}

.table-progress-fill.warning {
    background: linear-gradient(90deg, var(--c-warning), var(--c-warning-light));
}

.table-progress-fill.danger {
    background: linear-gradient(90deg, var(--c-danger), var(--c-danger-light));
}

.table-progress-text {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    min-width: 3rem;
    text-align: right;
}

/* ── Indicadores de Estado ───────────────────────────────────── */
.table-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.table-status-dot.online {
    background: var(--c-success);
    animation: pulse-dot 2s ease-in-out infinite;
}

.table-status-dot.offline {
    background: var(--c-danger);
}

.table-status-dot.warning {
    background: var(--c-warning);
}

.table-status-dot.info {
    background: var(--c-info);
}

/* ── Estilos para Ordenamiento ───────────────────────────────── */
.universal-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 2rem;
}

.universal-table thead th.sortable:hover {
    color: var(--c-text);
}

.universal-table thead th.sortable::after {
    content: '⇅';
    position: absolute;
    right: 0.75rem;
    opacity: 0.3;
    font-size: 0.875rem;
}

.universal-table thead th.sortable.asc::after {
    content: '↑';
    opacity: 1;
    color: var(--c-accent);
}

.universal-table thead th.sortable.desc::after {
    content: '↓';
    opacity: 1;
    color: var(--c-accent);
}

/* ── Tooltips en Tablas ──────────────────────────────────────── */
.table-tooltip {
    position: relative;
    cursor: help;
}

/* ── Responsividad Mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    .universal-table {
        font-size: 0.8125rem;
        min-width: 100%;
    }

    .universal-table thead th,
    .universal-table tbody td {
        padding: 0.75rem 0.5rem;
    }

    .universal-table.compact thead th,
    .universal-table.compact tbody td {
        padding: 0.5rem 0.375rem;
    }

    .table-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .table-btn {
        width: 100%;
        text-align: center;
    }

    .table-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .table-pagination-buttons {
        justify-content: center;
    }

    .table-bulk-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .table-bulk-bar-actions {
        flex-direction: column;
    }

    /* Ocultar columnas menos importantes en mobile */
    .universal-table .hide-mobile {
        display: none;
    }
}

/* ── Animaciones ─────────────────────────────────────────────── */
@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* ── Loading State ────────────────────────────────────────────── */
.table-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.table-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid var(--c-border);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ===== PART: _71_cards.css ===== */

/* ══════════════════════════════════════════════════════════════
   CARDS Y KPI - Componentes de Tarjetas
   ══════════════════════════════════════════════════════════════
   
   Componentes de tarjetas, estadísticas y KPIs del sistema.
   
   Componentes incluidos:
   - .card: Tarjetas base
   - .stat-card: Tarjetas de estadísticas
   - .metric-card: Tarjetas de métricas
   - .kpi-card: Tarjetas de KPI (Key Performance Indicators)
   
   ══════════════════════════════════════════════════════════════ */

/* ── Cards Base ──────────────────────────────────────────────── */
.card {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(8px);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    border-color: var(--c-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.card-flat {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
}

/* ── Stat Card ───────────────────────────────────────────────── */
.stat-card {
    background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface) 100%);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c-accent-dim-2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.stat-card:hover {
    border-color: var(--c-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.stat-card:hover::before {
    opacity: 1;
}

/* ── Metric Card ─────────────────────────────────────────────── */
.metric-card {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.metric-card:hover {
    border-color: var(--c-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 34px rgba(0,0,0,0.28);
}

.metric-card--clickable {
    cursor: pointer;
}

.metric-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.metric-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border-subtle);
    background: var(--c-surface-3);
    position: relative;
}

.metric-card__icon::after {
    content: '';
    position: absolute;
    inset: -24px;
    background: radial-gradient(circle, var(--c-accent-dim) 0%, transparent 55%);
    opacity: 0.35;
    pointer-events: none;
}

.metric-card__icon svg {
    position: relative;
    z-index: 1;
}

.metric-card__label {
    margin-top: 0.85rem;
    color: var(--c-text-muted);
    font-size: 0.75rem;
}

.metric-card__value {
    margin-top: 0.35rem;
    color: var(--c-text);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.35rem;
}

.metric-card__sub {
    margin-top: 0.35rem;
    color: var(--c-text-secondary);
    font-size: 0.85rem;
}

.metric-card__meta {
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-border-subtle);
    color: var(--c-text-muted);
    font-size: 0.8rem;
}

/* Variantes de color para metric-card */
.metric-card--accent .metric-card__icon {
    background: var(--c-accent-dim);
    border-color: var(--c-border);
}

.metric-card--success .metric-card__icon {
    background: var(--c-success-dim);
    border-color: var(--c-success-dim);
}

.metric-card--warning .metric-card__icon {
    background: var(--c-warning-dim);
    border-color: var(--c-warning-dim);
}

.metric-card--danger .metric-card__icon {
    background: var(--c-danger-dim);
    border-color: var(--c-danger-dim);
}

.metric-card--info .metric-card__icon {
    background: var(--c-info-dim);
    border-color: var(--c-info-dim);
}

/* ── KPI Cards ───────────────────────────────────────────────── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
    margin-bottom: 2.0rem;
}

@media (max-width: 640px) {
    .kpi-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

.kpi-card {
    background: linear-gradient(135deg, var(--c-surface-2) 0%, var(--c-surface) 100%) !important;
    border: 1px solid var(--c-border-subtle) !important;
    border-radius: 18px !important;
    padding: 1.05rem 1.1rem !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

@media (max-width: 640px) {
    .kpi-card {
        padding: 0.95rem 1rem !important;
    }
}

.kpi-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at 20% 20%, var(--c-accent-dim) 0%, transparent 55%);
    opacity: 0.35;
    pointer-events: none;
}

.kpi-card:hover {
    transform: translateY(-1px);
    border-color: var(--c-border-hover) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.kpi-label {
    position: relative;
    font-size: clamp(0.78rem, 1.1vw, 0.9rem) !important;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--c-text-muted) !important;
    font-weight: 750 !important;
    margin-bottom: 0.55rem !important;
}

.kpi-value {
    position: relative;
    margin-top: 0.15rem !important;
    font-size: clamp(1.55rem, 2.6vw, 2.05rem) !important;
    line-height: 1.05;
    font-family: var(--font-mono) !important;
    font-weight: 850 !important;
    color: var(--c-text) !important;
}


/* ===== PART: _72_buttons-badges.css ===== */

/* ══════════════════════════════════════════════════════════════
   BUTTONS & BADGES - Botones y Etiquetas
   ══════════════════════════════════════════════════════════════
   
   Componentes de botones y badges del sistema.
   
   Componentes incluidos:
   - .badge: Etiquetas de estado (con variantes de color)
   - .btn: Botones de acción (con variantes de estilo)
   
   ══════════════════════════════════════════════════════════════ */

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 500;
    font-family: var(--font-mono);
}

.badge-accent {
    background: var(--c-accent-dim);
    color: var(--c-accent-light);
    border: 1px solid var(--c-border);
}

.badge-success {
    background: var(--c-success-dim);
    color: var(--c-success-light);
    border: 1px solid var(--c-success-dim);
}

.badge-danger {
    background: var(--c-danger-dim);
    color: var(--c-danger-light);
    border: 1px solid var(--c-danger-dim);
}

.badge-warning {
    background: var(--c-warning-dim);
    color: var(--c-warning-light);
    border: 1px solid var(--c-warning-dim);
}

.badge-info {
    background: var(--c-info-dim);
    color: var(--c-info-light);
    border: 1px solid var(--c-info-dim);
}

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    text-decoration: none;
}

.btn-accent {
    background: var(--c-accent);
    color: var(--c-bg);
    border-color: var(--c-accent);
}

.btn-accent:hover {
    background: var(--c-accent-light);
    border-color: var(--c-accent-light);
}

.btn-ghost {
    background: transparent;
    color: var(--c-text-secondary);
    border-color: var(--c-border-subtle);
}

.btn-ghost:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
    border-color: var(--c-border);
}

.btn-danger {
    background: var(--c-danger-dim);
    color: var(--c-danger-light);
    border-color: var(--c-danger-dim);
}

.btn-danger:hover {
    background: var(--c-danger);
    color: white;
}


/* ===== PART: _73_forms.css ===== */

/* ══════════════════════════════════════════════════════════════
   FORMS - Formularios e Inputs
   ══════════════════════════════════════════════════════════════
   
   Componentes de formularios del sistema.
   
   Componentes incluidos:
   - .input: Campos de texto
   - .select: Selectores/dropdowns
   - .av-toggle: Switches/toggles (con variantes de color)
   
   ══════════════════════════════════════════════════════════════ */

/* ── Inputs ──────────────────────────────────────────────────── */
.input {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.875rem;
    font-size: 0.85rem;
    font-family: var(--font-body);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
    width: 100%;
}

.input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-dim-2);
}

.input::placeholder {
    color: var(--c-text-faint);
}

/* ── Selects ─────────────────────────────────────────────────── */
.select {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.875rem;
    font-size: 0.85rem;
    font-family: var(--font-body);
    transition: border-color 0.18s;
    outline: none;
    cursor: pointer;
}

.select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-dim-2);
}

/* ── Switch/Toggle (av-toggle) ───────────────────────────────── */
.av-toggle {
    --av-on-bg: var(--c-success-dim);
    --av-on-border: var(--c-success);
    --av-thumb-on: var(--c-success-light);
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    display: inline-block;
}

.av-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.av-toggle__slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--c-surface-hover);
    border: 1px solid var(--c-border-subtle);
    border-radius: 99px;
    transition: background 0.2s, border-color 0.2s;
}

.av-toggle__slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c-text-muted);
    left: 2px;
    top: 2px;
    transition: transform 0.2s, background 0.2s;
}

.av-toggle input:checked + .av-toggle__slider {
    background: var(--av-on-bg);
    border-color: var(--av-on-border);
}

.av-toggle input:checked + .av-toggle__slider::before {
    transform: translateX(20px);
    background: var(--av-thumb-on);
}

/* Variantes de color para av-toggle */
.av-toggle--success {
    --av-on-bg: var(--c-success-dim);
    --av-on-border: var(--c-success);
    --av-thumb-on: var(--c-success-light);
}

.av-toggle--warning {
    --av-on-bg: var(--c-warning-dim);
    --av-on-border: var(--c-warning);
    --av-thumb-on: var(--c-warning-light);
}

.av-toggle--danger {
    --av-on-bg: var(--c-danger-dim);
    --av-on-border: var(--c-danger);
    --av-thumb-on: var(--c-danger-light);
}

.av-toggle--info {
    --av-on-bg: var(--c-info-dim);
    --av-on-border: var(--c-info);
    --av-thumb-on: var(--c-info-light);
}

.av-toggle--accent {
    --av-on-bg: var(--c-accent-dim);
    --av-on-border: var(--c-accent);
    --av-thumb-on: var(--c-accent-light);
}

.av-toggle input:focus + .av-toggle__slider {
    box-shadow: 0 0 0 3px var(--c-accent-dim-2);
}


/* ===== PART: _74_progress.css ===== */

/* ══════════════════════════════════════════════════════════════
   PROGRESS BARS - Barras de Progreso
   ══════════════════════════════════════════════════════════════
   
   Componentes de barras de progreso del sistema.
   
   Componentes incluidos:
   - .progress-track: Contenedor de la barra
   - .progress-fill: Barra de progreso (relleno)
   
   Nota: Para barras de progreso más completas en tablas,
   ver _70_tables.css (.table-progress)
   
   ══════════════════════════════════════════════════════════════ */

/* ── Progress Bar ────────────────────────────────────────────── */
.progress-track {
    height: 6px;
    background: var(--c-surface-3);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent-light));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}


/* ===== PART: _75_code-blocks.css ===== */

/* ══════════════════════════════════════════════════════════════
   CODE BLOCKS - Bloques de Código
   ══════════════════════════════════════════════════════════════
   
   Componentes para mostrar código fuente con sintaxis resaltada.
   
   Componentes incluidos:
   - .code-block: Contenedor de bloque de código
   - .code-block-header: Encabezado con lenguaje y botón copiar
   - .tok-*: Tokens de sintaxis (keyword, string, comment, etc.)
   - Inline code: Código dentro de texto
   
   ══════════════════════════════════════════════════════════════ */

/* ── Code Blocks ─────────────────────────────────────────────── */
.code-block {
    position: relative;
    margin: 0.75rem 0;
}

.code-block pre {
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.65;
    color: #e6edf3;
}

/* ── Syntax Tokens ───────────────────────────────────────────── */
.code-block pre .tok-keyword {
    color: #ff7b72;
}

.code-block pre .tok-string {
    color: #a5d6ff;
}

.code-block pre .tok-comment {
    color: #8b949e;
    font-style: italic;
}

.code-block pre .tok-function {
    color: #d2a8ff;
}

.code-block pre .tok-number {
    color: #79c0ff;
}

.code-block pre .tok-operator {
    color: #ff7b72;
}

.code-block pre .tok-param {
    color: #ffa657;
}

.code-block pre .tok-type {
    color: #79c0ff;
}

.code-block pre .tok-attr {
    color: #7ee787;
}

.code-block pre .tok-value {
    color: #a5d6ff;
}

.code-block pre .tok-tag {
    color: #7ee787;
}

.code-block pre .tok-punct {
    color: #8b949e;
}

/* ── Code Block Header ───────────────────────────────────────── */
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #161b22;
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 0.4rem 1rem;
}

.code-block-header + pre {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-top: none;
}

.code-lang-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: #8b949e;
    cursor: pointer;
    transition: all 0.15s;
}

.code-copy-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #e6edf3;
}

.code-copy-btn.copied {
    color: #3fb950;
    border-color: rgba(63,185,80,0.4);
}

/* ── Inline Code ─────────────────────────────────────────────── */
:not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.8em;
    background: rgba(110,118,129,0.14);
    border: 1px solid rgba(110,118,129,0.25);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    color: var(--c-accent-light);
}


/* ===== PART: _76_modals.css ===== */

/* ══════════════════════════════════════════════════════════════
   MODALS - Ventanas Modales (SweetAlert2)
   ══════════════════════════════════════════════════════════════
   
   Estilos personalizados para SweetAlert2 (librería de modales).
   
   Componentes personalizados:
   - .swal2-popup: Ventana modal principal
   - .swal2-title: Título del modal
   - .swal2-html-container: Contenido del modal
   - .swal2-confirm / .swal2-cancel: Botones
   - .swal2-icon: Iconos de estado
   - .swal2-input: Campos de entrada
   
   ══════════════════════════════════════════════════════════════ */

/* ── Modal Base ──────────────────────────────────────────────── */
.swal2-popup {
    background: var(--c-surface-2) !important;
    border: 1px solid var(--c-border-subtle) !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-body) !important;
    color: var(--c-text) !important;
}

.swal2-title {
    color: var(--c-text) !important;
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
}

.swal2-html-container {
    color: var(--c-text-secondary) !important;
    font-size: 0.88rem !important;
}

/* ── Botones ─────────────────────────────────────────────────── */
.swal2-confirm {
    background: var(--c-accent) !important;
    color: var(--c-bg) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}

.swal2-confirm:hover {
    background: var(--c-accent-light) !important;
}

.swal2-cancel {
    background: var(--c-surface-3) !important;
    color: var(--c-text-secondary) !important;
    border: 1px solid var(--c-border-subtle) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}

.swal2-cancel:hover {
    background: var(--c-surface-hover) !important;
    color: var(--c-text) !important;
}

/* ── Iconos ──────────────────────────────────────────────────── */
.swal2-icon {
    border-color: var(--c-border-subtle) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--c-warning) !important;
    color: var(--c-warning) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--c-danger) !important;
    color: var(--c-danger) !important;
}

.swal2-icon.swal2-success {
    border-color: var(--c-success) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background: var(--c-success) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--c-success-dim) !important;
}

.swal2-icon.swal2-info {
    border-color: var(--c-info) !important;
    color: var(--c-info) !important;
}

/* ── Botón Cerrar ────────────────────────────────────────────── */
.swal2-close {
    color: var(--c-text-muted) !important;
}

.swal2-close:hover {
    color: var(--c-text) !important;
}

/* ── Backdrop ────────────────────────────────────────────────── */
body.swal2-shown:not(.swal2-toast-shown) > .swal2-container.swal2-backdrop-show {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(4px) !important;
}

/* ── Toast (notificaciones) ──────────────────────────────────── */
body.swal2-toast-shown > .swal2-container {
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none;
}

body.swal2-toast-shown > .swal2-container .swal2-toast {
    pointer-events: all;
}

/* ── Inputs ──────────────────────────────────────────────────── */
.swal2-input {
    background: var(--c-surface-3) !important;
    border: 1px solid var(--c-border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--c-text) !important;
    font-family: var(--font-mono) !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    width: 100px !important;
    margin: 0.5rem auto !important;
}

.swal2-input:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px var(--c-accent-dim) !important;
}

/* ── Mensajes de Validación ──────────────────────────────────── */
.swal2-validation-message {
    background: var(--c-danger-dim) !important;
    color: var(--c-danger-light) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.8rem !important;
}


/* ===== PART: _78_calculadora.css ===== */

/* ══════════════════════════════════════════════════════════════
   CALCULADORA DE COSTOS - Estilos
   ══════════════════════════════════════════════════════════════
   
   Estilos específicos para la calculadora de ingresos/gastos.
   Usa variables CSS del tema definidas en config/theme.php
   
   ══════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────── */
.calc-header {
    border-bottom: 1px solid var(--c-border);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.calc-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--c-success-dim);
    border: 1px solid var(--c-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.calc-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.calc-header-subtitle {
    font-size: 0.72rem;
    margin-top: 2px;
    color: var(--c-text-muted);
}

.calc-header-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Summary Bar ─────────────────────────────────────────────── */
.calc-summary-bar {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    text-align: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.calc-sum-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0 0.5rem;
}

.calc-sum-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.calc-sum-value {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
}

.calc-sum-sub {
    font-size: 0.65rem;
    color: var(--c-text-muted);
}

.calc-sum-div {
    width: 1px;
    background: var(--c-border);
    height: 38px;
    margin: 0 auto;
}

/* Colores del summary */
.calc-income-color {
    color: var(--c-success-light);
}

.calc-expense-color {
    color: var(--c-danger-light);
}

.calc-net-pos {
    color: var(--c-success-light);
    text-shadow: 0 0 18px var(--c-success-dim);
}

.calc-net-neg {
    color: var(--c-danger-light);
}

.calc-net-zero {
    color: var(--c-warning-light);
}

/* ── Panels Grid ─────────────────────────────────────────────── */
.calc-panels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 1.5rem;
}

/* ── Panel ───────────────────────────────────────────────────── */
.calc-panel {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s;
}

.calc-panel:hover {
    border-color: var(--c-border-hover);
}

.calc-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--c-border);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.calc-income-header {
    color: var(--c-success-light);
}

.calc-expense-header {
    color: var(--c-danger-light);
}

.calc-panel-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--c-border);
}

/* ── Badges ──────────────────────────────────────────────────── */
.calc-badge {
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: auto;
}

.calc-badge-income {
    background: var(--c-success-dim);
    color: var(--c-success-light);
    border: 1px solid var(--c-success);
}

.calc-badge-expense {
    background: var(--c-danger-dim);
    color: var(--c-danger-light);
    border: 1px solid var(--c-danger);
}

/* ── Inputs Personalizados ───────────────────────────────────── */
.calc-input-income:focus {
    border-color: var(--c-success);
    box-shadow: 0 0 0 3px var(--c-success-dim);
}

.calc-input-expense:focus {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px var(--c-danger-dim);
}

.calc-input-currency {
    padding-left: 1.6rem;
}

.calc-currency-symbol {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    pointer-events: none;
}

/* ── Item Row ────────────────────────────────────────────────── */
.calc-item-row {
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid var(--c-border-subtle);
    animation: calcSlideIn 0.18s ease;
    transition: background 0.12s;
}

.calc-item-row:last-child {
    border-bottom: none;
}

.calc-item-row:hover {
    background: var(--c-surface-hover);
}

@keyframes calcSlideIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* View mode */
.calc-item-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 0.6rem 1.15rem;
    gap: 0.5rem;
}

.calc-item-label {
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calc-item-amount {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Edit mode */
.calc-item-edit {
    display: none;
    flex: 1;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
}

.calc-item-edit.active {
    display: flex;
}

.calc-item-edit input[type="text"] {
    flex: 1;
    font-size: 0.82rem;
    padding: 0.38rem 0.6rem;
}

.calc-item-edit input[type="number"] {
    width: 90px;
    font-size: 0.82rem;
    padding: 0.38rem 0.6rem;
    font-family: var(--font-mono);
}

/* Row actions */
.calc-row-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-right: 0.6rem;
    flex-shrink: 0;
}

.calc-icon-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--c-text-muted);
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    flex-shrink: 0;
}

.calc-icon-btn.edit:hover {
    background: var(--c-info-dim);
    border-color: var(--c-info);
    color: var(--c-info-light);
}

.calc-icon-btn.save:hover {
    background: var(--c-success-dim);
    border-color: var(--c-success);
    color: var(--c-success-light);
}

.calc-icon-btn.cancel:hover {
    background: var(--c-surface-3);
    border-color: var(--c-border);
    color: var(--c-text-muted);
}

.calc-icon-btn.del:hover {
    background: var(--c-danger-dim);
    border-color: var(--c-danger);
    color: var(--c-danger-light);
}

/* Empty state */
.calc-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.8rem;
}

/* ── Modals ──────────────────────────────────────────────────── */
.calc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.calc-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.calc-modal-box {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-hover);
    border-radius: var(--radius-xl);
    padding: 2rem;
    width: min(420px, 100%);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-modal-overlay.open .calc-modal-box {
    transform: scale(1) translateY(0);
}

.calc-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
}

.calc-modal-icon-danger {
    background: var(--c-danger-dim);
    border: 1px solid var(--c-danger);
}

.calc-modal-icon-import {
    background: var(--c-info-dim);
    border: 1px solid var(--c-info);
}

.calc-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.calc-modal-desc {
    font-size: 0.84rem;
    color: var(--c-text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.calc-modal-desc strong {
    color: var(--c-text);
    font-weight: 600;
}

.calc-modal-actions {
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
}

/* Clear stats preview */
.calc-clear-stats {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Import drop zone */
.calc-drop-zone {
    border: 2px dashed var(--c-border-hover);
    border-radius: var(--radius-md);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.15s;
    color: var(--c-text-muted);
    font-size: 0.85rem;
}

.calc-drop-zone:hover,
.calc-drop-zone.drag {
    border-color: var(--c-info);
    color: var(--c-info-light);
    background: var(--c-info-dim);
}

.calc-drop-zone svg {
    margin: 0 auto 0.5rem;
    display: block;
}

/* Import preview */
.calc-import-preview {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    display: none;
    flex-direction: column;
    gap: 0.35rem;
}

.calc-import-preview.visible {
    display: flex;
}

.calc-ip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calc-ip-label {
    color: var(--c-text-muted);
}

.calc-import-mode-btns {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* ── Shake Animation ─────────────────────────────────────────── */
@keyframes calcShakeInput {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-5px);
    }
    60% {
        transform: translateX(5px);
    }
    80% {
        transform: translateX(-3px);
    }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .calc-summary-bar {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .calc-sum-div {
        display: none;
    }
    
    .calc-sum-value {
        font-size: 1rem;
    }
    
    .calc-header {
        padding: 1.15rem 1rem;
    }
    
    .calc-header-actions {
        width: 100%;
    }
    
    .calc-header-actions .btn {
        flex: 1;
        justify-content: center;
    }
}


/* ===== PART: _80_correos.css ===== */

/* ══════════════════════════════════════════════════════════════
   CORREOS / INBOX — CSS
   Prefijo: .mx-*
   ══════════════════════════════════════════════════════════════ */

.mx-container {
    display: flex;
    height: calc(100vh - 140px);
    min-height: 500px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ── Sidebar (bandeja) ── */
.mx-sidebar {
    width: 380px;
    min-width: 280px;
    max-width: 420px;
    border-right: 1px solid var(--c-border-subtle);
    display: flex;
    flex-direction: column;
    background: var(--c-surface-2);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .mx-sidebar {
        width: 100%;
        max-width: none;
    }
    .mx-container { flex-direction: column; height: auto; min-height: auto; }
    .mx-sidebar { border-right: none; border-bottom: 1px solid var(--c-border-subtle); max-height: 50vh; }
    .mx-reader { min-height: 50vh; }
}

/* ── Sidebar header ── */
.mx-sidebar-header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--c-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.mx-sidebar-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mx-sidebar-title svg { width: 18px; height: 18px; color: var(--c-accent); }
.mx-badge-count {
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--c-accent);
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 0.25rem;
}
.mx-search {
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-size: 0.8rem;
    padding: 0.5rem 0.7rem 0.5rem 2rem;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23726a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.6rem center;
}
.mx-search:focus { border-color: var(--c-accent); }
.mx-search::placeholder { color: var(--c-text-faint); }

/* ── Categories tabs ── */
.mx-cats {
    display: flex;
    border-bottom: 1px solid var(--c-border-subtle);
    overflow-x: auto;
}
.mx-cat-tab {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--c-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.mx-cat-tab:hover { color: var(--c-text); }
.mx-cat-tab.active {
    color: var(--c-accent-light);
    border-bottom-color: var(--c-accent);
}

/* ── Mail list ── */
.mx-list {
    flex: 1;
    overflow-y: auto;
}
.mx-mail-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--c-border-subtle);
    transition: background 0.15s;
    position: relative;
}
.mx-mail-item:hover { background: var(--c-surface-hover); }
.mx-mail-item.active { background: var(--c-accent-dim-2); }
.mx-mail-item.unread::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-accent);
}
.mx-mail-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}
.mx-mail-body { flex: 1; min-width: 0; }
.mx-mail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.mx-mail-from {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mx-mail-item.unread .mx-mail-from { font-weight: 600; }
.mx-mail-date {
    font-size: 0.65rem;
    color: var(--c-text-faint);
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}
.mx-mail-subject {
    font-size: 0.75rem;
    color: var(--c-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
}
.mx-mail-item.unread .mx-mail-subject { color: var(--c-text); font-weight: 500; }
.mx-mail-preview {
    font-size: 0.7rem;
    color: var(--c-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
}
.mx-mail-tags { margin-top: 0.3rem; display: flex; gap: 0.3rem; }
.mx-mail-tag {
    font-size: 0.58rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Reader (right pane) ── */
.mx-reader {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    min-width: 0;
}
.mx-reader-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--c-text-faint);
}
.mx-reader-empty svg { width: 48px; height: 48px; }
.mx-reader-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.mx-reader-subject {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text);
    font-family: var(--font-display);
}
.mx-reader-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}
.mx-reader-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-subtle);
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.mx-reader-btn:hover { background: var(--c-surface-hover); color: var(--c-text); }
.mx-reader-btn svg { width: 14px; height: 14px; }
.mx-reader-meta {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--c-border-subtle);
}
.mx-reader-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}
.mx-reader-from-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-text);
}
.mx-reader-from-email {
    font-size: 0.7rem;
    color: var(--c-text-faint);
}
.mx-reader-date-full {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--c-text-faint);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.mx-reader-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    line-height: 1.7;
}
.mx-reader-body p { margin-bottom: 0.85rem; }
.mx-reader-body strong { color: var(--c-text); }
.mx-reader-attachments {
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mx-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: border-color 0.15s;
}
.mx-attachment:hover { border-color: var(--c-accent); color: var(--c-text); }
.mx-attachment svg { width: 12px; height: 12px; }


/* ===== PART: _81_tempmail.css ===== */

/* ══════════════════════════════════════════════════════════════
   TEMPMAIL — CSS
   Prefijo: .tm-*
   ══════════════════════════════════════════════════════════════ */

.tm-container {
    max-width: 860px;
    margin: 0 auto;
}
.tm-header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.tm-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--c-text);
}
.tm-sub {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin-top: 0.25rem;
}

/* ── Address bar ── */
.tm-address-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.tm-email {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--c-accent-light);
    font-weight: 600;
    flex: 1;
    min-width: 200px;
}
.tm-copy-btn {
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--c-border-subtle);
    background: var(--c-surface-3);
    color: var(--c-text-muted);
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.tm-copy-btn:hover { background: var(--c-surface-hover); color: var(--c-text); }
.tm-copy-btn svg { width: 13px; height: 13px; }
.tm-refresh-btn {
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--c-accent);
    color: #fff;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.tm-refresh-btn:hover { background: var(--c-accent-dark); }
.tm-refresh-btn svg { width: 13px; height: 13px; }

/* ── Timer bar ── */
.tm-timer-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.65rem 1rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-sm);
}
.tm-timer-label {
    font-size: 0.72rem;
    color: var(--c-text-muted);
    white-space: nowrap;
}
.tm-timer-track {
    flex: 1;
    height: 6px;
    background: var(--c-surface-3);
    border-radius: 3px;
    overflow: hidden;
}
.tm-timer-fill {
    height: 100%;
    background: var(--c-accent);
    border-radius: 3px;
    transition: width 1s linear;
}
.tm-timer-time {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--c-accent-light);
    font-weight: 600;
    min-width: 55px;
    text-align: right;
}

/* ── Inbox ── */
.tm-inbox {
    display: flex;
    height: calc(100vh - 360px);
    min-height: 350px;
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-surface);
}
.tm-list {
    width: 320px;
    min-width: 240px;
    border-right: 1px solid var(--c-border-subtle);
    overflow-y: auto;
    background: var(--c-surface-2);
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .tm-inbox { flex-direction: column; height: auto; min-height: auto; }
    .tm-list { width: 100%; border-right: none; border-bottom: 1px solid var(--c-border-subtle); max-height: 300px; }
    .tm-viewer { min-height: 300px; }
}
.tm-list-empty {
    padding: 2rem;
    text-align: center;
    color: var(--c-text-faint);
    font-size: 0.8rem;
}
.tm-mail-item {
    display: flex;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--c-border-subtle);
    transition: background 0.15s;
    position: relative;
}
.tm-mail-item:hover { background: var(--c-surface-hover); }
.tm-mail-item.active { background: var(--c-accent-dim-2); }
.tm-mail-item.unread::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-accent);
}
.tm-mail-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
}
.tm-mail-body { flex: 1; min-width: 0; }
.tm-mail-from {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tm-mail-item.unread .tm-mail-from { font-weight: 600; }
.tm-mail-subject {
    font-size: 0.72rem;
    color: var(--c-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tm-mail-date {
    font-size: 0.62rem;
    color: var(--c-text-faint);
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* ── Viewer ── */
.tm-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    min-width: 0;
}
.tm-viewer-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--c-text-faint);
    font-size: 0.8rem;
}
.tm-viewer-empty svg { width: 40px; height: 40px; }
.tm-viewer-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--c-border-subtle);
}
.tm-viewer-subject {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text);
    font-family: var(--font-display);
}
.tm-viewer-meta {
    font-size: 0.72rem;
    color: var(--c-text-faint);
    margin-top: 0.35rem;
}
.tm-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    font-size: 0.83rem;
    color: var(--c-text-secondary);
    line-height: 1.7;
}
.tm-viewer-body p { margin-bottom: 0.75rem; }

/* ── New mail notification ── */
.tm-new-badge {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--c-accent);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-lg);
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    cursor: pointer;
    display: none;
    animation: tmSlideUp 0.3s ease-out;
    z-index: 100;
}
@keyframes tmSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


/* ===== PART: _82_perfil-ajustador.css ===== */

/* ══════════════════════════════════════════════════════════════
   PERFIL AJUSTADOR — CSS
   Prefijo: .pa-*
   ══════════════════════════════════════════════════════════════ */

.pa-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Header ── */
.pa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.pa-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--c-text-muted);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.pa-back:hover { background: var(--c-surface-3); color: var(--c-text); }
.pa-header-actions { display: flex; gap: 0.5rem; }
.pa-btn {
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s, transform 0.1s;
}
.pa-btn:active { transform: scale(0.97); }
.pa-btn svg { width: 14px; height: 14px; }
.pa-btn--primary { background: var(--c-accent); color: #fff; }
.pa-btn--primary:hover { background: var(--c-accent-dark); }
.pa-btn--ghost {
    background: transparent;
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text-muted);
}
.pa-btn--ghost:hover { background: var(--c-surface-hover); color: var(--c-text); }

/* ── Profile card ── */
.pa-profile {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.pa-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}
.pa-profile-info { flex: 1; min-width: 200px; }
.pa-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--c-text);
    font-weight: 700;
}
.pa-role {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin-top: 0.15rem;
}
.pa-tags { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.pa-tag {
    font-size: 0.6rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pa-profile-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.pa-stat { text-align: center; min-width: 70px; }
.pa-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text);
    font-family: var(--font-mono);
}
.pa-stat-label {
    font-size: 0.65rem;
    color: var(--c-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Grid ── */
.pa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 800px) {
    .pa-grid { grid-template-columns: 1fr; }
}

/* ── Panel ── */
.pa-panel {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.pa-panel--full { grid-column: 1 / -1; }
.pa-panel-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--c-border-subtle);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pa-panel-title svg { width: 14px; height: 14px; color: var(--c-accent); }

/* ── Info rows ── */
.pa-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--c-border-subtle);
}
.pa-info-row:last-child { border-bottom: none; }
.pa-info-label {
    font-size: 0.78rem;
    color: var(--c-text-muted);
}
.pa-info-value {
    font-size: 0.78rem;
    color: var(--c-text);
    font-weight: 500;
}
.pa-info-value.mono { font-family: var(--font-mono); }

/* ── Chart container ── */
.pa-chart {
    width: 100%;
    height: 280px;
}

/* ── Table ── */
.pa-table-wrap {
    overflow-x: auto;
}
.pa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.pa-table th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-faint);
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--c-border-subtle);
}
.pa-table td {
    padding: 0.55rem 0.75rem;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border-subtle);
}
.pa-table tr:last-child td { border-bottom: none; }
.pa-table tr:hover td { background: var(--c-surface-hover); }
.pa-status {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}