/* ============================================================
   Simulador Financiero — hoja de estilos
   GAMIFICADO ("botón 3D" tipo Duolingo/juego móvil — decisión del
   usuario tras probar el brutalismo puro: le gustó el gesto de
   "prensar" la tarjeta, pero quería algo más cálido/redondeado y
   menos crudo). Mismas familias de color de siempre (verde=ganancia,
   azul=en curso, ámbar=bloqueado, rojo=pérdida, dorado=premium),
   bien saturadas, sin degradados. Esquinas otra vez generosas
   (--radius y el detalle de cada componente, ver más abajo — solo
   los círculos reales, 50%, se mantienen intactos). El relieve ya
   NO es una sombra desplazada "de afiche": cada tarjeta/botón tiene
   un "canto" de color sólido abajo (como un bloque con grosor real)
   que se aplana al hacer click — ver var(--card-edge) y los
   :active de abajo.
   ============================================================ */

:root {
  /* --- Tema claro: verde + dorado vívidos sobre blanco frío neutro --- */
  --bg: #f6f7f9;           /* antes celeste pálido, antes de eso crema/beige — blanco frío neutro: deja que el color lo pongan las tarjetas, no el fondo */
  --panel: #ffffff;
  --panel-2: #e8eaed;
  --border: #d3d7dc;       /* línea suave — el relieve lo da el canto de color, no el borde */
  --ink: #171a14;
  --muted: #6b6354;
  --title-muted: #4a4536;  /* igual que --muted pero más oscuro — solo para .sidebar-title (se leía muy pálido) */

  --accent: #0e9e4c;       /* verde vívido — ganancia/crecimiento, plano, sin degradado */
  --accent-dim: #d2e9dd;
  --accent-edge: #0a7638;  /* canto 3D del verde — mismo tono, más oscuro */
  --on-accent: #ffffff;

  --info: #0090ff;         /* azul vívido: en curso */
  --info-dim: #e0f0fa;
  --info-edge: #0068bf;

  --warn: #ff8c00;         /* ámbar vívido: bloqueado */
  --warn-dim: #f6e8c9;
  --warn-edge: #cc6f00;

  --bad: #ff3131;          /* rojo vívido: pérdida/riesgo */
  --bad-dim: #fbe2e0;
  --bad-edge: #cc2727;

  --gold: #ffd400;         /* dorado vívido — detalle premium — nunca reemplaza al verde semántico */
  --gold-dim: #f3e4b8;
  --gold-edge: #cca900;

  /* Barra superior: siempre oscura (casi negro con tinte verde) y con
     filo dorado, en los dos temas — es la "firma" visual del sitio. */
  --header-bg: #0b1a2e;
  --header-border: #f6f7f9;
  --header-ink: #f3efe2;
  --header-muted: #b3ac97;
  --signal-green: #34d399; /* punto "en vivo" del header — visible sobre fondo oscuro en ambos temas */

  --radius: 16px;          /* esquinas generosas y amigables (look "botón de juego", no "banca seria") */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* "Canto" 3D de las tarjetas (ver .item-card/.prop-card/.panel-card/.auth-card):
     grosor del bloque (altura del canto) y su color por defecto cuando la tarjeta no
     está dentro de una sección con su propio color (ver "Color por sección" abajo). */
  --card-edge-h: 5px;
  --card-edge-color: var(--border);

  /* Separación entre tarjetas — UNA sola variable para que sea igual en toda la app
     (antes cada grilla tenía su propio valor, 1rem/.9rem/.5rem/.6rem sueltos). Se
     achica en celular (ver el media query de abajo), nunca se define suelto en otro lado. */
  --card-gap: 1.3rem;
}

/* En pantallas grandes el blanco del tema claro se ve más pálido (monitores de
   PC vs. celular) — ahí se sube un poco la intensidad del gris. En celular queda el
   tono original. Solo aplica con el tema claro (nunca si el sistema prefiere oscuro). */
@media (min-width: 768px) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef0f3;
    --panel-2: #dde1e6;
    --border: #c3c9d1;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* --- Tema oscuro: azul marino + gris + blanco, estilo terminal --- */
    --bg: #070b13;
    --panel: #0f1726;
    --panel-2: #0c1320;
    --border: #253044;
    --ink: #eef1f6;
    --muted: #8d96a8;
    --title-muted: #8d96a8;

    --accent: #34d399;
    --accent-dim: #123425;
    --accent-edge: #1a9f6e;
    --on-accent: #052014;

    --info: #38bdf8;
    --info-dim: #0f2438;
    --info-edge: #1f93d6;

    --warn: #f59e0b;        /* más naranja que --gold a propósito — en oscuro los dos amarillos casi se confundían */
    --warn-dim: #23190c;
    --warn-edge: #c97d08;

    --bad: #f87171;
    --bad-dim: #351616;
    --bad-edge: #d94d4d;

    --gold: #e3b22e;
    --gold-dim: #2a2311;
    --gold-edge: #b88e1c;
  }
}

:root[data-theme="dark"] {
  --bg: #070b13;
  --panel: #0f1726;
  --panel-2: #0c1320;
  --border: #253044;
  --ink: #eef1f6;
  --muted: #8d96a8;
  --title-muted: #8d96a8;

  --accent: #34d399;
  --accent-dim: #123425;
  --accent-edge: #1a9f6e;
  --on-accent: #052014;

  --info: #38bdf8;
  --info-dim: #0f2438;
  --info-edge: #1f93d6;

  --warn: #f59e0b;        /* más naranja que --gold a propósito — en oscuro los dos amarillos casi se confundían */
  --warn-dim: #23190c;
  --warn-edge: #c97d08;

  --bad: #f87171;
  --bad-dim: #351616;
  --bad-edge: #d94d4d;

  --gold: #e3b22e;
  --gold-dim: #2a2311;
  --gold-edge: #b88e1c;
}

*, *::before, *::after { box-sizing: border-box; }
/* html (el padre de body) no tenía fondo propio — en el rebote elástico del scroll en celular
   (o el primerísimo instante antes de que cargue el CSS) se alcanzaba a ver transparente/blanco
   detrás, lo que se notaba sobre todo durante los círculos verde/rojo de login-logout (reportado
   por el usuario). body ya tenía var(--bg), esto solo cierra ese hueco en el elemento de más
   afuera. */
html, body { height: 100%; background-color: var(--bg); }

/* Varias reglas de abajo (.auth-form, .auth-screen, etc.) ponen su propio
   "display" con la misma especificidad que la regla nativa de [hidden] del
   navegador — y como las nuestras se cargan después, ganarían ellas y el
   elemento se seguiría viendo aunque tenga el atributo hidden. Esta regla
   se asegura de que hidden SIEMPRE gane. */
[hidden] { display: none !important; }

/* La cuadrícula va en una capa fija que cubre siempre la pantalla: si fuera fondo del body, en iPhone deja de pintarse al llegar al final de la página. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 1px, transparent 1px 32px);
}
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
/* Space Grotesk (var(--font-heading)) para los títulos grandes y poco frecuentes (h1/h2),
   en MAYÚSCULAS con tracking apretado — la firma visual del brutalismo. h3 se usa decenas
   de veces por pantalla (título de cada tarjeta de trabajo, objeto, panel, etc.): se queda
   con la sans del cuerpo pero también en mayúsculas, para que toda la jerarquía de títulos
   se sienta de una sola pieza sin que h3 compita en tamaño de fuente con h1/h2. */
h1, h2 { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: -.02em; }
h3 { text-transform: uppercase; letter-spacing: -.01em; font-size: .95em; }
p { margin: 0 0 .8em; }
button { font: inherit; }
ul, dl { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.tabular { font-variant-numeric: tabular-nums; }

/* El header y el menú principal van juntos dentro de .hud-tabs-fijo (ver index.html), que es el único
   que necesita position:fixed — así .tabs siempre arranca justo debajo de .hud en el flujo normal,
   sin tener que adivinar en CSS/JS cuántos píxeles mide el header (eso fallaba: si el header medía
   más de lo que --header-height tenía calculado, .tabs quedaba tapado detrás, invisible). */
.hud-tabs-fijo { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }

/* Cuenta regresiva de lanzamiento (ver js/cuenta-regresiva.js) — landing, login y arriba del
   header del juego. Mismo look oscuro+dorado que la barra superior, para que se sienta parte
   del diseño y no un banner pegado encima. */
.cuenta-regresiva-lanzamiento {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  background: var(--header-bg);
  border-bottom: 4px solid #f6f7f9;
  color: var(--header-ink);
  padding: .55rem 1rem;
  text-align: center;
}
/* Título + cuenta regresiva achicados a propósito (menos largo horizontal en
   PC, donde antes se comían buena parte del ancho del header) — la nota de
   abajo (.cr-nota) en cambio se deja usar TODO el ancho disponible. */
.cr-fila { display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; }
.cr-kicker { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #f6f7f9; }
.cr-tiempo { display: flex; gap: .35rem; }
.cr-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f6f7f9;
  border: 2px solid #f6f7f9;
  border-radius: 10px;
  padding: .1rem .4rem;
  min-width: 2.1rem;
}
/* Fondo del bloque ahora es dorado sólido (ver .cr-bloque) — el texto pasa a oscuro,
   el claro quedaba ilegible encima de un dorado sólido. */
.cr-bloque strong { font-family: var(--font-mono); font-weight: 700; font-size: .8rem; line-height: 1.1; color: #171a14; }
.cr-bloque small { font-size: .56rem; text-transform: uppercase; letter-spacing: .05em; color: #171a14; opacity: .75; }
.cr-nota { font-family: var(--font-display); font-size: .66rem; line-height: 1.2; color: var(--header-muted); max-width: 100ch; text-align: left; }
@media (max-width: 600px) {
  .cuenta-regresiva-lanzamiento { padding: .45rem .6rem; }
  .cr-fila { gap: .5rem; }
  .cr-kicker { font-size: .76rem; }
  .cr-tiempo { gap: .3rem; }
  .cr-bloque { min-width: 2.2rem; padding: .1rem .4rem; }
  .cr-bloque strong { font-size: .95rem; }
  .cr-nota { font-size: .68rem; }
}
/* ---------- Barra superior (HUD) ---------- */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem 1.25rem;
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 2px solid var(--header-border);
}
/* .hud-brand también se usa SUELTO (centrado) en pantallas de login/recuperar
   contraseña, fuera de la barra oscura — ahí necesita un color que funcione
   sobre el fondo normal claro/oscuro, no el de la barra. Dentro de .hud (la
   barra de verdad) se sobreescribe más abajo con los tonos del header. */
.hud-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 1.08rem;
  text-transform: uppercase;
  color: var(--muted);
}
.hud .hud-brand { color: var(--header-muted); }
.hud-brand .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-green) 30%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hud-brand .dot { animation: none; } }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.hud-brand-texto { display: flex; align-items: center; gap: .55rem; }
/* Jugadores conectados ahora / inscritos — chico y aparte para no competir con el nombre del juego. */
.hud-conectados {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  font-size: .78rem;
  color: var(--header-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.hud-conectados span { font-family: var(--font-mono); color: var(--header-ink); }
.hud-stat { display: flex; flex-direction: column; align-items: flex-end; }
.hud-stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--header-muted); }
.hud-stat-value { font-family: var(--font-mono); font-weight: 600; font-size: 1.2rem; color: var(--header-ink); }
#hud-saldo { color: #f6f7f9; font-weight: 700; font-size: 1.4rem; letter-spacing: -.01em; }

/* Destello breve cuando el saldo/Aurex del header cambia (ver SIM.renderHud, js/ui.js) —
   verde si subió, rojo si bajó, para que un cambio se "sienta" y no solo se note al mirar
   el número de cerca. */
.hud-stat-value.num-flash-up, .hud-stat-value.num-flash-down { animation: num-flash-pop .7s ease; }
.hud-stat-value.num-flash-up { color: var(--signal-green) !important; }
.hud-stat-value.num-flash-down { color: var(--bad) !important; }
@keyframes num-flash-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-stat-value.num-flash-up, .hud-stat-value.num-flash-down { animation: none; }
}
.hud-saldos-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  border: 2px solid #f6f7f9;
  border-radius: 16px;
  padding: .3rem .9rem;
  background: rgba(246, 247, 249, .08);
  box-shadow: 0 4px 0 0 #9aa3b0;
}
.hud-saldos-label { text-align: center; }
.hud-saldos-fila { display: flex; align-items: center; gap: 1rem; }
.hud-aurex-valor { display: inline-flex; align-items: center; gap: .3rem; color: var(--gold); }
.hud-aurex-icono { height: 1.3em; width: auto; display: block; }
.hud-fecha-valor { display: flex; align-items: baseline; gap: .3rem; }
.hud-fecha-hora::before { content: "· "; color: var(--header-muted); }
.hud-derecha { display: flex; align-items: center; gap: 1.2rem; }

.hud-actions { display: flex; gap: .5rem; align-items: center; }
.hud-logout {
  background: none;
  border: 1px solid var(--header-muted);
  color: var(--header-muted);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .8rem;
  cursor: pointer;
  display: inline-block;
}
@media (hover: hover) { .hud-logout:hover { color: var(--header-ink); border-color: var(--header-ink); } }
.hud-logout-icono { display: none; }

