/* ==========================================================================
   MailMarketing · tema "Fósforo verde" (monitor monocromo de 8 bits)
   Monocromo: la jerarquía se expresa con brillo, vídeo inverso y bordes, no con color.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
  --f-bg: #010a03;
  --f-bg-2: #031208;
  --f: #3dff6e;                       /* fósforo encendido */
  --f-alto: #b6ffc9;                  /* brillo máximo */
  --f-medio: #27c653;
  --f-bajo: #17803a;
  --f-tenue: rgba(61, 255, 110, .07);
  --f-tenue-2: rgba(61, 255, 110, .13);
  --f-borde: rgba(61, 255, 110, .28);
  --f-borde-fuerte: rgba(61, 255, 110, .55);
  --f-brillo: 0 0 2px rgba(61, 255, 110, .9), 0 0 10px rgba(61, 255, 110, .45);
  --f-brillo-suave: 0 0 6px rgba(61, 255, 110, .35);
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-8bit: "Press Start 2P", monospace;
  --f-crt: "VT323", ui-monospace, monospace;
  --mm-radius: 4px;

  /* Compatibilidad con las plantillas (todos los "colores" son fósforo) */
  --mm-pink: var(--f); --mm-cyan: var(--f); --mm-yellow: var(--f-alto); --mm-green: var(--f);
  --mm-red: var(--f-alto); --mm-purple: var(--f-medio); --mm-orange: var(--f-medio);
  --mm-muted: var(--f-medio); --mm-text: var(--f); --mm-border: var(--f-borde); --mm-border-strong: var(--f-borde-fuerte);
  --mm-surface: var(--f-tenue); --mm-surface-2: var(--f-tenue-2); --mm-bg: var(--f-bg); --mm-bg-2: var(--f-bg-2);
  --mm-crt: var(--f-crt); --mm-pixel: var(--f-8bit); --mm-font: var(--f-mono);

  /* Bootstrap */
  --bs-body-bg: var(--f-bg);
  --bs-body-color: var(--f);
  --bs-body-font-family: var(--f-mono);
  --bs-body-font-size: .92rem;
  --bs-secondary-color: var(--f-medio);
  --bs-tertiary-bg: var(--f-bg-2);
  --bs-border-color: var(--f-borde);
  --bs-border-radius: 3px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 4px; --bs-border-radius-pill: 3px;
  --bs-link-color: var(--f-alto); --bs-link-color-rgb: 182, 255, 201;
  --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255;
  --bs-primary-rgb: 61, 255, 110; --bs-success-rgb: 61, 255, 110; --bs-info-rgb: 61, 255, 110;
  --bs-warning-rgb: 61, 255, 110; --bs-danger-rgb: 61, 255, 110; --bs-secondary-rgb: 23, 128, 58;
  --bs-emphasis-color: var(--f-alto); --bs-heading-color: var(--f-alto);
  --bs-focus-ring-color: rgba(61, 255, 110, .35);
  color-scheme: dark;
}

/* --- Tubo: fondo, viñeta, líneas de barrido y parpadeo -------------------- */
html, body { min-height: 100%; }
body {
  background: radial-gradient(ellipse at center, #062611 0%, var(--f-bg) 70%) fixed !important;
  color: var(--f);
  font-family: var(--f-mono);
  text-shadow: var(--f-brillo-suave);
}
body::before { /* líneas de barrido */
  content: ""; position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
body::after { /* viñeta + reflejo del cristal */
  content: ""; position: fixed; inset: 0; z-index: 3001; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(182, 255, 201, .05), transparent 45%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .65) 100%);
  animation: parpadeo-tubo 6s infinite steps(1);
}
@keyframes parpadeo-tubo { 0%, 97% { opacity: 1; } 98% { opacity: .86; } 99% { opacity: 1; } }
::selection { background: var(--f); color: var(--f-bg); text-shadow: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--f-bg); }
::-webkit-scrollbar-thumb { background: var(--f-bajo); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--f-alto); text-shadow: var(--f-brillo); font-weight: 600; letter-spacing: 0; }
h1.h3, .page-title { font-family: var(--f-8bit); font-size: 1.05rem; line-height: 1.6; text-transform: uppercase; }
h1.h3::before { content: "> "; color: var(--f-medio); }
h1.h3 small, h1.h3 .fs-6 { font-family: var(--f-mono); text-transform: none; font-size: .8rem !important; }
.text-muted, .form-text, .text-secondary { color: var(--f-medio) !important; }
.text-success, .text-danger, .text-warning, .text-info, .text-primary { color: var(--f-alto) !important; }

