/* =============================================================================
 * ÁRTYCO · Área privada — hoja de estilos
 *
 * Una sola hoja, sin preprocesador. Se lee de arriba abajo: primero la gama de
 * color (la identidad), luego los cimientos, el marco de la aplicación y, por
 * último, cada superficie. Las decisiones de producto que no se tocan están
 * comentadas en su sitio (barra de selección, colores de abrir/editar/destruir).
 * ========================================================================== */

/* ------------------------------------------------------------------ 1. La gama
 * ÁRTYCO tiene tres colores, muestreados de su propio logotipo: rojo, gris y
 * hueso. Una identidad no son tres colores planos, así que de cada uno sale una
 * escala (50 = casi blanco, 900 = casi negro) para fondos, bordes y estados.
 * Mario añade el beige a la familia: es el papel sobre el que se apoya todo.
 * Los contrastes están comprobados (AA): tinta y «muted» sobre cualquier fondo
 * claro de esta hoja pasan de 4,5:1; los bordes de control, de 3:1.
 */
/* Roboto Condensed, la tipografía de todo el sistema (decisión de Mario, 7-9-26).
   Servida desde aquí y no desde Google: funciona sin red, en la caseta de una
   obra, y pasa la política de contenido del servidor (default-src 'self').
   Fuente variable: un fichero por estilo y subconjunto, ~50 KB cada uno. */
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./vendor/fonts/roboto-condensed-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./vendor/fonts/roboto-condensed-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Condensed"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("./vendor/fonts/roboto-condensed-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Condensed"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("./vendor/fonts/roboto-condensed-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Los tres de la marca, tal cual */
  --marca: #c23e39;
  --gris-marca: #6e6f73;
  --hueso: #f7f7f7;

  /* Rojo de ÁRTYCO: acción principal, selección, presencia de marca */
  --rojo-50: #fdf5f4;
  --rojo-100: #fae8e7;
  --rojo-200: #f3cbc9;
  --rojo-300: #e8a19d;
  --rojo-400: #d9706b;
  --rojo-600: #c23e39;
  --rojo-700: #a3322e;
  --rojo-800: #832724;
  --rojo-900: #5e1c1a;

  /* Gris de ÁRTYCO: texto, bordes, superficies neutras */
  --gris-50: #f7f7f7;
  --gris-100: #eeeef0;
  --gris-200: #e1e1e5;
  --gris-300: #cbcbd0;
  --gris-400: #a6a7ac;
  --gris-500: #86878c;
  --gris-600: #6e6f73;
  --gris-700: #545559;
  --gris-800: #3a3b3f;
  --gris-900: #222327;

  /* Beige: el papel. Cálido, para que el blanco de las tarjetas destaque */
  --beige-50: #faf8f3;
  --beige-100: #f3efe6;
  --beige-200: #e8e1d2;
  --beige-300: #d8cdb7;
  --beige-700: #75664a;
  --beige-800: #574b34;

  /* Vino: el color de destruir. Es rojo, pero no es EL rojo: más oscuro y más
     frío que el de la marca, y nunca relleno salvo en la confirmación final.
     Confundir «subir archivos» con «eliminar definitivamente» es caro. */
  --vino-50: #fbeef1;
  --vino-200: #efbfca;
  --vino-600: #8c1d3a;
  --vino-700: #731630;

  /* Semánticos: la hoja solo usa estos a partir de aquí */
  --paper: var(--beige-50);
  --surface: #fff;
  --surface-2: var(--beige-100);
  --surface-3: var(--beige-200);
  --ink: var(--gris-900);
  --ink-2: var(--gris-700);
  --muted: #64656a;
  --line: var(--gris-200);
  --line-soft: var(--gris-100);
  --line-strong: #8f9095;
  --marca-fuerte: var(--rojo-700);
  --marca-suave: var(--rojo-50);
  --marca-tinte: var(--rojo-100);
  --marca-linea: var(--rojo-200);
  --danger: var(--vino-600);
  --danger-fuerte: var(--vino-700);
  --danger-soft: var(--vino-50);
  --danger-linea: var(--vino-200);
  --ok: #1b6e45;
  --ok-soft: #e8f5ee;
  --warn: #7a4f00;
  --warn-soft: #fff4d9;
  --focus: var(--gris-900);

  --shadow-sm: 0 1px 2px rgba(34, 35, 39, .05), 0 1px 4px rgba(34, 35, 39, .04);
  --shadow: 0 10px 30px rgba(34, 35, 39, .14), 0 2px 6px rgba(34, 35, 39, .06);
  --shadow-lg: 0 24px 60px rgba(34, 35, 39, .22);

  /* Una sola familia, la que eligió Mario: Roboto Condensed, condensada como la
     geométrica del logotipo. El único elemento «de display» es el logotipo. */
  --sans: "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Segoe UI Mono", monospace;
  --radius: 10px;
  --radius-sm: 6px;
  --control: 38px;
  /* Botón (0.9.18, estilo A): compacto, sin borde; lo separa una sombra muy suave con un contorno de un pelo. */
  --boton: 30px;
  --boton-small: 28px;
  /* Medidas que encogen en pantallas pequeñas (sección 16): alturas de fila, de cabecera y de barra, y rellenos de los paneles. */
  --barra-lista: 46px;
  --fila: 44px;
  --cabecera-lista: 36px;
  --fila-arbol: 32px;
  --cabecera-pagina: 40px;
  --panel-pad: 14px;
  --sombra-boton: 0 0 0 1px rgb(34 35 39 / .07), 0 1px 2px rgb(34 35 39 / .06);
  --sombra-boton-hover: 0 0 0 1px rgb(34 35 39 / .09), 0 2px 6px rgb(34 35 39 / .09);
  --sombra-principal: 0 1px 4px rgb(194 62 57 / .24);
  --topbar: 56px;
  --sidebar: 164px;

  /* Movimiento: corto, una sola curva. Se apaga del todo al final de la hoja. */
  --transicion: 160ms cubic-bezier(.2, .7, .3, 1);
  /* Blanco de papel y de texto sobre color de marca. */
  --blanco: #fff;
  /* Borde de un control al pasar por encima (en claro, gris medio). */
  --line-hover: var(--gris-600);
  /* Escala de noche: visor y avisos. */
  --noche-900: #1b1b1f;
  --noche-800: #26262c;
  --noche-700: #33333b;
  --noche-600: #44444e;
  --noche-500: #4a4a54;
  --noche-400: #5a5a66;
  --noche-200: #b8b8c2;
  --noche-100: #d8d8e0;
  --ok-noche: #4fb47f;
  /* El papel de los documentos (vista de Word, de texto, PDF): tinta oscura sobre blanco, también de noche. */
  --tinta-papel: #222327;
  --linea-papel: #cbcbd0;
}
/*
 * Modo oscuro (0.11.0): sigue al del sistema. Solo cambian los colores; las fotos, el papel de los documentos y el
 * visor (que ya es de noche) se quedan como están. El rojo de la marca no cambia; el rojo de texto se aclara para
 * leerse sobre fondo oscuro.
 */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --gris-50: #26262c; --gris-100: #2e2e35; --gris-200: #3a3a43; --gris-300: #4a4a54; --gris-400: #5f5f6b;
    --gris-500: #7d7d89; --gris-600: #a0a0ab; --gris-700: #c4c4cc; --gris-800: #4a4a54;
    --beige-50: #212026; --beige-100: #2a2830; --beige-200: #34313a; --beige-300: #4c4740; --beige-700: #c2b08c; --beige-800: #d8ccb0;
    --rojo-50: #2c1a1a; --rojo-100: #3a1f1e; --rojo-200: #5c2a28; --rojo-700: #e5837e; --rojo-800: #8a2a27;
    --vino-50: #34181f; --vino-200: #6a2a3d;
    --paper: #1b1b1f; --surface: #232328; --surface-2: #2b2b31; --surface-3: #35353d;
    --ink: #ececf1; --ink-2: #c4c4cc; --muted: #9d9daa;
    --line: #3a3a43; --line-soft: #2e2e35; --line-strong: #5f5f6b; --line-hover: #7d7d89;
    --marca-fuerte: #a3322e; --marca-suave: #331d1d; --marca-tinte: #42211f; --marca-linea: #6a2e2b;
    --danger: #d65a7a; --danger-fuerte: #a32c4c; --danger-soft: #34181f; --danger-linea: #6a2a3d;
    --ok: #5cc28c; --ok-soft: #1c3328; --warn: #e3b453; --warn-soft: #3a3020;
    --focus: #ececf1;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 4px rgba(0, 0, 0, .25);
    --shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
    --sombra-boton: 0 0 0 1px rgb(255 255 255 / .08), 0 1px 2px rgb(0 0 0 / .4);
    --sombra-boton-hover: 0 0 0 1px rgb(255 255 255 / .14), 0 2px 6px rgb(0 0 0 / .45);
  }
}
/* Tema de noche por variables: el visor y los avisos. */
dialog.viewer, .toast {
  --surface: var(--noche-700); --surface-2: var(--noche-600); --surface-3: var(--noche-500);
  --ink: var(--blanco); --ink-2: var(--noche-100); --muted: var(--noche-200);
  --line: var(--noche-500); --line-strong: var(--noche-500); --line-hover: var(--noche-400);
  --focus: var(--blanco);
}


