/**
 * La ropa DSEO del panel del propietario — ORDEN CONSTRUCCIÓN-FINAL, punto 2.
 *
 * Cargada DESPUÉS de admin.css, SOLO en ULC_ADMIN_HOST (views/admin/_shell-start.ejs y
 * views/admin/login.ejs deciden cuál cargar, leyendo el booleano `ownerPanel` que server.js
 * ya decidió por host — ningún selector de aquí vive en ninguna otra hoja).
 *
 * admin.css sigue siendo la única fuente de la ESTRUCTURA: la rejilla, el `overflow-wrap` de
 * cada identificador, los objetivos táctiles de 44px, las tablas que se apilan en un teléfono.
 * Ninguna de esas reglas se repite aquí — repetirlas sería la segunda copia que la ADENDA 2
 * prohíbe, y la primera vez que alguien corrija un desbordamiento en admin.css esta hoja se
 * quedaría con el defecto viejo. Esta hoja SOLO cambia lo que se ve: color, tipografía, forma
 * del borde. Una tenant -admin no carga este fichero y no nota que existe.
 *
 * Los tokens son los reales de dseomarketing.com
 * (DESPLEGADO-8afe718/src/styles/tokens.css), copiados aquí a mano porque ese repositorio es
 * un sitio distinto, no una dependencia de éste.
 */

body {
  --bg-0: #06070a;
  --bg-1: #0b0e14;
  --bg-2: #111620;
  --ink-0: #f4f7fb;
  --ink-1: #c5ceda;
  --ink-2: #9aa7b9;
  --dseo-line: rgba(255, 255, 255, .14);
  --electric-blue: #86bcff;
  --electric-violet: #937cff;
  --warm-accent: #d0a04a;
  --font-sans: 'Manrope Variable', Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Las variables que admin.css ya consulta en TODA su hoja — cubre la mayoría de las
     reglas (fondos, tintas, bordes, botones) sin reescribir cada selector uno a uno.
     Lo que admin.css escribió como literal y no como variable se corrige abajo, aparte. */
  --ink: var(--ink-0);
  --navy: var(--bg-1);
  --navy2: var(--bg-2);
  --gold: var(--warm-accent);
  --gold2: #e3bd76;
  --bg: var(--bg-0);
  --card: var(--bg-1);
  --line: var(--dseo-line);
  --muted: var(--ink-2);
  --danger: #ff9d9d;
  --ok: #8fd6ae;

  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-sans);
}

@font-face { font-family: 'Manrope Variable'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-variable.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-italic.woff2') format('woff2'); }

/* ---------------------------------------------------------------- estructura */
body .admin-sidebar { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); }
body .admin-top h1 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.02em; }
body .admin-top h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ---------------------------------------------------------------- marca */
body .admin-brand img { width: 128px; height: auto; border-radius: 8px; }
body .admin-brand strong { font-family: var(--font-sans); }
/* El nombre del sitio, dentro de un sitio — ORDEN CONSTRUCCIÓN-FINAL, como en la maqueta. */
body .nav-section { margin: 14px 0 10px; font-size: .78rem; font-weight: 700; color: var(--ink-1); overflow-wrap: break-word; }

/* ---------------------------------------------------------------- navegación */
body .admin-nav a { color: var(--ink-1); }
body .admin-nav a:hover { background: rgba(134, 188, 255, .10); color: var(--ink-0); }
body .admin-nav a.is-active { background: rgba(134, 188, 255, .14); color: var(--ink-0); }
/* "Inicio" (volver a la lista) se distingue de las pantallas del sitio: una línea por encima,
   como una salida y no una pantalla más. */
body .admin-nav a.nav-home { margin-top: 10px; padding-top: 21px; border-top: 1px solid var(--dseo-line); }

/* ---------------------------------------------------------------- idioma del panel */
body .admin-lang { border-top-color: var(--dseo-line); }
body .admin-lang-label { color: var(--ink-2); }
body .admin-lang-set a { color: var(--ink-1); background: rgba(255, 255, 255, .06); }
body .admin-lang-set a.is-on { background: var(--electric-blue); color: var(--bg-0); }
body .admin-lang-set a:hover { background: rgba(255, 255, 255, .14); }
body .admin-lang-set a.is-on:hover { background: var(--electric-blue); }

/* ---------------------------------------------------------------- tira de usuario */
body .admin-user { color: var(--ink-2); }
body .link-button { color: var(--electric-blue); }