code { color: var(--f-alto); background: var(--f-tenue-2); padding: 0 .25em; }
hr { border-color: var(--f-borde); opacity: 1; }
strong, b { color: var(--f-alto); }
a { text-underline-offset: 3px; }

/* --- Barra superior ------------------------------------------------------- */
.mm-nav { background: var(--f-bg) !important; border-bottom: 2px solid var(--f-borde-fuerte); position: sticky; top: 0; z-index: 1030; }
.mm-brand { font-family: var(--f-8bit); font-size: .72rem; color: var(--f-alto) !important; display: flex; align-items: center; gap: .7rem; text-shadow: var(--f-brillo); }
.mm-brand .logo { width: 30px; height: 30px; display: grid; place-items: center; background: var(--f); color: var(--f-bg); font-size: .85rem; text-shadow: none; box-shadow: var(--f-brillo); }
.mm-brand .neon { color: var(--f); }
.mm-nav .nav-link { color: var(--f-medio) !important; padding: .4rem .75rem !important; font-weight: 500; }
.mm-nav .nav-link:hover { color: var(--f-alto) !important; background: var(--f-tenue-2); }
.mm-nav .nav-link.active { background: var(--f) !important; color: var(--f-bg) !important; text-shadow: none; box-shadow: var(--f-brillo); }
.mm-nav .navbar-toggler { border-color: var(--f-borde-fuerte); }
.dropdown-menu {
  --bs-dropdown-bg: var(--f-bg); --bs-dropdown-border-color: var(--f-borde-fuerte); --bs-dropdown-link-color: var(--f);
  --bs-dropdown-link-hover-bg: var(--f); --bs-dropdown-link-hover-color: var(--f-bg); --bs-dropdown-link-active-bg: var(--f);
  --bs-dropdown-divider-bg: var(--f-borde); --bs-dropdown-header-color: var(--f-medio);
  border-width: 2px; box-shadow: 0 0 0 1px var(--f-bg), var(--f-brillo-suave);
}
.dropdown-item:hover, .dropdown-item:focus { text-shadow: none; }
.mm-avatar { width: 28px; height: 28px; display: inline-grid; place-items: center; background: var(--f); color: var(--f-bg); font-family: var(--f-8bit); font-size: .6rem; text-shadow: none; }

/* --- Tarjetas = ventanas de texto ----------------------------------------- */
.card {
  --bs-card-bg: rgba(1, 14, 5, .82); --bs-card-border-color: var(--f-borde-fuerte); --bs-card-cap-bg: var(--f-tenue-2);
  --bs-card-color: var(--f); --bs-card-border-radius: var(--mm-radius); --bs-card-inner-border-radius: 2px;
  box-shadow: var(--f-brillo-suave);
}
.card-header { font-family: var(--f-8bit); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--f-alto); border-bottom: 1px solid var(--f-borde-fuerte); padding-top: .8rem; padding-bottom: .8rem; }
.card-footer { border-top-color: var(--f-borde); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--f); --bs-list-group-border-color: var(--f-borde); --bs-list-group-action-hover-bg: var(--f-tenue-2); --bs-list-group-action-hover-color: var(--f-alto); }
.kpi { position: relative; color: inherit; transition: background .15s; }
a.kpi:hover, .kpi:hover { background: var(--f-tenue-2); }
.kpi .fs-3, .kpi .fs-4, .kpi .fs-5 { font-family: var(--f-crt); font-size: 2.4rem !important; line-height: 1; color: var(--f-alto); text-shadow: var(--f-brillo); }