/* ---------- Pestañas ---------- */
.tabs {
  position: relative; /* ancla al .tab-indicator deslizante, ver más abajo */
  display: flex;
  justify-content: center;
  gap: .25rem;
  padding: 0 1.25rem;
  background: var(--panel-2);
  border-bottom: 3px solid var(--border);
  overflow-x: auto;
  /* Sin esto, "overflow-x: auto" sin un overflow-y explícito hace que el navegador trate
     el eje vertical TAMBIÉN como "auto" (así lo pide la spec de CSS cuando un eje no es
     "visible" y el otro no se declaró) — la barra quedaba arrastrable arriba/abajo un
     poquito, además de a los lados, reportado real por el usuario. Debe moverse solo de
     lado a lado. */
  overflow-y: hidden;
}
.tab-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--muted);
  padding: .85rem 1rem;
  cursor: pointer;
  font-weight: 700;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  border-bottom: 4px solid transparent; /* mismo alto que antes, pero siempre transparente — el color ahora lo lleva el indicador deslizante */
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
  transition: background-color .2s ease, color .15s ease, transform .1s ease;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.tab-icon { font-size: 1.05rem; line-height: 1; }
/* .tab-label siempre visible en PC — ver el media query de celular más abajo, donde se
   oculta salvo en la pestaña activa (ver SIM.posicionarIndicadorTab, que ya recalcula el
   indicador solo cuando cambia el ancho del botón). */
.tab-btn.active {
  color: var(--ink);
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 16%, transparent);
  animation: tab-pop .22s ease;
}
@media (hover: hover) {
  /* Sin este guard, tocar la pestaña en celular dejaba el estado :hover pegado — el primer
     toque solo "activaba" el hover y recién el segundo/tercero hacía clic de verdad (bug
     clásico de iOS/touch, reportado por el usuario: "reacciona al segundo o tercer toque"
     en botones y pestañas en general — esta regla era la principal sospechosa). */
  .tab-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--tab-color, var(--accent)) 8%, transparent); }
}
/* Rebote al tocar/clickear — feedback instantáneo, sin esperar la animación de la pestaña. */
.tab-btn:active { transform: scale(.92); }
@keyframes tab-pop {
  0% { transform: scale(.9); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-btn { transition: none; }
  .tab-btn.active { animation: none; }
  .tab-btn:active { transform: none; }
}
/* PC: la pestaña activa muestra ícono + nombre; las inactivas solo el ícono, y al pasar el mouse
   crecen y muestran su nombre. Así las 14 pestañas caben en una fila sin cortarse. El nombre de
   la activa no tiene transición: SIM.posicionarIndicadorTab mide el ancho del botón justo al
   activarla, y tiene que ser el definitivo. */
@media (min-width: 601px) {
  .tab-btn { padding: .55rem .6rem; gap: .3rem; }
  .tab-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    transition: max-width .3s ease, margin-left .3s ease;
  }
  .tab-btn.active .tab-label { max-width: 16rem; margin-left: .15rem; transition: none; }
  /* min-width por sí solo no distingue táctil de mouse (ej. un iPad ancho) — por eso también
     va adentro de (hover: hover), si no un iPad necesitaría doble toque igual que el celular. */
  @media (hover: hover) {
    .tab-btn:hover .tab-label { max-width: 16rem; margin-left: .15rem; }
    .tab-btn:hover { transform: scale(1.12); }
  }
  .tab-btn:active { transform: scale(.92); }
  .tab-icon { font-size: 1.15rem; }
}
/* Indicador deslizante bajo la pestaña activa (ver SIM.posicionarIndicadorTab, js/ui.js) —
   se mueve con una transición "con rebote" en vez de aparecer de golpe en la nueva pestaña. */
.tab-indicator {
  position: absolute;
  bottom: -3px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
  transition: left .35s cubic-bezier(.34, 1.56, .64, 1), width .35s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
/* "Aterrizaje": al llegar a la pestaña nueva, un destello breve (más alto + resplandor)
   antes de asentarse — ver SIM.posicionarIndicadorTab, que agrega esta clase un instante. */
.tab-indicator.tab-indicator-landing {
  height: 7px;
  box-shadow: 0 0 10px 1px var(--tab-indicator-glow, var(--accent));
}
@media (prefers-reduced-motion: reduce) {
  .tab-indicator { transition: none; }
  .tab-indicator.tab-indicator-landing { height: 5px; box-shadow: none; }
}

/* ---------- Color por sección (pestañas + tarjetas de esa sección) ----------
   Reusa los 5 colores semánticos que ya existen en todo el juego (nunca colores
   nuevos): verde = crecimiento personal, azul = dinero en movimiento, dorado =
   negocios/estatus, ámbar = necesidades que no se pueden descuidar. Social y Perfil
   quedan neutros (color de pestaña por defecto, sin acento en sus tarjetas), igual
   que antes — no todas las secciones necesitan su propio color.
   --card-edge-color se define en el <section> del panel (una sola vez) y las
   tarjetas de adentro la heredan solas para su "canto" 3D (ver .item-card etc.) —
   no hace falta repetirla tarjeta por tarjeta. El filo de arriba (border-top) usa
   el tono CLARO del mismo color, para que la tarjeta quede "pintada" en ese color
   de punta a punta: claro arriba, oscuro (el --edge) abajo. */
.tab-btn[data-tab="trabajos"], .tab-btn[data-tab="aprendizaje"], .tab-btn[data-tab="patrimonio"] { --tab-color: var(--accent); }
.tab-btn[data-tab="finanzas"], .tab-btn[data-tab="pais"] { --tab-color: var(--info); }
.tab-btn[data-tab="empresas"], .tab-btn[data-tab="clanes"], .tab-btn[data-tab="suscripcion"] { --tab-color: var(--gold); }
.tab-btn[data-tab="supervivencia"] { --tab-color: var(--warn); }

/* --section-color (el tono PLENO, no el --edge oscuro) es lo que usan las subpestañas
   de adentro (.subnav-btn, ver más abajo) para que también se pinten del color de su
   sección en vez de ser siempre verdes sin importar dónde estén. */
#panel-trabajos, #panel-aprendizaje, #panel-patrimonio { --card-edge-color: var(--accent-edge); --section-color: var(--accent); }
#panel-finanzas, #panel-pais { --card-edge-color: var(--info-edge); --section-color: var(--info); }
#panel-empresas, #panel-clanes, #panel-suscripcion { --card-edge-color: var(--gold-edge); --section-color: var(--gold); }
#panel-supervivencia { --card-edge-color: var(--warn-edge); --section-color: var(--warn); }

/* NIVEL 1 — la tarjeta resumen de la sección (.panel-card, ej. "Hambre/Sed/Salud"):
   contorno fino en TODO el perímetro (no solo arriba) con el color pleno de la
   sección, y un canto 3D un poco más alto — es el nivel más notorio. */
#panel-trabajos .panel-card, #panel-aprendizaje .panel-card, #panel-patrimonio .panel-card { border: 2px solid var(--accent); --card-edge-h: 6px; }
#panel-finanzas .panel-card, #panel-pais .panel-card { border: 2px solid var(--info); --card-edge-h: 6px; }
#panel-empresas .panel-card, #panel-clanes .panel-card, #panel-suscripcion .panel-card { border: 2px solid var(--gold); --card-edge-h: 6px; }
#panel-supervivencia .panel-card { border: 2px solid var(--warn); --card-edge-h: 6px; }

/* NIVEL 2 — las tarjetas DENTRO de cada subpestaña (.item-card/.prop-card, ej. "Menú
   del día"): mismo contorno completo pero con el color atenuado — mientras más
   "adentro" de la sección está una tarjeta, más sutil se nota el color. */
#panel-trabajos .item-card, #panel-trabajos .prop-card, #panel-trabajos .flip-card-face,
#panel-aprendizaje .item-card, #panel-aprendizaje .prop-card, #panel-aprendizaje .flip-card-face,
#panel-patrimonio .item-card, #panel-patrimonio .prop-card, #panel-patrimonio .flip-card-face {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
}
#panel-finanzas .item-card, #panel-finanzas .prop-card, #panel-finanzas .flip-card-face,
#panel-pais .item-card, #panel-pais .prop-card, #panel-pais .flip-card-face {
  border: 1px solid color-mix(in srgb, var(--info) 45%, var(--border) 55%);
}
#panel-empresas .item-card, #panel-empresas .prop-card, #panel-empresas .flip-card-face,
#panel-clanes .item-card, #panel-clanes .prop-card, #panel-clanes .flip-card-face,
#panel-suscripcion .item-card, #panel-suscripcion .prop-card, #panel-suscripcion .flip-card-face {
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border) 55%);
}
#panel-supervivencia .item-card, #panel-supervivencia .prop-card, #panel-supervivencia .flip-card-face {
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border) 55%);
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 1.25rem;
  max-width: 1480px;
  margin: 0 auto;
  padding: 1.25rem;
  /* .hud y .tabs ahora son position:fixed (quedan SIEMPRE a la vista, nunca se van con el scroll) —
     al salir del flujo normal del documento, hay que compensar manualmente el espacio que antes
     ocupaban, si no el contenido arranca tapado debajo de ellos.
     OJO: valor FIJO a propósito (no calc(var(--hud-tabs-height)...)) — el cálculo automático
     daba un alto mayor al real una vez agregada la cuenta regresiva de lanzamiento (ver
     cuenta-regresiva.js) y dejaba un hueco de más, confirmado a mano en PC. 150px es lo que
     ocupa hoy el bloque fijo (cuenta regresiva + header + menú) + aire — cuando la cuenta
     regresiva desaparezca (5-11-2026) este valor va a quedar más alto de lo necesario y hay
     que bajarlo a mano entonces. */
  padding-top: 150px;
}
/* El sidebar izquierdo (gastos/empresas) es opcional — si ahora mismo no hay
   nada que mostrar en ninguno de los dos widgets, se agrega esta clase (ver
   SIM.actualizarLayoutSidebarIzq en ui.js) para no dejar una columna vacía. */
.layout.sin-sidebar-izq { grid-template-columns: 1fr 300px; }
.layout.sin-sidebar-izq .sidebar-left { display: none; }
/* Cuando el tiquet flotante está visible, se reserva espacio abajo para que no tape el final del contenido al hacer scroll. */
body.tiene-favorito-flotante .layout { padding-bottom: 6.5rem; }
/* Varias secciones (Suscripción, Aprendizaje, Patrimonio, Vehículos, Finanzas, Perfil...) tienen
   tarjetas más altas que una tarjeta típica de Trabajos (precio+datos+botón, o varias líneas de
   descripción) — la reserva genérica de arriba no alcanzaba y el botón de acción de la última
   tarjeta quedaba tapado por el tiquete (reportado por el usuario en Tienda y en Aprendizaje).
   Selector genérico por convención de nombres (todo panel con sub-pestañas pinta su contenido
   dentro de un <div id="algo-sub">, ver SIM.renderXxxTab en ui.js) en vez de ir listando panel
   por panel cada vez que aparece en uno nuevo. Reserva extra SOLO acá, sumada a la de arriba. */
body.tiene-favorito-flotante [id$="-sub"] { padding-bottom: 8rem; }
.content { min-width: 0; }
.sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  align-self: start;
  position: sticky;
  top: calc(var(--hud-tabs-height, 113px) + .75rem);
  /* Largo FIJO a propósito — antes no tenía overflow, así que cuando el contenido (Próximamente +
     Mis empresas, o el historial de Actividad reciente) superaba este alto, se desbordaba sin
     scroll y se veía roto (ej. el botón de "Mis empresas" cortado). Ahora scrollea adentro. */
  max-height: calc(100vh - var(--hud-tabs-height, 113px) - .75rem - 1.5rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.sidebar-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--title-muted); margin-bottom: .8rem; flex-shrink: 0; }
/* Las dos columnas laterales de PC son ahora PILAS DE TARJETAS 3D (igual que el resto del juego): la caja exterior
   deja de dibujar borde y fondo, y cada bloque de adentro es una tarjeta con borde y canto de su color. El padding
   deja sitio para que el canto de abajo y el borde no se corten con el scroll de la columna. */
