/**
 * theme-dark.css
 * -----------------------------------------------------------------------
 * TEMA FUTURISTA OSCURO — compartido por todas las páginas de la app.
 *
 * Nació como un bloque <style> exclusivo de index.html ("tema futurista")
 * y se extrajo acá para que files/settings/users/activity/doc-editor usen
 * exactamente la misma piel sin duplicar reglas.
 *
 * Cómo funciona (importante para editarlo):
 *   1. Primero REDEFINE los tokens de shared.css (--surface, --bg,
 *      --on-surface, --outline, --primary, tintes de rol...) a la paleta
 *      oscura. Con eso solo, todo lo que ya usaba var(--token) se vuelve
 *      oscuro sin tocar una línea de las páginas.
 *   2. Después sobrescribe los componentes que tenían colores claros
 *      HARDCODEADOS (#E5F0FA, #fff, #B9C9D9...), que los tokens no
 *      alcanzan a cubrir.
 *
 * Por eso el <link> a este archivo va DESPUÉS del <style> propio de cada
 * página: así gana el desempate de la cascada a igual especificidad.
 *
 * Paleta: vidrio azul profundo translúcido (NO negro) + cuatro acentos
 * (cian, ámbar, violeta, menta) para que no se sienta monocromo.
 * -----------------------------------------------------------------------
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  color-scheme: dark;

  /* Acentos como triplete RGB, para poder modular la opacidad con rgba() */
  --c-cyan:   99,200,255;
  --c-amber:  255,183,105;
  --c-violet: 191,150,255;
  --c-mint:   106,226,190;

  --fx-ink:     #ECF3FB;
  --fx-ink-dim: #A9BAD0;
  --fx-ink-mut: #7488A6;

  /* Vidrio base: azul profundo translúcido */
  --fx-panel:   linear-gradient(155deg, rgba(18,32,56,.58), rgba(16,38,60,.44));
  --fx-panel-2: linear-gradient(160deg, rgba(20,32,55,.90), rgba(17,28,48,.88));
  --fx-deep:    #0c1a2e;
  --fx-deep-2:  #0a1526;

  /* ---- Re-mapeo de los tokens de shared.css a la paleta oscura ---- */
  --primary:      #1E9BE0;
  --primary-dark: #1478B8;
  --primary-tint: rgba(99,200,255,.14);
  --accent:       #FFB769;
  --accent-dark:  #E89B45;
  --accent-tint:  rgba(255,183,105,.14);

  --surface: #142238;   /* opaco: para lo que no puede ser vidrio */
  --bg:      #0c1a2e;

  --on-surface:     #ECF3FB;
  --on-surface-var: #A9BAD0;
  --outline:        rgba(99,200,255,.18);

  /* Roles: versiones luminosas, legibles sobre fondo oscuro */
  --admin:       #FF8A8A;
  --admin-tint:  rgba(255,138,138,.14);
  --editor:      #6AE2BE;
  --editor-tint: rgba(106,226,190,.14);
  --lector:      #BF96FF;
  --lector-tint: rgba(191,150,255,.14);

  /* Tipos de archivo: subidos de luminosidad para contrastar en oscuro */
  --pdf:  #E05263;
  --docx: #17A594;
  --xlsx: #22A86B;
  --img:  #E14D8A;
  --folder:      #FFB769;
  --folder-tint: rgba(255,183,105,.14);

  /* Sombras: en oscuro la profundidad la da la sombra negra, no el azul */
  --e1: 0 1px 2px rgba(0,0,0,.40), 0 2px 10px -6px rgba(0,0,0,.55);
  --e2: 0 4px 18px -8px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.40);
  --e3: 0 24px 56px -22px rgba(0,0,0,.78), 0 2px 8px rgba(0,0,0,.45);
}

/* ==========================================================================
   2. FONDO GLOBAL — halos de color + retícula técnica
   ========================================================================== */
body{
  background:var(--fx-deep);
  color:var(--fx-ink);
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(680px circle at 8% 10%,  rgba(var(--c-cyan),.16),  transparent 60%),
    radial-gradient(520px circle at 94% 6%,  rgba(var(--c-amber),.14), transparent 55%),
    radial-gradient(600px circle at 78% 88%, rgba(var(--c-violet),.13),transparent 60%),
    radial-gradient(680px circle at 20% 100%,rgba(var(--c-mint),.10),  transparent 60%),
    linear-gradient(rgba(140,200,255,.04) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(140,200,255,.04) 1px, transparent 1px) 0 0 / 48px 100%,
    var(--fx-deep);
}