/* --- Botones: vídeo inverso ------------------------------------------------ */
.btn { font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; border-radius: 2px; border-width: 1px; text-shadow: none; }
.btn-lg { font-size: .9rem; }
.btn-sm { font-size: .7rem; }
.btn-primary, .btn-success, .btn-warning {
  --bs-btn-bg: var(--f); --bs-btn-color: var(--f-bg); --bs-btn-border-color: var(--f);
  --bs-btn-hover-bg: var(--f-alto); --bs-btn-hover-color: var(--f-bg); --bs-btn-hover-border-color: var(--f-alto);
  --bs-btn-active-bg: var(--f-alto); --bs-btn-active-color: var(--f-bg); --bs-btn-active-border-color: var(--f-alto);
  --bs-btn-disabled-bg: var(--f-bajo); --bs-btn-disabled-border-color: var(--f-bajo); --bs-btn-disabled-color: var(--f-bg);
  box-shadow: var(--f-brillo);
}
.btn-dark, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-danger {
  --bs-btn-bg: transparent; --bs-btn-color: var(--f); --bs-btn-border-color: var(--f-borde-fuerte);
  --bs-btn-hover-bg: var(--f); --bs-btn-hover-color: var(--f-bg); --bs-btn-hover-border-color: var(--f);
  --bs-btn-active-bg: var(--f); --bs-btn-active-color: var(--f-bg); --bs-btn-active-border-color: var(--f);
}
.btn-outline-danger { border-style: dashed; }
.btn-outline-danger::before { content: "!"; margin-right: .3em; }
.btn-outline-danger:has(i:only-child)::before { content: none; }
.btn-link { color: var(--f-alto); text-transform: none; }
.btn-close { filter: invert(1) sepia(1) hue-rotate(70deg) saturate(6); }

