/*
 * srz-ui.css — Capa común de las herramientas (misma estética que el dashboard v2).
 * Uso: <html lang="es" class="srz-ui"> + <link rel="stylesheet" href="/srz-ui.css"> después del <style> de la página.
 * Las reglas van con html.srz-ui delante para ganar al CSS antiguo de cada herramienta sin !important.
 * Cada página remata lo suyo en un <style id="srz-v2"> propio, usando estos tokens.
 *
 * Entrada orquestada: data-enter en el contenedor principal → sus hijos entran escalonados una vez.
 * Utilidades: .srz-title (título de página), .srz-sub, .srz-kicker (insignia pequeña junto al título).
 */
:root {
  --srz-bg: #050407;
  --srz-card: #0d0a0e;
  --srz-card-h: #130e13;
  --srz-raise: #1a1419;
  --srz-line: rgba(243,238,232,.08);
  --srz-line-2: rgba(243,238,232,.14);
  --srz-line-red: rgba(255,90,78,.32);
  --srz-red: #e0201b;
  --srz-red-l: #ff5a4e;
  --srz-red-xl: #ff8d82;
  --srz-red-d: #7a0a10;
  --srz-red-soft: rgba(224,32,27,.12);
  --srz-bone: #f3eee8;
  --srz-muted: #a39aa3;
  --srz-dim: #6f6670;
  --srz-ok: #6ee7b7;
  --srz-warn: #fcd34d;
  --srz-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --srz-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --srz-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --srz-ease: cubic-bezier(.16,1,.3,1);
  --srz-spring: cubic-bezier(.34,1.56,.64,1);
  --srz-grad: linear-gradient(180deg,#f23a32,#c9140f 55%,#9d0c0c);
  --srz-grad-shadow: inset 0 1px 0 rgba(255,178,168,.55), 0 10px 26px -10px rgba(224,32,27,.75);
  --srz-surface: linear-gradient(165deg,#151015,#0b090c 70%);
  --srz-surface-h: linear-gradient(165deg,#1b1217,#0d0a0e 70%);
  --srz-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -30px rgba(0,0,0,.9);
}

html.srz-ui {
  color-scheme: dark;
  background:
    radial-gradient(1000px 540px at 10% -14%, rgba(224,32,27,.13), transparent 60%),
    radial-gradient(760px 460px at 100% -4%, rgba(122,10,16,.17), transparent 62%),
    var(--srz-bg);
  background-attachment: fixed;
}
html.srz-ui body {
  font-family: var(--srz-sans);
  color: var(--srz-bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: transparent;
}
html.srz-ui button, html.srz-ui input, html.srz-ui select, html.srz-ui textarea { font-family: inherit; }
html.srz-ui ::selection { background: var(--srz-red); color: #fff; }
html.srz-ui ::placeholder { color: var(--srz-dim); opacity: 1; }
html.srz-ui select option, html.srz-ui select optgroup { background: #140f14; color: var(--srz-bone); }
html.srz-ui :focus-visible { outline: 2px solid rgba(255,90,78,.7); outline-offset: 2px; }
html.srz-ui input:focus-visible, html.srz-ui textarea:focus-visible, html.srz-ui select:focus-visible { outline: none; }
html.srz-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
html.srz-ui ::-webkit-scrollbar-track { background: transparent; }
html.srz-ui ::-webkit-scrollbar-thumb { background: #2a1f25; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html.srz-ui ::-webkit-scrollbar-thumb:hover { background-color: #45282f; }
html.srz-ui input[type=checkbox], html.srz-ui input[type=radio], html.srz-ui input[type=range], html.srz-ui progress { accent-color: var(--srz-red); }
html.srz-ui .tnum { font-variant-numeric: tabular-nums; }

/* Barra superior de las herramientas: flotante y de cristal, como la del dashboard.
   <nav class="top-nav srz-toolbar"> con .srz-back, un título (.nav-title / .top-nav-title) y un icono (.nav-icon / .top-nav-icon). */
html.srz-ui .srz-toolbar {
  position: fixed; top: 14px; left: 20px; right: 20px; height: 60px; z-index: 100;
  display: flex; align-items: center; gap: 14px; padding: 0 10px 0 10px;
  border-radius: 18px; border: 1px solid var(--srz-line);
  background: rgba(13,10,14,.66); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 40px rgba(0,0,0,.45); animation: srzDrop .8s var(--srz-ease) both;
}
@keyframes srzDrop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
html.srz-ui .srz-toolbar .nav-title, html.srz-ui .srz-toolbar .top-nav-title {
  flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--srz-display); font-size: 16.5px; font-weight: 700; letter-spacing: -.025em;
  color: var(--srz-bone); background: none; -webkit-text-fill-color: currentColor;
}
html.srz-ui .srz-toolbar .nav-icon, html.srz-ui .srz-toolbar .top-nav-icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(180deg, rgba(224,32,27,.22), rgba(224,32,27,.05)); border: 1px solid rgba(255,90,78,.24);
  box-shadow: inset 0 1px 0 rgba(255,178,168,.15), 0 10px 24px -12px rgba(224,32,27,.7);
}
@media (max-width: 640px) {
  html.srz-ui .srz-toolbar { top: 10px; left: 10px; right: 10px; height: 56px; }
  html.srz-ui .srz-toolbar .srz-back span { display: none; }
  html.srz-ui .srz-toolbar .srz-back { padding: 0 10px; }
}

/* Piezas comunes para las páginas rehechas */
html.srz-ui .srz-card { border: 1px solid var(--srz-line); border-radius: 22px; background: var(--srz-surface); box-shadow: var(--srz-shadow); }
html.srz-ui .srz-ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #ff9a90;
  background: linear-gradient(180deg, rgba(224,32,27,.22), rgba(224,32,27,.05)); border: 1px solid rgba(255,90,78,.22);
}

/* Tipografía común */
html.srz-ui .srz-title {
  font-family: var(--srz-display); font-weight: 750; letter-spacing: -.045em; line-height: .98;
  font-size: clamp(32px, 4.4vw, 52px); font-variation-settings: 'opsz' 96;
}
html.srz-ui .srz-sub { color: var(--srz-muted); font-size: 15px; line-height: 1.6; max-width: 60ch; }
html.srz-ui .srz-kicker {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px;
  border: 1px solid var(--srz-line); background: rgba(243,238,232,.035); color: #d5ccd2; font-size: 12.5px; font-weight: 500;
}
html.srz-ui .srz-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--srz-red-l); box-shadow: 0 0 10px var(--srz-red-l); }

/* Entrada orquestada (una sola vez al cargar) */
@keyframes srzUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes srzFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes srzPop { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes srzShine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes srzSpin { to { transform: rotate(360deg); } }
html.srz-ui [data-enter] > * { animation: srzUp .9s var(--srz-ease) both; }
html.srz-ui [data-enter] > *:nth-child(2) { animation-delay: .06s; }
html.srz-ui [data-enter] > *:nth-child(3) { animation-delay: .12s; }
html.srz-ui [data-enter] > *:nth-child(4) { animation-delay: .18s; }
html.srz-ui [data-enter] > *:nth-child(5) { animation-delay: .24s; }
html.srz-ui [data-enter] > *:nth-child(6) { animation-delay: .3s; }
html.srz-ui [data-enter] > *:nth-child(n+7) { animation-delay: .34s; }

/* Ventanas: entrada con despliegue al abrir */
html.srz-ui .srz-pop { animation: srzPop .5s var(--srz-ease) both; }

@media (prefers-reduced-motion: reduce) {
  html.srz-ui *, html.srz-ui *::before, html.srz-ui *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
html.srz-calm *, html.srz-calm *::before, html.srz-calm *::after { animation-duration: .01ms !important; animation-delay: 0s !important; }