/* ═══════════════════════════════════════════════════════════════════════════
   PMS Drive · drive.css
   Un solo archivo con los dos temas. TODO lo que cambia de color entre la
   «Galería nocturna» (oscuro, maqueta a_marea) y «Blanca, cielo de mañana»
   (claro, maqueta clara_2) vive en los tokens de :root[data-theme]; el resto
   de la hoja sólo usa var(--…). Si un color no está acá arriba, no existe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── Constantes (no dependen del tema) ───────── */
:root{
  --tinta:#0F1729;            /* la tinta de la marca: texto sobre turquesa, formulario de entrada */
  --blanco:#FFFFFF;
  --f-display:'Outfit',system-ui,-apple-system,sans-serif;   /* títulos y números */
  --f-texto:'Inter',system-ui,-apple-system,sans-serif;      /* todo el texto */
  --f-marca:'Manrope',system-ui,-apple-system,sans-serif;    /* sólo el wordmark «PMS Drive» */
  --r:18px; --r-m:14px; --r-s:10px;
  /* El visor queda oscuro siempre, en los dos temas (decisión de la maqueta clara) */
  --visor-bg:#0C1324; --visor-pri-hover:#5EEAD4; --visor-texto:#EEF2F8; --visor-texto-2:rgba(238,242,248,.64);
  --visor-ctrl:rgba(255,255,255,.06); --visor-ctrl-borde:rgba(255,255,255,.12); --visor-ctrl-hover:rgba(255,255,255,.12);
  --visor-sombra:0 34px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  --visor-tira:linear-gradient(180deg,transparent,rgba(12,19,36,.9));
  /* El formulario de entrada va sobre blanco en los dos temas (opción 2, #p1b) */
  --lt-bg:#FFFFFF; --lt-texto:#0F1729; --lt-campo-bg:#F7F9FC; --lt-campo-borde:#E1E6EE;
  --lt-error-bg:#FEF2F2; --lt-error-fg:#B91C1C; --lt-error-borde:#FECACA;
  /* Chips sobre fotos (duración, extensión, puntos): siempre tinta translúcida */
  --chip-bg:rgba(15,23,41,.72); --chip-fg:#FFFFFF;
  --play-bg:rgba(15,23,41,.62); --play-borde:rgba(255,255,255,.28);
  /* Logo: la cinta de abajo cambia según el fondo (ver símbolos del sprite) */
  --logo-r3-a:#4F93DC; --logo-r3-b:#2A62A6;
}

