/* UI polish (better-ui): profundidad con sombras, radios concéntricos, contorno de imágenes, feedback táctil e íconos contextuales.
   Modo oscuro único: un solo anillo blanco translúcido como "borde"; los bordes de estado, divisores e inputs se conservan. */
:root {
  /* paleta unificada con la app (las páginas públicas y admin la heredan) */
  --bg: #0a0b0f; --card: #151823; --line: #242938; --text: #eef0f5; --muted: #8a91a3; --accent: #6d8bff; --danger: #ff5c7a; --ok: #3ecf8e;
  --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.08);
  --shadow-border-hover: 0 0 0 1px oklch(1 0 0 / 0.13);
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);     /* entradas: arranca rápido, se siente inmediato */
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); /* movimiento en pantalla */
}

/* --- Superficies: sombra en vez de borde para profundidad (no para divisores ni inputs) --- */
.card, .item, dialog, .fmenu-pop, .selbar, .share, .fpanel, .deckbar, .viewing, .tbl, .box, .tbl {
  border-color: transparent;
  box-shadow: var(--shadow-border);
}
.item, .card, .box {
  transition-property: box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .item:hover:not(.selected):not(.included):not(.dragover) { border-color: transparent; box-shadow: var(--shadow-border-hover); }
}
.deckbar { box-shadow: 0 0 0 1px oklch(0.7 0.15 160 / 0.35); }   /* estado "armando presentación": el color sigue siendo la señal */
.viewing { box-shadow: 0 0 0 1px oklch(0.75 0.12 300 / 0.35); }