.sidebar-left, .sidebar-right { background: none; border: 0; border-radius: 0; padding: 2px 4px 10px; gap: 1.1rem; }
.sidebar-card {
  --sec: color-mix(in srgb, var(--ink) 40%, var(--border)); --sec-edge: var(--border);
  background: var(--panel);
  border: 2px solid var(--sec); border-radius: 14px;
  box-shadow: 0 4px 0 0 var(--sec-edge);
  padding: .75rem .85rem .85rem;
  flex-shrink: 0;
}
.sidebar-card-supervivencia { --sec: var(--warn); --sec-edge: var(--warn-edge); }
/* Título de cada tarjeta como chip del color de su sección (igual que en "Próximamente"). */
.sidebar-card .sidebar-title {
  display: inline-block; align-self: flex-start; padding: .15rem .65rem; margin-bottom: .6rem;
  border-radius: 999px; border: 1px solid var(--sec);
  background: color-mix(in srgb, var(--sec) 14%, transparent); color: var(--ink);
}
/* Actividad reciente: ocupa lo que quede de la columna y su lista scrollea por dentro. */
.sidebar-card-actividad { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Hambre/sed/salud en PC: tarjeta aparte debajo de Actividad reciente (en celular no hay sidebar,
   ahí se siguen viendo los círculos flotantes — ver .supervivencia-flotante). */
.sidebar-supervivencia-fila { display: flex; justify-content: space-around; gap: .5rem; }
.sidebar-supervivencia-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.sidebar-supervivencia-item span { font-family: var(--font-mono); font-weight: 600; font-size: .82rem; }
.sidebar-supervivencia-barra { width: 100%; max-width: 64px; height: 7px; }
/* Círculos con canto sólido y gesto de "prensar", como el resto de los botones. Llevan a la sección para comprar. */
.sidebar-supervivencia-item .supervivencia-flotante-icono {
  border: 2px solid var(--warn-edge);
  box-shadow: 0 4px 0 0 var(--warn-edge);
  cursor: pointer;
  transition: box-shadow .1s ease, transform .1s ease, background-color .25s linear;
}
@media (hover: hover) {
  .sidebar-supervivencia-item .supervivencia-flotante-icono:hover { box-shadow: 0 6px 0 0 var(--warn-edge); }
}
.sidebar-supervivencia-item .supervivencia-flotante-icono:active { box-shadow: none; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) { .sidebar-supervivencia-item .supervivencia-flotante-icono { transition: none; } }

/* Widgets compactos del sidebar (gastos personales, empresas) — mismo título
   que "Actividad reciente" arriba, pero cuerpo chico para no empujar el log. */
.sidebar-widget { flex-shrink: 0; margin-bottom: 1rem; }
.mini-progress { position: relative; height: 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.mini-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--info); opacity: .5; transition: width .25s linear; }
@media (prefers-reduced-motion: reduce) { .mini-progress-fill { transition: none; } }
.mini-progress-countdown { font-size: .68rem; color: var(--muted); font-family: var(--font-mono); margin-top: .15rem; text-align: right; }

/* Siempre 3 columnas fijas (nunca auto-fit/wrap) para que Hambre, Sed y Salud queden
   en una sola fila tanto en PC como en celular — gap/letra se achican más abajo en
   el breakpoint de teléfono para que igual quepa cómodo. */
.supervivencia-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.supervivencia-gauge-head { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; gap: .3rem; }
.supervivencia-gauge-head span:last-child { font-family: var(--font-mono); }
.supervivencia-gauge-bar { height: 10px; }
.supervivencia-gauge-bar .mini-progress-fill { transition: width .25s linear, background-color .25s linear; }

.gasto-row { margin-bottom: .5rem; }
.gasto-row:last-child { margin-bottom: 0; }
/* Una empresa por fila dentro de "Empresas" en Próximamente — cada una con su propio
   recuadro, para no confundirse con la de al lado cuando hay varias. */
.empresa-gasto-row {
  position: relative; cursor: pointer;
  background: var(--panel);
  /* Neutra a propósito: el color de la sección ya lo da el marco de "Empresas"; si cada tarjeta también fuera dorada, sería demasiado amarillo. */
  border: 2px solid var(--border);
  border-radius: 12px; padding: .65rem .75rem; margin-bottom: .85rem;
  /* Mismo "canto" 3D y gesto de prensar que el resto de las tarjetas: la fila entera lleva al detalle de la empresa. */
  box-shadow: 0 3px 0 0 var(--border);
  transition: box-shadow .1s ease, transform .1s ease;
}
.empresa-gasto-row:last-child { margin-bottom: .2rem; }
@media (hover: hover) {
  .empresa-gasto-row:hover { box-shadow: 0 5px 0 0 var(--border); }
}
.empresa-gasto-row:active { box-shadow: none; transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .empresa-gasto-row { transition: none; } }
.empresa-gasto-ver { font-size: .7rem; font-weight: 600; color: var(--muted); text-align: right; margin-top: .4rem; }
@media (hover: hover) { .empresa-gasto-row:hover .empresa-gasto-ver { color: var(--ink); } }
.gasto-row-head { display: flex; justify-content: space-between; gap: .4rem; font-size: .78rem; margin-bottom: .25rem; }
.gasto-row-head span:last-child { font-family: var(--font-mono); color: var(--bad); }
.empresa-saldo-inline { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--accent); letter-spacing: -.01em; }
.empresa-mini-proyecto-label { font-size: .68rem; color: var(--muted); margin-top: .35rem; }
/* Contorno por sección dentro de "Próximamente" (Ingresos/Objetivo/Gastos personales/Empresas). */
.proximamente-seccion {
  --sec: var(--accent); --sec-edge: var(--accent-edge);
  background: var(--panel);
  border: 2px solid var(--sec); border-radius: 14px;
  padding: .7rem .8rem .8rem; margin-bottom: 1.1rem;
  box-shadow: 0 4px 0 0 var(--sec-edge); /* canto 3D del color de la sección */
}
.proximamente-seccion:last-child { margin-bottom: .3rem; }
.proximamente-ingresos { --sec: var(--accent); --sec-edge: var(--accent-edge); }
.proximamente-objetivo { --sec: var(--info); --sec-edge: var(--info-edge); }
.proximamente-gastos { --sec: var(--warn); --sec-edge: var(--warn-edge); }
/* Empresas: el dorado de su pestaña, pero solo en un borde fino y sin canto grueso para que no domine. */
.proximamente-empresas { --sec: var(--gold); --sec-edge: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.proximamente-empresas .sidebar-title { background: color-mix(in srgb, var(--gold) 10%, transparent); }
/* Las barras de sueldos y proyectos van en azul (color de "en curso"), no doradas. */
.proximamente-empresas .mini-progress { border-color: var(--border); }
.proximamente-empresas .mini-progress-fill { background: var(--info); }
/* Título de cada sección como chip del color de la sección (igual que las subpestañas). */
.proximamente-seccion .sidebar-title {
  display: inline-block; padding: .15rem .65rem; margin-bottom: .6rem;
  border-radius: 999px; border: 1px solid var(--sec);
  background: color-mix(in srgb, var(--sec) 18%, transparent); color: var(--ink);
}
.proximamente-seccion .mini-progress { height: 8px; border-color: color-mix(in srgb, var(--sec) 50%, var(--border)); }
.proximamente-seccion .mini-progress-fill { background: var(--sec); opacity: .85; }
.gasto-total { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; padding-top: .5rem; border-top: 1px solid var(--border); margin-top: .6rem; }
.gasto-total span:last-child { font-family: var(--font-mono); }

.objetivo-row { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.objetivo-row .gasto-row-head span:last-child { color: var(--ink); }

.empresa-mini-btn { width: 100%; margin-top: .4rem; font-size: .74rem; padding: .35rem; }
/* Scrollea sola, independiente del resto de la página — solo cuando el cursor está encima. */
.hud-log { overflow-y: auto; min-height: 0; }
/* Actividad reciente: cada evento es un chip (fecha de juego tenue arriba, texto abajo). */
.hud-log { padding: 0 2px 4px; }
.hud-log li {
  display: flex; flex-direction: column; gap: .1rem;
  font-size: .85rem; padding: .45rem .65rem; margin-bottom: .45rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.hud-log li:last-child { margin-bottom: 0; }
.hud-log-fecha { font-size: .68rem; color: var(--muted); font-family: var(--font-mono); }
.hud-log-texto { line-height: 1.3; }
.muted-li { color: var(--muted) !important; }

/* ---------- Tarjetas (trabajos / conocimientos / objetos) ---------- */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--card-gap);
}
.item-card {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  /* "Canto" 3D: un bloque de color sólido abajo, como si la tarjeta tuviera grosor real. */
  box-shadow: 0 var(--card-edge-h) 0 0 var(--card-edge-color);
  transition: box-shadow .1s ease, transform .1s ease;
}
.item-card.is-locked { opacity: .6; }
/* Tarjetas bloqueadas que giran (Trabajos/Empresas — ver .flip-card): NO usan opacity ni capas
   superpuestas (ambas rompen el render 3D en Chrome). La atenuación va en el color del texto de
   la cara delantera, que no crea capas nuevas. */
.item-card.is-locked.flip-card { opacity: 1; }
.item-card.is-locked.flip-card .flip-card-front h3,
.item-card.is-locked.flip-card .flip-card-front .job-card-dato,
.item-card.is-locked.flip-card .flip-card-front .empresa-precio { color: var(--muted); }
.item-card.is-owned { border-color: var(--accent); }
@media (hover: hover) {
  /* Al pasar el mouse la tarjeta "flota" un poco más alto. */
  .item-card:hover { box-shadow: 0 calc(var(--card-edge-h) + 2px) 0 0 var(--card-edge-color); }
}
/* Al hacer click se "prensa": el canto desaparece y la tarjeta baja justo lo que medía el
   canto — el gesto físico de apretar un botón de juego de verdad. */
.item-card:active { box-shadow: none; transform: translateY(var(--card-edge-h)); }
@media (prefers-reduced-motion: reduce) {
  .item-card { transition: none; }
  .item-card:hover, .item-card:active { transform: none; }
}

/* ---------- Tarjetas que se giran (Trabajos / Empresas / Marketplace de propiedades) ----------
   .flip-card es un modificador que se AGREGA a .item-card o .prop-card, no los reemplaza — la
   tarjeta sigue teniendo el mismo marco (borde, canto 3D, sombra) de siempre, fijo en su lugar;
   lo único que gira es el contenido de adentro (.flip-card-inner), dentro de ese marco quieto.
   REVERTIDO (ver nota): se había probado a hacer girar la tarjeta ENTERA (marco incluido), pero
   eso rompía backface-visibility en Chrome de forma real y persistente — el frente se veía
   espejado/encimado sobre el dorso en vez de ocultarse, sin importar qué combinación de
   preserve-3d se probara. Girar solo el contenido (técnica probada, sin bugs) es la prioridad
   sobre que el marco gire también. .flip-card-front/-back van superpuestos en la MISMA celda de
   grilla (grid-area 1/1), así el alto de la tarjeta es automáticamente el más alto de los dos
   lados. El estado (girada o no) se recuerda en SIM._flipCardIds por tarjeta (ver js/ui.js), así
   sobrevive un re-render de la lista. */
/* La tarjeta exterior es solo un contenedor transparente: el marco (fondo, borde, canto 3D) vive
   en cada cara, así que al girar el borde gira junto con el contenido. !important en el borde
   porque las reglas por sección (#panel-x .item-card) tienen más especificidad. */
.item-card.flip-card, .prop-card.flip-card {
  perspective: 1200px;
  background: none !important;
  border: 0 !important;
  box-shadow: none;
  padding: 0;
  transition: none;
}
.item-card.flip-card:hover, .item-card.flip-card:active { transform: none; }
.prop-card.flip-card > .flip-card-inner { width: 100%; }
.flip-card-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .1, .2, 1);
}
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card.is-owned .flip-card-face { border-color: var(--accent); }
.flip-card-face {
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 var(--card-edge-h) 0 0 var(--card-edge-color);
  transition: box-shadow .1s ease, translate .1s ease;
}
@media (hover: hover) {
  .flip-card:hover .flip-card-face { box-shadow: 0 calc(var(--card-edge-h) + 2px) 0 0 var(--card-edge-color); translate: 0 -2px; }
}
.flip-card:active .flip-card-face { box-shadow: none; translate: 0 var(--card-edge-h); }
.flip-card-back { transform: rotateY(180deg); }
/* Fila de acciones de cada lado — el botón de acción (chico, .btn-compacto) + el de girar,
   siempre pegados abajo del todo (margin-top:auto empuja el resto del contenido arriba). */
.flip-card-actions { display: flex; gap: .4rem; align-items: center; margin-top: auto; }
/* Botón de girar — chico, en la esquina, el mismo en los dos lados (el de acción también va
   duplicado y achicado en ambos lados, ver btn-compacto en cada plantilla). */
.flip-card-girar {
  background: var(--panel-2);
  border: 2px solid var(--border);
  border-radius: 999px;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
}
@media (hover: hover) { .flip-card-girar:hover { background: var(--bg); } }
.flip-card-girar:active { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition: none; }
  .flip-card-girar:active { transform: none; }
}
/* Tarjeta que se gira con un click en cualquier parte de ella (no solo un botón de girar
   dedicado) — por ahora solo Trabajos, ver .flip-card-click-entera en js/ui.js. El cursor
   avisa que toda la tarjeta es clickeable; los botones/estrella de adentro siguen con el
   suyo propio porque son elementos interactivos normales (no heredan el pointer del padre
   visualmente distinto, pero el click SÍ se intercepta antes de llegar acá, ver wireEvents). */
.flip-card-click-entera { cursor: pointer; }

/* ---------- Tarjeta de Trabajos (rediseño) ----------
   Grilla fija: 1 columna en celular, 2 en PC siempre (a diferencia de .item-grid genérico,
   que es auto-fit y puede dar más de 2 si hay espacio). */
.trabajos-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .trabajos-grid { grid-template-columns: 1fr; } }

.job-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.job-card-head .empresa-precio { font-size: 1.15rem; }
.job-card-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.job-card-dato { font-size: 1.1rem; margin-left: .9rem; }
.job-card-dato-tiempo { color: var(--muted); font-size: 1rem; }
/* Trabajos manuales: el tiempo va AL LADO del monto, con un poco de distancia (en vez de debajo). Si en una
   pantalla muy angosta no caben, el tiempo baja solo a la línea de abajo. */
.job-card-datos-fila { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.4rem; margin-left: .9rem; }
.job-card-datos-fila .job-card-dato { margin-left: 0; }

/* Fila de la tarjeta de Trabajos cuando el trabajo está disponible: a la izquierda el título
   (+ favorito) y los datos (precio/tiempo), a la derecha el botón "rayo" — cuadrado, tan alto
   como ese bloque de la izquierda (align-items:stretch + aspect-ratio, ver .job-card-rayo). */
