/* Teleport · El umbral. Geometric headings, cool surfaces and orange signature. */
@font-face {
    font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('/static/fonts/manrope-variable.ttf') format('truetype');
}
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('/static/fonts/archivo-latin-variable.woff2') format('woff2');
}
body.teleport-app {
    --color-dark: #101c31;
    --color-gray-900: #1f2b40;
    --color-gray-700: #424e62;
    --color-gray-600: #505c70;
    --color-gray-500: #586477;
    --color-gray-400: #626e80;
    --color-gray-300: #d1d7df;
    --color-gray-200: #e0e4ea;
    --color-gray-100: #edf0f4;
    --color-gray-50: #f5f6f8;
    --color-primary: #295f9e;
    --color-primary-dark: #204b7e;
    --color-primary-light: #789fca;
    --paper: #f0f1f3;
    --kraft: #e9edf2;
    --kraft-deep: #d1d7df;
    --rule-hairline: #e0e4ea;
    --rule-strong: #d1d7df;
    --font-family-base: 'Archivo', system-ui, sans-serif;
    --font-family-heading: 'Manrope', 'Archivo', system-ui, sans-serif;
    --brand-orange: #ee602f;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 4px 14px rgba(25, 39, 59, .04);
    --shadow-pop: 0 12px 36px rgba(25, 39, 59, .16);
    /* Superficies y acentos con nombre. Los valores son los que ya usaba el
       sistema; solo cambian de sitio para que el modo oscuro los pueda redefinir. */
    --surround: #929eaf;
    --surface: #ffffff;
    --surface-muted: #f8f9fb;
    --surface-soft: #e8edf3;
    --surface-tint: #e5edf6;
    --surface-tint-border: #c4d5e7;
    --chip-neutral: #e1e4e8;
    --accent-blue: #336bb0;
    --accent-blue-soft: #6399cf;
    --guide-rule: #8997aa;
    --guide-ring: #aab5c4;
    --control-border-strong: #a4afbf;
    --login-shell: #cbd4df;
    --ink-inverse: #ffffff;
    --ink-hover: #253853;
    background: var(--surround);
    color: var(--color-dark);
    padding: 24px;
    font-size: 16px;
}
.app-sheet { width: 100%; max-width: 1680px; margin: 0 auto; background: var(--paper); border-radius: 32px; min-height: calc(100vh - 48px); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 42px; border-bottom: 1px solid var(--color-gray-200); }
.app-brand { display: inline-flex; align-items: center; gap: 13px; font-family: var(--font-family-heading); font-size: 25px; font-weight: 600; letter-spacing: -.035em; flex-shrink: 0; }
.app-mark { width: 29px; height: 33px; color: #ee602f; }
.app-navigation { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); }
.app-navigation a { position: relative; display: flex; align-items: center; min-height: 44px; color: var(--color-gray-700); font-size: 16px; }
.app-navigation a:hover { color: var(--color-primary); }
.app-navigation a[aria-current] { color: var(--color-dark); }
.app-navigation a[aria-current]::after { content: ''; position: absolute; height: 3px; bottom: -8px; left: 0; right: 0; border-radius: 3px; background: var(--brand-orange); }
.app-header-actions { display: flex; align-items: center; gap: 12px; }
.app-disclosure { position: relative; }
.app-disclosure summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; cursor: pointer; list-style: none; border-radius: 24px; }
.app-disclosure summary::-webkit-details-marker { display: none; }
.app-disclosure summary:hover { background: var(--color-gray-200); }
.app-account summary > svg { width: 16px; color: var(--color-gray-600); }
.app-avatar { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; background: var(--surface-tint); display: flex; align-items: center; justify-content: center; color: var(--color-gray-700); font-size: 15px; }
.app-dropdown { position: absolute; right: 0; top: calc(100% + 12px); width: 280px; max-width: calc(100vw - 40px); background: var(--surface); border-radius: 16px; padding: 10px; box-shadow: var(--shadow-pop); z-index: 110; }
.app-dropdown :is(a, .app-theme-toggle) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: var(--color-gray-700); }
.app-dropdown :is(a, .app-theme-toggle):hover, .app-dropdown a[aria-current] { background: var(--color-gray-100); color: var(--color-primary-dark); }
.app-account-identity { display: flex; flex-direction: column; gap: 4px; padding: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--color-gray-200); overflow-wrap: anywhere; }
.app-account-identity strong { font-weight: 500; }
.app-account-identity span { font-size: 13px; color: var(--color-gray-600); }
/* Interruptor de modo oscuro: misma fila que los enlaces del menú, con un conmutador a la derecha. */
.app-theme-toggle { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.app-theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.app-theme-toggle .app-switch { position: relative; margin-left: auto; width: 36px; height: 20px; border-radius: 999px; background: var(--color-gray-300); flex-shrink: 0; transition: background-color 160ms ease; }
.app-theme-toggle .app-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform 160ms ease; }
.app-theme-toggle[aria-checked="true"] .app-switch { background: var(--color-primary); }
.app-theme-toggle[aria-checked="true"] .app-switch::after { transform: translateX(16px); }
.app-mobile-menu { display: none; }
.app-sheet > .content { padding: 32px 42px 42px; background: transparent; }
.teleport-app h1, .teleport-app h2 { font-weight: 400; letter-spacing: -.03em; }
.teleport-app :is(h1,h2,h3,.widget-value,.desk-primary-number,.desk-secondary-stats dd) { font-family: var(--font-family-heading); }
.teleport-app .btn { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.teleport-app .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.teleport-app .btn { font-weight: 500; }
.teleport-app .btn-primary { background: var(--color-dark); border-color: var(--color-dark); }
.teleport-app .btn-primary:hover { background: var(--ink-hover); }
.teleport-app .btn-secondary:hover { background: var(--surface-muted); }
.teleport-app a { text-underline-offset: 4px; }
.teleport-app input, .teleport-app textarea { caret-color: var(--color-primary); }
.skip-link { position: fixed; top: -80px; left: 24px; z-index: 2000; background: var(--surface); padding: 12px 20px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
@media (min-width: 1800px) { body.teleport-app { padding: 32px; } }
@media (max-width: 1050px) {
    body.teleport-app { padding: 16px; }
    .app-sheet { min-height: calc(100vh - 32px); border-radius: 24px; }
    .app-header { padding: 22px 28px; gap: 24px; }
    .app-navigation { gap: 20px; }
    .app-navigation a { font-size: 14px; }
    .app-sheet > .content { padding: 28px; }
}
@media (max-width: 800px) {
    .app-navigation { display: none; }
    .app-mobile-menu { display: block; }
    .app-mobile-menu .app-dropdown { right: -60px; }
    .app-header { padding: 18px 24px; }
}
@media (max-width: 560px) {
    body.teleport-app { padding: 0; background: var(--paper); }
    .app-sheet { border-radius: 0; min-height: 100vh; }
    .app-header { padding: 18px 20px; gap: 12px; }
    .app-brand { font-size: 23px; gap: 10px; }
    .app-mark { width: 24px; height: 28px; }
    .app-header-actions { gap: 8px; }
    .app-account summary { gap: 4px; }
    .app-sheet > .content { padding: 26px 20px 32px; }
    .teleport-app h1 { font-size: 32px; }
}

/* Modo oscuro. Se activa desde el menú del avatar (<html data-theme="dark">).
   Redefine solo tokens: la misma cascada pinta ambos temas. Tinta y superficie
   se intercambian (--color-dark ↔ --color-white), de modo que "texto sobre
   tinta" sigue siendo legible sin tocar cada regla. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body.teleport-app {
    --color-dark: #eef2f7;
    --color-gray-900: #e3e8ef;
    --color-gray-700: #c5cfdc;
    --color-gray-600: #adb8c8;
    --color-gray-500: #9aa6b8;
    --color-gray-400: #8793a6;
    --color-gray-300: #344256;
    --color-gray-200: #2a3547;
    --color-gray-100: #202a3b;
    --color-gray-50: #1b2433;
    --color-white: #1a2332;
    --color-primary: #85aee0;
    --color-primary-dark: #a9c6ea;
    --color-primary-light: #4f78aa;
    --paper: #121a28;
    --kraft: #1f2a3b;
    --kraft-deep: #344256;
    --rule-hairline: #2a3547;
    --rule-strong: #344256;
    --surround: #0b111c;
    --surface: #1a2332;
    --surface-muted: #161e2c;
    --surface-soft: #202b3d;
    --surface-tint: #223652;
    --surface-tint-border: #345278;
    --chip-neutral: #2a3547;
    --accent-blue: #8fb6e4;
    --accent-blue-soft: #7aa6d8;
    --guide-rule: #4d5b70;
    --guide-ring: #4d5b70;
    --control-border-strong: #4d5b70;
    --login-shell: #0f1622;
    --ink-inverse: #101c31;
    --ink-hover: #d5deea;
    --stamp-red: #f29b95;
    --stamp-red-bg: #3b2022;
    --stamp-red-border: #6b3535;
    --stamp-green: #86d1a0;
    --stamp-green-bg: #17301f;
    --stamp-green-border: #2d5b3c;
    --stamp-amber: #e6bb6e;
    --stamp-amber-bg: #3a2e15;
    --stamp-amber-border: #6a5223;
    /* Alias de :root que referencian otros tokens se resuelven allí, con los valores
       claros; hay que volver a declararlos aquí para que sigan al tema. */
    --stamp-blue: var(--color-primary);
    --color-accent-pink: var(--stamp-red);
    --color-accent-peach: var(--stamp-amber);
    --color-accent-green: var(--stamp-green);
    --color-accent-red: var(--stamp-red);
    --gradient-hero: var(--color-gray-100);
    --gradient-primary: var(--color-primary);
    --gradient-subtle: var(--color-gray-100);
    --gradient-dark-bg: var(--color-primary-dark);
    --stamp-blue-bg: #1d2d47;
    --stamp-blue-border: #34517a;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .28);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, .55);
    --shadow-pop: 0 12px 36px rgba(0, 0, 0, .5);
}
/* Controles de formulario sin fondo propio: el navegador les pondría su gris por
   color-scheme; los alineamos con la paleta. Va en :where() (especificidad cero)
   para que cualquier regla de la app, p. ej. los campos transparentes de la lista
   de operaciones, siga mandando sobre esta. */
:where(html[data-theme="dark"] .teleport-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select)) { background-color: var(--surface-muted); color: var(--color-dark); border-color: var(--color-gray-300); }