/* ==============================================================================
   #513 — ESTÉTICA ÚNICA de Totem Nube (la de totemnube.app).
   Una sola hoja para el portal, el panel de Técnica y Soporte y, después, Producción (ERP).
   Referencia: public/sitio/index.html. Pública (sin sesión) para que el ERP la pueda importar.
   Uso: <link rel="stylesheet" href="https://totemnube.app/estilo/tn.css">
        + <header class="tn-header"> … </header> y <main class="tn-main"> … </main>.
   Las hojas propias de cada app van DESPUÉS y sólo agregan; no redefinen la paleta.
   ============================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Nunito:wght@400;600;700&display=swap");

:root {
  --navy: #0f2a6b; --navy-2: #0a1f52; --blue: #1b3cd4; --cyan: #43e8e1;
  --text: #0f2a6b; --sub: #4a5a7a; --bg: #f4f6fb; --card: #fff; --line: #dfe5f1;
  /* Estados con contraste AA sobre blanco y sobre --bg (texto chico ≥ 4.5:1). */
  --ok: #0f7a4a; --warn: #a15c07; --err: #b42318; --info: #1b3cd4;
  --ok-bg: #e3f6ec; --warn-bg: #fdf1dc; --err-bg: #fdecea; --info-bg: #e9eeff;
  --font-titulo: Outfit, system-ui, sans-serif;
  --font-texto: Nunito, system-ui, sans-serif;
  --radio: 16px;
  --sombra: 0 6px 18px rgba(15, 42, 107, .06);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.55 var(--font-texto); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--enlace, var(--blue)); }
h1 { font: 700 clamp(26px, 4vw, 36px)/1.15 var(--font-titulo); text-transform: uppercase; margin: 0 0 6px; }
h2 { font: 700 20px/1.25 var(--font-titulo); text-transform: uppercase; margin: 0 0 6px; }
h3 { font-family: var(--font-titulo); }

/* Cabecera azul con logo + nav */
.tn-header { background: var(--navy); padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tn-header .logo img { height: 40px; width: auto; display: block; }
.tn-header nav { flex: 1; display: flex; gap: 6px 22px; flex-wrap: wrap; }
.tn-header nav a { color: #fff; text-decoration: none; font: 600 14px var(--font-titulo); text-transform: uppercase; letter-spacing: .02em; opacity: .9; }
.tn-header nav a:hover, .tn-header nav a.activo { opacity: 1; color: var(--cyan); }
.tn-header .yo { color: #cfd8f3; font-size: 14px; display: flex; align-items: center; gap: 12px; }
.tn-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 36px 16px 56px; }
.bajada { color: var(--sub); margin: 0 0 26px; }

/* Botones píldora */
.btn { display: inline-block; border: 0; cursor: pointer; background: var(--navy); color: #fff; text-decoration: none; font: 700 14px var(--font-titulo); padding: 11px 26px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.btn:hover { background: var(--blue); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.claro { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn.claro:hover { border-color: var(--blue); color: var(--blue); }
.btn.chico { padding: 6px 14px; font-size: 12px; }
.btn.peligro { background: #fff; color: var(--err); border: 1px solid #f1c4bf; }
.salir { background: none; border: 1px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 999px; padding: 5px 14px; font: 600 12px var(--font-titulo); cursor: pointer; text-transform: uppercase; }
.salir:hover { border-color: var(--cyan); color: var(--cyan); }

/* Tarjetas blancas redondeadas, chips y tildes azules */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); }
.chip { display: inline-block; background: var(--info-bg); color: var(--blue); border-radius: 999px; padding: 2px 10px; font: 600 12px var(--font-titulo); margin: 2px 4px 2px 0; text-transform: lowercase; }
.chip.no { background: var(--err-bg); color: var(--err); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.tildes { list-style: none; padding: 0; margin: 0; }
.tildes li { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.tildes li::before { content: "✔"; color: #fff; background: var(--blue); border-radius: 4px; width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: 12px; flex: none; }
.small { font-size: 13px; color: var(--sub); }

/* Botón de tema (lo inserta /estilo/tema.js en la cabecera). */
.tema-btn { background: none; border: 1px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 999px; width: 34px; height: 30px; padding: 0; font-size: 15px; line-height: 1; cursor: pointer; flex: none; }
.tema-btn:hover { border-color: var(--cyan); }

/* ==============================================================================
   #513 — MODO OSCURO (Edgar, 30-sep-2026). Lo activa /estilo/tema.js con data-theme="dark"
   en <html>. Sin ese script la página queda clara (sitio público, /entrar, ERP).
   Cabecera azul #0a1f52; acento cian. Estados con contraste AA sobre --card y --bg.
   ============================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #0a1f52; --blue: #7d9bff; --cyan: #43e8e1;
  --text: #e8eeff; --sub: #9fb0d6; --bg: #0b1330; --card: #121c40; --line: #233068;
  --ok: #4ade80; --warn: #fbbf24; --err: #f87171; --info: #7d9bff;
  --ok-bg: rgba(74, 222, 128, .14); --warn-bg: rgba(251, 191, 36, .14); --err-bg: rgba(248, 113, 113, .14); --info-bg: rgba(67, 232, 225, .12);
  --sombra: 0 6px 18px rgba(0, 0, 0, .35);
  --enlace: var(--cyan);
}
:root[data-theme="dark"] .tn-header { border-bottom: 1px solid var(--line); }
:root[data-theme="dark"] .btn { background: #1b3cd4; color: #fff; }
:root[data-theme="dark"] .btn:hover { background: #2f52f0; }
:root[data-theme="dark"] .btn.claro { background: transparent; color: var(--text); border: 1px solid var(--line); }
:root[data-theme="dark"] .btn.claro:hover { border-color: var(--cyan); color: var(--cyan); }
:root[data-theme="dark"] .btn.peligro { background: transparent; color: var(--err); border: 1px solid rgba(248, 113, 113, .45); }
:root[data-theme="dark"] .chip { color: var(--cyan); }
:root[data-theme="dark"] .chip.ok { color: var(--ok); }
:root[data-theme="dark"] .chip.no { color: var(--err); }
:root[data-theme="dark"] .tildes li::before { background: var(--cyan); color: var(--navy); }