.job-card-cuerpo { display: flex; align-items: stretch; gap: .7rem; }
.job-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }

/* Botón "rayo" de trabajar — cuadrado, de arriba a abajo de la tarjeta (su alto lo fija el
   contenido de .job-card-info de al lado, su ancho es ese mismo alto vía aspect-ratio). Mismo
   gesto 3D (canto sólido, se prensa al click) que .btn-action. */
.job-card-rayo {
  flex-shrink: 0;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  width: auto;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 0 0 var(--accent-edge);
  transition: box-shadow .1s ease, transform .1s ease;
}
.job-card-rayo:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; box-shadow: none; }
@media (hover: hover) { .job-card-rayo:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 6px 0 0 var(--accent-edge); } }
.job-card-rayo:active:not(:disabled) { box-shadow: none; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) { .job-card-rayo { transition: none; } .job-card-rayo:hover, .job-card-rayo:active { transform: none; } }

/* Dorso de la tarjeta de Trabajos — texto con margen a la izquierda, igual que los datos del frente. */
.job-card-texto-dorso { margin-left: .9rem; }
/* Dos líneas de dorso seguidas (ej. descripción + "Requisitos pendientes") van pegadas, sin el
   espacio normal entre bloques — pedido del usuario, se ve más compacto. */
.job-card-texto-dorso + .job-card-texto-dorso { margin-top: -0.5rem; }
/* Proyecto en curso dentro de la tarjeta "Actividad" de Mis empresas: bloque simple, sin marco propio. */
.proyecto-activo { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .4rem; }

/* Efecto al elegir favorito u objetivo (ver SIM.marcarRecienElegido en js/ui.js): la estrella o el
   blanco da un salto con giro y deja un anillo que se desvanece. Se aplica una sola vez. */
.btn-favorito-job { position: relative; }
.btn-favorito-job.efecto-elegido { animation: elegido-salto 1s cubic-bezier(.34, 1.56, .64, 1); }
.btn-favorito-job.efecto-elegido::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 4px solid var(--gold);
  pointer-events: none;
  animation: elegido-anillo 1s ease-out forwards;
}
@keyframes elegido-salto {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.9) rotate(-18deg); }
  60% { transform: scale(.85) rotate(9deg); }
  80% { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes elegido-anillo {
  0% { transform: scale(.6); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-favorito-job.efecto-elegido, .btn-favorito-job.efecto-elegido::after { animation: none; }
}

/* Datos del reverso de Fundar empresa (y tarjetas con el mismo formato, ej. nivel de
   prestamista): un poco de aire entre líneas — pedido del usuario, antes quedaban pegadas
   por el gap muy chico + el margen negativo de .job-card-texto-dorso de abajo, que se
   cancela acá adentro. */
.dorso-datos { display: flex; flex-direction: column; gap: .45rem; }
.dorso-datos p { margin: 0; font-size: .85rem; line-height: 1.35; }
.dorso-datos .job-card-texto-dorso + .job-card-texto-dorso { margin-top: 0; }

/* ---------- Esqueleto de carga (skeleton) ----------
   Bloques grises con la misma forma que va a tener el contenido real, con un brillo que pasa
   por encima — reemplaza los "Cargando…" de texto plano en las pantallas que más se notan
   (panel admin, historiales, mercados). Ver SIM.skeletonCardsHtml/skeletonLinesHtml en
   js/ui.js. */
@keyframes skeleton-shimmer {
  0% { background-position: -300px 0; }
  100% { background-position: calc(300px + 100%) 0; }
}
.skeleton-card {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 var(--card-edge-h) 0 0 var(--card-edge-color);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.skeleton-line {
  height: .85rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--border) 37%, var(--panel-2) 63%);
  background-size: 300px 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
.skeleton-line-lg { height: 1.3rem; width: 65%; }
.skeleton-line-sm { width: 40%; }
.skeleton-card .skeleton-line:last-child { margin-top: auto; width: 55%; height: 2.2rem; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } }

/* ---------- Empresas ---------- */
.empresa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
.empresa-grid > * { min-width: 0; }
.card-destacada { border: 3px solid var(--accent); position: relative; box-shadow: 0 calc(var(--card-edge-h) + 2px) 0 0 var(--accent-edge); }
.empresa-detalle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; min-width: 0; margin-top: 1rem; }
.empresa-detalle-row > div { min-width: 0; }
/* Cabecera del detalle: Volver a la izquierda, flechas para pasar a la empresa anterior/siguiente a la derecha. */
.empresa-detalle-header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.empresa-nav { display: flex; align-items: center; gap: .5rem; }
.empresa-nav-btn { min-width: 2.6rem; padding: .3rem .7rem; font-size: 1.4rem; line-height: 1; }
.empresa-nav-pos { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); min-width: 3rem; text-align: center; }
/* Efecto de "cambio de tarjeta" al abrir una empresa o moverse con ‹ › entre las propias — la
   clase solo se agrega cuando el id mostrado cambia de verdad (ver SIM._renderEmpresasMiasBase),
   nunca en los repintados automáticos de la misma empresa. Fade + deslizamiento sutil, sin
   escala (quedaba poco prolijo con el texto). */
.empresa-detalle-transicion { animation: empresaDetalleCambio .18s ease; }
@keyframes empresaDetalleCambio {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* Al moverse con ‹ › (no al abrir desde la lista): la tarjeta nueva entra deslizándose hacia el
   lado de la flecha que se apretó — con › entra desde la izquierda corriéndose a la derecha,
   con ‹ entra desde la derecha corriéndose a la izquierda. */
.empresa-detalle-transicion-der { animation: empresaDetalleDesdeIzq .2s ease; }
.empresa-detalle-transicion-izq { animation: empresaDetalleDesdeDer .2s ease; }
@keyframes empresaDetalleDesdeIzq {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}
@keyframes empresaDetalleDesdeDer {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .empresa-detalle-transicion, .empresa-detalle-transicion-der, .empresa-detalle-transicion-izq { animation: none; }
}
/* Tarjeta de "Mis empresas" que es el botón completo: se levanta al pasar el mouse y se "prensa" al tocar. */
.empresa-card-click { cursor: pointer; transition: box-shadow .1s ease, transform .1s ease; }
@media (hover: hover) {
  .empresa-card-click:hover { box-shadow: 0 calc(var(--card-edge-h) + 2px) 0 0 var(--card-edge-color); }
}
.empresa-card-click:active { box-shadow: none; transform: translateY(var(--card-edge-h)); }
@media (prefers-reduced-motion: reduce) { .empresa-card-click { transition: none; } }
@media (max-width: 760px) { .empresa-detalle-row { grid-template-columns: 1fr; } }
.empresa-tier-titulo { margin: 1.4rem 0 .6rem; }
.empresa-tier-titulo:first-child { margin-top: 0; }
.tabla-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; max-width: 100%; }
/* width: auto explícito — le gana por especificidad a clases como .tabla-ahorros
   (width: 100%), que si no quedan comprimidas al ancho del celular y no hay nada
   que arrastrar en vez de desbordar y activar el scroll horizontal de arriba. */
.tabla-scroll table { width: auto; min-width: 560px; }
/* tabla-empleados es la EXCEPCIÓN: a propósito es compacta (ver su comentario más
   abajo, "tabla-con-icono") y su última columna ya envuelve el texto en vez de
   desbordar (.tabla-empleados td:last-child) — forzarle los mismos 560px de la
   regla de arriba la hacía más ancha que la pantalla en el celular SIN necesidad,
   y ese scroll horizontal quedaba invisible/difícil de encontrar (confirmado real
   en un iPhone: la columna "Trabajador" quedaba cortada y no se lograba arrastrar
   para verla). Con min-width:0 la tabla se achica sola al ancho de la tarjeta y
   no hace falta scroll para nada. */
.tabla-scroll table.tabla-empleados { width: 100%; min-width: 0; }
.empresa-precio { font-size: 1.4rem; font-weight: 700; color: var(--accent); font-family: var(--font-mono); letter-spacing: -.01em; }
.aurex-icono-card { height: 1.6em; width: auto; vertical-align: -.3em; }
.empresa-bolsa-info { font-size: .82rem; color: var(--muted); margin-top: -.2rem; }
.empresa-filtro { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.empresa-filtro select { font: inherit; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; }
.empresa-countdown { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Tarjeta con una imagen de fondo (empresa/rubro, conocimiento) — se le pone
   encima una capa semitransparente del color del panel para que el texto
   se siga leyendo igual en tema claro u oscuro. */
/* background-size:cover (como era antes) zoom-eaba cada vez más mientras más alta
   quedaba la tarjeta (texto largo, botones apilados en móvil) — con el ancho de
   referencia en vez del alto, la foto nunca se agranda más allá de calzar con el
   ancho de la tarjeta: se ve completa de lado a lado, "cae" lo que tenga que caer
   verticalmente (puede dejar un resto del color de fondo abajo si la tarjeta es
   más alta que la foto a ese ancho, pero nunca se la ve recortada/zoomeada). */
.card-bg-imagen { position: relative; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; overflow: hidden; }
.card-bg-imagen::before { content: ""; position: absolute; inset: 0; background: var(--panel); opacity: .8; z-index: 0; }
.card-bg-imagen > * { position: relative; z-index: 1; }

.compras-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
@media (min-width: 601px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } }
/* Finanzas: el rango de retorno (Entre +10% y +25%) va más chico que antes. */
.item-card .item-meta > span.inv-meta-retorno { font-size: .95rem; }
@media (max-width: 640px) { .compras-grid { grid-template-columns: 1fr; } }
/* ==================== Panel de control (dashboard admin) ====================
   Todo el panel es HTML/CSS: nada de librerías de gráficos ni SVG con viewBox
   (ver la nota en SIM.adminBarChartHtml — el viewBox se deformaba en móvil).
   En PC se muestra TODO a la vez (sin subpestañas); en celular la misma
   información se apila y se compacta. */

.ds-barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ds-refrescar { padding: .35rem .8rem; font-size: .8rem; }

/* --- Alertas: lo que requiere una decisión, arriba de todo --- */
.ds-alertas { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.ds-alerta { margin: 0; padding: .55rem .8rem; border-radius: var(--radius); border-left: 3px solid var(--border); font-size: .88rem; }
.ds-alerta-mal { background: var(--bad-dim); border-left-color: var(--bad); color: var(--bad); }
.ds-alerta-info { background: var(--panel-2); border-left-color: var(--info); }
.ds-alerta-bien { background: var(--accent-dim); border-left-color: var(--accent); color: var(--accent); }

/* --- Indicadores principales --- */
.ds-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; margin-bottom: 1.4rem; }
.ds-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ds-tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ds-tile-valor { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.ds-tile-nota { font-size: .72rem; color: var(--muted); }
.ds-delta { font-size: .72rem; font-weight: 600; }
.ds-delta-bien { color: var(--accent); }
.ds-delta-mal { color: var(--bad); }
.ds-delta-neutro { color: var(--muted); font-weight: 400; }

/* --- Rejilla de tarjetas: en PC entran varias por fila --- */
.ds-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); align-items: start; margin-bottom: 1.2rem; }
.ds-card { margin: 0; min-width: 0; }
.ds-card:has(.ds-serie-plot), .ds-card:has(.admin-chart) { grid-column: 1 / -1; }
.ds-palanca { margin: .6rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--border); font-size: .74rem; color: var(--muted); }

/* --- Gráfico de serie temporal en línea (antes era de columnas/barras) ---
   Altura fija, se estira al ancho real de la tarjeta (preserveAspectRatio="none" en el SVG,
   ver SIM.dsSerieHtml). El eje vertical (.ds-serie-eje-y) queda flotando encima del borde
   izquierdo del gráfico, no le resta ancho al plot — así el eje de fechas de abajo (.ds-ejes)
   sigue alineado 1:1 con los puntos de la línea. */