/* Scrollbars al tono del tema (WebKit + Firefox) */
*{scrollbar-color:rgba(99,200,255,.28) transparent;scrollbar-width:thin;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(99,200,255,.22);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(99,200,255,.42);border:2px solid transparent;background-clip:content-box;}

::selection{background:rgba(99,200,255,.3);color:#ECF3FB;}

/* ==========================================================================
   3. APP BAR — vidrio azulado + hilo de luz
   ========================================================================== */
.appbar{
  background:linear-gradient(180deg, rgba(12,24,44,.86), rgba(12,24,44,.52));
  backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);
  border-bottom:1px solid rgba(var(--c-cyan),.28);
  box-shadow:0 1px 0 rgba(var(--c-violet),.12), 0 16px 40px -24px rgba(0,0,0,.7);
}
.appbar h1{
  font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fx-ink);
}
.appbar .logo{
  border-radius:9px;color:#bfe6ff;
  background:linear-gradient(135deg,#0d3358,#12608f 55%,#1c5a86);
  box-shadow:0 0 0 1px rgba(var(--c-cyan),.4), 0 0 16px rgba(var(--c-cyan),.4), inset 0 0 10px rgba(var(--c-cyan),.25);
}

/* Indicador de conexión (files.html) */
.conn{color:var(--fx-ink-dim);}
.conn .dot.ok{background:rgb(var(--c-mint));box-shadow:0 0 8px rgba(var(--c-mint),.8);}
.conn .dot.error{background:var(--admin);box-shadow:0 0 8px rgba(255,138,138,.8);}

/* ==========================================================================
   4. NAVEGACIÓN Y SESIÓN
   ========================================================================== */
.navlinks a{color:var(--fx-ink-dim);}
.navlinks a:hover{background:rgba(var(--c-cyan),.14);color:var(--fx-ink);}
.navlinks a.current{
  background:linear-gradient(135deg,#1180cf,#0c5fa6);color:#fff;
  box-shadow:0 0 12px -2px rgba(var(--c-cyan),.6);
}

.nav-toggle{color:var(--fx-ink-dim);}
.nav-toggle:hover{background:rgba(var(--c-cyan),.14);color:var(--fx-ink);}
@media (max-width:760px){
  /* Fondo casi opaco (no el --fx-panel-2 translúcido que usan diálogos y
     tarjetas): el menú flota directo sobre el contenido de la página, sin
     un overlay oscuro detrás que lo separe, así que con solo un 85-90% de
     opacidad el texto de atrás se seguía transparentando (difuminado,
     pero visible) a través de los renglones vacíos entre links. */
  .nav-menu{
    background:linear-gradient(160deg, rgba(16,28,48,.97), rgba(12,20,38,.97));
    backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid rgba(var(--c-cyan),.22);border-top:none;
    box-shadow:0 24px 60px -28px rgba(0,0,0,.75);
  }
}

.user-badge{background:rgba(var(--c-mint),.12);border:1px solid rgba(var(--c-mint),.28);}
.role-dot{box-shadow:0 0 8px rgba(var(--c-amber),.7);}
.user-badge-text span:first-child{color:var(--fx-ink);}
.user-badge-text span:last-child{color:var(--fx-ink-dim);}
.logout-btn{color:var(--fx-ink-dim);}
.logout-btn:hover{background:rgba(var(--c-amber),.16);color:var(--fx-ink);}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */
.btn-filled{
  background:linear-gradient(135deg,#1180cf,#0c5fa6 60%,#155f97);
  border-color:rgba(var(--c-cyan),.5);color:#fff;
  box-shadow:0 0 0 1px rgba(var(--c-cyan),.2), 0 6px 20px -6px rgba(var(--c-cyan),.5);
}
.btn-filled:hover{
  background:linear-gradient(135deg,#189add,#1070b6 60%,#1a72ad);border-color:rgb(var(--c-cyan));
  box-shadow:0 0 0 1px rgb(var(--c-cyan)), 0 8px 26px -6px rgba(var(--c-cyan),.6);
}
.btn-outline{background:transparent;color:rgb(var(--c-cyan));border-color:rgba(var(--c-cyan),.45);}
.btn-outline:hover{background:rgba(var(--c-cyan),.14);border-color:rgb(var(--c-cyan));color:var(--fx-ink);}
.btn:disabled{
  background:rgba(120,150,190,.10);color:var(--fx-ink-mut);
  border-color:rgba(120,150,190,.14);cursor:not-allowed;transform:none;box-shadow:none;
}

/* ==========================================================================
   6. TARJETAS / PANELES GENÉRICOS (settings, users, activity, files)
   ========================================================================== */
.card{
  background:var(--fx-panel);
  backdrop-filter:blur(13px) saturate(1.25);-webkit-backdrop-filter:blur(13px) saturate(1.25);
  border:1px solid rgba(var(--c-cyan),.18);
  color:var(--fx-ink);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.7);
}
.card h3{color:var(--fx-ink);}
.card .sub{color:var(--fx-ink-dim);}

/* ==========================================================================
   7. LOGIN (pantalla y modal) + CAMPO DE API
   ========================================================================== */
.login-card{
  background:var(--fx-panel-2);
  border:1px solid rgba(var(--c-violet),.32);color:var(--fx-ink);
  box-shadow:0 36px 84px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(var(--c-violet),.12);
}
.login-card h2{color:var(--fx-ink);font-weight:600;}
.login-sub, .login-hint{color:var(--fx-ink-dim);}
.login-card label{color:var(--fx-ink-dim);}
.login-card input{
  background:rgba(9,17,32,.5);border:1.5px solid rgba(var(--c-cyan),.28);color:var(--fx-ink);
}
.login-card input::placeholder{color:var(--fx-ink-mut);}
.login-card input:focus{border-color:rgb(var(--c-cyan));box-shadow:0 0 0 3px rgba(var(--c-cyan),.16);}
.login-card .logo{
  background:linear-gradient(135deg,#12608f,#7a49b8);color:#eaf3fb;
  box-shadow:0 0 0 1px rgba(var(--c-violet),.4), 0 0 22px rgba(var(--c-violet),.4);
}
.login-error{
  background:rgba(255,138,138,.14);color:var(--admin);
  border:1px solid rgba(255,138,138,.3);
}

/* ==========================================================================
   8. FORMULARIOS (campos de settings, users, filtros, nuevo usuario)
   ========================================================================== */
.field input,
.new-user-form input, .new-user-form select,
.filter-field input, .filter-field select,
.users-table select, .user-row select{
  background:rgba(9,17,32,.5);
  border:1.5px solid rgba(var(--c-cyan),.24);
  color:var(--fx-ink);
}
.field input::placeholder,
.new-user-form input::placeholder{color:var(--fx-ink-mut);}
.field input:focus,
.new-user-form input:focus, .new-user-form select:focus,
.filter-field input:focus, .filter-field select:focus{
  border-color:rgb(var(--c-cyan));box-shadow:0 0 0 3px rgba(var(--c-cyan),.16);outline:none;
}
.field label, .field .help,
.new-user-form label, .filter-field label{color:var(--fx-ink-dim);}

/* Las <option> las pinta el sistema: sin esto quedan blancas en algunos SO */
select option{background:#142238;color:#ECF3FB;}

/* Mensajes de estado (settings, doc-editor) */
.status-msg.ok{background:rgba(var(--c-mint),.13);color:rgb(var(--c-mint));border:1px solid rgba(var(--c-mint),.28);}
.status-msg.error{background:rgba(255,138,138,.13);color:var(--admin);border:1px solid rgba(255,138,138,.3);}

/* Instrucciones paso a paso (settings) */
.steps{color:var(--fx-ink-dim);}
.steps code{background:rgba(var(--c-cyan),.13);color:rgb(var(--c-cyan));border:1px solid rgba(var(--c-cyan),.2);}
.steps a{color:rgb(var(--c-amber));}

/* ==========================================================================
   9. TABLAS (users.html, activity.html)
   ========================================================================== */
.users-table th, .activity-table th{
  color:var(--fx-ink-dim);border-bottom:2px solid rgba(var(--c-cyan),.24);
}
.users-table td, .activity-table td{
  color:var(--fx-ink);border-bottom:1px solid rgba(var(--c-cyan),.12);
}
.users-table tbody tr:hover td, .activity-table tbody tr:hover td{background:rgba(var(--c-cyan),.05);}

.role-badge.admin{background:rgba(255,138,138,.15);color:var(--admin);}
.role-badge.editor{background:rgba(var(--c-mint),.15);color:rgb(var(--c-mint));}
.role-badge.lector{background:rgba(var(--c-violet),.15);color:rgb(var(--c-violet));}

.action-badge.upload, .action-badge.download{background:rgba(var(--c-mint),.15);color:rgb(var(--c-mint));}
.action-badge.delete{background:rgba(255,138,138,.15);color:var(--admin);}
.action-badge.create_folder{background:rgba(var(--c-cyan),.15);color:rgb(var(--c-cyan));}
.action-badge.rename, .action-badge.move{background:rgba(var(--c-violet),.15);color:rgb(var(--c-violet));}
.action-badge.unlock_protected_folder{background:rgba(var(--c-amber),.15);color:rgb(var(--c-amber));}

.del-btn, .user-row .del-user{color:var(--admin);}
.del-btn:hover, .user-row .del-user:hover{background:rgba(255,138,138,.16);}
.refresh-btn{color:var(--fx-ink-dim);}
.refresh-btn:hover{background:rgba(var(--c-cyan),.14);color:var(--fx-ink);}

.empty-msg, .empty-hint{color:var(--fx-ink-dim);}

/* ==========================================================================
   10. OVERLAYS, DIÁLOGOS Y CAMPOS DE DIÁLOGO
   ========================================================================== */
.overlay{background:rgba(6,12,24,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.dialog, .mini-dialog{
  background:var(--fx-panel-2);
  border:1px solid rgba(var(--c-violet),.32);color:var(--fx-ink);
  box-shadow:0 36px 84px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(var(--c-violet),.12);
}
.dialog-head h3, .mini-dialog h4{color:var(--fx-ink);font-weight:600;}
.dialog-head .icon{box-shadow:0 0 18px -2px rgba(var(--c-amber),.5);}
.dialog-close{color:var(--fx-ink-dim);}
.dialog-close:hover{background:rgba(var(--c-violet),.18);color:var(--fx-ink);}
.drow{border-bottom-color:rgba(var(--c-cyan),.14);color:var(--fx-ink-dim);}
.drow b{color:var(--fx-ink);}

.field-label, .field-hint{color:var(--fx-ink-dim);}
.field-input{
  background:rgba(9,17,32,.5);border:1.5px solid rgba(var(--c-cyan),.28);
}
.field-input:focus-within{border-color:rgb(var(--c-cyan));box-shadow:0 0 0 3px rgba(var(--c-cyan),.16);}
.field-input input{color:var(--fx-ink);background:transparent;}
.field-input input::placeholder{color:var(--fx-ink-mut);}
.field-input .material-icons-round{color:rgb(var(--c-cyan));}

/* Vista previa del archivo dentro del diálogo. El lienzo del documento
   (iframe/img) se deja CLARO a propósito: es contenido real, no UI. */
.dialog-preview{background:rgba(9,17,32,.55);color:var(--fx-ink-dim);border:1px solid rgba(var(--c-cyan),.16);}
.dialog-preview .material-icons-round{color:rgba(var(--c-cyan),.6);}
.dialog-preview.has-media{background:#0a1220;border-color:rgba(var(--c-cyan),.24);}

.mini-dialog .field-row label{color:var(--fx-ink-dim);}
.mini-dialog .field-row input{
  background:rgba(9,17,32,.5);border:1.5px solid rgba(var(--c-cyan),.28);color:var(--fx-ink);
}
.mini-dialog .field-row input:focus{border-color:rgb(var(--c-cyan));}

.move-tree-box{border:1px solid rgba(var(--c-cyan),.2);background:rgba(9,17,32,.35);}

.activity-row{color:var(--fx-ink-dim);}
.activity-row b{color:var(--fx-ink);}
.activity-row .material-icons-round{color:rgb(var(--c-amber));}
.activity-empty{color:var(--fx-ink-dim);}

/* ==========================================================================
   11. FILES.HTML — buscador, árbol lateral, tarjetas, FAB
   ========================================================================== */
.error-banner{
  background:rgba(255,138,138,.14);color:var(--admin);
  border-bottom:1px solid rgba(255,138,138,.28);
}
.upload-banner{
  background:rgba(var(--c-cyan),.13);color:rgb(var(--c-cyan));
  border-bottom:1px solid rgba(var(--c-cyan),.26);
}
.upload-progress-track{background:rgba(9,17,32,.6);}
.upload-progress-fill{
  background:linear-gradient(90deg, rgb(var(--c-cyan)), rgb(var(--c-mint)));
  box-shadow:0 0 12px -2px rgba(var(--c-cyan),.7);
}

/* Selector de rol segmentado */
.role-seg{background:rgba(9,17,32,.5);border:1px solid rgba(var(--c-cyan),.18);}
.role-chip{color:var(--fx-ink-dim);}
.role-chip:hover{color:var(--fx-ink);}
.role-chip.active{
  background:rgba(var(--c-cyan),.16);color:var(--fx-ink);
  box-shadow:0 0 0 1px rgba(var(--c-cyan),.4), 0 0 14px -4px rgba(var(--c-cyan),.7);
}
.role-chip[data-role="admin"].active{color:var(--admin);}
.role-chip[data-role="editor"].active{color:rgb(var(--c-mint));}
.role-chip[data-role="lector"].active{color:rgb(var(--c-violet));}

/* Buscador */
.searchbar{
  background:var(--fx-panel);
  backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);
  border:1px solid rgba(var(--c-cyan),.24);
  box-shadow:0 10px 30px -16px rgba(0,0,0,.7);
}
.searchbar:focus-within{border-color:rgb(var(--c-cyan));box-shadow:0 0 0 3px rgba(var(--c-cyan),.14);}
.searchbar .material-icons-round{color:rgb(var(--c-cyan));}
.searchbar input{color:var(--fx-ink);}
.searchbar input::placeholder{color:var(--fx-ink-mut);}
.searchbar .clear{color:var(--fx-ink-dim);}
.searchbar .clear:hover{color:var(--fx-ink);}

/* Árbol lateral */
.drawer{
  background:var(--fx-panel);
  backdrop-filter:blur(13px) saturate(1.25);-webkit-backdrop-filter:blur(13px) saturate(1.25);
  border:1px solid rgba(var(--c-cyan),.18);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.7);
}
.drawer-head{color:rgb(var(--c-amber));letter-spacing:.16em;text-shadow:0 0 10px rgba(var(--c-amber),.4);}
.node{color:var(--fx-ink-dim);}
.node:hover{background:rgba(var(--c-cyan),.12);color:var(--fx-ink);}
.node.selected{
  background:rgba(var(--c-cyan),.16);color:var(--fx-ink);
  box-shadow:inset 3px 0 0 rgb(var(--c-cyan));
}
.node.selected .material-icons-round.folder-icon{color:rgb(var(--c-cyan));}
.node .caret{color:var(--fx-ink-dim);}
.node .folder-icon{color:rgb(var(--c-amber));}
.node .count{background:rgba(var(--c-cyan),.14);color:var(--fx-ink-dim);}
.node.selected .count{background:rgba(var(--c-cyan),.3);color:var(--fx-ink);}

/* Migas y encabezado del panel */
.crumbs{color:var(--fx-ink-dim);}
.crumbs b{color:var(--fx-ink);}
.crumbs a{color:var(--fx-ink-dim);}
.crumbs a:hover{background:rgba(var(--c-cyan),.14);color:rgb(var(--c-cyan));}
.folder-title{color:var(--fx-ink);}
.role-note{color:var(--fx-ink-dim);}
.role-note b{color:var(--fx-ink);}

/* Tarjetas de archivo/carpeta.
   Sin backdrop-filter (a diferencia del .card genérico): la grilla puede
   tener decenas de tarjetas y desenfocar el fondo en cada una cuesta caro
   al hacer scroll. El degradado translúcido ya da la sensación de vidrio. */
.grid .card{
  background:var(--fx-panel);
  border:1px solid rgba(var(--c-cyan),.16);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.grid .card:hover{
  border-color:rgba(var(--c-cyan),.5);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.75), 0 0 18px -6px rgba(var(--c-cyan),.45);
}
.icon.folder{
  background:linear-gradient(145deg, rgba(var(--c-amber),.28), rgba(var(--c-amber),.10));
  color:rgb(var(--c-amber));
  box-shadow:inset 0 0 0 1px rgba(var(--c-amber),.28);
}
.chip.locked{background:rgba(255,138,138,.15);color:var(--admin);}
.chip.shared{background:rgba(var(--c-mint),.15);color:rgb(var(--c-mint));}
.count-badge{background:rgba(var(--c-cyan),.14);color:var(--fx-ink-dim);}
.card .name{color:var(--fx-ink);}
.card .meta{color:var(--fx-ink-dim);}
.result-path{background:rgba(var(--c-violet),.14);color:rgb(var(--c-violet));}

/* Estado vacío */
.empty{
  background:var(--fx-panel);
  border:1px dashed rgba(var(--c-cyan),.24);
  color:var(--fx-ink-dim);
}
.empty .material-icons-round{color:rgba(var(--c-cyan),.45);}

/* Deck 3D de subcarpetas: ya era oscuro; solo se alinea al acento cian */
.deck-scene{
  --neon:#63C8FF;--neon-2:#D3E9FF;--neon-dim:rgba(99,200,255,.45);
  --bg-deep:#081428;--bg-mid:#0e2a4e;--bg-panel:#0b2141;--ink-mut:#A9BAD0;
  border:1px solid rgba(var(--c-cyan),.2);
}

/* FAB */
.fab{
  background:linear-gradient(135deg,#1180cf,#0c5fa6 60%,#155f97);
  box-shadow:0 0 0 1px rgba(var(--c-cyan),.35), 0 10px 30px -8px rgba(var(--c-cyan),.6);
}
.fab:hover{background:linear-gradient(135deg,#189add,#1070b6 60%,#1a72ad);}
.fab:disabled{background:rgba(120,150,190,.14);color:var(--fx-ink-mut);box-shadow:none;}

/* Panel de usuarios embebido en el diálogo */
.user-row{border:1px solid rgba(var(--c-cyan),.18);background:rgba(9,17,32,.35);}
.user-row .u-email{color:var(--fx-ink-dim);}

/* ==========================================================================
   12. DOC-EDITOR.HTML
   ========================================================================== */
.toolbar{
  background:var(--fx-panel-2);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(var(--c-cyan),.2);
  box-shadow:0 14px 36px -18px rgba(0,0,0,.7);
}
.toolbar .tsep{background:rgba(var(--c-cyan),.2);}
.toolbar button{color:var(--fx-ink-dim);}
.toolbar button:hover{background:rgba(var(--c-cyan),.14);color:rgb(var(--c-cyan));}
.toolbar button.active{background:rgba(var(--c-cyan),.2);color:rgb(var(--c-cyan));box-shadow:0 0 0 1px rgba(var(--c-cyan),.35);}
.toolbar select{
  background:rgba(9,17,32,.5);border:1.5px solid rgba(var(--c-cyan),.24);color:var(--fx-ink);
}
.toolbar .save-btn{
  background:linear-gradient(135deg,#1180cf,#0c5fa6 60%,#155f97);color:#fff;
  box-shadow:0 0 0 1px rgba(var(--c-cyan),.25), 0 6px 18px -6px rgba(var(--c-cyan),.55);
}
.toolbar .save-btn:hover{background:linear-gradient(135deg,#189add,#1070b6 60%,#1a72ad);color:#fff;}
.toolbar .save-btn:disabled{background:rgba(120,150,190,.14);color:var(--fx-ink-mut);box-shadow:none;}

.doc-surface{
  background:var(--fx-panel-2);
  border:1px solid rgba(var(--c-cyan),.18);
  color:var(--fx-ink);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.75);
}
.doc-block:focus{background:rgba(var(--c-cyan),.12);}
.doc-image-remove{background:rgba(255,138,138,.5);}
.doc-image-remove:hover{background:var(--admin);color:#0b1626;}
.doc-unsupported-wrap{
  border:1.5px dashed rgba(var(--c-cyan),.28);background:rgba(9,17,32,.4);color:var(--fx-ink-dim);
}
table.doc-table td{border:1px solid rgba(var(--c-cyan),.22);}
table.doc-table td:focus{background:rgba(var(--c-cyan),.12);}
.doc-table-controls button{
  border:1px solid rgba(var(--c-cyan),.24);background:rgba(9,17,32,.4);color:var(--fx-ink-dim);
}
.doc-table-controls button:hover{border-color:rgb(var(--c-cyan));color:rgb(var(--c-cyan));background:rgba(var(--c-cyan),.12);}

/* ==========================================================================
   13. PIE DE PÁGINA
   --------------------------------------------------------------------------
   shared.css lo pinta con background:var(--on-surface) — que en oscuro es
   casi blanco. Sin este override el footer quedaría blanco.
   ========================================================================== */
.app-footer{
  background:var(--fx-deep-2);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, rgba(var(--c-cyan),.5), rgba(var(--c-violet),.5), rgba(var(--c-amber),.5)) 1;
}
.app-footer p{color:var(--fx-ink);}
.app-footer p:last-child{color:var(--fx-ink-dim);}