/* ───────── Tema oscuro · «Galería nocturna» (por defecto) ───────── */
:root,:root[data-theme="oscuro"]{
  color-scheme:dark;
  --fondo:#0F1729; --fondo-2:#16213A; --fondo-3:#1E2B4A; --cielo:#1C2947;
  --texto:#EEF2F8; --texto-2:rgba(238,242,248,.64); --texto-3:rgba(238,242,248,.42);
  --linea:rgba(255,255,255,.07); --linea-2:rgba(255,255,255,.12);
  --turquesa:#2DD4BF; --turquesa-hondo:#2DD4BF; --turquesa-texto:#2DD4BF;
  --turquesa-suave:rgba(45,212,191,.14); --turquesa-halo:rgba(45,212,191,.32);
  --azul:#0EA5E9; --azul-hondo:#0276B1;
  --sol:#F59E0B; --sol-2:#FBBF24; --sol-texto:#FBBF24; --sol-suave:rgba(245,158,11,.14);
  --rojo:#F87171; --rojo-texto:#FCA5A5; --rojo-titulo:#FECACA; --rojo-solido:#DC2626; --rojo-solido-hover:#EF4444;
  --rojo-suave:rgba(248,113,113,.1); --rojo-suave-2:rgba(248,113,113,.18); --rojo-borde:rgba(248,113,113,.28);
  --pri-bg:#2DD4BF; --pri-fg:#0F1729; --pri-hover:#5EEAD4; --pri-sombra:0 8px 22px rgba(45,212,191,.22);
  --btn-bg:rgba(255,255,255,.04); --btn-hover:rgba(255,255,255,.09); --btn-borde:rgba(255,255,255,.12);
  --ghost-hover:rgba(255,255,255,.06);
  --campo-bg:rgba(255,255,255,.04); --campo-borde:rgba(255,255,255,.12); --campo-foco-bg:rgba(255,255,255,.04);
  --campo-foco-borde:rgba(45,212,191,.6); --campo-foco-halo:rgba(45,212,191,.14);
  --hero-bg:linear-gradient(150deg,#1C2947 0%,#131D36 62%); --hero-borde:rgba(255,255,255,.08);
  --hero-sombra:0 1px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 18px 44px rgba(0,0,0,.38);
  --hero-glow:radial-gradient(circle,rgba(14,165,233,.24) 0%,rgba(45,212,191,.10) 40%,transparent 68%);
  --tabs-bg:rgba(255,255,255,.04); --tabs-borde:rgba(255,255,255,.07);
  --tab-on-bg:rgba(45,212,191,.14); --tab-on-fg:#2DD4BF; --tab-on-sombra:none;
  --tab-n-bg:rgba(255,255,255,.08); --tab-n-fg:rgba(238,242,248,.64); --tab-on-n-bg:rgba(255,255,255,.08); --tab-on-n-fg:rgba(238,242,248,.64);
  --kpi-bg:rgba(255,255,255,.04); --kpi-borde:rgba(255,255,255,.07);
  --barra-bg:rgba(255,255,255,.08);
  --tarjeta-bg:#16213A; --tarjeta-borde:rgba(255,255,255,.07); --tarjeta-hover-bg:#1E2B4A; --tarjeta-hover-borde:rgba(255,255,255,.12); --tarjeta-hover-sombra:none;
  --flot-bg:#1F2C49; --flot-borde:rgba(255,255,255,.12); --flot-sombra:0 22px 54px rgba(0,0,0,.55); --flot-hover:rgba(255,255,255,.07);
  --panel-up-bg:#1A2541; --panel-up-cab:rgba(255,255,255,.02); --panel-up-sombra:0 26px 64px rgba(0,0,0,.6);
  --dots-bg:rgba(15,23,41,.62); --dots-fg:#FFFFFF; --dots-borde:rgba(255,255,255,.14); --dots-sombra:none; --dots-abierto:rgba(255,255,255,.14);
  --check-anillo:0 4px 12px rgba(0,0,0,.35);
  --sel-borde:#2DD4BF; --sel-sombra:0 0 0 2px rgba(45,212,191,.32),0 14px 34px rgba(0,0,0,.35);
  --selbar-borde:rgba(45,212,191,.4);
  --drop-borde:rgba(45,212,191,.32); --drop-bg:rgba(45,212,191,.03); --drop-ico:rgba(45,212,191,.6);
  --seg-bg:rgba(255,255,255,.04); --seg-on-bg:rgba(255,255,255,.1); --seg-on-sombra:none;
  --avatar-bg:linear-gradient(135deg,#2B3C63,#1A2541); --avatar-fg:#2DD4BF; --avatar-borde:rgba(255,255,255,.12);
  --th-bg:#1E2B4A; --th-doc-bg:linear-gradient(180deg,#1A2541,#141D34);
  --th-hoja:linear-gradient(180deg,#30426A,#2A3A5E); --th-hoja-sombra:0 10px 24px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.09) inset;
  --th-lineas:#7F93BF; --ext-fg:rgba(238,242,248,.64);
  --carpeta-1:#2A3B62; --carpeta-2:#3B5080; --carpeta-3:rgba(45,212,191,.35);
  --pill-bg:rgba(255,255,255,.06); --pill-fg:rgba(238,242,248,.64);
  --pill-ok-bg:rgba(45,212,191,.12); --pill-ok-fg:#2DD4BF; --pill-soon-bg:rgba(245,158,11,.14); --pill-soon-fg:#FBBF24;
  --pill-off-bg:rgba(248,113,113,.1); --pill-off-fg:#FCA5A5; --pill-role-bg:rgba(255,255,255,.06);
  --tabla-cab-bg:rgba(255,255,255,.015);
  --nota-bg:rgba(255,255,255,.03);
  --lost-bg:rgba(220,38,38,.07); --lost-borde:rgba(248,113,113,.22); --lost-ico-bg:rgba(220,38,38,.14);
  --velo:rgba(6,10,22,.72); --velo-drop:rgba(15,23,41,.82);
  --fab-bg:#2DD4BF; --fab-fg:#0F1729; --fab-sombra:0 14px 34px rgba(45,212,191,.35),0 2px 0 rgba(255,255,255,.3) inset;
  --toast-bg:#1F2C49; --toast-borde:rgba(255,255,255,.12);
  --login-art-bg:linear-gradient(160deg,#16213A 0%,#0F1729 60%); --login-art-borde:transparent;
  --login-fade:linear-gradient(180deg,rgba(15,23,41,0) 18%,rgba(15,23,41,.92) 58%,#0F1729 100%);
  --login-glow:radial-gradient(circle,rgba(14,165,233,.24) 0%,rgba(45,212,191,.10) 40%,transparent 68%);
  --login-eyebrow:#2DD4BF; --login-copy:#EEF2F8; --login-copy-2:rgba(238,242,248,.64); --login-punto:#2DD4BF;
  --mosaico-op:.92; --mosaico-sombra:0 20px 40px rgba(0,0,0,.4);
  --lt-texto-2:#3B4866; --lt-texto-3:#6B7A99; --lt-texto-4:#8A96AE;
  --login-pri-bg:#0F1729; --login-pri-fg:#FFFFFF; --login-pri-hover:#1A2541; --login-pri-sombra:0 10px 26px rgba(15,23,41,.22);
  --login-foco-borde:#0EA5E9; --login-foco-halo:rgba(14,165,233,.16);
  --m-login-bg:radial-gradient(circle at 50% -20%,rgba(14,165,233,.30),rgba(45,212,191,.08) 45%,transparent 70%),#0F1729;
  --m-card-sombra:0 -24px 60px rgba(0,0,0,.42); --m-card-borde:transparent; --m-login-titulo:#EEF2F8; --m-login-sub:rgba(238,242,248,.64);
  --logo-r3-a:#4F93DC; --logo-r3-b:#2A62A6;
}

/* ───────── Tema claro · «Blanca, cielo de mañana» ───────── */
:root[data-theme="claro"]{
  color-scheme:light;
  --fondo:#FFFFFF; --fondo-2:#F7F9FC; --fondo-3:#EEF3F8; --cielo:#E6F6FB;
  --texto:#0F1729; --texto-2:#4B5872; --texto-3:#5F6B80;
  --linea:#E8EDF3; --linea-2:#D9E1EA;
  --turquesa:#2DD4BF; --turquesa-hondo:#0D9488; --turquesa-texto:#0F766E;
  --turquesa-suave:rgba(45,212,191,.16); --turquesa-halo:rgba(45,212,191,.38);
  --azul:#0EA5E9; --azul-hondo:#0276B1;
  --sol:#F59E0B; --sol-2:#FBBF24; --sol-texto:#B45309; --sol-suave:rgba(245,158,11,.14);
  --rojo:#DC2626; --rojo-texto:#B91C1C; --rojo-titulo:#B91C1C; --rojo-solido:#DC2626; --rojo-solido-hover:#B91C1C;
  --rojo-suave:rgba(220,38,38,.07); --rojo-suave-2:rgba(220,38,38,.13); --rojo-borde:rgba(220,38,38,.24);
  --pri-bg:#0276B1; --pri-fg:#FFFFFF; --pri-hover:#0369A1; --pri-sombra:0 8px 22px rgba(2,118,177,.22);
  --btn-bg:#FFFFFF; --btn-hover:#EEF3F8; --btn-borde:#D9E1EA;
  --ghost-hover:rgba(15,23,41,.05);
  --campo-bg:#F7F9FC; --campo-borde:#D9E1EA; --campo-foco-bg:#FFFFFF;
  --campo-foco-borde:#0D9488; --campo-foco-halo:rgba(45,212,191,.24);
  --hero-bg:linear-gradient(160deg,#E6F6FB 0%,#F2FAFD 52%,#FFFFFF 100%); --hero-borde:#D8EAF2;
  --hero-sombra:0 1px 0 #FFFFFF inset;
  --hero-glow:radial-gradient(circle,rgba(45,212,191,.22) 0%,rgba(14,165,233,.09) 42%,transparent 68%);
  --tabs-bg:rgba(255,255,255,.66); --tabs-borde:#CFE4EE;
  --tab-on-bg:#0276B1; --tab-on-fg:#FFFFFF; --tab-on-sombra:0 3px 10px rgba(2,118,177,.26);
  --tab-n-bg:rgba(15,23,41,.07); --tab-n-fg:#4B5872; --tab-on-n-bg:rgba(255,255,255,.24); --tab-on-n-fg:#FFFFFF;
  --kpi-bg:rgba(255,255,255,.8); --kpi-borde:#D8EAF2;
  --barra-bg:rgba(15,23,41,.08);
  --tarjeta-bg:#FFFFFF; --tarjeta-borde:#E8EDF3; --tarjeta-hover-bg:#F7F9FC; --tarjeta-hover-borde:#D9E1EA; --tarjeta-hover-sombra:0 6px 18px rgba(15,23,41,.06);
  --flot-bg:#FFFFFF; --flot-borde:#D9E1EA; --flot-sombra:0 18px 48px rgba(15,23,41,.18),0 2px 6px rgba(15,23,41,.06); --flot-hover:#EEF3F8;
  --panel-up-bg:#FFFFFF; --panel-up-cab:#F7F9FC; --panel-up-sombra:0 24px 60px rgba(15,23,41,.22),0 2px 8px rgba(15,23,41,.08);
  --dots-bg:rgba(255,255,255,.88); --dots-fg:#0F1729; --dots-borde:rgba(15,23,41,.08); --dots-sombra:0 2px 8px rgba(15,23,41,.14); --dots-abierto:#FFFFFF;
  --check-anillo:0 0 0 2px #FFFFFF,0 4px 12px rgba(15,23,41,.18);
  --sel-borde:#0D9488; --sel-sombra:0 0 0 2px rgba(45,212,191,.38),0 12px 30px rgba(15,23,41,.10);
  --selbar-borde:rgba(13,148,136,.4);
  --drop-borde:rgba(13,148,136,.42); --drop-bg:rgba(45,212,191,.05); --drop-ico:#0D9488;
  --seg-bg:#F7F9FC; --seg-on-bg:#FFFFFF; --seg-on-sombra:0 1px 3px rgba(15,23,41,.14);
  --avatar-bg:linear-gradient(135deg,#E6F6FB,#D3EEF9); --avatar-fg:#0276B1; --avatar-borde:#C9E3EF;
  --th-bg:#EEF3F8; --th-doc-bg:linear-gradient(180deg,#EEF3F8,#E3EAF2);
  --th-hoja:linear-gradient(180deg,#FFFFFF,#F7F9FC); --th-hoja-sombra:0 8px 20px rgba(15,23,41,.12),0 0 0 1px #D9E1EA inset;
  --th-lineas:#B7C4D8; --ext-fg:rgba(255,255,255,.88);
  --carpeta-1:#3F80CF; --carpeta-2:#5B9BE0; --carpeta-3:rgba(255,255,255,.32);
  --pill-bg:rgba(15,23,41,.06); --pill-fg:#4B5872;
  --pill-ok-bg:rgba(45,212,191,.16); --pill-ok-fg:#0F766E; --pill-soon-bg:rgba(245,158,11,.14); --pill-soon-fg:#B45309;
  --pill-off-bg:rgba(220,38,38,.08); --pill-off-fg:#B91C1C; --pill-role-bg:rgba(15,23,41,.06);
  --tabla-cab-bg:#F7F9FC;
  --nota-bg:#F7F9FC;
  --lost-bg:rgba(220,38,38,.05); --lost-borde:rgba(220,38,38,.2); --lost-ico-bg:rgba(220,38,38,.1);
  --velo:rgba(15,23,41,.45); --velo-drop:rgba(247,251,253,.9);
  --fab-bg:#0276B1; --fab-fg:#FFFFFF; --fab-sombra:0 14px 34px rgba(2,118,177,.32),0 1px 0 rgba(255,255,255,.25) inset;
  --toast-bg:#FFFFFF; --toast-borde:#D9E1EA;
  --login-art-bg:linear-gradient(160deg,#E6F6FB 0%,#F3FAFD 58%,#FFFFFF 100%); --login-art-borde:#E8EDF3;
  --login-fade:linear-gradient(180deg,rgba(236,247,251,0) 16%,rgba(240,248,252,.94) 56%,#F7FBFD 100%);
  --login-glow:radial-gradient(circle,rgba(45,212,191,.22) 0%,rgba(14,165,233,.10) 40%,transparent 68%);
  --login-eyebrow:#0F766E; --login-copy:#0F1729; --login-copy-2:#4B5872; --login-punto:#0D9488;
  --mosaico-op:.96; --mosaico-sombra:0 18px 40px rgba(15,23,41,.16);
  --lt-texto-2:#4B5872; --lt-texto-3:#5F6B80; --lt-texto-4:#5F6B80;
  --login-pri-bg:#0276B1; --login-pri-fg:#FFFFFF; --login-pri-hover:#0369A1; --login-pri-sombra:0 8px 22px rgba(2,118,177,.22);
  --login-foco-borde:#0D9488; --login-foco-halo:rgba(45,212,191,.24);
  --m-login-bg:radial-gradient(circle at 50% -10%,rgba(14,165,233,.20),rgba(45,212,191,.08) 45%,transparent 72%),linear-gradient(180deg,#E6F6FB 0%,#F3FAFD 100%);
  --m-card-sombra:0 -16px 44px rgba(15,23,41,.10); --m-card-borde:#D8EAF2; --m-login-titulo:#0F1729; --m-login-sub:#4B5872;
  --logo-r3-a:#3F80CF; --logo-r3-b:#1F4F94;
}

/* ───────── Base ───────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%}
body{min-height:100%;background:var(--fondo);color:var(--texto);font:400 14px/1.45 var(--f-texto);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
input{outline:0}
img,svg,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--turquesa-hondo);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nw{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Logo: dos variantes del mismo símbolo; CSS muestra la que va según el tema */
.logo{width:30px;height:30px;flex:none}
:root[data-theme="claro"] .logo-d{display:none}
:root:not([data-theme="claro"]) .logo-l{display:none}
.logo-l.siempre{display:block!important}

/* Wordmark: Manrope, «PMS» 500 + «Drive» 700 */
.marca{font:500 15px var(--f-marca);letter-spacing:-.02em;white-space:nowrap}
.marca b{font-weight:700}

/* ───────── Barra de arriba ───────── */
#app{min-height:100vh;display:flex;flex-direction:column}
.appbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--linea);background:var(--fondo);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand small{color:var(--texto-3);font-size:12px;margin-left:6px;padding-left:12px;border-left:1px solid var(--linea-2);white-space:nowrap}
.who{display:flex;align-items:center;gap:12px;color:var(--texto-2);font-size:13px;position:relative}
.who .nombre{white-space:nowrap}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--avatar-bg);display:grid;place-items:center;font:600 12px var(--f-display);color:var(--avatar-fg);border:1px solid var(--avatar-borde);flex:none}
.page{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:22px 28px 110px;position:relative}

/* ───────── Hero con solapas y KPIs ───────── */
.hero{position:relative;overflow:hidden;border-radius:var(--r);padding:26px 28px 24px;background:var(--hero-bg);border:1px solid var(--hero-borde);box-shadow:var(--hero-sombra)}
.hero::before{content:"";position:absolute;z-index:0;width:560px;height:560px;right:-150px;top:-290px;background:var(--hero-glow);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.hero h1{font:600 30px/1.1 var(--f-display);letter-spacing:-.012em}
.hero-sub{color:var(--texto-2);font-size:13.5px;margin-top:6px}
.tabs{display:flex;gap:4px;background:var(--tabs-bg);padding:4px;border-radius:12px;border:1px solid var(--tabs-borde);flex:none}
.tab{padding:8px 14px;border-radius:9px;font:500 13.5px var(--f-texto);color:var(--texto-2);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .15s,color .15s}
.tab:hover{color:var(--texto)}
.tab.on{background:var(--tab-on-bg);color:var(--tab-on-fg);box-shadow:var(--tab-on-sombra)}
.tab-c{display:none}
.tab .n{font:600 11px var(--f-texto);padding:1px 6px;border-radius:99px;background:var(--tab-n-bg);color:var(--tab-n-fg)}
.tab.on .n{background:var(--tab-on-n-bg);color:var(--tab-on-n-fg)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.kpi{background:var(--kpi-bg);border:1px solid var(--kpi-borde);border-radius:var(--r-m);padding:14px 16px 15px;min-height:92px;min-width:0}
.k-label{display:block;font:500 11px var(--f-texto);letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3)}
.k-val{font:600 24px/1.1 var(--f-display);margin-top:7px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-val small{font:500 13px var(--f-texto);color:var(--texto-2);margin-left:2px}
.k-sub{font-size:12.5px;color:var(--texto-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-sub.warn{color:var(--sol-texto)}
.bar{position:relative;height:6px;border-radius:99px;background:var(--barra-bg);margin-top:12px;overflow:hidden}
.kpi .k-sub+.bar{margin-top:10px}
.bar.quota::after{content:"";position:absolute;left:var(--marca,80%);top:0;bottom:0;width:2px;border-radius:1px;background:var(--sol);opacity:.85}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--azul),var(--turquesa));transition:width .6s ease}
.bar i.hot{background:linear-gradient(90deg,var(--azul) 0%,var(--turquesa) 78%,var(--sol) 100%)}

/* ───────── Botones y campos ───────── */
.btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r-s);border:1px solid var(--btn-borde);background:var(--btn-bg);color:var(--texto);font:500 13.5px var(--f-texto);white-space:nowrap;transition:background .15s,border-color .15s;text-decoration:none}
.btn:hover{background:var(--btn-hover)}
.btn:disabled{opacity:.5}
.btn small{color:var(--texto-3);font-weight:500;font-size:12px}
.btn-pri{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent;font-weight:600;box-shadow:var(--pri-sombra)}
.btn-pri:hover{background:var(--pri-hover)}
.btn-pri small{color:inherit;opacity:.75}
.btn-ghost{background:transparent;border-color:transparent;color:var(--texto-2)}
.btn-ghost:hover{background:var(--ghost-hover);color:var(--texto)}
.btn-danger{background:var(--rojo-suave);color:var(--rojo-texto);border-color:var(--rojo-borde)}
.btn-danger:hover{background:var(--rojo-suave-2)}
.btn-danger-solid{background:var(--rojo-solido);color:var(--blanco);border-color:transparent;font-weight:600;box-shadow:0 8px 22px var(--rojo-borde)}
.btn-danger-solid:hover{background:var(--rojo-solido-hover)}
.btn-sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
.btn-sm svg.i{width:16px;height:16px}
.btn-icon{width:38px;padding:0;justify-content:center}
.btn-sm.btn-icon{width:32px}
.btn.cargando{pointer-events:none;opacity:.7}

.iw{position:relative}
.iw>svg.i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--texto-3);pointer-events:none}
.input{width:100%;height:40px;border-radius:var(--r-s);background:var(--campo-bg);border:1px solid var(--campo-borde);color:var(--texto);padding:0 12px;font-size:13.5px;transition:border-color .15s,box-shadow .15s}
.iw .input{padding-left:40px}
.input::placeholder{color:var(--texto-3)}
.input:focus{background:var(--campo-foco-bg);border-color:var(--campo-foco-borde);box-shadow:0 0 0 3px var(--campo-foco-halo)}
.input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;color:var(--texto-3);border-radius:8px}
.eye:hover{color:var(--texto)}
.field+.field{margin-top:16px}
.field label{display:block;font:500 12.5px var(--f-texto);color:var(--texto-2);margin-bottom:7px}
.field .input{height:46px;font-size:14.5px}
.field .ayuda{font-size:12px;color:var(--texto-3);margin-top:6px}
.field .ayuda.mal{color:var(--rojo-texto)}

/* ───────── Miniaturas ───────── */
.th{position:relative;overflow:hidden;background:var(--th-bg);border-radius:var(--r-s)}
.th img{width:100%;height:100%;object-fit:cover}
.th::before,.th::after{content:"";position:absolute}
/* Degradados de muestra (entrada y demo): las mismas «fotos» de la maqueta */
.th-mar{background:radial-gradient(circle at 63% 54%,#FFE3B0 0 4.5%,rgba(255,200,140,.55) 6%,transparent 10%),linear-gradient(180deg,#0E1A3D 0%,#3A3E7A 28%,#B9607A 46%,#F0A26E 56.5%,#17365F 57%,#0D2244 100%)}
.th-mar::before{left:6%;right:44%;top:54%;height:7%;background:linear-gradient(180deg,#0A1328 0 30%,transparent 30%),repeating-linear-gradient(90deg,#0A1328 0 1.6%,transparent 1.6% 12%)}
.th-mar::after{left:0;right:0;top:57%;bottom:0;background:repeating-linear-gradient(180deg,rgba(255,170,110,.18) 0 2px,transparent 2px 8px);opacity:.55}
.th-pileta{background:linear-gradient(180deg,#8CC6EC 0%,#C4E4F7 17%,#D9C8AC 17%,#CDB893 27%,#0A7E9E 27%,#0FB2CF 62%,#3FD3E6 100%)}
.th-pileta::before{left:8%;right:8%;top:27%;height:2px;background:rgba(255,255,255,.6)}
.th-pileta::after{left:0;right:0;top:27%;bottom:0;background:repeating-radial-gradient(ellipse at 45% 60%,rgba(255,255,255,.16) 0 2px,transparent 2px 16px)}
.th-fachada{background:linear-gradient(180deg,#0A1330 0%,#1A2A5E 60%,#2B3D74 100%)}
.th-fachada::after{left:15%;right:15%;top:16%;bottom:0;background:repeating-linear-gradient(0deg,#0C1738 0 9px,transparent 9px 20px),repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,214,140,.85) 9px 17px,transparent 17px 27px),#0C1738;border-radius:4px 4px 0 0}
.th-fachada::before{left:0;right:0;bottom:0;height:10%;background:#07102A;z-index:1}
.th-playa{background:radial-gradient(circle at 80% 20%,#FFF4CC 0 5%,rgba(255,235,170,.5) 7%,transparent 13%),linear-gradient(180deg,#5AA6E4 0%,#A8D3F3 46%,#2D7CB6 46%,#4396CB 58%,#EAD9B4 58%,#D9C397 100%)}
.th-playa::after{left:28%;top:50%;width:22%;height:13%;border-radius:100% 100% 0 0/100% 100% 0 0;background:repeating-linear-gradient(90deg,#F26B6B 0 14%,#FFF 14% 28%)}
.th-playa::before{left:38.5%;top:60%;width:1.4%;height:18%;background:#5A4634}
.th-noche{background:radial-gradient(circle at 50% 108%,rgba(245,158,11,.38),transparent 50%),radial-gradient(circle at 18% 28%,#fff 0 1px,transparent 2px),radial-gradient(circle at 72% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 88% 42%,rgba(255,255,255,.8) 0 1px,transparent 2px),radial-gradient(circle at 40% 12%,rgba(255,255,255,.8) 0 1px,transparent 2px),linear-gradient(180deg,#060C1E 0%,#0F1C3F 65%,#132B50 100%)}
.th-noche::after{left:22%;right:22%;top:40%;bottom:0;background:repeating-linear-gradient(0deg,#0A1430 0 7px,transparent 7px 15px),repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,224,160,.55) 10px 16px,transparent 16px 24px),#0A1430}
.th-habitacion{background:radial-gradient(circle at 22% 38%,rgba(255,214,150,.7) 0 6%,rgba(255,200,130,.25) 12%,transparent 24%),linear-gradient(180deg,#3B2E2C 0%,#5C463C 44%,#E8DCC8 44%,#F3EADB 50%,#C9B59A 50%,#7B5E48 58%,#3C2A22 100%)}
.th-habitacion::after{left:14%;top:50%;width:72%;height:9%;background:linear-gradient(180deg,#F7F1E6,#DDD0BC);border-radius:4px 4px 0 0}
.th-habitacion::before{left:10%;right:10%;top:58%;height:20%;background:#8B6A4E;border-radius:0 0 6px 6px}
.th-comedor{background:radial-gradient(circle at 20% 30%,rgba(255,200,120,.85) 0 3%,transparent 9%),radial-gradient(circle at 50% 24%,rgba(255,200,120,.85) 0 3%,transparent 9%),radial-gradient(circle at 80% 30%,rgba(255,200,120,.85) 0 3%,transparent 9%),linear-gradient(180deg,#2A1E18 0%,#4A3528 55%,#7A5C45 55%,#5A4030 100%)}
.th-comedor::after{left:0;right:0;top:55%;bottom:0;background:repeating-linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.22) 10% 18%,transparent 18% 25%)}
.th-foto{background-size:cover;background-position:center}
/* Hoja de documento: gris azulado con el contenido en el color del tipo */
.th-doc{background:var(--th-doc-bg)}
.th-doc::before{left:50%;top:14%;width:34%;height:72%;transform:translateX(-50%);background:var(--th-hoja);border-radius:5px;box-shadow:var(--th-hoja-sombra)}
.th-doc::after{left:39%;width:22%;top:34%;height:36%;background:repeating-linear-gradient(180deg,var(--th-lineas) 0 3px,transparent 3px 9px)}
.th-planilla::after{background:repeating-linear-gradient(180deg,var(--turquesa-hondo) 0 3px,transparent 3px 9px),repeating-linear-gradient(90deg,var(--turquesa-halo) 0 2px,transparent 2px 8px);opacity:.95}
.th-planilla .ext{color:var(--turquesa)}
.th-pdf::after{background:repeating-linear-gradient(180deg,var(--sol) 0 3px,transparent 3px 9px)}
.th-pdf .ext{color:var(--sol-2)}
.th-documento::after{background:repeating-linear-gradient(180deg,var(--azul) 0 3px,transparent 3px 9px)}
.th-video.th-doc::after,.th-audio.th-doc::after{background:none}
.th-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--th-lineas)}
.th-ico svg.i{width:38%;height:38%;min-width:22px;min-height:22px}
.th-folder{background:var(--th-doc-bg);display:grid;place-items:center}
.th-folder svg{width:46%;height:auto}
.play{position:absolute;inset:0;pointer-events:none}
.play::before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:var(--play-bg);border:1px solid var(--play-borde);backdrop-filter:blur(4px)}
.play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-32%,-50%);width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--blanco)}
.play.sm::before{width:22px;height:22px}.play.sm::after{border-width:4px 0 4px 7px}
.dur{position:absolute;right:8px;bottom:8px;font:600 11px var(--f-texto);padding:3px 7px;border-radius:6px;background:var(--chip-bg);color:var(--chip-fg);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ext{position:absolute;left:8px;bottom:8px;font:700 10px var(--f-texto);letter-spacing:.08em;padding:3px 7px;border-radius:6px;background:var(--chip-bg);color:var(--ext-fg);text-transform:uppercase}
svg.fico{width:36px;height:30px;flex:none}
/* Los trazos viven en el sprite (<symbol>): el selector tiene que ir sin .fico porque <use> clona fuera del árbol */
.c1{fill:var(--carpeta-1)}.c2{fill:var(--carpeta-2)}.c3{fill:var(--carpeta-3)}

/* ───────── Archivos: barra de herramientas, migas, carpetas, grilla ───────── */
.tools{display:flex;align-items:center;gap:10px;margin:20px 0 16px;flex-wrap:wrap}
.search{flex:0 1 400px;min-width:220px;position:relative}
.drop{flex:1 1 160px;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--drop-borde);border-radius:var(--r-s);color:var(--texto-3);font-size:12.5px;background:var(--drop-bg);white-space:nowrap;overflow:hidden}
.drop svg{color:var(--drop-ico)}
.seg{display:flex;background:var(--seg-bg);border:1px solid var(--btn-borde);border-radius:var(--r-s);padding:3px;gap:2px}
.seg button{width:32px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--texto-3)}
.seg button.on{background:var(--seg-on-bg);color:var(--texto);box-shadow:var(--seg-on-sombra)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--texto-2);margin-bottom:18px;flex-wrap:wrap}
.crumbs a:hover{color:var(--texto);text-decoration:underline}
.crumbs svg.i{width:14px;height:14px;color:var(--texto-3)}
.crumbs b{color:var(--texto);font-weight:600}
.crumbs .cm{color:var(--texto-3);margin-left:6px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px;font:600 11.5px var(--f-texto);letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3)}
.sec-h+.folders,.sec-h+.files{margin-bottom:22px}
.folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.folder{position:relative;background:var(--tarjeta-bg);border:1px solid var(--tarjeta-borde);border-radius:var(--r-m);padding:14px 14px 13px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,background .15s;min-width:0}
.folder:hover,.folder.sobre{border-color:var(--tarjeta-hover-borde);background:var(--tarjeta-hover-bg)}
.folder.sobre{box-shadow:0 0 0 2px var(--turquesa-halo)}
.folder>div{min-width:0}
.f-name{font:600 13.5px var(--f-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-meta{font-size:12px;color:var(--texto-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.f-meta span{white-space:nowrap}
.fdots{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--texto-2);opacity:0;transition:opacity .15s,background .15s}
.fdots:hover{background:var(--ghost-hover);color:var(--texto)}
.folder:hover .fdots,.fdots:focus-visible,.folder.menu-open .fdots{opacity:1}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.file{position:relative;background:var(--tarjeta-bg);border:1px solid var(--tarjeta-borde);border-radius:var(--r-m);padding:8px;transition:border-color .15s,box-shadow .15s;min-width:0}
.file:hover{border-color:var(--tarjeta-hover-borde);box-shadow:var(--tarjeta-hover-sombra)}
.file .th{aspect-ratio:16/10;border-radius:9px;cursor:pointer}
.file .f-body{padding:10px 6px 4px;min-width:0}
.file .f-name{cursor:pointer}
.file .f-meta{display:flex;gap:6px}
.file .f-acc{display:none}
.dots{position:absolute;right:14px;top:14px;width:28px;height:28px;border-radius:8px;background:var(--dots-bg);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--dots-fg);border:1px solid var(--dots-borde);box-shadow:var(--dots-sombra);transition:background .15s}
.dots svg.i{width:16px;height:16px}
.file.menu-open .dots,.dots[aria-expanded=true]{background:var(--dots-abierto)}
.file.sel{border-color:var(--sel-borde);box-shadow:var(--sel-sombra)}
.check{position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--dots-bg);color:transparent;display:grid;place-items:center;border:1px solid var(--dots-borde);opacity:0;transition:opacity .15s,background .15s}
.check svg.i{width:14px;height:14px;stroke-width:2.6}
.file:hover .check,.check:focus-visible,.files.seleccionando .check{opacity:1}
.file.sel .check{opacity:1;background:var(--turquesa);color:var(--tinta);border-color:transparent;box-shadow:var(--check-anillo)}
.f-name input{width:100%;height:28px;border-radius:7px;background:var(--campo-foco-bg);border:1px solid var(--campo-foco-borde);box-shadow:0 0 0 3px var(--campo-foco-halo);color:var(--texto);padding:0 8px;font:600 13.5px var(--f-texto)}
.vacio{padding:48px 20px;text-align:center;color:var(--texto-3);border:1.5px dashed var(--drop-borde);border-radius:var(--r-m);background:var(--drop-bg)}
.vacio b{display:block;color:var(--texto-2);font:600 15px var(--f-texto);margin-bottom:6px}
.cargando-lista{padding:40px;text-align:center;color:var(--texto-3)}

/* Vista lista (escritorio) y filas del celular: el mismo HTML de .file, otra grilla */
.files.lista{display:flex;flex-direction:column;gap:8px}
.files.lista .file{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px}
.files.lista .file .th{width:62px;height:46px;aspect-ratio:auto;border-radius:8px}
.files.lista .file .f-body{padding:0}
.files.lista .file .f-meta{white-space:normal;flex-wrap:wrap;row-gap:0}
.files.lista .file .f-acc{display:flex;gap:6px;align-items:center}
.files.lista .dots{position:static;background:transparent;border-color:transparent;color:var(--texto-2);box-shadow:none;width:32px;height:32px}
.files.lista .dots:hover{background:var(--ghost-hover);color:var(--texto)}
.files.lista .check{left:auto;right:auto;position:static;order:-1;opacity:1;margin-left:4px}
.files.lista .file{grid-template-columns:24px 62px minmax(0,1fr) auto}
.files.lista .file .f-acc .dots-in{display:grid}
/* En lista el ⋮ que flota sobre la miniatura sobra (ya está el de .f-acc) y, al volverse
   estático, ocupaba una celda de la grilla y tapaba «Administración» (prueba 31/10/2026). */
.files.lista .file > .dots{display:none}
.files.lista .play::before{width:22px;height:22px}.files.lista .play::after{border-width:4px 0 4px 7px}
.files.lista .dur,.files.lista .ext{display:none}

/* Resultados de búsqueda */
.buscar-res{position:absolute;left:0;right:0;top:46px;z-index:35;background:var(--flot-bg);border:1px solid var(--flot-borde);border-radius:12px;box-shadow:var(--flot-sombra);padding:6px;max-height:420px;overflow:auto}
.buscar-res .sec-h{padding:8px 10px 2px;margin:0}
.buscar-res a{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:8px;color:var(--texto);min-width:0}
.buscar-res a:hover,.buscar-res a.activo{background:var(--flot-hover)}
.buscar-res .th{width:40px;height:30px;border-radius:6px;flex:none}
.buscar-res .fico{width:28px;height:24px}
.buscar-res .nm{font:500 13px var(--f-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buscar-res .sb{font-size:11.5px;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buscar-res .nada{padding:14px;color:var(--texto-3);text-align:center;font-size:13px}

/* Menú ⋯ (se posiciona por JS, fijo a la pantalla, nunca tapa el nombre) */
.menu{position:fixed;z-index:50;background:var(--flot-bg);border:1px solid var(--flot-borde);border-radius:12px;padding:5px;min-width:190px;box-shadow:var(--flot-sombra)}
.menu button,.menu a{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--texto);width:100%;text-align:left}
.menu button:hover,.menu a:hover,.menu button:focus-visible{background:var(--flot-hover);outline:0}
.menu svg.i{width:16px;height:16px;color:var(--texto-2)}
.menu .danger,.menu .danger svg.i{color:var(--rojo)}
.menu hr{border:0;border-top:1px solid var(--linea);margin:4px 2px}
.menu .m-badge{margin-left:auto;font:600 11px var(--f-texto);padding:1px 7px;border-radius:99px;background:var(--pill-bg);color:var(--pill-fg)}

/* Barra de selección flotante */
.selbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--flot-bg);border:1px solid var(--selbar-borde);border-radius:14px;padding:8px 8px 8px 16px;display:flex;align-items:center;gap:8px;box-shadow:var(--flot-sombra);z-index:40;white-space:nowrap;max-width:calc(100vw - 24px)}
.selbar .s-n{font:600 13.5px var(--f-texto);margin-right:6px;display:flex;align-items:center;gap:10px;min-width:0}
.selbar .s-n i{width:22px;height:22px;border-radius:50%;background:var(--turquesa);color:var(--tinta);display:grid;place-items:center;font:600 12px var(--f-display);font-style:normal;flex:none}
.selbar .s-f{color:var(--texto-2);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.selbar .sep{width:1px;height:22px;background:var(--linea-2);margin:0 4px}

/* Velo de arrastrar y soltar */
.velo-drop{position:fixed;inset:0;z-index:70;background:var(--velo-drop);display:grid;place-items:center;padding:28px;backdrop-filter:blur(3px)}
.velo-drop>div{width:min(640px,100%);min-height:280px;border:2px dashed var(--turquesa-hondo);border-radius:var(--r);display:grid;place-items:center;text-align:center;color:var(--texto);padding:30px;background:var(--drop-bg)}
.velo-drop svg.i{width:46px;height:46px;color:var(--turquesa-hondo);margin:0 auto 12px}
.velo-drop h2{font:600 24px var(--f-display)}
.velo-drop p{color:var(--texto-2);margin-top:6px;font-size:14px}

/* ───────── Panel de subidas ───────── */
.uploader{position:fixed;right:22px;bottom:22px;width:420px;max-width:calc(100vw - 24px);background:var(--panel-up-bg);border:1px solid var(--flot-borde);border-radius:16px;box-shadow:var(--panel-up-sombra);overflow:hidden;z-index:45;display:flex;flex-direction:column;max-height:min(70vh,560px)}
.up-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--linea-2);background:var(--panel-up-cab);gap:10px}
.up-t{font:600 14px var(--f-texto);display:flex;align-items:center;gap:9px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--turquesa-hondo);box-shadow:0 0 0 0 var(--turquesa-halo);animation:pulse 1.6s ease-out infinite;flex:none}
.pulse.quieto{animation:none;background:var(--texto-3)}
.pulse.mal{animation:none;background:var(--rojo)}
@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.up-s{font-size:12.5px;color:var(--texto-2);margin-top:3px}
.up-actions{display:flex;gap:6px;flex:none}
.up-lista{overflow:auto;flex:1}
.up-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linea);align-items:center}
.up-item:last-child{border-bottom:0}
.up-ico{width:44px;height:44px;border-radius:9px}
.up-ico .ext{left:4px;bottom:4px;padding:2px 4px;font-size:8px}
.up-name{font:500 13.5px var(--f-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-meta{font-size:12px;color:var(--texto-2);margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-bar{height:4px;margin-top:8px}
.up-bar i{background:linear-gradient(90deg,var(--sol),var(--sol-2));transition:width .3s linear}
.up-note{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--turquesa-texto);margin-top:7px}
.up-note.mal{color:var(--rojo-texto)}
.up-note svg.i{width:13px;height:13px}
.up-der{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.up-pct{font:600 14px var(--f-display);font-variant-numeric:tabular-nums;color:var(--texto)}
.up-state{font:500 12.5px var(--f-texto);color:var(--texto-3);display:flex;gap:6px;align-items:center;white-space:nowrap}
.up-state.ok{color:var(--turquesa-texto)}
.up-state.mal{color:var(--rojo-texto)}
.up-state svg.i{width:15px;height:15px;stroke-width:2.4}
.up-item.queued .up-ico,.up-item.queued .up-name{opacity:.6}
.up-mini-acc{display:flex;gap:2px}
.up-mini-acc button{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--texto-3)}
.up-mini-acc button:hover{background:var(--ghost-hover);color:var(--texto)}
.up-mini-acc svg.i{width:14px;height:14px}
.up-aviso{padding:12px 16px;background:var(--sol-suave);color:var(--sol-texto);font-size:12.5px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--linea)}
.up-aviso svg.i{flex:none}
.up-aviso .btn{margin-left:auto}
.up-pill{position:fixed;right:22px;bottom:22px;z-index:45;height:44px;padding:0 16px 0 14px;border-radius:14px;background:var(--flot-bg);border:1px solid var(--flot-borde);box-shadow:var(--flot-sombra);display:flex;align-items:center;gap:10px;font:600 13px var(--f-texto);color:var(--texto)}
.up-pill .bar{width:80px;margin:0}

/* ───────── Visor ───────── */
.visor{position:fixed;inset:0;z-index:75;background:var(--visor-bg);color:var(--visor-texto);display:flex;flex-direction:column}
.v-top{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;min-height:72px;gap:16px}
.v-info{display:flex;align-items:center;gap:14px;min-width:0}
.v-name{font:600 15px var(--f-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-meta{font-size:12.5px;color:var(--visor-texto-2);margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-actions{display:flex;align-items:center;gap:8px;flex:none}
.v-count{font:500 13px var(--f-texto);color:var(--visor-texto-2);margin-right:8px;font-variant-numeric:tabular-nums}
.visor .btn{background:var(--visor-ctrl);border-color:var(--visor-ctrl-borde);color:var(--visor-texto)}
.visor .btn:hover{background:var(--visor-ctrl-hover)}
.visor .btn-pri{background:var(--turquesa);color:var(--tinta);border-color:transparent}
.visor .btn-pri:hover{background:var(--visor-pri-hover)}
.v-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:0 90px}
.v-stage video{min-width:min(100%,640px);background:var(--visor-bg)}
.v-stage img,.v-stage video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;box-shadow:var(--visor-sombra);object-fit:contain}
.v-stage iframe{width:100%;height:100%;border:0;border-radius:12px;background:var(--blanco);box-shadow:var(--visor-sombra)}
.v-stage .v-grad{width:min(100%,1000px);height:min(100%,540px);border-radius:14px;box-shadow:var(--visor-sombra)}
.v-stage .v-nada{text-align:center;color:var(--visor-texto-2)}
.v-stage .v-nada svg.i{width:56px;height:56px;margin:0 auto 14px;color:var(--visor-texto-2)}
.v-stage .v-nada b{display:block;color:var(--visor-texto);font:600 16px var(--f-texto);margin-bottom:6px}
.v-cargando{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--visor-texto-2);font-size:13px}
.v-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:var(--visor-ctrl);border:1px solid var(--visor-ctrl-borde);display:grid;place-items:center;color:var(--visor-texto);backdrop-filter:blur(6px);z-index:2}
.v-nav:hover{background:var(--visor-ctrl-hover)}
.v-nav:disabled{opacity:.3}
.v-nav.l{left:36px}.v-nav.r{right:36px}
.v-strip{height:104px;display:flex;gap:8px;justify-content:center;align-items:center;background:var(--visor-tira);padding:0 16px;overflow-x:auto;flex:none}
.v-strip .th{width:84px;height:56px;border-radius:7px;opacity:.55;flex:none;cursor:pointer;transition:opacity .15s}
.v-strip .th:hover{opacity:.85}
.v-strip .th.on{opacity:1;box-shadow:0 0 0 2px var(--turquesa)}
.v-strip .play::before{width:22px;height:22px}.v-strip .play::after{border-width:4px 0 4px 7px}
.v-strip .ext,.v-strip .dur{display:none}

/* ───────── Paneles y tablas (papelera, usuarios) ───────── */
.panel{background:var(--tarjeta-bg);border:1px solid var(--tarjeta-borde);border-radius:var(--r-m);overflow:hidden}
.panel+.panel{margin-top:16px}
.panel-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--linea);gap:14px;flex-wrap:wrap}
.panel-h h3{font:600 15px var(--f-texto)}
.panel-h p{font-size:12.5px;color:var(--texto-2);margin-top:2px}
.tabla-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font:600 11px var(--f-texto);letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);padding:10px 18px;border-bottom:1px solid var(--linea);background:var(--tabla-cab-bg);white-space:nowrap}
.table td{padding:12px 18px;border-bottom:1px solid var(--linea);vertical-align:middle;color:var(--texto-2);font-variant-numeric:tabular-nums}
.table tr:last-child td{border-bottom:0}
.table td:first-child,.table td.strong{color:var(--texto)}
.table .acts{text-align:right;white-space:nowrap}
.table .acts .btn{margin-left:6px}
.table tr.off td{opacity:.55}
.table .vacio-td{text-align:center;color:var(--texto-3);padding:36px 18px}
.cell{display:flex;align-items:center;gap:12px;min-width:0}
.cell .th{width:56px;height:40px;border-radius:7px;flex:none}
.cell .th .ext{left:4px;bottom:4px;padding:2px 5px;font-size:8px}
.cell .nm{font:600 13.5px var(--f-texto);color:var(--texto);word-break:break-word}
.cell .sb{font-size:12px;color:var(--texto-2);margin-top:2px}
.sb{white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--f-texto);padding:4px 9px;border-radius:99px;background:var(--pill-bg);color:var(--pill-fg);white-space:nowrap}
.pill svg.i{width:13px;height:13px}
.pill.soon{background:var(--pill-soon-bg);color:var(--pill-soon-fg)}
.pill.ok,.pill.me{background:var(--pill-ok-bg);color:var(--pill-ok-fg)}
.pill.role{background:var(--pill-role-bg);color:var(--texto)}
.pill.off{background:var(--pill-off-bg);color:var(--pill-off-fg)}
.pill.nuevo{background:var(--sol-suave);color:var(--sol-texto)}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-s);background:var(--nota-bg);border:1px solid var(--linea);font-size:13px;color:var(--texto-2);line-height:1.5}
.note svg.i{color:var(--texto-3);margin-top:1px}
.lost{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 18px;border-radius:var(--r-m);background:var(--lost-bg);border:1px solid var(--lost-borde);margin-top:16px;flex-wrap:wrap}
.lost .lost-l{display:flex;gap:14px;align-items:center;min-width:0}
.lost .ic{width:40px;height:40px;border-radius:11px;background:var(--lost-ico-bg);display:grid;place-items:center;color:var(--rojo-texto);flex:none}
.lost h4{font:600 14px var(--f-texto);color:var(--rojo-titulo)}
.lost p{font-size:12.5px;color:var(--texto-2);margin-top:3px}
.dev{display:flex;align-items:center;gap:10px;min-width:0}
.dev .ic{width:34px;height:34px;border-radius:9px;background:var(--pill-bg);display:grid;place-items:center;color:var(--texto-2);flex:none}
.dev .nm{font:600 13.5px var(--f-texto);color:var(--texto)}
.dev .sb{font-size:12px;color:var(--texto-2);margin-top:2px}

/* ───────── Diálogos ───────── */
.dlg-velo{position:fixed;inset:0;z-index:80;background:var(--velo);display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px);animation:aparecer .15s ease-out}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.dlg{width:min(480px,100%);background:var(--flot-bg);border:1px solid var(--flot-borde);border-radius:16px;box-shadow:var(--flot-sombra);display:flex;flex-direction:column;max-height:calc(100vh - 40px);animation:subir .18s ease-out}
.dlg.ancho{width:min(640px,100%)}
@keyframes subir{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.dlg-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 0}
.dlg-h h2{font:600 18px var(--f-display);letter-spacing:-.01em}
.dlg-h p{font-size:13px;color:var(--texto-2);margin-top:4px}
.dlg-b{padding:16px 18px;overflow:auto;font-size:13.5px;color:var(--texto-2);line-height:1.5}
.dlg-b b{color:var(--texto)}
.dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 18px;flex-wrap:wrap}
.dlg-f .izq{margin-right:auto}
.arbol{border:1px solid var(--linea-2);border-radius:var(--r-s);max-height:320px;overflow:auto;padding:6px;background:var(--campo-bg)}
.arbol ul{list-style:none;padding-left:18px}
.arbol>ul{padding-left:0}
.arbol li>div{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;color:var(--texto);cursor:pointer}
.arbol li>div:hover{background:var(--flot-hover)}
.arbol li>div.on{background:var(--turquesa-suave);color:var(--turquesa-texto)}
.arbol li>div.no{opacity:.4;cursor:not-allowed}
.arbol .flecha{width:20px;height:20px;display:grid;place-items:center;color:var(--texto-3);border-radius:5px;flex:none}
.arbol .flecha:hover{background:var(--ghost-hover)}
.arbol .flecha.abierta svg{transform:rotate(90deg)}
.arbol .flecha.hoja{visibility:hidden}
.arbol .fico{width:22px;height:18px}
.arbol .cargando{color:var(--texto-3);font-size:12px;padding:4px 8px 4px 34px}
.versiones{list-style:none;display:flex;flex-direction:column;gap:8px}
.versiones li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--r-s);background:var(--campo-bg)}
.versiones li.actual{border-color:var(--turquesa-halo)}
.versiones .nm{font:600 13px var(--f-texto);color:var(--texto)}
.versiones .sb{font-size:12px;color:var(--texto-2);margin-top:2px}
.versiones .acc{margin-left:auto;display:flex;gap:6px}
.claves{display:grid;gap:12px;margin-top:6px}
.clave{padding:14px 16px;border-radius:var(--r-s);background:var(--campo-bg);border:1px solid var(--linea-2)}
.clave .k-label{margin-bottom:6px}
.clave code{font:600 28px/1.1 var(--f-display);letter-spacing:.08em;color:var(--texto);font-variant-numeric:tabular-nums;user-select:all;display:block;word-break:break-all}

/* ───────── Toasts ───────── */
.toasts{position:fixed;right:22px;top:72px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:12px;background:var(--toast-bg);border:1px solid var(--toast-borde);box-shadow:var(--flot-sombra);color:var(--texto);font-size:13.5px;max-width:min(420px,calc(100vw - 44px));animation:subir .18s ease-out}
.toast.mal{border-color:var(--rojo-borde)}
.toast.mal svg.i{color:var(--rojo)}
.toast.ok svg.i{color:var(--turquesa-texto)}
.toast svg.i{flex:none}
.toast .btn{flex:none}
.toast .cerrar{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--texto-3);flex:none}
.toast .cerrar:hover{background:var(--ghost-hover);color:var(--texto)}

/* ───────── Tema: botón y popover ───────── */
.tema-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--texto-2);border:1px solid transparent}
.tema-btn:hover{background:var(--ghost-hover);color:var(--texto)}
.tema-btn[aria-expanded=true]{background:var(--ghost-hover);color:var(--texto);border-color:var(--linea-2)}
.pop{position:absolute;right:0;top:44px;z-index:60;width:260px;background:var(--flot-bg);border:1px solid var(--flot-borde);border-radius:14px;box-shadow:var(--flot-sombra);padding:8px;animation:subir .15s ease-out}
.pop h3{font:600 11px var(--f-texto);letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);padding:6px 10px 8px}
.pop-op{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;color:var(--texto);font-size:13.5px;text-align:left}
.pop-op:hover{background:var(--flot-hover)}
.pop-op svg.i{width:17px;height:17px;color:var(--texto-2)}
.pop-op .tick{margin-left:auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--linea-2);display:grid;place-items:center;color:transparent}
.pop-op[aria-checked=true] .tick{background:var(--turquesa);border-color:transparent;color:var(--tinta)}
.pop-op .tick svg.i{width:11px;height:11px;stroke-width:3;color:inherit}
.pop-horas{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px 6px;border-top:1px solid var(--linea);margin-top:6px}
.pop-horas label{font:500 11.5px var(--f-texto);color:var(--texto-3);display:block;margin-bottom:4px}
.pop-horas input{width:100%;height:34px;border-radius:8px;background:var(--campo-bg);border:1px solid var(--campo-borde);color:var(--texto);padding:0 8px;font-size:13px;font-variant-numeric:tabular-nums}
.pop-horas input:focus{border-color:var(--campo-foco-borde);box-shadow:0 0 0 3px var(--campo-foco-halo)}
.pop-horas p{grid-column:1/-1;font-size:11.5px;color:var(--texto-3);margin-top:2px}

/* ───────── Celular: «Subir» flotante ───────── */
.fab{display:none;position:fixed;right:18px;bottom:26px;height:52px;padding:0 20px 0 16px;border-radius:16px;background:var(--fab-bg);color:var(--fab-fg);font:600 14.5px var(--f-texto);gap:8px;align-items:center;box-shadow:var(--fab-sombra);z-index:38}
.fab svg.i{stroke-width:2.2}

/* ═══════════ Entrada (login y cambiar clave) ═══════════ */
.login{display:grid;grid-template-columns:1.22fr 1fr;min-height:100vh;background:var(--fondo);color:var(--texto)}
.login-art{position:relative;overflow:hidden;background:var(--login-art-bg);border-right:1px solid var(--login-art-borde)}
.login-art .glow{position:absolute;width:620px;height:620px;right:-200px;top:-320px;background:var(--login-glow);z-index:1}
.mosaic{position:absolute;left:-40px;top:-30px;right:-40px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-4deg);opacity:var(--mosaico-op)}
.mosaic .th{aspect-ratio:4/3;border-radius:14px;box-shadow:var(--mosaico-sombra)}
.login-art .fade{position:absolute;inset:0;background:var(--login-fade);z-index:1}
.login-copy{position:absolute;left:52px;right:52px;bottom:52px;z-index:2;color:var(--login-copy)}
.eyebrow{font:600 11px var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--login-eyebrow)}
.login-copy h2{font:600 36px/1.12 var(--f-display);letter-spacing:-.018em;margin-top:14px;max-width:560px}
.login-copy ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:9px;color:var(--login-copy-2);font-size:14px}
.login-copy li{display:flex;gap:12px;align-items:center}
.login-copy li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--login-punto);flex:none}
/* El formulario va sobre blanco en los dos temas */
.login-form{display:flex;flex-direction:column;justify-content:center;padding:56px 76px 80px;position:relative;background:var(--lt-bg);color:var(--lt-texto)}
.brand-big{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.brand-big .logo{width:84px;height:84px}
.brand-big h1{font:700 30px/1.05 var(--f-marca);letter-spacing:-.025em}
.brand-big h1 span{font-weight:500}
.brand-big .hotel{color:var(--lt-texto-3);font:500 14px var(--f-display);margin-top:5px;letter-spacing:.03em}
.form{margin-top:34px}
.login-form .field label{color:var(--lt-texto-2)}
.login-form .input{background:var(--lt-campo-bg);border-color:var(--lt-campo-borde);color:var(--lt-texto)}
.login-form .input::placeholder{color:var(--lt-texto-4)}
.login-form .iw>svg.i,.login-form .eye{color:var(--lt-texto-4)}
.login-form .input:focus{border-color:var(--login-foco-borde);box-shadow:0 0 0 3px var(--login-foco-halo);background:var(--lt-bg)}
.login-form .btn-pri{width:100%;height:48px;margin-top:24px;font-size:15px;border-radius:12px;justify-content:center;background:var(--login-pri-bg);color:var(--login-pri-fg);box-shadow:var(--login-pri-sombra)}
.login-form .btn-pri:hover{background:var(--login-pri-hover)}
.login-form .btn-pri:focus-visible{outline-color:var(--login-foco-borde)}
.hint{color:var(--lt-texto-3);font-size:12.5px;text-align:center;margin-top:16px}
.foot{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:var(--lt-texto-4);font-size:12px}
.foot b{color:var(--lt-texto-2);font-weight:600}
.error-caja{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-s);background:var(--lt-error-bg);color:var(--lt-error-fg);border:1px solid var(--lt-error-borde);font-size:13px;line-height:1.45;margin-top:22px}
.error-caja svg.i{flex:none;margin-top:1px}
.tema-chico{position:fixed;right:18px;bottom:18px;z-index:5;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg);border:1px solid var(--btn-borde);color:var(--texto-2);box-shadow:var(--flot-sombra)}
.tema-chico:hover{color:var(--texto);background:var(--btn-hover)}
/* En escritorio cae sobre el formulario blanco: se viste con los colores de la tarjeta */
@media (min-width:641px){.tema-chico{background:var(--lt-campo-bg);border-color:var(--lt-campo-borde);color:var(--lt-texto-3);box-shadow:none}.tema-chico:hover{background:var(--lt-bg);color:var(--lt-texto)}}
.tema-chico svg.i{width:17px;height:17px}
:root[data-theme="claro"] .tema-chico .luna{display:none}
:root:not([data-theme="claro"]) .tema-chico .sol{display:none}
/* En celular: cabecera con el logo y tarjeta blanca que sube desde abajo */
.m-top{display:none}