.ds-serie-plot { position: relative; height: 200px; margin-top: .3rem; }
.ds-serie-eje-y {
  position: absolute; left: 0; top: 0; bottom: 2px; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: .62rem; font-family: var(--font-mono); color: var(--muted);
}
.ds-serie-eje-y span { background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 0 .3rem 0 0; }
.ds-serie-plot .ds-area { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Columnas invisibles encima del SVG, una por punto — solo para que tocar/pasar el mouse
   siga mostrando el valor exacto (mismo mecanismo de siempre, ver ui.js). */
.ds-serie-puntos { position: absolute; inset: 0; display: flex; gap: 2px; }
.ds-col { flex: 1 1 0; min-width: 0; position: relative; }
/* Valor del punto tocado (celular): globo encima de la columna; se cierra al tocar otra cosa. */
.ds-col.ds-col-activa::after {
  content: attr(data-detalle);
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: var(--ink);
  color: var(--bg);
  padding: .3rem .5rem;
  border-radius: 8px;
  font-size: .7rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}
.ds-serie-pie { display: flex; justify-content: space-between; margin: .25rem 0 0; font-size: .72rem; color: var(--muted); }
.ds-ejes { display: flex; gap: 2px; margin-top: .2rem; }
.ds-ejes span { flex: 1 1 0; min-width: 0; text-align: center; font-size: .62rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.cuentas-filtros { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; }
.cuentas-filtros label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; flex: 1 1 160px; min-width: 0; }
.cuentas-filtros input, .cuentas-filtros select { width: 100%; }
.cuenta-fila { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.cuenta-fila-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.cuenta-fila-info .item-desc { margin: 0; font-size: .75rem; }
.cuenta-fila-cifras { display: flex; flex-direction: column; align-items: flex-end; font-size: .8rem; }
.cuenta-cabecera { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cuentas-paginador { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.hist-lista { display: flex; flex-direction: column; }
.hist-fila { padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .72rem; line-height: 1.3; }
.hist-cabecera { display: flex; justify-content: space-between; gap: .4rem; color: var(--muted); }
.hist-cabecera strong { color: var(--ink); white-space: nowrap; }
.hist-tipo { font-family: var(--font-mono); font-size: .66rem; color: var(--accent); }
.hist-texto { word-break: break-word; }

/* ---------- Panel de control: hero, anillos y comparación de países ---------- */
/* Tarjeta destacada de arriba de todo (Resumen) — número grande + línea de tendencia en
   degradé, mismo espíritu que el resto del panel pero con más peso visual. */
.ds-hero {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem .6rem;
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.ds-hero-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; }
.ds-hero-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ds-hero-valor { display: block; font-family: var(--font-mono); font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--accent); }
.ds-hero-ventanas { display: flex; gap: 1rem; text-align: right; }
.ds-hero-ventanas span { display: flex; flex-direction: column; font-size: .72rem; color: var(--muted); }
.ds-hero-ventanas strong { font-family: var(--font-mono); font-size: .95rem; color: var(--ink); }
.ds-area { display: block; width: 100%; height: 110px; }
.ds-hero-ejes { margin-top: .1rem; }

/* Fila de anillos de progreso (índice fiscal, % suscritos, índice de empresa, % bots). */
.ds-anillos { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.2rem; }
.ds-anillo { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 128px; }
.ds-anillo svg { display: block; }
.ds-anillo-valor { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; fill: var(--ink); }
.ds-anillo-label { font-size: .7rem; text-align: center; color: var(--muted); line-height: 1.25; }

/* Barra fija de países para comparar — pegada bajo el subnav de Estadísticas (que ya es sticky,
   ver .subnav más abajo en esta hoja), mismo patrón que .subnav-anidado. */
/* El .subnav de arriba (Resumen/Economía/...) ya trae su propio margin-bottom:1rem — sin esto,
   sumado al padding de la barra de países de abajo, quedaba un hueco doble feo entre las dos
   barras (reportado por el usuario). CORRECCIÓN: .ds-paises-sticky no es hermano directo del
   .subnav (vive dos niveles adentro, dentro de #admin-estadisticas, junto a .ds-barra) — el
   selector ":has(+ .ds-paises-sticky)" nunca matcheaba y el hueco seguía ahí. Usa un selector
   relativo con descendiente para alcanzarla igual. Solo se anula cuando el .subnav está justo
   antes de #admin-estadisticas Y esa barra de países existe (pestaña Ingresos no la tiene, y
   ahí sí hace falta el margen normal). */
.subnav:has(+ #admin-estadisticas .ds-paises-sticky) { margin-bottom: 0; }
.ds-paises-sticky {
  position: sticky;
  top: calc(var(--hud-tabs-height, 113px) + var(--subnav-height, 49px));
  z-index: 7;
  background: var(--bg);
  padding: .45rem 0;
  margin-bottom: .8rem;
}
.ds-paises-chips { display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; }
.ds-chip {
  flex-shrink: 0;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.ds-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) { .ds-chip:not(.active):hover { border-color: var(--accent); color: var(--ink); } }

/* Tarjeta de comparación lado a lado (2+ países elegidos en la barra fija). */
.ds-compara-fila { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .2rem; }
.ds-compara-col { flex: 1 1 180px; min-width: 170px; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); }
.ds-compara-col h4 { margin: 0; font-size: .9rem; }
.ds-compara-col .stat-list { width: 100%; }

@media (max-width: 600px) {
  .ds-tiles { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .ds-tile { padding: .5rem .6rem; }
  .ds-tile-valor { font-size: 1.1rem; }
  .ds-hero-valor { font-size: 1.6rem; }
  .ds-anillo { width: 104px; }
  /* El gap ya no se achica acá — var(--card-gap) se escala sola junto con todo lo
     demás vía el html{font-size:86%} de arriba, así queda igual de proporcional que
     el resto de la hoja en vez de un valor fijo aparte (antes quedaba más apretado
     que las otras grillas). */
  .ds-grid { grid-template-columns: 1fr; }
  .ds-serie-plot { height: 140px; }
  .ds-alerta { font-size: .8rem; padding: .45rem .6rem; }
  /* En celular el botón "Guardar cambios" pegado abajo (.admin-config-lote-barra) quedaba
     tapado por los íconos flotantes de Supervivencia (hambre/sed/salud/💰, esquina inferior
     derecha — ver .supervivencia-flotante más abajo en esta hoja) — reportado por el usuario.
     Acá no compite por ese espacio: vuelve a ser parte normal del flujo (se deja de pegar
     abajo), el botón queda simplemente al final de la tarjeta, donde siempre se puede ver. */
  .admin-config-lote-barra { position: static; }
}

/* En celular las empresas SIGUEN de a dos por fila (antes se apilaban a una
   sola columna) — a pedido del usuario, para ver más empresas sin scrollear.
   Solo se achica el gap para que las dos quepan cómodas en pantallas angostas. */
@media (max-width: 640px) { .empresa-grid { gap: .7rem; } }

.tabla-ahorros-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabla-ahorros { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-ahorros th, .tabla-ahorros td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabla-ahorros th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.tabla-ahorros.tabla-con-icono td:first-child { width: 2rem; }
.tabla-ahorros tfoot td { border-top: 2px solid var(--border); border-bottom: none; }
.rut-reveal-row { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.rut-value { font-family: var(--font-mono); min-width: 7ch; display: inline-block; }
.rut-eye-btn {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  width: 1.8rem; height: 1.8rem; cursor: pointer; font-size: .9rem; line-height: 1;
  user-select: none; -webkit-user-select: none;
}
.rut-eye-btn:active { background: var(--panel-2); }

.ahorro-toggle {
  width: 1.8rem; height: 1.8rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--ink); font-weight: 700; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .ahorro-toggle:hover { background: var(--border); } }
.ahorro-historial-row td { background: var(--bg); padding: .6rem; white-space: normal; }
.tabla-ahorro-historial { font-size: .82rem; width: 100%; }
.tabla-ahorro-historial th, .tabla-ahorro-historial td { padding: .35rem .5rem; white-space: nowrap; text-align: center; }
/* Tabla de empleados (Ver empresa): compacta a propósito para que quepa sin scroll en un cuadro a media pantalla. */
.tabla-empleados { font-size: .8rem; }
.tabla-empleados th, .tabla-empleados td { padding: .4rem .35rem; white-space: nowrap; }
.tabla-empleados td:last-child, .tabla-empleados th:last-child { white-space: normal; }

.historial-list li { padding: .6rem 0; }
.historial-fecha { font-size: .8rem; margin-top: .15rem; }
.historial-fecha-juego { color: var(--accent); }
.historial-fecha-real { color: var(--muted); }

/* ---------- Propiedades: fila completa (a diferencia del grid de tarjetas) ---------- */
.prop-list { display: flex; flex-direction: column; gap: var(--card-gap); }
.prop-card {
  position: relative;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 var(--card-edge-h) 0 0 var(--card-edge-color);
}
.prop-card.is-owned { border-color: var(--accent); }
/* .prop-card es una fila corta (alto = lo que ocupe el contenido) — con imagen de fondo
   (.card-bg-imagen, ver arriba) eso dejaba muy poca altura para que "cover" mostrara la
   foto completa, así que recortaba casi todo y solo se veía una esquina. Con más alto
   mínimo la foto entra bien, sin afectar las otras tarjetas que comparten .card-bg-imagen
   (empresa/rubro, conocimiento), que no llevan este selector más específico. El velo
   blanco de .card-bg-imagen::before (pensado para tarjetas con texto largo encima) acá se
   baja harto de opacidad — la foto es la protagonista, el texto se lee igual por el
   text-shadow de abajo. */
.prop-card.card-bg-imagen { min-height: 190px; background-size: cover; background-position: center; }
.prop-card.card-bg-imagen::before { opacity: .4; }
/* El velo bajó mucho de opacidad arriba — en fotos claras (cielo, paredes blancas)
   el encabezado podía perderse, así que el contraste ahora lo da la sombra. */
.prop-card.card-bg-imagen .prop-card-body { text-shadow: 0 1px 4px rgba(0, 0, 0, .65); }
.prop-card-body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
/* Precio/mantención de la propiedad: más oscuro que un .item-desc normal
   (que usa --muted, gris) — sobre la foto de fondo costaba leerlo. */
.prop-card-precio { margin: 0; color: var(--ink); font-weight: 700; font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: -.01em; }

/* Botón de elegir vivienda: esquina superior derecha, chico, sin texto
   explicativo — antes era una caja entera con un párrafo, ocupaba demasiado. */
.prop-card-vivienda-btn {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  font-size: .72rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) { .prop-card-vivienda-btn:hover { background: var(--accent); color: var(--on-accent); } }

/* Vender/arrendar van en columnas lado a lado (no una fila cada una) y con
   fondo semitransparente oscuro — así la foto de la propiedad se sigue
   viendo detrás, el texto queda legible encima en blanco. */
.prop-card-split { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .6rem; }
.prop-accion-mini {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
  background: rgba(10, 12, 8, .55);
  border-radius: 12px;
  padding: .6rem .7rem;
}
.prop-accion-mini h4 {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .75);
}
.prop-accion-mini .item-desc { margin: 0; color: rgba(255, 255, 255, .85); }
.prop-accion-mini .requisito { margin: 0; }
.prop-accion-mini .invest-row { margin: 0; }
.prop-accion-mini .invest-row .btn-outline-action { margin-top: 0; }
.prop-accion-mini input[type="number"] {
  width: 100%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .65rem;
  color: var(--ink);
  font: inherit;
}

/* Estados de una sola caja (en venta, en venta forzosa, arrendada, etc.) —
   siguen siendo panel sólido normal, no transparente, porque no comparten
   fila con otra acción y suelen llevar texto más largo. */
.prop-card-actions {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
  min-width: 240px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .7rem .8rem;
}
.prop-card-actions h4 {
  margin: 0;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.prop-card-actions .invest-row { margin: 0; }
/* .btn-outline-action trae margin-top:1.5rem pensado para un botón suelto bajo un formulario
   (ver su regla base) — acá, al lado de "Comprar" en la misma fila, eso lo empujaba hacia abajo
   y descuadraba el par. */
.prop-card-actions .invest-row .btn-outline-action { margin-top: 0; }
.prop-card-actions input[type="number"] {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .7rem;
  color: var(--ink);
  font: inherit;
}
.prop-card-actions .item-desc { margin: 0; }
.item-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.item-card-head h3 { font-size: 1rem; }
.item-card-titulo { display: flex; align-items: flex-start; gap: .3rem; }

.como-funciona-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.como-funciona-head-titulo { display: flex; align-items: center; gap: .5rem; cursor: pointer; flex: 1 1 auto; }
.como-funciona-head-titulo h3 { margin: 0; }
.btn-como-funciona-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--border);
  font-size: 1rem; font-weight: 700; color: var(--muted); flex-shrink: 0;
}
.btn-como-funciona-toggle::before { content: "−"; }
.como-funciona-card.colapsado .btn-como-funciona-toggle::before { content: "+"; }
.como-funciona-card.colapsado .como-funciona-body { display: none; }
.como-funciona-card .como-funciona-body { margin-top: .6rem; }
/* Colapsada, la tarjeta no necesita el mismo padding generoso que cuando tiene contenido adentro
   (.panel-card, 1.1rem/1.2rem) — con el cuerpo oculto eso dejaba una barra más alta de lo
   necesario solo para mostrar el título. Más especificidad que .panel-card a propósito. */
.como-funciona-card.colapsado { padding: .55rem .9rem; }
.como-funciona-head-extra { flex-shrink: 0; }
.como-funciona-head-extra .btn-outline-action { margin-top: 0; white-space: nowrap; }

.btn-favorito-job {
  background: none; border: none; cursor: pointer; padding: 0 .1rem;
  font-size: 1.1rem; line-height: 1.3; color: var(--muted);
  /* El emoji 🎯 se pinta solo, con sus propios colores — "color" no le hace nada, así que el
     blanco y negro de "no elegido" se logra con un filtro, no con la propiedad de color. */
  filter: grayscale(1);
  transition: filter .15s linear;
}
.btn-favorito-job.is-favorito { color: var(--accent); filter: none; }
@media (hover: hover) { .btn-favorito-job:hover { color: var(--accent); filter: none; } }
.item-desc { font-size: .87rem; color: var(--muted); flex-grow: 1; }
.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  font-family: var(--font-mono);
  font-size: .85rem;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
}
/* El monto es SIEMPRE el primer <span> de .item-meta (Trabajos, Aprendizaje, Tienda,
   Supervivencia, Cripto...) — un solo lugar fijo en toda la app, bien grande, para
   que el precio/pago sea lo primero que salta a la vista en cualquier tarjeta. */
.item-meta > span:first-child { font-size: 1.15rem; font-weight: 700; } /* el color lo decide cada caso (ej. .empresa-precio en verde para un pago) */
.item-meta > span:last-child { color: var(--muted); font-size: .8rem; }

.badge {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-ok { background: var(--accent-dim); color: var(--accent); }
.badge-locked { background: var(--warn-dim); color: var(--warn); }
.badge-active { background: var(--info-dim); color: var(--info); }
.badge-owned { background: var(--accent-dim); color: var(--accent); }
.badge-bad { background: var(--bad-dim); color: var(--bad); }
.fila-destacada td { background: var(--info-dim); }

/* Marco de avatar y nombre con estilo — el admin decide por plan quién los
   tiene (ver suscripcion_tiers.avatar_marco / nombre_estilo), ya no están
   ligados a un tier específico. El anillo degradado vive en un ::before
   (capa aparte, detrás de la foto) — un filter con animación afecta a TODO
   el subárbol del elemento donde se aplica, así que si se pone directo en
   el <img> (o en un div que lo envuelve como padre), también le cambia los
   colores a la foto (bug visto en Sub 1/Sub 2), no solo al anillo. Un
   ::before es hermano de la foto, no su padre, así que el filter no la toca. */
.avatar-frame-marco {
  position: relative;
  display: inline-block;
  width: 160px;
  height: 160px;
  margin: 0 auto .9rem;
  border-radius: 50%;
}
.avatar-frame-marco::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5c518, #ff6ec7, #4fd1ff);
  animation: avatar-frame-glow 3s linear infinite;
  z-index: 0;
}
.avatar-frame-marco .perfil-avatar-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
}

.perfil-avatar-card { text-align: center; }
.perfil-avatar-img {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
}
.perfil-avatar-nombre { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; }
@keyframes avatar-frame-glow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .avatar-frame-marco::before { animation: none; } }