/* ---------------------------------------------------------------- ayuda por pantalla */
body .admin-help { background: var(--bg-1); }
body .admin-help > summary { color: var(--electric-blue); }
body .admin-help-not { color: #ff9d9d; }

/* ---------------------------------------------------------------- tarjetas y paneles */
body .metric { background: var(--bg-1); }
body .panel h2 { font-family: var(--font-sans); font-weight: 700; }
body a.metric:hover { border-color: var(--electric-blue); }
body a.metric:focus-visible { outline-color: var(--electric-blue); }

/* ---------------------------------------------------------------- tablas */
body .admin-table th { color: var(--ink-2); }
body .admin-table-apilable tr { background: var(--bg-1); }
body .badge { background: rgba(255, 255, 255, .08); color: var(--ink-1); }
body .badge.published { background: rgba(134, 188, 255, .14); color: var(--electric-blue); }
body .badge.draft { background: rgba(208, 160, 74, .16); color: var(--warm-accent); }

/* ---------------------------------------------------------------- formularios */
body .field label { color: var(--ink-1); font-weight: 700; }
body .field input,
body .field textarea,
body .field select,
body .slot-form select {
  background: rgba(255, 255, 255, .04);
  border-color: var(--dseo-line);
  color: var(--ink-0);
}
body .field input::placeholder,
body .field textarea::placeholder { color: var(--ink-2); }
body .notice { background: rgba(134, 188, 255, .12); color: var(--electric-blue); }
body .error { background: rgba(255, 157, 157, .14); color: #ffb3b3; }

/* Botones: la maqueta los dibuja como píldoras, nunca como rectángulos redondeados. */
body .btn { border-radius: 999px; font-weight: 700; }
body .btn-primary { background: var(--electric-blue); color: var(--bg-0); border-color: var(--electric-blue); }
body .btn-gold { background: var(--warm-accent); color: var(--bg-0); }
body .btn-light { background: transparent; color: var(--ink-0); border-color: var(--dseo-line); }
body .btn-light:hover { border-color: var(--electric-blue); }
body .btn-danger { background: transparent; color: #ff9d9d; border-color: rgba(255, 157, 157, .35); }
body .btn-danger:hover { background: rgba(255, 157, 157, .1); border-color: #ff9d9d; }
body .order-button { background: transparent; border-color: var(--dseo-line); color: var(--ink-1); }

/* El paso Dominio del alta (ORDEN CHICAS-D2) y el selector de tema (settings.ejs) — mismas
   tarjetas de radio, mismos tokens. */
body .domain-choice-option,
body .theme-choice { background: var(--bg-1); border-color: var(--dseo-line); }
body .theme-choice.is-current { border-color: var(--electric-blue); background: rgba(134, 188, 255, .08); }

/* ---------------------------------------------------------------- el acceso */
body.login-page {
  background-color: var(--bg-0);
  background-image:
    radial-gradient(circle at 24% 18%, rgba(134, 188, 255, .14), transparent 55%),
    radial-gradient(circle at 80% 78%, rgba(147, 124, 255, .12), transparent 50%);
}
body .login-card { background: var(--bg-1); border-color: var(--dseo-line); }
body .login-brand-dseo { display: block; text-align: center; border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
body .login-brand-dseo img { width: 150px; height: auto; margin: 0 auto 18px; display: block; }
body .login-kicker { display: block; text-align: center; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
body .login-brand-dseo .login-host { text-align: center; color: var(--electric-blue); font-family: ui-monospace, monospace; }
body .login-heading { text-align: center; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 2rem; margin: 20px 0 28px; color: var(--ink-0); }
body .login-heading em { font-family: var(--font-serif); }
body.login-page .field input { background: rgba(255, 255, 255, .04); border-color: var(--dseo-line); color: var(--ink-0); }
body.login-page .field input:-webkit-autofill { -webkit-text-fill-color: var(--ink-0); -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset; }
body .login-submit { background: var(--ink-0); color: var(--bg-0); border-color: var(--ink-0); }
body .login-note { color: var(--ink-2); }
body.login-page .error { background: rgba(255, 157, 157, .14); border-color: rgba(255, 157, 157, .35); color: #ffb3b3; }
body .login-lang { border-top-color: var(--dseo-line); }
body .login-lang .admin-lang-label { color: var(--ink-2); }
body .login-lang .admin-lang-set a { background: rgba(255, 255, 255, .06); color: var(--ink-1); }
body .login-lang .admin-lang-set a.is-on { background: var(--electric-blue); color: var(--bg-0); }

/* ---------------------------------------------------------------- medios y elecciones */
body .media-card,
body .creative-option,
body .site-option,
body .copy-run,
body .slot { background: var(--bg-1); border-color: var(--dseo-line); }
body .creative-option:has(input:checked),
body .site-option:has(input:checked) { border-color: var(--electric-blue); box-shadow: 0 0 0 2px rgba(134, 188, 255, .25); }
body .media-url code,
body .audit-json,
body .issued-secret code { background: rgba(255, 255, 255, .06); }
body .copy-run > summary { color: var(--ink-0); }
body .bilingual-field { border-bottom-color: var(--dseo-line); }
body .bilingual-field h3 { font-family: var(--font-sans); font-weight: 700; }
body .lang-tag { background: rgba(255, 255, 255, .08); color: var(--ink-2); }
body .slot { border-bottom-color: var(--dseo-line); }
body .issued-panel { border-color: rgba(134, 188, 255, .35); }
body .purge-form { border-color: rgba(255, 157, 157, .35); }
body .notice-attention { border-left-color: var(--warm-accent); }