/* ═══════════ Celular (≤ 640 px) ═══════════ */
@media (max-width:640px){
  .appbar{padding:0 14px;height:52px}
  .brand small,.who .nombre,.who .salir-txt{display:none}
  .who{gap:6px}
  .avatar{width:28px;height:28px}
  .page{padding:14px 14px 120px}
  .hero{padding:18px 16px 16px;border-radius:16px}
  .hero-top{flex-direction:column;gap:14px}
  .hero h1{font-size:24px}
  .hero-sub{font-size:12.5px;margin-top:3px}
  .tabs{width:100%;padding:3px}
  .tab{padding:7px 8px;font-size:12.5px;flex:1;justify-content:center;gap:5px}
  .tab-l{display:none}.tab-c{display:inline}
  .page{overflow-x:clip}
  /* Hero compacto: el primer KPI ancho con su barra; los otros tres en una fila, sólo el número */
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
  .kpi{padding:10px 12px 11px;min-height:0}
  .kpi:first-child{grid-column:1/-1}
  .kpi:not(:first-child) .k-sub{display:none}
  .kpi:not(:first-child) .k-val{font-size:17px;margin-top:5px}
  .kpi:not(:first-child) .k-label{font-size:10px;letter-spacing:.07em}
  .k-val{font-size:20px}
  .k-sub{font-size:12px}
  .tools{gap:8px;margin:14px 0 12px}
  .search{flex:1 1 0;min-width:0}
  .tools .input{height:42px}
  .drop,.seg,.tools .txt-btn{display:none}
  .tools .btn-subir{display:none}
  .tools .btn.icon-m{width:42px;height:42px;padding:0;justify-content:center}
  .tools .btn.icon-m span{display:none}
  .fab{display:flex}
  .crumbs{margin-bottom:14px;font-size:12.5px}
  .crumbs .cm{display:none}
  .folders{grid-template-columns:1fr 1fr;gap:10px}
  .folder{flex-direction:row;align-items:center;padding:10px 12px;gap:10px}
  .folder .fico{width:26px;height:22px}
  .folder .f-meta{margin-top:1px}
  .fdots{opacity:1;right:4px;top:50%;transform:translateY(-50%)}
  .folder .f-name{padding-right:22px}
  /* Archivos: siempre en lista con botón de bajar */
  .files{display:flex;flex-direction:column;gap:8px}
  .files .file{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px}
  .files .file .th{width:62px;height:46px;aspect-ratio:auto;border-radius:8px}
  .files .file .f-body{padding:0}
  .files .file .f-meta{white-space:normal;flex-wrap:wrap;row-gap:0}
  .files .file .f-acc{display:flex;gap:2px;align-items:center}
  .files .dots{position:static;background:transparent;border-color:transparent;color:var(--texto-2);box-shadow:none;width:32px;height:32px}
  .files .check{position:absolute;left:4px;top:4px;width:20px;height:20px}
  .files .check svg.i{width:12px;height:12px}
  .files .play::before{width:22px;height:22px}.files .play::after{border-width:4px 0 4px 7px}
  .files .dur,.files .ext{display:none}
  .files.lista .file{grid-template-columns:62px minmax(0,1fr) auto}
  .files.lista .check{position:absolute;order:0;margin:0}
  .files .file > .dots{display:none}
  .selbar{left:12px;right:12px;bottom:12px;transform:none;flex-wrap:wrap;padding:10px 12px;white-space:normal;max-width:none}
  .selbar .s-f{display:none}
  .selbar .sep{display:none}
  .uploader{right:0;left:0;bottom:0;width:100%;max-width:none;border-radius:18px 18px 0 0;max-height:60vh}
  .up-pill{right:auto;left:14px;bottom:30px;max-width:calc(100vw - 160px)}
  .up-pill .bar{width:44px}
  .toasts{right:12px;left:12px;top:62px;align-items:stretch}
  .toast{max-width:none}
  .v-top{padding:12px 14px;flex-wrap:wrap}
  .v-actions{width:100%;justify-content:flex-end}
  .v-count{margin-right:auto}
  .v-stage{padding:0 12px}
  .v-nav{display:none}
  .v-strip{height:72px}
  .v-strip .th{width:60px;height:42px}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border-bottom:1px solid var(--linea);padding:6px 0}
  .table td{padding:6px 14px;border:0}
  .table .acts{text-align:left;display:flex;gap:6px;flex-wrap:wrap;padding-bottom:12px}
  .table .acts .btn{margin:0}
  .table td[data-l]::before{content:attr(data-l);display:block;font:600 10.5px var(--f-texto);letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);margin-bottom:2px}
  .lost{flex-direction:column;align-items:stretch}
  .dlg-velo{padding:0;align-items:end}
  .dlg{width:100%;border-radius:18px 18px 0 0;max-height:92vh}
  .velo-drop{display:none}
  .pop{right:-40px}
  /* Entrada en celular: cabecera con el logo y tarjeta blanca que sube desde abajo */
  .login{display:flex;flex-direction:column;min-height:100vh;background:var(--m-login-bg)}
  .login-art{display:none}
  .m-top{display:flex;justify-content:center;padding:34px 28px 38px}
  .m-top .brand-big{align-items:center;text-align:center;gap:16px}
  .m-top .brand-big .logo{width:92px;height:92px}
  .m-top .brand-big h1{color:var(--m-login-titulo)}
  .m-top .brand-big .hotel{color:var(--m-login-sub)}
  .login-form{flex:1;border-radius:30px 30px 0 0;padding:30px 24px 92px;box-shadow:var(--m-card-sombra);border-top:1px solid var(--m-card-borde);justify-content:flex-start}
  .login-form>.brand-big{display:none}
  .form{margin-top:0}
  .foot{bottom:30px}
  .tema-chico{bottom:auto;top:14px;right:14px;box-shadow:none;background:transparent;border-color:transparent;color:var(--m-login-sub)}
}
@media (min-width:641px) and (max-width:1024px){
  .kpis{grid-template-columns:1fr 1fr}
  .hero-top{flex-direction:column;gap:16px}
  .login{grid-template-columns:1fr 1fr}
  .login-form{padding:48px 44px 80px}
  .login-copy{left:36px;right:36px;bottom:36px}
  .login-copy h2{font-size:28px}
}
@media (max-width:900px){
  .files.lista .file{grid-template-columns:24px 62px minmax(0,1fr) auto}
}