/* Depositar/retirar de empresa: input y botón del mismo tamaño exacto. */
.empresa-saldo-accion { display: flex; gap: .5rem; }
.empresa-saldo-accion input,
.empresa-saldo-accion button { min-width: 0; padding: .55rem .7rem; font: inherit; border-radius: 10px; }
.empresa-saldo-accion input { flex: 2.2; }
.empresa-saldo-accion button { flex: 1; white-space: nowrap; }
.empresa-btn-depositar { background: var(--info); border-color: var(--info); }
.empresa-btn-retirar { background: var(--bad); border-color: var(--bad); }

.reg-avatar-picker { display: flex; gap: 1.5rem; justify-content: center; margin: .3rem 0 .6rem; flex-wrap: wrap; }
.reg-avatar-opcion { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: center 15%; cursor: pointer; border: 3px solid transparent; opacity: .75; transition: opacity .15s, border-color .15s; }
@media (hover: hover) { .reg-avatar-opcion:hover { opacity: .95; } }
.reg-avatar-opcion.is-selected { opacity: 1; border-color: var(--accent); }

.nombre-estilo {
  font-weight: 700;
  background: linear-gradient(90deg, #f5c518, #ff6ec7, #4fd1ff, #f5c518);
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nombre-sub2-shine 4s linear infinite;
}
@keyframes nombre-sub2-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
@media (prefers-reduced-motion: reduce) { .nombre-estilo { animation: none; background-position: 0% center; } }

/* Niveles de objetos (básico → ultimate): la misma familia de color, cada
   vez más saturada, para que se note la progresión sin agregar más colores. */
.tier-pieza    { background: var(--panel-2); color: var(--muted); border: 1px dashed var(--border); }
.tier-standard { background: var(--panel-2); color: var(--muted); }
.tier-premium  { background: var(--info-dim); color: var(--info); }
.tier-gold     { background: var(--warn-dim); color: var(--warn); }
.tier-diamond  { background: var(--accent-dim); color: var(--accent); }
.tier-ultimate { background: var(--gold); color: var(--on-accent, #fff); }

.requisito { font-size: .8rem; color: var(--muted); margin: 0; }

.btn-action {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 14px;
  padding: .65rem .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  /* Canto 3D del mismo verde, más oscuro — el botón "se nota macizo" sin necesitar un borde. */
  box-shadow: 0 4px 0 0 var(--accent-edge);
  transition: box-shadow .1s ease, transform .1s ease;
}
.btn-action:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; font-size: .76rem; padding: .55rem .4rem; box-shadow: none; }
@media (hover: hover) { .btn-action:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 6px 0 0 var(--accent-edge); } }
/* Al hacer click se "prensa": el canto desaparece y el botón baja a su lugar — el gesto
   físico de apretar un botón de juego de verdad. */
.btn-action:active:not(:disabled) { box-shadow: none; transform: translateY(4px); filter: none; }
@media (prefers-reduced-motion: reduce) { .btn-action { transition: none; } .btn-action:hover, .btn-action:active { transform: none; } }
.btn-action-ancho { display: block; width: 100%; text-align: center; }

/* Botón SECUNDARIO genérico (Refrescar, Ver, Volver, Cancelar, Rechazar... — se usa para
   toda acción que no es la principal de la pantalla, no solo las destructivas). Antes era
   rojo "outline" siempre; eso quedaba mal en los usos no-destructivos (la mayoría). Ahora
   es neutro — tono similar a la tarjeta, con su propio canto 3D más oscuro —, y cada
   pantalla puede pintarlo de rojo puntualmente con .btn-outline-action-peligro donde de
   verdad hace falta la alarma (cancelar suscripción, renunciar, etc.). */
.btn-outline-action {
  margin-top: 1.5rem;
  background: var(--panel-2);
  color: var(--ink);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: .6rem 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--border) 45%, var(--ink) 55%);
  transition: box-shadow .1s ease, transform .1s ease;
}
@media (hover: hover) { .btn-outline-action:hover:not(:disabled) { background: var(--bg); box-shadow: 0 6px 0 0 color-mix(in srgb, var(--border) 45%, var(--ink) 55%); } }
.btn-outline-action:active:not(:disabled) { box-shadow: none; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) { .btn-outline-action { transition: none; } .btn-outline-action:hover, .btn-outline-action:active { transform: none; } }
.btn-outline-action-peligro { background: var(--bad); color: #fff; border-color: var(--bad); box-shadow: 0 4px 0 0 var(--bad-edge); }
@media (hover: hover) { .btn-outline-action-peligro:hover:not(:disabled) { background: var(--bad); box-shadow: 0 6px 0 0 var(--bad-edge); } }
/* Faltaba este estado — sin él, un botón deshabilitado (ej. "Comprar para
   Proyecto" de auto-piloto mientras ya hay una ventana activa de otra
   categoría) se veía IDÉNTICO a uno habilitado, confirmado real: el jugador
   no tenía forma de saber por qué "no hacía nada" al tocarlo. */
.btn-outline-action:disabled { opacity: .45; cursor: not-allowed; border-color: var(--border); color: var(--muted); box-shadow: none; }
/* Botón de acción dentro de una fila junto a otros (ej. Multicuentas) — el margin-top:1.5rem de
   .btn-outline-action es para uno solo bajo un formulario, no para varios lado a lado envolviendo. */
.btn-compacto { margin-top: 0; padding: .4rem .65rem; font-size: .8rem; }
.admin-config-separador { width: 1px; height: 1.4rem; background: var(--border); margin: 0 .2rem; }

.invest-holding { font-size: .87rem; color: var(--ink); }
.subnav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden; /* mismo motivo que .tabs — "overflow-x: auto" solo, sin esto, deja el eje vertical arrastrable también */
  gap: .25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: var(--hud-tabs-height, 113px);
  z-index: 8;
}
/* Sub-submenú (ej. Tareas > Tickets > por tipo, Tareas > Bots > Crear/Estado/Historial) — va
   pegado un nivel más abajo que el .subnav que lo contiene, para no taparlo al hacer scroll. */
.subnav-anidado {
  top: calc(var(--hud-tabs-height, 113px) + var(--subnav-height, 49px));
  z-index: 7;
}
/* Pestaña Supervivencia: el cuadro de hambre/sed/salud + su subnav quedan juntos pegados arriba
   al bajar (mismo motivo que .hud-tabs-fijo — un solo contenedor, no cada uno con su propio
   sticky). .subnav-en-fijo le quita el sticky propio al subnav de adentro, porque ya lo da el
   contenedor completo. */
.supervivencia-top-fijo {
  position: sticky;
  top: var(--hud-tabs-height, 113px);
  z-index: 8;
  background: var(--bg);
  padding-top: .5rem;
}
.subnav-en-fijo { position: static; }
/* Antes: texto plano con un subrayado verde fijo, siempre el mismo color sin importar
   la sección. Ahora: chip redondeado que se pinta del --section-color de su panel (ver
   más arriba), con el mismo "pop" de rebote que las pestañas principales — las
   subpestañas se re-arman por completo en cada cambio (innerHTML, no classList), así
   que no hay un indicador deslizante acá: el rebote del chip activo es lo que da el
   efecto de movimiento. */
.subnav-btn {
  background: none;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: .5rem 1rem;
  color: var(--muted);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.subnav-btn.active {
  color: var(--ink);
  background: color-mix(in srgb, var(--section-color, var(--accent)) 16%, transparent);
  border-color: var(--section-color, var(--accent));
}
@media (hover: hover) {
  .subnav-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--section-color, var(--accent)) 8%, transparent); }
}
.subnav-btn:active { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) {
  .subnav-btn { transition: none; }
  .subnav-btn:active { transform: none; }
}
/* "Nube" de pendientes estilo chat (ver SIM.actualizarTareasPendientesNubes) — número de no leídos junto al nombre de la sub-pestaña. */
.tareas-nube {
  display: inline-block;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .3rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  vertical-align: middle;
}

.prop-form { display: flex; flex-direction: column; gap: .8rem; }
.prop-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); }
.prop-form select, .prop-form input[type="range"] { font: inherit; }
.prop-slider-row { display: flex; align-items: center; gap: .6rem; }
.prop-slider-row input[type="range"] { flex: 1; }
.prop-slider-limite { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }
.prop-form select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .7rem;
  color: var(--ink);
}

.invest-row { display: flex; gap: .5rem; }
.invest-row input {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .7rem;
  color: var(--ink);
  font: inherit;
  font-family: var(--font-mono);
  font-size: .85rem;
}
.invest-row input:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }

.job-progress {
  /* display:grid + grid-area:1/1 en los dos hijos de abajo (en vez de position:absolute +
     z-index en el label) — mismo truco de superposición que .flip-card-face. Un hijo con
     position+z-index propio DENTRO de una cara oculta por backface-visibility (la tarjeta
     entera gira, ver .flip-card) puede "escaparse" y pintarse igual aunque esa cara esté de
     espaldas — bug real de compositing confirmado (el % se veía filtrado y espejado en el
     dorso). Sin position ni z-index en ningún hijo, no hay nada que se escape. */
  display: grid;
  grid-template-columns: 1fr;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 34px;
  overflow: hidden;
}
.job-progress-fill {
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: start;
  /* Antes era "opacity: .3" — dentro de una tarjeta que se gira (transform-style:
     preserve-3d), un descendiente con su propia opacity < 1 puede renderizar con
     parpadeo/artefactos (bug real de compositing de Chrome/Safari). Se reemplaza por un
     color ya mezclado (mismo resultado visual, sin opacity propia). */
  background: color-mix(in srgb, var(--info) 30%, var(--panel-2));
  transition: width .25s linear;
}
@media (prefers-reduced-motion: reduce) { .job-progress-fill { transition: none; } }
.job-progress-label {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
}
.job-progress-countdown {
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-top: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Ícono girando en vez de la palabra "Procesando…" (ver job-progress-countdown arriba) —
   mientras el servidor confirma y liquida un trabajo/estudio/proyecto que ya llegó al 100%. */
.job-progress-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--info);
  border-radius: 50%;
  animation: job-progress-girar .7s linear infinite;
}
@keyframes job-progress-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .job-progress-spinner { animation: none; } }

/* ---------- Gráficos de barras del panel admin (Estadísticas) ---------- */
.admin-chart { display: flex; flex-direction: column; gap: .7rem; }
.admin-chart-row { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.admin-chart-row-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.admin-chart-row-head span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-chart-row-head span:last-child { font-family: var(--font-mono); color: var(--muted); flex-shrink: 0; }
.admin-chart-track { background: var(--panel-2); border: 2px solid var(--border); border-radius: 999px; height: 12px; overflow: hidden; }
.admin-chart-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .admin-chart-fill { transition: none; } }
/* Color plano, sin degradado — el brutalismo no usa transiciones suaves de color. */
.admin-chart-fill-accent { background: var(--accent); }
.admin-chart-fill-bad { background: var(--bad); }