/* --- Formularios ---------------------------------------------------------- */
.form-control, .form-select {
  background-color: #000; border: 1px solid var(--f-borde-fuerte); color: var(--f-alto); border-radius: 2px;
  font-family: var(--f-mono); caret-color: var(--f); text-shadow: var(--f-brillo-suave);
}
.form-control::placeholder { color: var(--f-bajo); }
.form-control:focus, .form-select:focus { background-color: #000; color: var(--f-alto); border-color: var(--f); box-shadow: 0 0 0 1px var(--f), var(--f-brillo); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233dff6e' stroke-linecap='square' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-select option { background: #000; color: var(--f); }
.form-check-input { background-color: #000; border: 1px solid var(--f-borde-fuerte); border-radius: 0 !important; }
.form-check-input:checked { background-color: var(--f); border-color: var(--f); }
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23010a03' stroke-linecap='square' stroke-width='3' d='m5 10 3 3 7-7'/%3e%3c/svg%3e"); }
.form-label { color: var(--f-alto); font-weight: 500; text-transform: uppercase; font-size: .74rem; letter-spacing: .05em; }
.input-group-text { background: var(--f-tenue-2); border-color: var(--f-borde-fuerte); color: var(--f); }
textarea.font-monospace { font-size: .8rem; }
.invalid-feedback { color: var(--f-alto); }
.invalid-feedback::before { content: "?ERROR: "; }

/* --- Tablas --------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--f); --bs-table-border-color: var(--f-borde);
  --bs-table-hover-bg: var(--f); --bs-table-hover-color: var(--f-bg);
  --bs-table-striped-bg: var(--f-tenue); --bs-table-striped-color: var(--f);
  margin-bottom: 0;
}
.table-hover > tbody > tr:hover > * { text-shadow: none; }
.table-hover > tbody > tr:hover a, .table-hover > tbody > tr:hover .text-muted { color: var(--f-bg) !important; }
.table-hover > tbody > tr:hover .badge { background: var(--f-bg) !important; color: var(--f) !important; }
.table > thead th, .table-light, .table-light > th, .table-light > tr > th {
  --bs-table-bg: var(--f-tenue-2); --bs-table-color: var(--f-alto);
  background: var(--f-tenue-2) !important; color: var(--f-alto) !important;
  font-family: var(--f-8bit); font-size: .55rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 400;
  border-bottom: 1px solid var(--f-borde-fuerte); padding-top: .7rem; padding-bottom: .7rem;
}
.table > thead th a { color: inherit; text-decoration: none; }
.table td { vertical-align: middle; }
.table td a, .card-body dd a, .list-group a { color: var(--f-alto); text-decoration: none; }
.table td a:hover, .card-body dd a:hover { text-decoration: underline; }
.table-warning { --bs-table-bg: var(--f-tenue-2); --bs-table-color: var(--f-alto); }

/* --- Badges: niveles de brillo ------------------------------------------- */
.badge { border-radius: 0; font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; font-size: .66rem; letter-spacing: .04em; padding: .3em .55em; text-shadow: none; border: 1px solid var(--f); }
.text-bg-success, .text-bg-primary { background: var(--f) !important; color: var(--f-bg) !important; box-shadow: var(--f-brillo-suave); }
.text-bg-info { background: transparent !important; color: var(--f-alto) !important; }
.text-bg-warning { background: transparent !important; color: var(--f-alto) !important; border-style: dotted; }
.text-bg-danger { background: transparent !important; color: var(--f-alto) !important; border-style: dashed; animation: alerta 1.2s steps(1) infinite; }
.text-bg-danger::before { content: "!"; margin-right: .25em; }
.text-bg-secondary, .text-bg-light, .text-bg-dark { background: transparent !important; color: var(--f-medio) !important; border-color: var(--f-bajo) !important; }
@keyframes alerta { 50% { background: var(--f) !important; color: var(--f-bg) !important; } }

/* --- Alertas, progreso, paginación --------------------------------------- */
.alert { border-radius: 0; border: 1px solid var(--f-borde-fuerte); --bs-alert-bg: #000; --bs-alert-color: var(--f-alto); --bs-alert-border-color: var(--f-borde-fuerte); --bs-alert-link-color: var(--f-alto); }
.alert-danger { border-style: dashed; }
.alert-danger::before { content: "?ERROR  "; font-weight: 700; }
.alert-warning::before { content: "AVISO  "; font-weight: 700; }
.alert-success::before { content: "OK  "; font-weight: 700; }
.alert a { color: var(--f-alto); text-decoration: underline; }
.progress { --bs-progress-bg: #000; --bs-progress-height: 10px; border: 1px solid var(--f-borde-fuerte); border-radius: 0; padding: 1px; }
.progress-bar { background: repeating-linear-gradient(90deg, var(--f) 0 8px, transparent 8px 10px) !important; box-shadow: var(--f-brillo-suave); }
.pagination { --bs-pagination-bg: #000; --bs-pagination-border-color: var(--f-borde-fuerte); --bs-pagination-color: var(--f); --bs-pagination-hover-bg: var(--f); --bs-pagination-hover-color: var(--f-bg); --bs-pagination-active-bg: var(--f); --bs-pagination-active-color: var(--f-bg); --bs-pagination-active-border-color: var(--f); --bs-pagination-border-radius: 0; }
.bg-light { background: #000 !important; color: var(--f) !important; }
pre { color: var(--f); }
details summary { cursor: pointer; color: var(--f-medio); }

/* --- Utilidades ------------------------------------------------------------ */
.muestra { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-frame { width: 100%; height: 72vh; border: 2px solid var(--f-borde-fuerte); background: #fff; }
.var-btn { font-size: .68rem; text-transform: none; }
.timeline { border-left: 2px dotted var(--f-borde-fuerte); padding-left: 1rem; }
.timeline .item { position: relative; margin-bottom: 1rem; }
.timeline .item::before { content: ""; position: absolute; left: -1.38rem; top: .45rem; width: .6rem; height: .6rem; background: var(--f); box-shadow: var(--f-brillo); }
.scroll-x { overflow-x: auto; }
.mm-footer { color: var(--f-bajo); font-family: var(--f-crt); font-size: 1.15rem; }
.mm-footer kbd { background: transparent; border: 1px solid var(--f-bajo); color: var(--f-medio); font-family: var(--f-crt); border-radius: 0; }
.emoji-fosforo, .ico, .nivel .emoji, .mm-brand .logo, .marquesina .bicho { filter: grayscale(1) brightness(1.3) sepia(1) hue-rotate(68deg) saturate(6); }
.cursor { display: inline-block; width: .6em; height: 1em; vertical-align: -.12em; background: var(--f); box-shadow: var(--f-brillo); animation: parpadeo 1s steps(1) infinite; margin-left: 2px; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* ==========================================================================
   PANEL PRINCIPAL
   ========================================================================== */
.arcade-hero { position: relative; border: 2px solid var(--f-borde-fuerte); padding: 1.6rem 1.8rem; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 60px rgba(61, 255, 110, .06), var(--f-brillo-suave); }
.arcade-hero .sol { display: none; }
.arranque { font-family: var(--f-crt); font-size: 1.45rem; line-height: 1.25; color: var(--f); text-shadow: var(--f-brillo); white-space: pre-wrap; margin: 0; }
.arranque .titulo-boot { font-family: var(--f-8bit); font-size: clamp(.9rem, 2.2vw, 1.35rem); color: var(--f-alto); display: block; margin: .3rem 0 .9rem; line-height: 1.5; }
.arcade-hero .player { font-family: var(--f-8bit); font-size: .55rem; color: var(--f-medio); }
.arcade-hero .terminal { font-family: var(--f-crt); font-size: 1.45rem; color: var(--f-alto); text-shadow: var(--f-brillo); }

.score { position: relative; display: block; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--f-borde-fuerte); background: rgba(0, 0, 0, .55); color: inherit; text-decoration: none; transition: background .1s; }
.score:hover { background: var(--f); color: var(--f-bg); text-shadow: none; }
.score:hover .valor, .score:hover .etq, .score:hover .sub { color: var(--f-bg) !important; text-shadow: none !important; }
.score .etq { font-family: var(--f-8bit); font-size: .55rem; color: var(--f-medio); }
.score .etq::before { content: "["; } .score .etq::after { content: "]"; }
.score .valor { font-family: var(--f-crt); font-size: 3.6rem; line-height: 1; margin: .4rem 0 .15rem; color: var(--f-alto) !important; text-shadow: var(--f-brillo) !important; }
.score .sub { font-size: .76rem; color: var(--f-medio); }
.score .ico { position: absolute; right: .9rem; top: .75rem; font-size: 1.4rem; }

.panel-retro { position: relative; height: 100%; padding: 1.1rem 1.2rem; border: 1px solid var(--f-borde-fuerte); background: rgba(0, 0, 0, .55); }
.panel-retro .titulo { display: flex; align-items: center; gap: .5rem; margin: -1.1rem -1.2rem 1rem; padding: .55rem 1.2rem; background: var(--f); color: var(--f-bg); font-family: var(--f-8bit); font-size: .58rem; text-shadow: none; }
.panel-retro .titulo .extra { margin-left: auto; font-family: var(--f-mono); font-size: .72rem; color: var(--f-bg); text-decoration: none; }

.pixel-chart { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 190px; padding-top: 20px; border-bottom: 1px solid var(--f-borde-fuerte); border-left: 1px solid var(--f-borde-fuerte); padding-left: 6px; }
.pixel-chart .col-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.pixel-chart .bar { width: 100%; min-height: 3px; position: relative; background: repeating-linear-gradient(0deg, var(--f) 0 7px, transparent 7px 10px); box-shadow: var(--f-brillo-suave); transform-origin: bottom; animation: crecer .7s steps(8) both; }
.pixel-chart .col-bar.hoy .bar { background: repeating-linear-gradient(0deg, var(--f-alto) 0 7px, transparent 7px 10px); box-shadow: var(--f-brillo); }
.pixel-chart .bar span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--f-crt); font-size: 1.05rem; color: var(--f-alto); opacity: 0; }
.pixel-chart .col-bar:hover .bar span { opacity: 1; }
.pixel-chart .dia { font-family: var(--f-crt); font-size: 1rem; color: var(--f-medio); margin-bottom: -26px; }
.pixel-chart + * { margin-top: 30px; }
@keyframes crecer { from { transform: scaleY(0); } }

.hiscore { width: 100%; font-family: var(--f-crt); font-size: 1.35rem; }
.hiscore td { padding: .2rem .2rem; border: 0; }
.hiscore .rank { width: 3.6rem; white-space: nowrap; font-family: var(--f-8bit); font-size: .58rem; color: var(--f-medio); }
.hiscore tr:first-child td { color: var(--f-alto); text-shadow: var(--f-brillo); }
.hiscore .nombre { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hiscore .nombre a { color: inherit; text-decoration: none; }
.hiscore .nombre a:hover { text-decoration: underline; }
.hiscore .pts { text-align: right; white-space: nowrap; }

.hp { margin-bottom: .85rem; }
.hp .fila { display: flex; justify-content: space-between; font-family: var(--f-8bit); font-size: .52rem; color: var(--f-medio); margin-bottom: .35rem; }
.hp .fila b { font-family: var(--f-crt); font-size: 1.2rem; font-weight: 400; line-height: .7; color: var(--f-alto); }
.hp .tubo { height: 14px; border: 1px solid var(--f-borde-fuerte); padding: 2px; background: #000; }
.hp .relleno { height: 100%; width: var(--v); background: repeating-linear-gradient(90deg, var(--f) 0 9px, transparent 9px 11px); box-shadow: var(--f-brillo-suave); animation: llenar 1s steps(12) both; }
@keyframes llenar { from { width: 0; } }

.ticker { overflow: hidden; position: relative; border: 1px solid var(--f-borde-fuerte); background: #000; }
.ticker::before { content: "LIVE"; position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: grid; place-items: center; padding: 0 .9rem; font-family: var(--f-8bit); font-size: .55rem; background: var(--f); color: var(--f-bg); text-shadow: none; animation: parpadeo 1.4s steps(1) infinite; }
.ticker .cinta { display: inline-flex; gap: 2.5rem; white-space: nowrap; padding: .5rem 0 .5rem 5rem; font-family: var(--f-crt); font-size: 1.3rem; animation: desplazar 40s linear infinite; }
.ticker:hover .cinta { animation-play-state: paused; }
.ticker .ev b { color: var(--f-alto); font-weight: 400; }
@keyframes desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.insert-coin { font-family: var(--f-8bit); font-size: clamp(.8rem, 2vw, 1.05rem); color: var(--f-alto); text-shadow: var(--f-brillo); animation: parpadeo 1.2s steps(1) infinite; }
.nivel { display: block; height: 100%; padding: 1rem; border: 1px dashed var(--f-borde-fuerte); color: inherit; text-decoration: none; }
.nivel:hover { background: var(--f); color: var(--f-bg); border-style: solid; text-shadow: none; }
.nivel:hover * { color: var(--f-bg) !important; }
.nivel .n { font-family: var(--f-8bit); font-size: .55rem; color: var(--f-medio); }
.nivel .t { font-weight: 700; margin: .3rem 0 .15rem; color: var(--f-alto); }
.nivel .emoji { font-size: 1.6rem; }

.campana-fila { display: flex; align-items: center; gap: .8rem; padding: .55rem .4rem; border-bottom: 1px dotted var(--f-borde); color: inherit; text-decoration: none; }
.campana-fila:last-child { border-bottom: 0; }
.campana-fila:hover { background: var(--f); color: var(--f-bg); text-shadow: none; }
.campana-fila:hover * { color: var(--f-bg) !important; }
.campana-fila .dot { width: 9px; height: 9px; flex: none; background: var(--f) !important; box-shadow: none !important; }

/* Easter egg: código Konami -> modo ámbar */
body.turbo { filter: hue-rotate(-75deg) saturate(1.4); }
.moneda { position: fixed; top: -40px; z-index: 2000; font-family: var(--f-8bit); color: var(--f-alto); text-shadow: var(--f-brillo); pointer-events: none; animation: caer steps(24) forwards; }
@keyframes caer { to { transform: translateY(110vh); } }

/* Login: pantalla de arranque */
.login-box { max-width: 560px; margin: 9vh auto 0; }
.login-box .escena { margin-bottom: 1.4rem; }
.login-box .escena .sol { display: none; }
.login-box .press { font-family: var(--f-8bit); font-size: .6rem; text-align: center; margin-top: 1.2rem; color: var(--f-medio); animation: parpadeo 1.4s steps(1) infinite; }

/* IA */
.ia-panel { border: 1px dashed var(--f-borde-fuerte); padding: 1rem; background: #000; }
.ia-panel .nav-link { color: var(--f-medio); border-radius: 0; font-size: .75rem; text-transform: uppercase; padding: .35rem .7rem; }
.ia-panel .nav-link.active { background: var(--f) !important; color: var(--f-bg) !important; text-shadow: none; }
.ia-pensando { font-family: var(--f-crt); font-size: 1.3rem; color: var(--f-alto); }
.ia-asunto { cursor: pointer; display: block; width: 100%; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 767px) {
  .pixel-chart { gap: 3px; }
  .pixel-chart .dia { font-size: .75rem; }
  .score .valor { font-size: 2.8rem; }
}

/* Etiquetas: no son alertas, solo marcas */
.badge.badge-etiqueta { background: transparent !important; color: var(--f-alto) !important; border: 1px solid var(--f-borde-fuerte) !important; animation: none !important; text-transform: none; }
.badge.badge-etiqueta::before { content: "#"; margin-right: .05em; color: var(--f-medio); }

/* --- Textos largos: nunca desbordan la tarjeta ---------------------------- */
.row > [class*="col"] { min-width: 0; }
.card { min-width: 0; max-width: 100%; }
.card-body dd, .card-body dt { overflow-wrap: anywhere; word-break: break-word; }
.tabla-extra { table-layout: fixed; width: 100%; }
.tabla-extra td:first-child { width: 34%; }
.tabla-extra td { overflow-wrap: anywhere; word-break: break-word; vertical-align: top; }
.tabla-extra code { white-space: normal; overflow-wrap: anywhere; }
.valor-largo { margin-top: .4rem; padding: .5rem; max-height: 14rem; overflow: auto; background: #000; border: 1px dotted var(--f-borde-fuerte); font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tabla-extra summary { overflow-wrap: anywhere; }

/* --- Tipografía con tildes y eñes ----------------------------------------
   Press Start 2P no tiene vocales acentuadas ni Ñ en mayúsculas: se reserva para
   textos fijos sin tildes; títulos, cabeceras y tablas usan VT323 (Latin-1 completo). */
h1.h3, .page-title { font-family: var(--f-crt); font-size: 2.1rem; line-height: 1.1; letter-spacing: .02em; }
.card-header { font-family: var(--f-crt); font-size: 1.35rem; letter-spacing: .04em; padding-top: .5rem; padding-bottom: .5rem; }
.table > thead th, .table-light, .table-light > th, .table-light > tr > th { font-family: var(--f-crt) !important; font-size: 1.1rem !important; letter-spacing: .05em; }

/* Pestañas tipo pastilla (panel Diseño y otras): vídeo inverso */
.nav-pills { --bs-nav-pills-link-active-bg: var(--f); --bs-nav-pills-link-active-color: var(--f-bg); --bs-nav-pills-border-radius: 0; }
.nav-pills .nav-link { color: var(--f-medio); font-size: .75rem; text-transform: uppercase; padding: .35rem .7rem; border: 1px solid transparent; }
.nav-pills .nav-link:hover { color: var(--f-alto); border-color: var(--f-borde); }
.nav-pills .nav-link.active { background: var(--f) !important; color: var(--f-bg) !important; text-shadow: none; box-shadow: var(--f-brillo-suave); }
#lista-colores label { background: #000; border-color: var(--f-borde-fuerte) !important; cursor: pointer; }
.form-control-color { cursor: pointer; }
.modal { --bs-modal-color: var(--f); --bs-modal-header-border-color: var(--f-borde-fuerte); }