/* ------------------------------------------------------------- 2. Cimientos */
* { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; color: var(--ink); background: var(--paper); }
body { font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button, [role="button"], summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; }
::selection { color: var(--blanco); background: var(--marca); }
/* Foco visible siempre, en tinta y con hueco: se ve sobre blanco, sobre beige y
   sobre el rojo de un botón primario. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 15px; font-weight: 700; }
.eyebrow { margin-bottom: 4px; color: var(--marca); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lead { max-width: 64ch; margin-top: 6px; color: var(--muted); }
.muted { color: var(--muted); }
.section { margin-top: 32px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.stack { display: grid; gap: 12px; }
.icon { width: 18px; height: 18px; flex: none; color: var(--gris-marca); }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; color: var(--surface); background: var(--ink); border-radius: var(--radius-sm); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* -------------------------------------------------------- 3. Marco general
 * La barra lateral va de arriba abajo y lleva la marca: es el único sitio de la
 * pantalla con altura de sobra para un logotipo vertical. La barra superior se
 * queda con el buscador y la persona, y solo enseña la marca (en texto) cuando
 * la lateral está plegada o no cabe.
 */
.app-shell { display: grid; min-height: 100vh; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: var(--topbar) 1fr; grid-template-areas: "side top" "side main"; }
.app-shell.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; grid-area: top; align-items: center; gap: 12px; height: var(--topbar); padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sidebar-toggle { display: grid; width: 36px; height: 36px; flex: none; place-items: center; padding: 0; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 18px; }
.sidebar-toggle:hover { color: var(--ink); background: var(--surface-2); }
.brand { text-decoration: none; }
/* La marca en texto para cuando la lateral está plegada: no sustituye al
   logotipo, solo recuerda dónde estás. */