/* ---------- Categorías de objetos ---------- */
.cat-group { margin-bottom: 2rem; }
.cat-title { font-size: 1rem; color: var(--muted); margin-bottom: .8rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Aviso de quiebra ---------- */
.bankrupt-card { border-color: var(--bad); margin-bottom: 1rem; }
.bankrupt-card h3 { color: var(--bad); }

.tienda-aviso-prueba { border-color: var(--warn); background: var(--warn-dim); }
.tienda-aviso-prueba .item-desc { color: var(--ink); margin: 0; }

/* ---------- Perfil ---------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--card-gap);
}
@media (min-width: 601px) { .perfil-estadisticas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .perfil-estadisticas-grid { grid-template-columns: 1fr; } }
.panel-card {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: 0 var(--card-edge-h) 0 0 var(--card-edge-color);
}
/* Minijuego "Adivina el número" — mismos colores del juego en vez del verde/amarillo/gris típico. */
.minijuego-fila { display: flex; gap: .4rem; margin-bottom: .4rem; }
.minijuego-digito {
  width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; border-radius: var(--radius);
  background: var(--border); color: var(--ink);
}
.minijuego-digito-verde { background: var(--accent); color: #fff; }
.minijuego-digito-amarillo { background: var(--warn); color: #fff; }
.minijuego-input-row { display: flex; gap: .4rem; align-items: center; margin-top: .6rem; }
.minijuego-input-row input { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .3rem; width: 7rem; text-align: center; }

/* Chat grupal de clan — mensajes propios alineados a la derecha, con fondo distinto. */
.clan-chat-msg { padding: .35rem .6rem; margin-bottom: .3rem; border-radius: var(--radius); background: var(--bg); font-size: .85rem; word-break: break-word; }
.clan-chat-msg-propio { background: var(--accent-dim); margin-left: 2rem; }
.clan-chat-autor { font-weight: 600; color: var(--accent); }
.clan-chat-texto { color: var(--ink); }

/* Tarjetas de compra angostas (ej. potenciador de trabajo manual): info a la izquierda, botón a
   la derecha, en vez de apiladas — ocupan mucho menos alto. */
.compra-card-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.compra-card-info { flex: 1 1 260px; min-width: 0; }
.compra-card-info h3 { margin: 0 0 .25rem; }
.compra-card-info p { margin: 0; }
.compra-card-info p + p { margin-top: .25rem; }
.compra-card-btn { flex-shrink: 0; margin-top: 0; white-space: nowrap; }
.stat-list div { display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.stat-list div:last-child { border-bottom: 0; }
.stat-list dt { color: var(--muted); }
.stat-list dd { margin: 0; font-family: var(--font-mono); font-weight: 600; }
.plain-list li { padding: .35rem 0; font-size: .88rem; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: 0; }

/* Libro de órdenes de la bolsa de acciones: ventas vs. compras bien diferenciadas, sin espacios sueltos de h4/p por defecto. */
.mercado-libro { display: flex; gap: .8rem; margin-top: .6rem; }
.mercado-col { flex: 1 1 260px; min-width: 0; border-radius: var(--radius); padding: .7rem .8rem; border-left: 3px solid var(--border); }
.mercado-col h4 { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.mercado-col .plain-list { margin: 0 0 .5rem; }
.mercado-col .item-desc { margin: 0 0 .5rem; }
.mercado-ventas { background: var(--bad-dim); border-left-color: var(--bad); }
.mercado-ventas h4 { color: var(--bad); }
.mercado-compras { background: var(--accent-dim); border-left-color: var(--accent); }
.mercado-compras h4 { color: var(--accent); }
@media (max-width: 640px) { .mercado-libro { flex-direction: column; } }

.admin-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.logro-bloqueado { opacity: .55; }
.admin-config-row:last-child { border-bottom: 0; }
.admin-config-info { flex: 1; min-width: 200px; }
.admin-config-action { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.admin-config-action input[type="text"],
.admin-config-action input[type="number"] {
  width: 130px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .6rem;
  color: inherit;
}
.admin-config-action select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .6rem;
  color: inherit;
}
.admin-input-field { display: flex; flex-direction: column; gap: .15rem; }
.admin-input-field label { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* Guardado por lote del panel de Configuración — un solo botón "Guardar cambios" al pie de
   cada tarjeta/pestaña (ver SIM.adminConfigLoteWrapHtml, admin.js) en vez de uno por fila. */
.admin-config-row-modificada { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; }
.admin-config-row-modificada .admin-config-action input { border-color: var(--accent); }
.admin-config-lote-barra {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .8rem;
  margin-top: .8rem;
  padding: .7rem 0;
  background: var(--bg);
}
.admin-config-lote-aviso { font-size: .76rem; color: var(--muted); }
.admin-config-lote-aviso:not([hidden]) { color: var(--accent); font-weight: 600; }
.admin-buscador {
  display: block;
  width: 100%;
  max-width: 340px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .7rem;
  color: inherit;
  margin-bottom: .9rem;
}

@media (max-width: 860px) {
  .layout, .layout.sin-sidebar-izq { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* ---------- Teléfonos ---------- */
@media (max-width: 600px) {
  /* Achica TODO proporcionalmente en celular (texto, padding, gaps, radios —
     casi toda la hoja de estilos usa rem) a pedido del usuario: "dentro ya
     del juego achica todo proporcionalmente para que sea más jugable". No
     toca la cuenta regresiva (.cuenta-regresiva-lanzamiento vive fuera de .layout,
     antes de este media query, y no usa rem para su alto). */
  html { font-size: 86%; }

  .hud { padding: .5rem .7rem; gap: .4rem; }
  .hud-brand { font-size: .82rem; width: 100%; justify-content: space-between; }
  .hud-conectados { font-size: .7rem; }
  .hud-saldos-box {
    order: 2;
    flex: 0 1 auto;
    padding: .2rem .55rem;
    /* Va al lado de la fecha (no apilado abajo, ver .hud-derecha más abajo) — por eso el
       ancho se reparte con ella en vez de ocupar casi toda la fila (como antes con 78vw).
       Con saldos muy largos esto igual evita que la caja empuje al resto del header — ver
       SIM.ajustarTamanoSaldos en ui.js, que achica la letra de los montos para que quepan
       en este ancho en vez de desbordarlo. */
    max-width: 56%;
  }
  .hud-saldos-fila { gap: .5rem; }
  .hud-stat { align-items: flex-start; }
  .hud-stat-label { font-size: .68rem; }
  .hud-stat-value { font-size: 1rem; }
  .hud-fecha-label { display: none; }
  .hud-fecha-valor { flex-direction: column; gap: 0; align-items: flex-end; }
  .hud-fecha-valor .hud-stat-value { font-size: .8rem; }
  .hud-fecha-hora::before { content: ""; }
  .hud-derecha { order: 3; gap: .6rem; }
  .hud-stat-fecha { align-items: flex-end; }
  .hud-actions { width: auto; flex: 0 0 auto; flex-direction: column; justify-content: flex-start; gap: .3rem; }
  .hud-logout { white-space: nowrap; padding: .35rem .6rem; font-size: .75rem; }
  .tabs { justify-content: flex-start; }
  .hud-logout-manual, .hud-logout-salir {
    padding: .3rem; width: 1.8rem; height: 1.8rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hud-logout-texto { display: none; }
  .hud-logout-icono { display: inline; font-size: 1.05rem; line-height: 1; }
  .sidebar { display: none; } /* en el celular, la Actividad reciente solo se ve en Perfil › Historial, no duplicada acá */
  .btn-gastos-flotante:not([hidden]) { display: flex; }
  .gastos-flotante-panel:not([hidden]) { display: flex; }
  .perfil-avatar-img { width: 120px; height: 120px; }
  .perfil-avatar-nombre { font-size: 1.25rem; }
  .supervivencia-gauges { gap: .5rem; }
  .supervivencia-gauge-head { font-size: .72rem; flex-direction: column; gap: 0; }
  /* OJO: no usar el shorthand "padding" acá — resetearía el padding-top con el calc() del header
     fijo (ver regla base de .layout) y el contenido quedaría tapado debajo del header en celular. */
  /* CAMBIO 2026-10-19, REVERTIDO: se probó calc(var(--hud-tabs-height)...) acá (ver el resto
     de este archivo en versiones intermedias) pero en producción dio un alto MAYOR al real y
     dejó un hueco visible entre el menú y el contenido — confirma lo que ya decía la nota
     vieja de abajo. Vuelve a ser un número FIJO a mano. En vez de seguir subiendo este
     número cada vez que algo arriba cambia de alto, esta vez se achicó el ícono de las
     pestañas (ver .tab-icon más abajo) para que la barra casi no haya crecido respecto a
     cuando solo tenía texto — así 133px (el valor de antes de los íconos) sigue sirviendo. */
  .layout { padding: .8rem; padding-top: 133px; gap: .7rem; }
  body.tiene-favorito-flotante .layout { padding-bottom: 9.5rem; }
  /* Solo ícono en celular (la barra con las 11-14 pestañas, sobre todo con las del admin
     sumadas, era demasiado larga y obligaba a scrollear mucho para encontrar una) — el
     nombre aparece SOLO en la pestaña activa, como un tab bar de app de celular. El
     indicador deslizante (SIM.posicionarIndicadorTab) sigue funcionando igual: ya mide el
     ancho real del botón activo en vivo, así que se ajusta solo al angosto/ancho que
     corresponda en cada caso. */
  /* padding/font-size muy cerca de lo que medía la pestaña de solo texto de antes —
     a propósito, para no tener que recalibrar el alto reservado del header (ver
     "padding-top FIJO" más abajo) cada vez que se toca el tab bar. */
  .tab-btn { padding: .45rem .5rem; font-size: .78rem; gap: 0; }
  .tab-label { display: none; max-width: 0; overflow: hidden; }
  .tab-btn.active .tab-label { display: inline; max-width: none; margin-left: .3rem; }
  .tab-icon { font-size: .95rem; }
  /* Menú principal, submenú y sub-submenú (.tabs/.subnav/.subnav-anidado) más bajos en el
     celular — entre los tres (y la cuenta regresiva) ya ocupan bastante alto fijo arriba de
     la pantalla, esto deja más espacio real para el contenido. La altura reservada arriba
     del contenido se ajusta sola (se mide en vivo, ver SIM.ajustarAlturaHeader en ui.js). */
  .subnav { margin-bottom: .5rem; }
  .subnav-btn { padding: .32rem .5rem; font-size: .74rem; }
  /* El sub-submenú se pega sticky usando --subnav-height (nadie la mide por JS, es un valor fijo
     en la regla base — ver .subnav-anidado) — como en el celular .subnav-btn ahora es más bajo,
     hay que bajar también este valor de respaldo, si no el sub-submenú queda pegado más abajo
     de lo necesario (hueco de más entre los dos menús en vez de overlap, pero igual desperdicia
     alto de pantalla). */
  .subnav-anidado { top: calc(var(--hud-tabs-height, 100px) + 30px); }
  /* Mismo ajuste que .subnav-anidado arriba, pero para la barra fija de países de Estadísticas
     (.ds-paises-sticky) — le faltaba este override: en celular seguía usando el "top" de
     escritorio (pensado para un .subnav más alto), así que quedaba pegada más abajo de lo
     necesario, dejando un hueco con contenido de la pestaña asomando arriba de ella al hacer
     scroll (reportado por el usuario). */
  .ds-paises-sticky { top: calc(var(--hud-tabs-height, 100px) + 30px); }
  /* Descripciones de "ambiente" (sabor/flavor text que no explica nada funcional — ej. la bajada
     de un trabajo, un conocimiento, un vehículo, una propiedad) solo en PC — en el celular se
     ocultan para que quede más contenido útil por pantalla sin scrollear tanto. Cada una de estas
     lleva item-desc-decor ADEMÁS de item-desc (ver ui.js/propiedades.js) — el resto de los
     item-desc (requisitos, precios, avisos) sigue igual en ambos. La nota larga de la cuenta
     regresiva (.cr-nota, ver cuenta-regresiva.js) entra en la misma categoría. */
  .item-desc-decor, .cr-nota { display: none; }
  /* Cards más compactas para que haya menos que scrollear en el celular. */
  .panel-card { padding: .6rem .75rem; }
  /* Con dos empresas por fila el ancho es poco: el conteo de proyectos
     completados se oculta acá (sigue visible en la ficha "Ver empresa"). */
  .empresa-card-proyectos { display: none; }
  .item-card, .flip-card-face { padding: .6rem .7rem; gap: .3rem; }
  .item-grid { grid-template-columns: 1fr; } /* el gap sigue var(--card-gap), ver nota en .ds-grid arriba */
  .cat-group { margin-bottom: 1rem; }
  /* Los botones (Comprar/Trabajar/Invertir/etc.) traen bastante aire en PC —
     en celular, repetidos en cada tarjeta, suman mucho alto. El margin-top de
     1.5rem de .btn-outline-action (pensado para un botón suelto bajo un
     formulario) también se achica, si no queda un hueco grande arriba de
     cada uno. */
  .btn-action { padding: .5rem .7rem; font-size: .92rem; }
  .btn-outline-action { padding: .5rem .8rem; font-size: .92rem; margin-top: .8rem; }
  .stat-list div { padding: .3rem 0; }
  .como-funciona-card .como-funciona-body { margin-top: .5rem; }
  .como-funciona-head-titulo h3 { font-size: .95rem; white-space: nowrap; }
  .como-funciona-head-extra .btn-outline-action { padding: .35rem .55rem; font-size: .72rem; }
  .admin-config-row { flex-direction: column; align-items: stretch; }
  .admin-config-action { width: 100%; }
  .admin-config-action input[type="text"],
  .admin-config-action input[type="number"],
  .admin-config-action select {
    width: 100%;
  }
  .empresa-filtro { flex-wrap: wrap; }
  .invest-row { flex-wrap: wrap; }
  .invest-row input { min-width: 100px; }
  .prop-form select, .prop-form input { width: 100%; }
  .prop-card-actions { min-width: 0; flex-basis: 100%; }
  .prop-card-body { flex-basis: 100%; }
  .admin-config-info { min-width: 0; }
  .auth-card { padding: 1.5rem 1.2rem; }
  .reg-avatar-picker { gap: 1rem; }
  .reg-avatar-opcion { width: 130px; height: 130px; }
}

/* ---------- Pantalla de acceso (login / registro) ---------- */
.hud-auth { justify-content: center; margin: 0 -1rem; }
/* Pantalla de "cargando" (ver index.html, #boot-loading): visible desde el primer instante, antes de
   que corra cualquier JS, para que nunca se vea un parpadeo del login mientras se comprueba la sesión —
   ni al recargar la página ni al volver de pagar en Mercado Pago. Se oculta sola en SIM.showAppScreen /
   SIM.showAuthScreen (ui.js) apenas se sabe cuál de las dos pantallas corresponde. */
.boot-loading {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--bg);
  color: var(--muted);
  font-size: .95rem;
}
.boot-loading-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  animation: boot-loading-girar .8s linear infinite;
}
@keyframes boot-loading-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .boot-loading-spinner { animation: none; }
}

/* Ícono de carga DENTRO de un botón (ver SIM.busy en ui.js: reemplaza el contenido de
   SIM._ultimoBotonAccion mientras una acción está en curso, en CUALQUIER botón del juego que
   dispare una llamada al servidor — y también en el botón "Entrar" del login, ver
   SIM.LOGIN_CARGA_FRASES). currentColor + em: toma el color y el tamaño de letra del botón
   donde caiga, así se ve bien en botones de cualquier variante (acción, contorno, peligro,
   compacto, el "rayo" cuadrado de Trabajos) sin necesitar una regla por cada uno. */
.btn-spinner-icono {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  vertical-align: -0.2em;
  animation: btn-spinner-girar .7s linear infinite;
}
@keyframes btn-spinner-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner-icono { animation: none; opacity: .6; }
}
/* Frase inventada al lado del ícono, solo en el botón "Entrar" del login. */
.btn-login-carga-texto { margin-left: .5rem; }

/* Efecto de "listo" en el botón "Entrar" cuando el juego ya terminó de cargar (ver el
   último .then() de SIM.wireAuthForms, ui.js) — check + pulso verde breve antes de pasar
   a la pantalla del juego, reemplazando el ícono de carga y la frase que estaban puestos. */
.btn-login-exito-icono {
  display: inline-block;
  font-weight: 700;
  margin-right: .3rem;
  animation: btn-login-exito-pop .35s ease;
}
.btn-login-exito {
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
@keyframes btn-login-exito-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-login-exito-icono { animation: none; }
  .btn-login-exito { box-shadow: none !important; }
}

/* ---------- Reciclaje (trabajo continuo, ver SIM.renderReciclajeTab en ui.js) ---------- */
.reciclaje-cabecera { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.reciclaje-toggle {
  width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--ink); font-weight: 700; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.reciclaje-leyenda { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .4rem .8rem; }
.reciclaje-leyenda-item { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.reciclaje-leyenda-icono { font-size: 1.2rem; }
.reciclaje-accion { margin-top: .8rem; }
.reciclaje-zona {
  position: relative; height: 220px; margin-bottom: 1.8rem; overflow: hidden;
  background: var(--panel-2); border: 2px dashed var(--border); border-radius: var(--radius);
}
.reciclaje-objeto {
  position: absolute; font-size: 4.5rem; line-height: 1; cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.reciclaje-espera { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-50%); }
.reciclaje-espera-titulo { margin: 0 0 .6rem; text-align: center; font-weight: 700; color: var(--muted); }
.reciclaje-lleno {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center; font-weight: 700; color: var(--muted);
}
.reciclaje-objeto-arrastrando { cursor: grabbing; z-index: 60; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .3)); }
.reciclaje-cesto {
  margin: 30px auto 0; width: 260px; max-width: 80%; height: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  /* Contenedor rojo: cuerpo + tapa (::before). */
  position: relative; background: #d6403a; border: 3px solid #a82b27;
  border-radius: 8px 8px 22px 22px; box-shadow: 0 6px 0 0 #8a211e;
  transition: background-color .15s ease, transform .15s ease;
}
.reciclaje-cesto::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: -22px; height: 20px;
  background: #b52f2a; border: 3px solid #8a211e; border-radius: 10px 10px 4px 4px;
}
.reciclaje-cesto.resaltado { background: #ee5650; transform: scale(1.04); }
.reciclaje-cesto-absorbiendo { animation: reciclaje-absorber .35s ease; }
@keyframes reciclaje-absorber {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.reciclaje-cesto-icono {
  display: flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 5.5rem; font-size: 3.6rem; line-height: 1;
  background: #fff; border-radius: 50%;
}
.reciclaje-cesto-texto { font-size: .85rem; color: #fff; font-weight: 700; font-family: var(--font-mono); }
.reciclaje-cesta-bloque { margin-top: 1rem; }
.reciclaje-cesta-lista { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.reciclaje-cesta-lista li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.reciclaje-cesta-lista li strong { font-family: var(--font-mono); }
.reciclaje-cesta-vacia { text-align: center; }
.reciclaje-vender { width: 100%; }
.reciclaje-msg { min-height: 1.2rem; margin: .6rem 0 0; text-align: center; font-weight: 700; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .reciclaje-cesto, .reciclaje-cesto-absorbiendo { transition: none; animation: none; } }

/* Efecto "círculo" al iniciar sesión, al cargar con sesión ya iniciada (o volver de pagar con
   dinero real) y al cerrar sesión — ver SIM._revelarConCirculo en ui.js (lo usan
   SIM.loginRevelarJuego, app.js y el botón "Cerrar sesión"). Dos capas:
   1) #login-reveal-verde: un círculo que crece desde el origen (el botón que se apretó, o el
      centro si no hay botón — ej. la carga silenciosa) hasta cubrir toda la pantalla, verde
      para entrar al juego (.is-rojo la pone roja para cerrar sesión).
   2) La pantalla que se revela (#app-screen o #auth-screen) gana la clase .reveal-circulo
      mientras dura el efecto: su contenido (ya renderizado debajo) empieza en un círculo
      invisible en el centro y crece hasta taparlo todo, "comiéndose" el color desde adentro —
      visualmente igual a "un círculo borra el color", sin necesitar máscaras SVG ni truco de
      agujero.
   OJO: el radio de ambos círculos lo fija JS en PÍXELES (nunca en %) y ahí mismo arma el
   clip-path completo como estilo inline — con porcentaje (ej. circle(150% at ...)) este
   navegador NO anima la transición, se queda pegado en el tamaño inicial (confirmado
   probándolo en vivo); en píxeles sí transiciona perfecto. Por eso acá solo queda el estado
   de reposo (radio 0) — el radio final nunca se pone por CSS. Si el jugador prefiere menos
   movimiento, se salta todo el efecto (ver el chequeo de prefers-reduced-motion en
   SIM._revelarConCirculo). */
.login-reveal-verde {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--accent);
  clip-path: circle(0px at 50% 50%);
  transition: clip-path .6s ease;
  pointer-events: none;
  display: none;
}
.login-reveal-verde.is-activo { display: block; }
.login-reveal-verde.is-rojo { background: var(--bad); }

/* Clase genérica (no atada a #app-screen/#auth-screen) para que cualquier pantalla pueda
   revelarse con el mismo truco — también la usa landing.html (ver el script al final de ese
   archivo) para el overlay rojo que la cubre al cargar/al volver de cerrar sesión. */
.reveal-circulo {
  position: relative;
  z-index: 10001;
  clip-path: circle(0px at 50% 50%);
  transition: clip-path .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .login-reveal-verde, .reveal-circulo { transition: none; }
}

.auth-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 1rem;
}
.auth-screen .auth-card {
  margin: 2rem auto;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: 0 calc(var(--card-edge-h) + 2px) 0 0 var(--card-edge-color);
}
.auth-tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: .6rem;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: .5rem; }
.auth-form label { font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.auth-form input, .auth-form select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .7rem;
  color: var(--ink);
  font: inherit;
}
.auth-form input:focus-visible, .auth-form select:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.auth-form button { margin-top: .9rem; }
.auth-error {
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: var(--bad-dim);
  color: var(--bad);
  border-radius: 12px;
  font-size: .85rem;
}
.auth-error.auth-ok { background: var(--accent-dim); color: var(--accent); }

/* Acceso flotante a Gastos personales / Mis empresas — SOLO celular (≤600px,
   ver media query), porque en PC esa misma info ya está en la columna
   izquierda. display:none acá es la base segura: aunque JS olvide ocultarlo,
   en pantallas grandes nunca se muestra (la media query es la única que lo
   habilita, y solo cuando no tiene el atributo hidden). */
.btn-gastos-flotante {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.3rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  cursor: pointer;
}
.gastos-flotante-panel {
  display: none;
  flex-direction: column;
  position: fixed;
  right: 12px;
  left: 12px;
  /* Queda justo encima de la fila de íconos de supervivencia (bottom 12px + 46px + 18px de aire). */
  bottom: 76px;
  top: 72px;
  z-index: 46;
  /* Mismo lenguaje 3D que las tarjetas del juego, pero en neutro: el color lo ponen las secciones de adentro
     (verde, azul, ámbar y dorado), no el marco. Fondo de página para que esas tarjetas resalten. */
  background: var(--bg);
  border: 3px solid color-mix(in srgb, var(--ink) 40%, var(--border));
  border-radius: 18px;
  box-shadow: 0 6px 0 0 var(--border), 0 18px 36px rgba(0,0,0,.3);
  overflow: hidden;
}
.gastos-flotante-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; flex-shrink: 0;
  background: var(--panel-2);
  border-bottom: 2px solid var(--border);
  font-size: 1.05rem;
}
.gastos-flotante-cerrar {
  background: var(--panel); border: 2px solid var(--border); border-radius: 999px;
  box-shadow: 0 2px 0 0 var(--border);
  width: 1.9rem; height: 1.9rem; cursor: pointer; font-size: .9rem; color: var(--ink);
  transition: box-shadow .1s ease, transform .1s ease;
}
.gastos-flotante-cerrar:active { box-shadow: none; transform: translateY(2px); }
.gastos-flotante-body { padding: .8rem .9rem; overflow-y: auto; min-height: 0; }

.job-favorito-flotante {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(320px, 92vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  padding: .75rem .9rem;
  z-index: 40;
}
.job-favorito-flotante-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .4rem;
}
.job-favorito-flotante-nombre { font-weight: 600; font-size: .92rem; }
.job-favorito-flotante-monto { font-weight: 400; color: var(--accent); font-family: var(--font-mono); font-size: .85rem; }
.job-favorito-flotante .btn-action,
.job-favorito-flotante .btn-outline-action { width: 100%; }

/* Hambre/sed/salud flotantes — SOLO celular (en PC viven en el cuadrito
   "Supervivencia" de la columna derecha, ver .sidebar-supervivencia). El
   color de cada círculo lo pinta SIM.renderSupervivenciaFlotante() según el % actual. */
.supervivencia-flotante {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(calc(-50% + 172px));
  gap: 8px;
  z-index: 41;
}
.supervivencia-flotante-icono {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  background: var(--accent);
  color: #fff;
  transition: background-color .25s linear;
}

/* En celular los 4 íconos (hambre/sed/salud/💰 "Próximamente") van en UNA sola fila
   a lo ancho de la pantalla, repartidos en 4 columnas iguales: cada uno queda centrado
   en su columna, así el espacio sobra parejo a ambos lados. Este bloque va DESPUÉS de las
   reglas base de arriba a propósito: misma especificidad, así que si quedara antes perdería
   el empate por orden de aparición y nunca se aplicaría. */
@media (max-width: 600px) {
  .supervivencia-flotante {
    left: 12px; right: 12px; bottom: 12px; transform: none;
    display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; gap: 0;
  }
  .supervivencia-flotante-icono,
  .supervivencia-flotante .btn-gastos-flotante {
    width: 46px; height: 46px; font-size: 1.1rem; position: static; margin: 0;
  }
  .supervivencia-flotante .btn-gastos-flotante { background: var(--gold); }
  /* Espacio al final del contenido para que la fila de íconos (46px + 12px de borde) no tape lo último al bajar del todo. */
  .layout { padding-bottom: 5.5rem; }
}

/* Vehículos de la empresa: una tarjeta por vehículo, con su imagen arriba. La imagen sale de
   img/vehiculos/<código>.png; si no existe, se ve un ícono de respaldo. */
.vehiculo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem;
  margin-top: .6rem;
}
.vehiculo-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 0 0 var(--border);
  overflow: hidden;
}
.vehiculo-card-nuevo { border-style: dashed; box-shadow: none; }
.vehiculo-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--panel-2), var(--bg));
  border-bottom: 2px solid var(--border);
}
.vehiculo-card-emoji { font-size: 2.8rem; line-height: 1; }
.vehiculo-card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .5rem;
}
.vehiculo-card-cuerpo { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: .6rem .7rem .7rem; }
.vehiculo-card-titulo { margin: 0; font-size: .95rem; }
.vehiculo-card-dato { margin: 0; font-size: .8rem; opacity: .8; }
.vehiculo-card-valor { font-family: var(--font-mono); color: var(--accent); opacity: 1; font-weight: 600; }
.vehiculo-card .btn-action,
.vehiculo-card .btn-outline-action { width: 100%; margin-top: auto; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: 90vw;
  background: var(--bad);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  font-size: .88rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  z-index: 50;
}