/* --- Botones: anillo de sombra, escala 0.96 al presionar, transición solo de lo que cambia --- */
button, .btn, .gbtn {
  border-color: transparent;
  box-shadow: var(--shadow-border);
  transition-property: scale, box-shadow, background-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
@media (hover: hover) and (pointer: fine) {
  button:hover:not(:disabled), .btn:hover { border-color: transparent; box-shadow: var(--shadow-border-hover); }
}
button:active:not(:disabled), .btn:active, .gbtn:active { scale: 0.96; }
button.primary, .btn.primary, .gbtn, .viewer .nav, .fmenu, .fmenu-pop button, .crumbs a, .selbar a { box-shadow: none; }
button.on { box-shadow: 0 0 0 1px oklch(0.7 0.15 160 / 0.5); }
.viewer .nav { transition-property: scale, background-color; }
.viewer .nav:active { scale: 0.96; }
.selbar a, .deckbar a.lnk { transition-property: color; transition-duration: 150ms; transition-timing-function: ease-out; }

/* --- Radios concéntricos: exterior = interior + padding --- */
.card { border-radius: 24px; padding: 16px; }
.card .viewer, .card .thumbs > div, .card .desc textarea, .card .deckbox textarea { border-radius: 8px; }
dialog { border-radius: 24px; padding: 16px; }
dialog textarea, dialog input[type=text], dialog input[type=password], dialog select { border-radius: 8px; }
.item .note textarea { border-radius: 4px; }              /* 12 − 8 */
.selbar { border-radius: 18px; padding: 8px; }
.selbar button, .selbar select { border-radius: 10px; }   /* 18 − 8 */
.share, .fpanel, .deckbar { border-radius: 16px; padding: 8px; }
.share input, .share button, .share .btn, .share select, .fpanel input, .fpanel button, .fpanel .btn, .fpanel select, .deckbar button, .deckbar .btn { border-radius: 8px; }
.fmenu-pop { border-radius: 14px; padding: 6px; }
.fmenu-pop button { border-radius: 8px; }

/* --- Imágenes y videos: contorno blanco puro al 10 %, dibujado hacia adentro --- */
img, video { outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }
#userChip img { outline: none; }

/* --- Íconos contextuales: opacidad + escala + blur en vez de mostrar/ocultar --- */
.item .chk {
  display: grid;
  opacity: 0; scale: 0.25; filter: blur(4px);
  pointer-events: none;
  transition-property: opacity, scale, filter, background-color, border-color;
  transition-duration: 300ms;
  transition-timing-function: var(--ease-std);
}
body.selecting .item .chk, body.deckmode .item[data-id] .chk, .item.selected .chk, .item.included .chk {
  opacity: 1; scale: 1; filter: blur(0px);
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  .item:hover .chk { opacity: 1; scale: 1; filter: blur(0px); pointer-events: auto; }
}

/* --- Alineación óptica del triángulo de play --- */
.thumbs .ico, .thumb .play, .viewer .nav.next { translate: 2px 0; }
.viewer .nav.prev { translate: -1px 0; }

/* --- Entradas: transiciones interrumpibles con @starting-style (nunca desde scale(0); exit instantáneo) --- */
#preview .card {
  opacity: 1; translate: 0 0; filter: blur(0px);
  transition-property: opacity, translate, filter, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out-strong);
  @starting-style { opacity: 0; translate: 0 8px; filter: blur(2px); }
}
/* menú contextual de carpeta: escala desde su disparador (arriba a la derecha), 150 ms */
.fmenu-pop {
  transform-origin: top right;
  opacity: 1; scale: 1;
  transition-property: opacity, scale;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out-strong);
  @starting-style { opacity: 0; scale: 0.95; }
}
/* diálogos: centrados (no anclados), 200 ms; el fondo se funde a la par */
dialog[open] {
  transform-origin: center;
  opacity: 1; scale: 1;
  transition-property: opacity, scale, overlay, display;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out-strong);
  transition-behavior: allow-discrete;
  @starting-style { opacity: 0; scale: 0.96; }
}
dialog[open]::backdrop {
  opacity: 1;
  transition-property: opacity, overlay, display;
  transition-duration: 200ms;
  transition-timing-function: ease;
  transition-behavior: allow-discrete;
  @starting-style { opacity: 0; }
}
/* barra de selección y paneles ocasionales: entran desde abajo/arriba con desplazamiento porcentual, salen al instante */
.selbar:not([hidden]) {
  opacity: 1; translate: -50% 0;
  transition-property: opacity, translate;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out-strong);
  @starting-style { opacity: 0; translate: -50% 100%; }
}
.deckbar:not([hidden]), .fpanel:not([hidden]), .viewing:not([hidden]) {
  opacity: 1; translate: 0 0;
  transition-property: opacity, translate;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out-strong);
  @starting-style { opacity: 0; translate: 0 -6px; }
}
/* primera carga de la grilla: escalonado corto (40 ms) solo la primera vez; las re-renderizaciones frecuentes no se animan */
.grid.first-load .item { opacity: 0; translate: 0 8px; animation: grid-in 250ms var(--ease-out-strong) forwards; }
.grid.first-load .item:nth-child(1) { animation-delay: 0ms; }  .grid.first-load .item:nth-child(2) { animation-delay: 40ms; }
.grid.first-load .item:nth-child(3) { animation-delay: 80ms; } .grid.first-load .item:nth-child(4) { animation-delay: 120ms; }
.grid.first-load .item:nth-child(5) { animation-delay: 160ms; } .grid.first-load .item:nth-child(6) { animation-delay: 200ms; }
.grid.first-load .item:nth-child(n+7) { animation-delay: 240ms; }
@keyframes grid-in { to { opacity: 1; translate: 0 0; } }
/* spinner más rápido: la carga se percibe más corta */
.spinner { animation-duration: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  /* menos y más suave, no cero: se conservan opacidad y color, se quita el movimiento */
  #preview .card, .fmenu-pop, dialog[open], .selbar:not([hidden]), .deckbar:not([hidden]), .fpanel:not([hidden]), .viewing:not([hidden]) {
    transition-property: opacity; translate: 0 0; scale: 1; filter: none;
  }
  .grid.first-load .item { animation: none; opacity: 1; translate: 0 0; }
  button:active:not(:disabled), .btn:active, .gbtn:active, .viewer .nav:active { scale: 1; }
  .item .chk { transition-property: opacity, background-color, border-color; scale: 1; filter: none; }
}

/* páginas sin variables propias (login) */
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.box { background: var(--card); border-radius: 20px; }
.gbtn { border-radius: 12px; }