.brand-compact { display: none; align-items: center; gap: 12px; }
.brand-compact .brand-logo { height: 44px; }
.brand-compact small { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-collapsed .brand-compact { display: inline-flex; }
.search { position: relative; flex: 1; max-width: 560px; margin-left: auto; }
.search input { width: 100%; height: var(--control); padding: 0 132px 0 38px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.search::before { content: ""; position: absolute; top: 50%; left: 14px; width: 16px; height: 16px; transform: translateY(-50%); background: currentColor; color: var(--muted); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12.7 12.7 17 17M8.5 14a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12.7 12.7 17 17M8.5 14a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.search input::placeholder { color: var(--muted); }
.search input:focus { background: var(--surface); border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px var(--marca-tinte); }
.search kbd { position: absolute; top: 50%; right: 84px; padding: 1px 6px; transform: translateY(-50%); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font: 11px/1.4 var(--sans); }
.search-submit { position: absolute; top: 5px; right: 5px; height: 28px; padding: 0 12px; color: var(--blanco); background: var(--gris-800); border: 0; border-radius: 999px; font-size: 13px; font-weight: 600; }
.search-submit:hover { background: var(--ink); }
.user-menu { flex: none; }
.user-menu summary { display: flex; align-items: center; gap: 9px; height: var(--control); padding: 0 8px 0 4px; border-radius: 999px; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--surface-2); }
.user-text { display: grid; line-height: 1.25; }
.user-text small { color: var(--muted); font-size: 11px; }
.avatar { display: grid; width: 32px; height: 32px; flex: none; place-items: center; color: var(--rojo-700); background: var(--rojo-100); border-radius: 50%; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; grid-area: side; height: 100vh; min-width: 0; overflow: auto; padding: 0 6px 12px; background: var(--surface); border-right: 1px solid var(--line); transition: transform 220ms var(--curva), visibility 0s linear 0s; }
/* Plegada: se desliza hacia fuera mientras la columna se cierra, y sale del
   orden de tabulación (visibility), no solo de la vista. */
.sidebar-collapsed .sidebar { width: var(--sidebar); overflow: hidden; border-right: 0; transform: translateX(-100%); visibility: hidden; transition: transform 220ms var(--curva), visibility 0s linear 220ms; }
/* El logotipo, vertical como es, a una altura donde se lee (ver marca/). */
.sidebar .brand { display: grid; justify-items: center; gap: 6px; margin: 10px 0 10px; padding: 12px 8px 9px; background: var(--hueso); border-radius: var(--radius); }
.brand-logo { display: block; width: auto; height: 76px; }
.brand-text { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sidebar nav { position: relative; display: grid; gap: 2px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 8px 0 11px; color: var(--ink-2); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; letter-spacing: .01em; text-decoration: none; }
.nav-link > .bi { width: 16px; height: 16px; color: var(--gris-500); transition: color var(--transicion); }
.nav-link > span { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; transition: transform var(--transicion); }
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link:hover > .bi { color: var(--ink); }
.nav-link:hover > span { transform: translateX(2px); }
.nav-link[aria-current="page"] { color: var(--rojo-700); background: var(--marca-suave); font-weight: 700; }
.nav-link[aria-current="page"] > .bi { color: var(--marca); }
/* La marca roja de la sección: un solo elemento que se desliza entre secciones (app.js la coloca). */
.nav-indicador { position: absolute; top: 0; left: 0; width: 3px; height: 24px; background: var(--marca); border-radius: 0 3px 3px 0; transition: top 280ms var(--curva-salida); pointer-events: none; }
.nav-count { display: inline-grid; min-width: 22px; height: 22px; margin-left: auto; padding: 0 7px; place-items: center; color: var(--blanco); background: var(--marca); border-radius: 999px; font-size: 11px; font-weight: 700; }
.sidebar-foot { margin: auto 4px 0; padding-top: 18px; color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
main { grid-area: main; min-width: 0; padding: 14px clamp(16px, 2.4vw, 28px) 40px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--cabecera-pagina); margin-bottom: 12px; }
/* Título del panel: mayúsculas romanas espaciadas, como una inscripción; letra del sistema (Palatino), sin descargar nada. */
.page-head h1 { font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif; font-size: 19px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.page-search { flex: 0 1 300px; width: 300px; min-width: 0; max-width: 100%; }
/* Barra de una pestaña: buscador a la izquierda, su acción a la derecha, bajo las pestañas. */
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 14px; }
/* Usuarios: filas finas; el nombre cede sitio al nivel, que puede ser largo. */
.users-table { table-layout: fixed; }
.users-table .col-name { width: 17%; } .users-table .col-email { width: 22%; } .users-table .col-phone { width: 12%; } .users-table .col-level { width: 22%; } .users-table .col-state { width: 10%; } .users-table .col-actions { width: 17%; }
.data-table.users-table small { display: inline; margin-left: 4px; }
.data-table.users-table td, .data-table.users-table th { padding: 7px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table.users-table td.row-actions { display: table-cell; overflow: visible; text-align: right; }
.data-table.users-table td.row-actions .button + .button { margin-left: 6px; }
.users-table tr.is-inactive td { color: var(--muted); }
.users-table tr.is-inactive strong { font-weight: 600; }
.page-sub { margin-top: 2px; color: var(--muted); font-size: 13px; }
/* Subpaneles de un panel: pestañas bajo el título, sin scroll interminable. */
.panel-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.panel-tab { margin-bottom: -1px; padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; text-decoration: none; transition: color var(--transicion), border-color var(--transicion); }
.panel-tab:hover { color: var(--ink); }
.panel-tab[aria-current="page"] { color: var(--rojo-700); border-bottom-color: var(--marca); }
.panel-body > .section:first-child { margin-top: 0; }
.page-title { min-width: 0; }
.page-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------------- 4. Botones y menús
 * Un lenguaje fijo en toda la aplicación:
 *   · primario  = relleno rojo de la marca: subir, abrir, guardar, confirmar
 *   · editar    = relleno gris oscuro con un lápiz: solo Word, Excel, PowerPoint
 *   · normal    = blanco con borde
 *   · fantasma  = sin borde, para cancelar y quitar
 *   · destruir  = vino, con borde y hueco; relleno solo al confirmar
 */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--boton); padding: 0 13px; color: var(--ink); background: var(--surface); border: 1px solid transparent; border-radius: 0; box-shadow: var(--sombra-boton); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.button .bi { width: 14px; height: 14px; }
.bi { width: 16px; height: 16px; flex: none; }
.button-small .bi { width: 14px; height: 14px; }
.button:hover:not(:disabled) { background: var(--surface); box-shadow: var(--sombra-boton-hover); transform: translateY(-1px); }
.button:active:not(:disabled) { background: var(--surface-2); box-shadow: var(--sombra-boton); transform: none; }
.button-primary { color: var(--blanco); background: var(--marca); box-shadow: var(--sombra-principal); }
.button-primary:hover:not(:disabled) { background: var(--marca-fuerte); box-shadow: var(--sombra-principal); }
.button-primary:active:not(:disabled) { background: var(--rojo-800); }
.button-ghost { background: transparent; box-shadow: none; }
.button-ghost:hover:not(:disabled) { background: var(--surface); box-shadow: var(--sombra-boton); }
.button-danger { color: var(--danger); background: var(--surface); }
.button-danger:hover:not(:disabled) { color: var(--blanco); background: var(--danger); }
.button-primary.button-danger { color: var(--blanco); background: var(--danger-fuerte); }
.button-primary.button-danger:hover:not(:disabled) { background: var(--vino-600); }
.button-edit { color: var(--blanco); background: var(--gris-800); }
.button-edit:hover:not(:disabled) { background: var(--ink); }
.button-small { height: var(--boton-small); padding: 0 11px; }
.button-icon { width: var(--boton); padding: 0; font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.button-icon.button-small { width: var(--boton-small); font-size: 14px; }
/* Un botón que se activa y desactiva (favorito, casillas…) lo dice con aria-pressed. */
.button[aria-pressed="true"] { color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.button[data-pending="true"] { position: relative; color: transparent; }
.button[data-pending="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; color: var(--muted); border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.button-primary[data-pending="true"]::after, .button-edit[data-pending="true"]::after, .button-primary.button-danger[data-pending="true"]::after { color: var(--blanco); }
@keyframes spin { to { transform: rotate(360deg); } }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary.button { background: var(--surface-2); border-color: var(--line-hover); }
.caret { font-size: 11px; opacity: .7; }
/* Nace fuera del flujo y oculto: hasta que placeMenu lo coloca junto a su botón no puede desbordar la barra ni asomar un scroll. */
.menu-list { position: fixed; visibility: hidden; z-index: 40; top: calc(100% + 6px); right: 0; display: grid; min-width: 224px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 34px; padding: 0 10px; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-sm); font-weight: 500; text-align: left; text-decoration: none;  text-transform: none; letter-spacing: normal; font-size: 14px; box-shadow: none;}
.menu-item > .bi { width: 16px; height: 16px; color: var(--muted); }
.menu-item:hover:not(:disabled) { background: var(--surface-2); box-shadow: none; transform: none; }
.menu-item:hover:not(:disabled) > .bi, .menu-item-danger > .bi { color: inherit; }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--line); border: 0; }
.menu-item-danger { color: var(--danger); }
.menu-item-danger:hover:not(:disabled) { background: var(--danger-soft); }
.user-menu .menu-list { min-width: 200px; }
/* Abierto, el desplegable pasa a position: fixed (app.js): si es más alto que la ventana, se desplaza dentro. */
.menu[open] > .menu-list { max-height: calc(100vh - 16px); overflow-y: auto; }
.menu[open] > .menu-list[data-colocado] { visibility: visible; }
/* Nombre enlazado dentro de una tabla (Actividad): se lee como texto y se reconoce como enlace. */
.link-button { padding: 0; color: var(--ink); background: none; border: 0; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; cursor: pointer; }
.link-button:hover, .link-button:focus-visible { color: var(--marca); text-decoration-color: currentColor; }

/* ------------------------------------------ 5. Tarjetas, tablas y estados */
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card { padding: 20px; }
.state { display: grid; min-height: 260px; place-items: center; text-align: center; }
.state h2 { margin-bottom: 4px; }
.state p + p { margin-top: 14px; }
.summary-grid, .work-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.template-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.template-grid pre { min-height: 100px; margin: 10px 0; overflow: auto; color: var(--ink-2); font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.summary-card { display: flex; flex-direction: column; gap: 6px; min-height: 150px; color: inherit; text-decoration: none; }
.summary-card:hover { border-color: var(--marca-linea); box-shadow: var(--shadow); }
.summary-card h2 { font-size: 20px; }
.card-link { margin-top: auto; padding-top: 10px; color: var(--marca); font-weight: 650; }
.card-link::after { content: " →"; }
.work-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; }
/* La tarjeta entera abre la obra (el enlace del título la cubre); sus botones quedan por encima. */
.work-card-link { color: inherit; text-decoration: none; }
.work-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.work-card:hover { border-color: var(--marca-linea); box-shadow: var(--shadow); }
.work-card:has(.work-card-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.work-card-link:focus-visible { outline: none; }
.work-card .card-actions { position: relative; z-index: 1; flex-wrap: nowrap; }
.work-card .card-actions .button { flex: none; margin-left: auto; }
.work-card h2, .item-name span, .queue-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-card h2 { font-size: 18px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
/* El hueco empuja lo que viene después al otro extremo (se usaba en el marcado y no existía). */
.spacer { flex: 1; }
.table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: 10px 14px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.data-table th:first-child { border-top-left-radius: var(--radius); }
.data-table th:last-child { border-top-right-radius: var(--radius); }
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--paper); }
.data-table tr[data-open] { cursor: pointer; }
.data-table tr[data-open]:hover td { background: var(--marca-suave); }
.data-table small { display: block; color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; color: var(--ink-2); background: var(--gris-100); border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.badge-ok { color: var(--ok); background: var(--ok-soft); }
.badge-marca { color: var(--rojo-700); background: var(--marca-tinte); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-warn { color: var(--warn); background: var(--warn-soft); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.toolbar input, .toolbar select, .page-actions input, .page-actions select, .panel-toolbar input { height: var(--boton); padding: 0 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.toolbar input { min-width: 280px; }
.toolbar input:focus, .toolbar select:focus, .page-actions input:focus, .page-actions select:focus, .panel-toolbar input:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px var(--marca-tinte); }
.empty-state { display: grid; gap: 4px; padding: 44px 20px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); }
.empty-state::before { content: ""; width: 44px; height: 44px; margin: 0 auto 10px; background: var(--beige-300); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 5.5A1.5 1.5 0 0 1 3.5 4h4.2l2 2h6.8A1.5 1.5 0 0 1 18 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 14.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 5.5A1.5 1.5 0 0 1 3.5 4h4.2l2 2h6.8A1.5 1.5 0 0 1 18 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 14.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.results { display: grid; gap: 8px; }
.result-row { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; align-items: center; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
.result-row .icon { grid-row: 1 / 3; }
.result-row strong, .result-row small { grid-column: 2; }
.result-row:hover { border-color: var(--marca-linea); background: var(--marca-suave); }

/* --------------------------------------------------------- 6. Explorador */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 2px; margin-left: -6px; color: var(--muted); }
.breadcrumbs button { height: var(--boton-small); padding: 0 6px; color: inherit; background: transparent; border: 0; border-radius: 4px; }
.breadcrumbs button:hover { color: var(--ink); background: var(--surface-3); }
.breadcrumbs button[aria-current] { color: var(--ink); font-weight: 650; }
.crumb-sep { opacity: .6; }
.explorer { position: relative; display: grid; min-height: 560px; overflow: hidden; grid-template-columns: var(--tree-w, 236px) minmax(320px, 1fr) var(--inspector-w, 320px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.tree, .inspector { min-width: 0; padding: var(--panel-pad); background: var(--beige-50); }
.splitter { position: absolute; z-index: 5; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
.splitter[data-splitter="tree"] { left: calc(var(--tree-w, 236px) - 4px); }
.splitter[data-splitter="inspector"] { right: calc(var(--inspector-w, 320px) - 4px); }
.splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background var(--transicion); }
.splitter:hover::after, .splitter:focus-visible::after, .explorer.is-resizing .splitter::after { background: var(--marca); }
.splitter:focus-visible { outline: none; }
.explorer.is-resizing { cursor: col-resize; user-select: none; }
.tree { border-right: 1px solid var(--line); }
.tree h3 { padding: 6px 8px 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.inspector { border-left: 1px solid var(--line); }
.tree ul { margin: 0; padding: 0; list-style: none; }
.tree-node { display: grid; grid-template-columns: auto 22px minmax(0, 1fr); align-items: stretch; }
/* Guías del árbol: una vertical por antecesor con hermanos debajo, y un codo por carpeta. */
.tree-guias { display: flex; }
.guia { position: relative; width: 18px; flex: none; }
.guia::before { content: ""; position: absolute; top: 0; bottom: 0; left: 9px; border-left: 1px solid var(--gris-300); }
.guia-vacia::before, .guia-fin::before { display: none; }
.guia-codo::after { content: ""; position: absolute; top: 0; left: 9px; width: 8px; height: calc(var(--fila-arbol) / 2); border-left: 1px solid var(--gris-300); border-bottom: 1px solid var(--gris-300); border-bottom-left-radius: 5px; }
.tree-fav, .tree-node > button:last-child { display: flex; align-items: center; gap: 7px; width: 100%; height: var(--fila-arbol); padding: 0 8px 0 4px; overflow: hidden; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--radius-sm); text-align: left; }
.tree-fav span, .tree-node > button:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-fav .icon, .tree-node > button:last-child .icon { width: 16px; height: 16px; color: var(--beige-700); }
.tree-fav:hover, .tree-node > button:last-child:hover { color: var(--ink); background: var(--surface-3); }
.tree-toggle { display: grid; width: 22px; height: var(--fila-arbol); place-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 4px; }
.tree-toggle:hover { color: var(--ink); background: var(--surface-3); }
.chev { width: 14px; height: 14px; transition: transform 180ms var(--curva); }
.tree-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.tree button[aria-current] { color: var(--rojo-700); background: var(--marca-tinte); font-weight: 700; }
.tree button[aria-current] .icon { color: var(--marca); }
.tree-node.is-nueva { animation: artyco-fila 180ms var(--curva) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
.file-area { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* Una sola barra de herramientas para la lista (0.11.1): búsqueda a la izquierda, o lo seleccionado en su lugar, y a la
   derecha lista/cuadrícula. Altura fija y sin partirse: si la barra crece al seleccionar, la lista baja y el segundo clic
   de un doble clic cae en la fila de al lado. Las zonas son fijas; una clase decide cuál se ve (hay-seleccion). */
.barra-lista { display: flex; flex: 0 0 var(--barra-lista); flex-wrap: nowrap; align-items: center; gap: 8px; height: var(--barra-lista); min-height: var(--barra-lista); max-height: var(--barra-lista); padding: 0 14px; box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--line); }
.barra-lista.hay-seleccion { background: var(--marca-suave); border-bottom-color: var(--marca-linea); }
.barra-lista > * { flex: none; }
/* El contenedor de las consultas es solo la zona de búsqueda: un contenedor con contención de maquetación haría de bloque
   contenedor de los position: fixed de dentro, y el menú «Acciones» (zona de selección) saldría desplazado. */
.barra-busqueda { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0; }
.barra-lista.hay-seleccion .barra-busqueda { display: none; }
.barra-seleccion { display: none; align-items: center; gap: 8px; }
.barra-lista.hay-seleccion .barra-seleccion { display: flex; flex: 1 1 auto; min-width: 0; }
.selection-count { color: var(--rojo-700); font-weight: 700; white-space: nowrap; }
.list-head, .item-row { display: grid; align-items: center; grid-template-columns: 34px minmax(160px, 1fr) 150px 90px 160px; gap: 8px; padding: 0 14px; }
.list-head { min-height: var(--cabecera-lista); color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.item-row { position: relative; min-height: var(--fila); border-bottom: 1px solid var(--line-soft); cursor: default; user-select: none; }
.item-row:hover { background: var(--paper); }
.item-row:active { background: var(--marca-tinte); }
/* La marca roja de la fila seleccionada crece desde el centro: se ve elegir. */
.item-row::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 0; width: 3px; background: var(--marca); border-radius: 0 3px 3px 0; transform: scaleY(0); transition: transform 180ms var(--curva); }
.item-row.is-selected { background: var(--marca-suave); }
.item-row.is-selected::before { transform: scaleY(1); }
/* Arrastrar y soltar: lo que se mueve se atenúa, la carpeta que puede recibir se
   enciende con el rojo de la marca y un anillo (no solo color), y al soltar late. */
.item-row.is-arrastrando { opacity: .4; }
.item-row.is-drop-target, .item-row.is-drop-target:hover { background: var(--marca-tinte); box-shadow: inset 0 0 0 2px var(--marca); }
.item-row.is-drop-target .icon { color: var(--marca); }
.item-row.is-recibiendo { animation: artyco-recibe 280ms var(--curva) backwards; }
.item-row.is-saliendo { animation: artyco-fila-fuera 200ms ease-in both; pointer-events: none; }
.drag-ghost { position: fixed; top: -1000px; left: -1000px; z-index: 80; display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--marca-linea); border-radius: 8px; box-shadow: var(--shadow); font-weight: 600; white-space: nowrap; pointer-events: none; }
.drag-ghost span { overflow: hidden; text-overflow: ellipsis; }
.drag-ghost b { display: inline-grid; min-width: 22px; height: 22px; padding: 0 6px; place-items: center; color: var(--blanco); background: var(--marca); border-radius: 999px; font-size: 12px; }
.item-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.item-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--marca); }
.item-name { display: flex; align-items: center; gap: 10px; min-width: 0; height: calc(var(--fila) - 8px); padding: 0; background: transparent; border: 0; font-weight: 600; text-align: left; }
.item-name:hover span { text-decoration: underline; }
.item-row[data-kind="folder"] .icon { color: var(--beige-700); }
.item-row small { color: var(--muted); }
.dropzone { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; display: none; padding: 10px 14px; color: var(--blanco); background: var(--marca); font-weight: 650; text-align: center; pointer-events: none; }
.file-area.is-dragging .dropzone { display: block; animation: artyco-entra 180ms var(--curva-salida) backwards; }
.file-area.is-dragging { background: var(--rojo-50); box-shadow: inset 0 0 0 3px var(--marca); }
.tree-node.is-drop-target > button:last-child { color: var(--rojo-700); background: var(--marca-tinte); box-shadow: inset 0 0 0 2px var(--marca); }
.tree-node.is-drop-target > button:last-child .icon { color: var(--marca); }
.path-only { margin: 16px; padding: 24px; color: var(--muted); border: 2px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }
.list-hint { padding: 10px 14px; color: var(--muted); font-size: 12px; }
/* Selección: casillas ocultas por defecto, fila seleccionada bien visible */
.list-head.hide-checks, .item-list.hide-checks .item-row { grid-template-columns: 6px minmax(160px, 1fr) 150px 90px 160px; }
.hide-checks input[type="checkbox"] { visibility: hidden; width: 0; height: 0; margin: 0; }

/* Panel de detalle. El orden lo pone app.js y es de producto: nombre y tipo →
   datos → botones → «Trabajando ahora» → «Descargas recientes» → vista previa. */
.inspector-empty { display: grid; min-height: 200px; place-items: center; padding: 20px; color: var(--muted); text-align: center; }
.inspector-head { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 0 12px; margin-bottom: var(--panel-pad); }
.inspector-head .icon { display: grid; grid-row: 1 / 3; width: 40px; height: 40px; padding: 9px; color: var(--gris-marca); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.inspector-head h3 { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.inspector-head .muted { font-size: 13px; }
.inspector-datos { margin: 0 0 var(--panel-pad); padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.3; }
.inspector dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; }
.inspector dl:empty { display: none; }
.inspector dt { color: var(--muted); }
.inspector dd { margin: 0; overflow-wrap: anywhere; }
.inspector-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.inspector-actions .button { flex: 1 1 calc(50% - 3px); }
.inspector-actions .button-wide { flex-basis: 100%; }
.preview { display: grid; grid-auto-rows: max-content; min-height: 160px; place-items: center; overflow: hidden; margin-top: var(--panel-pad); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.preview img, .preview video, .preview audio { max-width: 100%; }
.preview iframe { width: 100%; min-height: 340px; border: 0; }
.preview-office-frame { width: 100%; height: 440px; min-width: 0; }
.preview-office-frame iframe { height: 100%; min-height: 0; }
.preview pre { max-height: 280px; overflow: auto; margin: 0; padding: 10px; color: var(--ink); font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.preview .pdf-page { max-width: 100%; height: auto; }
.preview-note { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--muted); }
.inspector-actions + .muted { margin-top: 14px; font-size: 13px; }

/* Editando: quién está trabajando ahora mismo en cada archivo */
.editing-chip { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: baseline; }
.editing-chip.is-others { color: var(--warn); background: var(--warn-soft); }
.editing-chip.is-mine { color: var(--rojo-700); background: var(--marca-tinte); }
.sin-guardar { display: block; color: var(--warn); font-size: 11px; font-weight: 600; }
/* Guardado automático: una fila del bloque de datos con un interruptor on/off (role="switch"). */
.switch { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 20px; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.switch-pista { position: relative; flex: none; width: 30px; height: 16px; background: var(--gris-500); border-radius: 999px; transition: background-color var(--transicion); }
.switch-bola { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--blanco); border-radius: 50%; box-shadow: 0 1px 2px rgb(34 35 39 / .35); transition: transform var(--transicion); }
.switch[aria-checked="true"] .switch-pista { background: var(--marca); }
.switch[aria-checked="true"] .switch-bola { transform: translateX(14px); }
.switch[aria-checked="true"] .switch-texto { color: var(--rojo-700); font-weight: 600; }
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch-pista { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch[aria-busy="true"] { opacity: .6; cursor: progress; }
.autosave-cabecera { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-size: 13px; }
.autosave-cabecera .switch-texto { min-width: 48px; }
.crumb-archivada { margin-left: 8px; padding: 1px 8px; border-radius: 999px; color: var(--warn); background: var(--warn-soft); font-size: 11px; font-weight: 600; white-space: nowrap; }
.editing-chip.is-stale { color: var(--muted); background: var(--gris-100); }
.editing-panel { display: grid; gap: 4px; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
.inspector dl:empty + .editing-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.editing-panel h4 { margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.editing-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.editing-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editing-list.is-quiet { color: var(--muted); }
.editing-cta { margin-top: 4px; }

/* ----------------------------------------------------- 7. Cola de subidas */
.upload-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 6px; }
.upload-actions:empty { display: none; }
.upload-percent { font-variant-numeric: tabular-nums; text-align: right; }
.upload-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; background: var(--warn-soft); border-radius: var(--radius-sm); font-size: 13px; }
.upload-all:empty { display: none; }
.upload-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.upload-title { flex: 1 1 100%; }
.upload-total { height: 6px; margin-top: 8px; }
.queue-rows { max-height: min(40vh, 360px); margin-top: 10px; overflow-y: auto; }
.upload-queue { position: fixed; z-index: 20; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.queue-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 9px 0; border-top: 1px solid var(--line); }
.progress { height: 5px; grid-column: 1 / -1; overflow: hidden; background: var(--gris-100); border-radius: 3px; }
.progress span { display: block; height: 100%; background: var(--marca); transition: width .2s; }
.queue-error { color: var(--danger); }
.queue-conflict { padding-right: 8px; padding-left: 8px; background: var(--warn-soft); border-radius: var(--radius-sm); }
.queue-note { display: block; color: var(--warn); }
.queue-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; color: var(--warn); }

/* ------------------------------------------------ 8. Diálogos y formularios */
dialog { width: min(560px, calc(100vw - 30px)); max-height: calc(100vh - 40px); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(34, 35, 39, .5); }
.dialog-head, .dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; }
.dialog-head { border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.dialog-foot { justify-content: flex-end; background: var(--beige-50); border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
.dialog-body { max-height: calc(100vh - 150px); overflow: auto; padding: 14px 18px 4px; }
.dialog-body > p { margin-bottom: 10px; }
.form-row { display: grid; gap: 5px; margin: 0 0 14px; font-weight: 600; }
.form-row small { color: var(--muted); font-weight: 400; }
.form-row input, .form-row select, .form-row textarea, .choice input[type="date"], .choice select { width: 100%; min-height: var(--control); padding: 8px 11px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-weight: 400; }
.form-row textarea { min-height: 90px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus, .choice select:focus, .choice input[type="date"]:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px var(--marca-tinte); }
.form-error { min-height: 20px; margin: 4px 0 8px; color: var(--danger); font-weight: 600; }
.form-error.is-question { color: var(--ink); }
.form-error.is-question:not(:empty)::before { content: none; }
/* Etiqueta y campo en la misma línea. */
.form-inline { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.form-error:not(:empty)::before { content: "⚠ "; }
.form-error:empty { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.check input, .choice input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--marca); }
.check-grid { display: grid; gap: 2px 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 8px 0; }
.choices { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.choices legend { margin-bottom: 6px; font-weight: 650; }
.choice { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.choice:hover { border-color: var(--gris-400); }
.choice:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca); }
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.choice input[type="radio"] { margin-top: 3px; }
/* Accesos rápidos al compartir: solo el nombre, en una fila que salta de línea. */
.chip-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-choices legend { width: 100%; }
.chip-choice { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.chip-choice input { position: absolute; opacity: 0; pointer-events: none; }
.chip-choice:hover { border-color: var(--line-hover); }
.chip-choice:has(input:checked) { color: var(--marca-fuerte); background: var(--marca-suave); border-color: var(--marca); }
.chip-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--marca-tinte); }
.chip-choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.choice small { display: block; color: var(--muted); font-weight: 400; }
.choice select, .choice input[type="date"] { margin-top: 8px; }
.advanced { margin: 0 0 14px; }
.advanced summary { padding: 6px 0; color: var(--rojo-700); font-weight: 650; }
.share-section { margin: 12px 0 10px; }
.person-row-actions { display: flex; flex: none; gap: 4px; }
.share-section h3 { margin-bottom: 8px; }
.people-list { display: grid; gap: 6px; }
.person-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--beige-50); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.person-row small { display: block; color: var(--muted); }
.share-effect { margin: 0; padding: 6px 10px; font-size: 13px; color: var(--beige-800); background: var(--beige-100); border-left: 3px solid var(--beige-700); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
/* Compartir: columnas puede / no puede */
.share-table { display: grid; gap: 2px; margin: 0 0 14px; }
/* display: grid le ganaba al atributo hidden: las columnas salían siempre. */
.share-table[hidden] { display: none; }
.share-table-head, .share-table-row { display: grid; grid-template-columns: 1fr 90px 90px; align-items: center; gap: 8px; }
.share-table-head { padding: 4px 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.share-table-head span:not(:first-child), .share-cell { text-align: center; }
.share-table-row { min-height: 36px; padding: 2px 8px; background: var(--beige-50); border-radius: var(--radius-sm); }
.share-cell { display: grid; place-items: center; height: 32px; cursor: pointer; }
.share-cell input { width: 18px; height: 18px; margin: 0; accent-color: var(--marca); }
.share-table-row:has(input[name$="deny"]:checked) { background: var(--danger-soft); }
.share-table-row:has(input[name="allow"]:checked) { background: var(--ok-soft); }
.share-table > .muted { padding: 6px 8px; font-size: 12px; }
/* Contraseña visible a demanda: el botón vive dentro del campo y le reserva sitio */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 42px; }
.password-eye { position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; transform: translateY(-50%); color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.password-eye:hover { color: var(--ink); background: var(--surface-2); }
.password-eye:focus-visible { color: var(--ink); outline: 2px solid var(--focus); outline-offset: 0; }
.password-eye[aria-pressed="true"] { color: var(--marca); }

/* ------------------------------------------------------------- 9. Copias */
.backup-form { padding: 20px; margin-bottom: 8px; }
.backup-form h2 { margin-bottom: 12px; }
.backup-form form { max-width: 720px; }
.estimate { padding: 10px 12px; background: var(--beige-50); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }

/* --------------------------------------------- 10. Avisos y menú contextual */
/* Los avisos nacen abajo a la derecha; el nuevo entra debajo y empuja al resto hacia arriba. */
.toast-region { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 15px; color: var(--ink); background: color-mix(in srgb, var(--noche-900) 84%, transparent); border-left: 4px solid var(--gris-500); border-radius: var(--radius-sm); box-shadow: var(--shadow); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
.toast > span { min-width: 0; }
.toast.error { border-left-color: var(--rojo-400); }
.toast.error > span::before { content: "⚠ "; }
.toast.success { border-left-color: var(--ok-noche); }
.toast.success > span::before { content: "✓ "; }

/* Favoritos: atajos propios arriba del panel de Carpetas, separados del árbol. */
.tree-favs { display: grid; gap: 1px; margin: 0 0 2px; padding: 0; list-style: none; }
.tree-sep { margin: 6px 4px 8px; border: 0; border-top: 1px solid var(--gris-300); }

/* Compartir: dos desplegables (a usuario, a niveles) y debajo la lista. */
.share-block { margin: 10px 0 0; border: 1px solid var(--gris-300); border-radius: var(--radius-sm); }
.share-block > summary { padding: 8px 12px; font-weight: 600; cursor: pointer; list-style-position: inside; }
.share-block[open] > summary { border-bottom: 1px solid var(--gris-300); }
.share-block-body { display: grid; gap: 8px; padding: 10px 12px; }
.share-block-body > * { margin: 0; }

/* Un documento en su propia pestaña. */
.solo { display: grid; place-content: center; gap: 6px; min-height: 100vh; padding: 24px; text-align: center; }
.solo-nombre { font-size: 17px; font-weight: 600; }
.share-level-buttons { display: flex; justify-content: flex-end; }
/* Menú contextual: compacto y alineado a la izquierda, como el de Windows */
.context-menu { position: fixed; z-index: 60; display: grid; min-width: 220px; padding: 4px; background: var(--surface); border: 1px solid var(--gris-300); border-radius: 6px; box-shadow: var(--shadow); transform-origin: top left; }
.context-menu .menu-item { height: 30px; padding: 0 12px 0 8px; font-size: 14px; border-radius: 4px; }
.context-menu .menu-item > .bi { width: 15px; height: 15px; }

/* ------------------------------- 11. Administración: niveles y accesos rápidos */
.level-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.level-card { display: flex; flex-direction: column; gap: 10px; }
.level-head { display: flex; align-items: center; gap: 12px; }
.level-number { display: grid; width: 36px; height: 36px; flex: none; place-items: center; color: var(--rojo-700); background: var(--marca-tinte); border: 1px solid var(--marca-linea); border-radius: 50%; font-weight: 700; }
.level-facts { display: grid; gap: 2px 10px; grid-template-columns: auto 1fr; margin: 0; font-size: 13px; }
.level-facts dt { color: var(--muted); }
.level-facts dd { margin: 0; }
/* Zona peligrosa: el reinicio de prueba, de un solo uso. Va en vino, no en el
   rojo de la marca, y con borde grueso: que nadie la confunda con una tarjeta. */
.danger-zone { display: grid; gap: 10px; padding: 20px; background: var(--danger-soft); border: 1px solid var(--danger-linea); border-left: 4px solid var(--danger); }
.danger-zone .form-actions { margin-top: 4px; }
.danger-zone.is-spent { background: var(--surface-2); border-color: var(--line); border-left-color: var(--gris-400); }

/* ---------------------------------------------------------------- 12. Visor */
dialog.viewer { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; color: var(--ink); background: var(--noche-900); border: 0; border-radius: 0; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, .6); }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; background: var(--noche-800); border-bottom: 1px solid var(--line); }
.viewer-title { min-width: 0; }
.viewer-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-title small { color: var(--muted); }
.viewer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.viewer-page, .viewer-note { padding: 0 6px; color: var(--ink-2); font-size: 13px; }
.viewer-body { display: grid; height: calc(100vh - 56px); place-items: start center; overflow: auto; padding: 24px; }
.viewer-body .pdf-page { background: var(--blanco); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.viewer-body.viewer-pdf-scroll { display: block; overflow-anchor: none; }
.viewer-pdf-page { display: grid; width: max-content; min-width: 100%; min-height: 260px; margin: 0 auto 20px; place-items: start center; }
.viewer-pdf-page canvas { background: var(--blanco); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.viewer-image { max-width: 100%; height: auto; }
.viewer-video { max-width: 100%; max-height: calc(100vh - 110px); }
.viewer-text, .viewer-doc { --ink: var(--tinta-papel); --line: var(--linea-papel); }
.viewer-text { width: min(900px, 100%); margin: 0; padding: 20px 24px; color: var(--ink); background: var(--blanco); border-radius: var(--radius); font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-doc { width: min(1000px, 100%); min-height: 200px; padding: 28px 40px; color: var(--ink); background: var(--blanco); border-radius: var(--radius); font: 15px/1.6 Georgia, serif; overflow: auto; }
.viewer-doc img { max-width: 100%; }
.viewer-doc-table { padding: 16px; font: 13px/1.4 var(--sans); }
.viewer-doc table { border-collapse: collapse; }
.viewer-doc td, .viewer-doc th { padding: 4px 8px; border: 1px solid var(--line); white-space: nowrap; }
.viewer-doc-table section > h2 { display: none; }
.viewer-status { color: var(--ink-2); }
/* El editor en línea ocupa todo el hueco del visor; su barra la pinta él */
.office-frame { width: 100%; height: calc(100vh - 120px); min-height: 420px; border: 0; }
.office-frame iframe { width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------- 13. Entrada
 * Dos mitades: la marca a la izquierda sobre su hueso, con las franjas rojas
 * del propio logotipo; el formulario a la derecha. En pantalla estrecha se
 * apilan y la marca se queda arriba, como una portada.
 */
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: var(--paper); }
.login-card { display: grid; grid-template-columns: 5fr 6fr; width: min(900px, 100%); padding: 0; overflow: hidden; box-shadow: var(--shadow-lg); }
.login-marca { position: relative; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 64px 32px; background: var(--hueso); border-right: 1px solid var(--line); }
.login-marca::before, .login-marca::after { content: ""; position: absolute; right: 0; left: 0; height: 30px; background: var(--marca); }
.login-marca::before { top: 0; }
.login-marca::after { bottom: 0; }
.login-marca img { width: auto; height: min(240px, 34vh); }
.login-marca p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.login-form { display: grid; align-content: center; padding: 44px 40px; }
.login-form h1 { margin: 0 0 4px; font-size: 26px; }
.login-form form { margin-top: 22px; }
.login-form .button { width: 100%; margin-top: 4px; }

/* ------------------------------------------------------------ 14. Anchuras */
@media (max-width: 1100px) {
  .page-actions { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
  .explorer { grid-template-columns: var(--tree-w, 200px) minmax(0, 1fr); }
  .splitter[data-splitter="inspector"] { display: none; }
  .inspector { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .inspector-actions .button { flex-basis: auto; }
}
@media (max-width: 760px) {
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "top" "side" "main"; }
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar); padding: 8px 12px; }
  .sidebar-toggle { display: none; }
  .brand-compact { display: inline-flex; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .user-text { display: none; }
  .page-head { flex-direction: column; align-items: stretch; }
  .sidebar, .sidebar-collapsed .sidebar { position: static; width: auto; height: auto; overflow: auto; padding: 6px; border-right: 0; border-bottom: 1px solid var(--line); transform: none; visibility: visible; }
  .sidebar .brand, .sidebar-foot, .tree, .list-head { display: none; }
  .sidebar nav { display: flex; }
  .nav-link { white-space: nowrap; }
  .nav-indicador { display: none; }
  .nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--marca); border-radius: 6px 6px 0 0; }
  .explorer { grid-template-columns: 1fr; }
  .splitter { display: none; }
  .item-row { grid-template-columns: 30px minmax(120px, 1fr) 80px; }
  .item-row > :nth-child(4), .item-row > :nth-child(5) { display: none; }
  main { padding: 16px 12px 40px; }
  /* La tabla de personas no se aplasta: conserva su ancho y se desliza dentro de su panel, como las demás tablas. */
  .users-table { min-width: 640px; }
  /* La chuleta de ratón y teclado no sirve en una pantalla táctil. */
  .list-hint { display: none; }
  .login-card { grid-template-columns: 1fr; width: min(440px, 100%); }
  .login-marca { padding: 44px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .login-marca::before, .login-marca::after { height: 20px; }
  .login-marca img { height: 150px; }
  .login-form { padding: 28px 24px; }
}

/* ------------------------------------------------------------ 15. Movimiento
 * Un sistema, no adornos:
 *   · lo que aparece entra (opacidad + 4-8 px) en 120-240 ms con curva de
 *     salida rápida; lo que desaparece se va más deprisa y con curva de entrada;
 *   · nada se mueve al pasar el ratón salvo el texto de la navegación (2 px);
 *     pulsar un botón lo encoge un 2 % durante 90 ms: se nota que respondió;
 *   · un botón (no las opciones de menú) sube 1 px y gana sombra al pasar el ratón;
 *   · las listas entran escalonadas (16-22 ms por fila, tope en la 12);
 *   · los diálogos y el visor entran y SALEN (transiciones con @starting-style);
 *   · la barra lateral se desliza, la marca roja de la sección se desliza,
 *     el chevrón del árbol gira, el aviso sale por donde entró;
 *   · todo se apaga con prefers-reduced-motion.
 */
:root { --curva: cubic-bezier(.2, .7, .3, 1); --curva-salida: cubic-bezier(.16, 1, .3, 1); }

.button, .nav-link, .item-row, .card, .panel, .choice, .editing-chip, .menu-item, .tree-node > button, .tree-toggle,
.form-row input, .form-row select, .form-row textarea, .search input, .toolbar input, .toolbar select,
.password-eye, .sidebar-toggle, .user-menu summary, .breadcrumbs button, .result-row, .data-table td {
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion), box-shadow var(--transicion), transform 90ms ease;
}
.app-shell { transition: grid-template-columns 220ms var(--curva); }

/* Las entradas van con fill-mode backwards, nunca both: al terminar, Chrome deja puesta una transformación
   identidad y el elemento pasa a contener los position: fixed de dentro (el menú «Acciones» salía desplazado). */
@keyframes artyco-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes artyco-fila { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes artyco-fila-entra { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes artyco-fila-sale { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes artyco-suave { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes artyco-aviso { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes artyco-aviso-fuera { to { opacity: 0; transform: translateX(14px); } }
@keyframes artyco-menu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes artyco-menu-ctx { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes artyco-fila-fuera { to { opacity: 0; transform: translateX(18px); } }
@keyframes artyco-recibe { 0% { transform: none; } 40% { transform: scale(1.015); } 100% { transform: none; } }

/* Páginas: el contenido entra por bloques, de arriba abajo */
main > * { animation: artyco-entra 240ms var(--curva-salida) backwards; }
main > :nth-child(2) { animation-delay: 40ms; }
main > :nth-child(3) { animation-delay: 80ms; }
main > :nth-child(4) { animation-delay: 120ms; }
main > :nth-child(n + 5) { animation-delay: 150ms; }
.login-card { animation: artyco-entra 260ms var(--curva-salida) backwards; }

/* Explorador: filas escalonadas; detalle, barra de selección y cola que se posan */
.item-row { animation: artyco-fila 200ms var(--curva) backwards; animation-delay: calc(var(--i, 0) * 16ms); }
.file-area[data-rumbo="entra"] .item-row { animation-name: artyco-fila-entra; }
.file-area[data-rumbo="sale"] .item-row { animation-name: artyco-fila-sale; }
.inspector-body { animation: artyco-suave 160ms var(--curva) backwards; }
.barra-seleccion > * { animation: artyco-suave 140ms var(--curva) backwards; }
.barra-seleccion.is-quieta > * { animation: none; }
.inspector.is-quieta .inspector-body { animation: none; }
.queue-row { animation: artyco-suave 160ms var(--curva) backwards; }
.upload-queue { animation: artyco-entra 220ms var(--curva-salida) backwards; }

/* Diálogos y visor: entran y salen. display y overlay con allow-discrete para
   que la salida se vea antes de que el diálogo desaparezca del todo. */
dialog { opacity: 1; transform: none; transition: opacity 160ms ease-out, transform 220ms var(--curva-salida), overlay 220ms allow-discrete, display 220ms allow-discrete; }
dialog:not([open]) { opacity: 0; transform: translateY(10px) scale(.98); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(10px) scale(.98); } }
dialog::backdrop { transition: background-color 220ms ease-out, overlay 220ms allow-discrete, display 220ms allow-discrete; }
dialog:not([open])::backdrop { background: rgba(34, 35, 39, 0); }
@starting-style { dialog[open]::backdrop { background: rgba(34, 35, 39, 0); } }
dialog.viewer:not([open]) { transform: scale(.995); }
@starting-style { dialog.viewer[open] { transform: scale(.995); } }
.viewer-body > * { animation: artyco-suave 240ms var(--curva-salida) backwards; }

/* Menús y avisos */
.menu[open] > .menu-list { animation: artyco-menu 120ms var(--curva) backwards; }
.context-menu { animation: artyco-menu-ctx 110ms var(--curva) backwards; }
.toast { animation: artyco-aviso 180ms var(--curva-salida) backwards; }
.toast.is-saliendo { animation: artyco-aviso-fuera 160ms ease-in both; }

/* Botones: responden al pulsar */
.button:active:not(:disabled), .menu-item:active:not(:disabled) { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  main > *, .login-card, .item-row, .inspector-body, .barra-seleccion > *, .queue-row, .upload-queue, .viewer-body > *, .menu[open] > .menu-list, .context-menu, .toast, .tree-node.is-nueva, .item-row.is-recibiendo, .item-row.is-saliendo, .file-area.is-dragging .dropzone { animation: none; }
  .item-row.is-saliendo { opacity: 0; }
  .button:active:not(:disabled), .menu-item:active:not(:disabled), .nav-link:hover > span { transform: none; }
  dialog, dialog::backdrop { transition: none; }
}

/* ------------------------------------------------------------ Monitorización (panel de Seguridad) */
.monitor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.monitor-tile { display: grid; align-content: start; gap: 6px; padding: 14px 16px; }
.monitor-tile h3 { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.monitor-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.monitor-tile .muted { font-size: 13px; }
.monitor-tile.is-ok .monitor-value { color: var(--ok); }
.monitor-tile.is-danger .monitor-value { color: var(--danger); }
.monitor-tile.is-warn .monitor-value { color: var(--warn); }
.meter { height: 6px; overflow: hidden; background: var(--gris-100); border-radius: 3px; }
.meter > span { display: block; height: 100%; background: var(--gris-600); border-radius: 3px; transition: width .4s var(--curva); }
.meter.is-warn > span { background: var(--warn); }
.meter.is-danger > span { background: var(--danger); }
.monitor-foot { margin-top: 12px; font-size: 12px; }

/* ------------------------------------------------------------ Sustituir: zona para soltar o elegir el archivo */
.file-drop-zone { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; color: var(--ink-2); background: var(--beige-50); border: 1.5px dashed var(--line-strong); border-radius: var(--radius); text-align: center; cursor: pointer; transition: background var(--transicion), border-color var(--transicion); }
.file-drop-zone:hover, .file-drop-zone.is-over, .file-drop input:focus-visible + .file-drop-zone { background: var(--marca-suave); border-color: var(--marca); }
.file-drop-zone strong { color: var(--ink); font-size: 15px; }
.file-drop-zone u { color: var(--rojo-700); text-underline-offset: 3px; }
.file-drop-icon { width: 26px; height: 26px; margin-bottom: 2px; fill: none; stroke: var(--marca); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file-drop-name { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.file-drop-zone.has-file { background: var(--ok-soft); border-style: solid; border-color: var(--ok); }
.file-drop-zone.has-file .file-drop-name { color: var(--ink); font-weight: 600; }

/*
 * Entrada al área tras iniciar sesión (0.10.2), 2,4 s en cuatro tiempos:
 *   0–0,4 s   al llegar el OK suena la entrada y la pantalla de acceso se funde
 *             (se apaga, se recoge y se desenfoca) mientras el gris de la marca
 *             aparece encima: un fundido cruzado, nada se quita de golpe;
 *   0,2–1 s   el logotipo se descubre de arriba abajo mientras sube un poco;
 *   0,6–1,5 s la raya se abre desde el centro y «Área privada» sube y se enfoca;
 *   1,8–2,4 s todo se funde sobre el área, pintada debajo cuando ya estaba tapada.
 * Solo se animan opacidad, desplazamiento, recorte y desenfoque: nada cambia de
 * tamaño, así que nada se recoloca en cada fotograma. La capa es fija y el hueco
 * de la barra de scroll está reservado.
 */
.entrada { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center;
  /* Luz blanca y un eco del rojo de la marca en el centro, sobre gris uniforme: los bordes
     quedan en el mismo gris que el hueco de la barra de scroll, sin franja. */
  background:
    radial-gradient(50% 62% at 50% 44%, rgb(255 255 255 / .92) 0%, rgb(255 255 255 / .6) 38%, rgb(255 255 255 / .2) 72%, rgb(255 255 255 / 0) 100%),
    radial-gradient(26% 22% at 50% 46%, color-mix(in srgb, var(--marca) 6%, transparent) 0%, transparent 100%),
    var(--gris-200);
  animation: artyco-entrada 2.4s linear forwards; }
.entrada-marca { display: grid; justify-items: center; width: 320px; gap: 26px; animation: artyco-entrada-sale 2.4s var(--curva) forwards; will-change: transform, opacity; }
.entrada-marca img { width: 154px; height: auto; animation: artyco-entrada-logo 2.4s var(--curva-salida) both; will-change: transform, opacity, clip-path; }
.entrada-marca::after { content: ""; order: 1; width: 86px; height: 2px; background: var(--marca); border-radius: 2px; transform: scaleX(0); animation: artyco-entrada-raya 2.4s var(--curva-salida) both; will-change: transform; }
.entrada-marca p { order: 2; margin: 0; color: var(--ink-2); font-size: 18px; font-weight: 600; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; white-space: nowrap; animation: artyco-entrada-texto 2.4s var(--curva-salida) both; will-change: transform, opacity; }
@keyframes artyco-entrada { 0% { opacity: 0; } 17%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes artyco-entrada-logo { 0%, 8% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(12px); } 42% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes artyco-entrada-raya { 0%, 25% { transform: scaleX(0); } 58%, 100% { transform: scaleX(1); } }
@keyframes artyco-entrada-texto { 0%, 25% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 62%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes artyco-entrada-sale { 0%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .entrada-marca, .entrada-marca img, .entrada-marca::after, .entrada-marca p { animation: none; transform: none; filter: none; } .login-page.is-saliendo .login-card { transform: none; filter: none; } }
/* La pantalla de acceso se va fundiéndose bajo la marca, no de golpe. */
.login-page.is-saliendo .login-card { opacity: 0; transform: translateY(-6px) scale(.985); filter: blur(3px); transition: opacity 380ms var(--curva), transform 420ms var(--curva), filter 380ms var(--curva); pointer-events: none; }
/* La barra de scroll no desplaza nada al aparecer: su hueco está siempre reservado. */
html { scrollbar-gutter: stable; }
html.en-entrada { overflow: hidden; background-color: var(--gris-200); scrollbar-color: var(--gris-200) var(--gris-200); }

/* Recuadro de selección en la zona en blanco de la lista. */
.marquee { position: fixed; z-index: 60; background: color-mix(in srgb, var(--marca) 12%, transparent); border: 1px solid var(--marca); border-radius: 2px; pointer-events: none; }
.file-area.is-recuadro { user-select: none; }

/* Actividad: un lote de la misma acción se ve como una fila que se despliega. */
.audit-grupo summary { color: var(--marca-fuerte); font-weight: 600; cursor: pointer; }
.audit-grupo ul { margin: 6px 0 0; padding-left: 18px; }
.audit-grupo li { margin: 2px 0; }

/* Dentro de Editar persona: desactivar o activar la cuenta, apartado del resto y con confirmación. */
.zona-cuenta { display: flex; justify-content: flex-start; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Inicio: Trabajos y Gestión como dos paneles con foto, mitad y mitad. */
.area-panels { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.area-panel { position: relative; display: block; height: clamp(190px, 21vw, 300px); overflow: hidden; color: var(--blanco); background: var(--gris-800); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; isolation: isolate; }
.area-panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s; }
.area-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 20 22 / .05) 35%, rgb(20 20 22 / .62)); transition: background .4s; }
.area-panel-title { position: absolute; left: 28px; bottom: 24px; font-family: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.area-panel-title::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 10px; background: var(--marca); transition: width .4s cubic-bezier(.2, .7, .2, 1); }
.area-panel:hover img, .area-panel:focus-visible img { transform: scale(1.04); filter: saturate(1); }
.area-panel:hover .area-panel-title::after, .area-panel:focus-visible .area-panel-title::after { width: 72px; }
@media (max-width: 900px) { .area-panels { grid-template-columns: minmax(0, 1fr); } .area-panel { height: auto; aspect-ratio: 16 / 9; } .area-panel-title { left: 20px; bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .area-panel img, .area-panel-title::after { transition: none; } }
/* Detalle: primera página de un Word o primera hoja de un Excel, en pequeño y desvanecida abajo. */
.preview-doc { --ink: var(--tinta-papel); --line: var(--linea-papel); place-self: stretch; max-height: 420px; overflow: hidden; padding: 14px 16px; color: var(--ink); background: var(--blanco); font: 11px/1.5 Georgia, serif; -webkit-mask-image: linear-gradient(180deg, var(--blanco) 78%, transparent); mask-image: linear-gradient(180deg, var(--blanco) 78%, transparent); }
.preview-doc img { max-width: 100%; }
.preview-doc h1, .preview-doc h2, .preview-doc h3 { margin: 0 0 6px; font-size: 13px; }
.preview-doc p { margin: 0 0 6px; }
.preview-doc-table { padding: 8px; font: 10px/1.35 var(--sans); }
.preview-doc-table section > h2 { display: none; }
.preview-doc table { border-collapse: collapse; }
.preview-doc td, .preview-doc th { padding: 2px 5px; border: 1px solid var(--line); white-space: nowrap; }
/* Aviso de cierre por inactividad: abajo en el centro, por encima de todo. */
.aviso-inactividad { position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 12px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--marca); border-radius: var(--radius-sm); box-shadow: var(--shadow); transform: translateX(-50%); }
.aviso-inactividad p { margin: 0; }
.sessions-table td small { display: block; }
@media (max-width: 760px) { .aviso-inactividad { flex-direction: column; align-items: stretch; } }
/* Carpeta con miles de archivos: tras la tanda pintada, un botón para ver más. */
.mas-filas { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-soft); }
/* Inicio (0.10.4): bajo Trabajos y Gestión, Favoritos y Tutorial a mitad y mitad. */
.home-panels { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) { .home-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-panel { display: grid; align-content: start; gap: 10px; min-height: 180px; }
.home-panel h2 { font-size: 17px; }
.home-list { display: grid; gap: 2px; max-height: 320px; margin: 0; padding: 0; overflow: auto; list-style: none; }
@media (max-width: 900px) { .home-panels { grid-template-columns: minmax(0, 1fr); } }
.modal-list { margin: 8px 0 12px; padding-left: 18px; max-height: 180px; overflow: auto; }
/* 0.10.7 · vista previa del PDF en desplazamiento, como Word; visor con zoom y página separados. */
.preview-pdf-scroll { display: grid; gap: 10px; height: 440px; overflow-y: auto; padding-right: 4px; }
.preview-pdf-slot { display: grid; place-items: start center; background: var(--blanco); }
.viewer-group { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-left: 1px solid rgba(255, 255, 255, .15); }
.viewer-group:first-child { border-left: 0; padding-left: 0; }
.viewer-zoom { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.viewer-goto { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.viewer-page-input { width: 4em; padding: 4px 6px; text-align: center; font: inherit; color: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; }
.viewer-page-input:focus { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 1px; }
/* 0.10.7 · permisos al crear la obra, en la plantilla. */
.tpl-access { display: grid; gap: 8px; margin-top: 14px; }
.tpl-access h3 { margin: 0; font-size: 15px; }
.tpl-access-rows { display: grid; gap: 6px; }
.tpl-access-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
@media (max-width: 640px) { .tpl-access-row { grid-template-columns: minmax(0, 1fr) auto; } .tpl-access-row .tpl-path { grid-column: 1 / -1; } }
/* 0.11.0 · cabeceras que ordenan, paneles con su propio desplazamiento y barras del tema. */
.list-sort { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 0; color: inherit; background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.list-sort:hover, .list-sort.is-activa { color: var(--ink); }
.list-sort:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }
.sort-arrow { font-size: 9px; color: var(--marca); }
@media (min-width: 1101px) {
  .explorer { height: max(420px, calc(100dvh - var(--explorer-top, 190px) - var(--explorer-gap, 20px))); min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .tree, .inspector { overflow-y: auto; overscroll-behavior: contain; }
  .file-area { min-height: 0; }
  .item-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
.tree, .inspector, .item-list, .preview-pdf-scroll, .home-list, .viewer-body { scrollbar-width: thin; scrollbar-color: var(--gris-300) transparent; }
.tree:hover, .inspector:hover, .item-list:hover, .preview-pdf-scroll:hover, .home-list:hover { scrollbar-color: var(--gris-500) transparent; }
/* 0.11.0 · aviso de progreso (Creando ZIP…), con fundido de entrada y salida. */
.aviso-progreso { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(20, 20, 22, .38); opacity: 0; transition: opacity 280ms var(--curva); }
.aviso-progreso.is-visible { opacity: 1; }
.aviso-progreso-caja { display: grid; gap: 10px; width: min(420px, calc(100vw - 32px)); padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); transform: translateY(8px); transition: transform 280ms var(--curva); }
.aviso-progreso.is-visible .aviso-progreso-caja { transform: none; }
.aviso-progreso-caja strong { font-size: 16px; }
.aviso-progreso-texto { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.aviso-progreso-caja small { color: var(--muted); }
.aviso-progreso-barra { position: relative; height: 8px; overflow: hidden; background: var(--gris-200); border-radius: 999px; }
.aviso-progreso-barra span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--marca); border-radius: inherit; transition: width 200ms linear; }
.aviso-progreso.is-indeterminado .aviso-progreso-barra span { width: 35%; animation: aviso-progreso-ir 1.1s ease-in-out infinite; }
@keyframes aviso-progreso-ir { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .aviso-progreso, .aviso-progreso-caja { transition: none; } .aviso-progreso.is-indeterminado .aviso-progreso-barra span { animation: none; width: 100%; opacity: .4; } }
/* 0.11.0 · filtrar dentro de la carpeta y elegir lista o cuadrícula. */
.filtro-texto, .filtro-tipo-select { height: var(--boton-small); padding: 0 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.filtro-texto { flex: 0 1 220px; min-width: 120px; }
.filtro-tipo-select { flex: none; }
/* El anillo va hacia dentro: los campos se despliegan dentro de una caja que recorta lo que se sale. */
.filtro-texto:focus, .filtro-tipo-select:focus { border-color: var(--marca); outline: none; box-shadow: inset 0 0 0 1px var(--marca); }
/* La búsqueda: plegada solo se ve la lupa; desplegada, los campos crecen en la misma fila. Con un filtro activo la lupa se marca. */
.busca-campos { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; max-width: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-width 240ms var(--curva), opacity 160ms ease-out, visibility 0s linear 240ms; }
.busca-abierta .busca-campos { max-width: 100%; opacity: 1; visibility: visible; transition: max-width 240ms var(--curva), opacity 200ms ease-out 40ms, visibility 0s; }
.busca-lupa[aria-expanded="true"] { background: var(--surface-2); }
.busca-lupa.is-filtrando { color: var(--marca); background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca); }
.vista-botones { display: inline-flex; gap: 2px; margin-left: auto; }
.vista-botones [aria-pressed="true"] { color: var(--marca); background: var(--marca-suave); }
/* Cuadrícula: las mismas filas (selección, arrastre, teclado) puestas en fichas con su miniatura. Las filas miden lo que su
   contenido (max-content): con muchas fotos no queda hueco libre y la rejilla las dejaba en su mínimo, solapándose (0.11.2). */
.list-head.is-cuadricula { display: flex; gap: 18px; }
.list-head.is-cuadricula > span:first-child { display: none; }
.item-list.is-cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 12px; padding: 12px; grid-auto-rows: max-content; }
.item-list.is-cuadricula > :not(.item-row) { grid-column: 1 / -1; }
.item-list.is-cuadricula .item-row { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; padding: 6px 6px 8px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.item-list.is-cuadricula .item-row::before { display: none; }
.item-list.is-cuadricula .item-row:hover { border-color: var(--line); }
.item-list.is-cuadricula .item-row.is-selected { background: var(--marca-suave); box-shadow: inset 0 0 0 2px var(--marca); }
.item-list.is-cuadricula .item-name { flex: none; flex-direction: column; align-items: stretch; gap: 6px; height: auto; }
.item-list.is-cuadricula .item-name > span:last-child { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.item-list.is-cuadricula .item-row > small { padding: 0 2px; font-size: 12px; }
.item-list.is-cuadricula .item-row > small:nth-of-type(n + 2) { display: none; }
.item-list.is-cuadricula .item-row input[type="checkbox"] { position: absolute; top: 12px; left: 12px; z-index: 1; }
.miniatura { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border-radius: 4px; }
.miniatura .icon { width: 34px; height: 34px; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; animation: artyco-miniatura 220ms ease-out; }
@keyframes artyco-miniatura { from { opacity: 0; } }
/* Comparar dos fotos lado a lado. */
.viewer-body.comparar { grid-template-columns: repeat(2, minmax(0, 1fr)); place-items: stretch; gap: 16px; }
.comparar-foto { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; height: calc(100vh - 56px - 48px); margin: 0; }
.comparar-marco { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.comparar-marco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.comparar-foto figcaption { color: var(--noche-100); font-size: 13px; text-align: center; }
@media (max-width: 700px) { .viewer-body.comparar { grid-template-columns: minmax(0, 1fr); } .comparar-foto { height: auto; } }
/* Sugerencias de la barra de búsqueda (Ctrl+K). */
.sugerencias { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 60; display: grid; max-height: min(440px, 70vh); padding: 6px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); scrollbar-width: thin; }
.sugerencias-titulo { margin: 4px 10px 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sugerencias-vacia { margin: 0; padding: 14px; color: var(--muted); text-align: center; }
.sugerencia { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: 10px; width: 100%; padding: 7px 10px; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-sm); text-align: left; cursor: pointer; }
.sugerencia[aria-selected="true"], .sugerencia:hover { background: var(--marca-suave); }
.sugerencia .icon { width: 16px; height: 16px; }
.sugerencia-nombre, .sugerencia small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugerencia-nombre { font-weight: 600; }
.sugerencia small { grid-column: 2; color: var(--muted); font-size: 12px; }
/* Atajos de teclado. */
.atajos { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 18px; margin: 0; }
.atajos dt { white-space: nowrap; }
.atajos dd { margin: 0; color: var(--ink-2); }
.atajos kbd { display: inline-block; padding: 1px 6px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; font: 12px var(--mono); }

/* ------------------------------------------------- 16. Pantallas pequeñas (0.11.1)
 * Portátiles de 1440 y de 1280 px: el explorador, que es donde se trabaja, gana sitio. Se encogen, de forma proporcionada,
 * la letra, las alturas de fila, de cabecera y de barra, los rellenos de los paneles y los botones. Casi todo sale de las
 * variables de :root; la altura del explorador (ajustaExplorador) se mide en pantalla, así que no depende de estos números.
 * El modo móvil (hasta 760 px) conserva sus medidas táctiles: aquí no entra.
 */
@media (max-width: 1440px) and (min-width: 761px) {
  :root { --boton: 28px; --boton-small: 26px; --barra-lista: 42px; --fila: 40px; --cabecera-lista: 32px; --fila-arbol: 29px; --cabecera-pagina: 36px; --panel-pad: 12px; }
  body { font-size: 14px; }
  main { padding-top: 10px; }
  .page-head { margin-bottom: 10px; }
  .page-head h1 { font-size: 17px; }
  .button { padding: 0 11px; font-size: 10.5px; }
  .button-small { padding: 0 9px; }
  .button-icon { padding: 0; }
  .menu-item { height: 31px; font-size: 13px; }
  .context-menu .menu-item { height: 28px; font-size: 13px; }
  .breadcrumbs button { font-size: 13px; }
  .list-head { font-size: 11px; }
  .barra-lista { gap: 6px; }
  .filtro-texto, .filtro-tipo-select { font-size: 13px; }
  .inspector-head { grid-template-columns: 34px 1fr; gap: 0 10px; }
  .inspector-head .icon { width: 34px; height: 34px; padding: 8px; }
  .inspector-head h3 { font-size: 14px; }
  .inspector-head .muted, .inspector-datos, .editing-list { font-size: 12.5px; }
  .inspector-datos { padding: 6px 9px; }
  .inspector dl { gap: 2px 10px; }
  .inspector-actions { gap: 5px; }
  .tree-fav, .tree-node > button:last-child { gap: 6px; }
  .list-hint { padding: 8px 12px; }
}
@media (max-width: 1280px) and (min-width: 761px) {
  :root { --boton: 26px; --boton-small: 24px; --barra-lista: 38px; --fila: 36px; --cabecera-lista: 28px; --fila-arbol: 26px; --cabecera-pagina: 32px; --panel-pad: 10px; }
  body { font-size: 13.5px; }
  main { padding-top: 8px; }
  .page-head { margin-bottom: 8px; }
  .page-head h1 { font-size: 16px; }
  .button { padding: 0 10px; font-size: 10px; letter-spacing: .1em; }
  .button-small { padding: 0 8px; }
  .menu-item { height: 29px; font-size: 12.5px; }
  .context-menu .menu-item { height: 26px; font-size: 12.5px; }
  .breadcrumbs button { font-size: 12.5px; }
  .list-head { font-size: 10.5px; }
  .barra-lista { gap: 5px; }
  .filtro-texto, .filtro-tipo-select { font-size: 12.5px; }
  .inspector-head { grid-template-columns: 30px 1fr; gap: 0 8px; }
  .inspector-head .icon { width: 30px; height: 30px; padding: 7px; }
  .inspector-head h3 { font-size: 13.5px; }
  .inspector-head .muted, .inspector-datos, .editing-list { font-size: 12px; }
  .inspector-datos { padding: 5px 8px; }
  .inspector dl { gap: 2px 8px; }
  .inspector-actions { gap: 4px; }
  .tree-fav, .tree-node > button:last-child { gap: 5px; }
  .list-hint { padding: 6px 10px; }
}
/* 0.11.1 · lista estrecha: fuera Tipo; más estrecha, fuera también Tamaño (las clases las pone medidorLista). */
.file-area.lista-estrecha .list-head:not(.is-cuadricula), .file-area.lista-estrecha .item-list:not(.is-cuadricula) .item-row { grid-template-columns: 34px minmax(140px, 1fr) 90px 160px; }
.file-area.lista-estrecha .list-head.hide-checks:not(.is-cuadricula), .file-area.lista-estrecha .item-list.hide-checks:not(.is-cuadricula) .item-row { grid-template-columns: 6px minmax(140px, 1fr) 90px 160px; }
.file-area.lista-estrecha .list-head:not(.is-cuadricula) > :nth-child(3), .file-area.lista-estrecha .item-list:not(.is-cuadricula) .item-row > small:nth-of-type(1) { display: none; }
.file-area.lista-minima .list-head:not(.is-cuadricula), .file-area.lista-minima .item-list:not(.is-cuadricula) .item-row { grid-template-columns: 34px minmax(120px, 1fr) 160px; }
.file-area.lista-minima .list-head.hide-checks:not(.is-cuadricula), .file-area.lista-minima .item-list.hide-checks:not(.is-cuadricula) .item-row { grid-template-columns: 6px minmax(120px, 1fr) 160px; }
.file-area.lista-minima .list-head:not(.is-cuadricula) > :nth-child(4), .file-area.lista-minima .item-list:not(.is-cuadricula) .item-row > small:nth-of-type(2) { display: none; }