/* ============================================================================
   4Letras · Sistema de diseño
   Idisoft SAS
   ----------------------------------------------------------------------------
   Paleta construida sobre el ciclo productivo de los cinco elementos del
   feng shui, en el orden en que se generan entre sí:

     AGUA (negro azulado)  ->  nutre a
     MADERA (verde jade)   ->  alimenta a
     FUEGO (rojo bermellón)->  produce
     TIERRA (ocre)         ->  genera
     METAL (oro)           ->  condensa de vuelta al agua

   AGUA es el fondo: en feng shui el agua representa el flujo del dinero, por
   eso sostiene toda la página. ORO y PÚRPURA (el color del rincón de la
   riqueza, Xun) son los acentos de valor. JADE marca el crecimiento y los
   datos positivos. BERMELLÓN activa la suerte y se reserva para lo urgente,
   nunca para grandes superficies: en feng shui el exceso de fuego quema la
   fortuna en lugar de atraerla.
   ========================================================================== */

:root {
  /* --- Los cinco elementos --- */
  --agua-900: #05070f;
  --agua-800: #0a0f1e;
  --agua-700: #111834;
  --agua-600: #1a2246;

  --madera-500: #0e9f6e;
  --madera-400: #2dd4a0;
  --madera-100: #a7f3d8;

  --fuego-600: #c1121f;
  --fuego-500: #e63946;
  --fuego-300: #ff8a94;

  --tierra-500: #b4762c;
  --tierra-300: #e0a75c;

  --metal-600: #b8860b;
  --metal-500: #d4af37;
  --metal-400: #f2c94c;
  --metal-200: #ffe9a8;

  --riqueza-700: #3b0f63;
  --riqueza-600: #5b21b6;
  --riqueza-400: #a855f7;

  /* --- Roles semánticos --- */
  --fondo: var(--agua-900);
  --superficie: rgba(17, 24, 52, 0.72);
  --superficie-alta: rgba(26, 34, 70, 0.88);
  --borde: rgba(212, 175, 55, 0.18);
  --borde-fuerte: rgba(212, 175, 55, 0.42);

  --texto: #eef1f8;
  --texto-suave: #a8b0c8;
  --texto-tenue: #737d99;

  --acento: var(--metal-500);
  --acento-claro: var(--metal-400);
  --exito: var(--madera-400);
  --alerta: var(--fuego-500);

  /* --- Gradientes de prosperidad --- */
  --grad-oro: linear-gradient(135deg, var(--metal-400) 0%, var(--metal-500) 45%, var(--tierra-500) 100%);
  --grad-riqueza: linear-gradient(135deg, var(--riqueza-600) 0%, var(--riqueza-700) 100%);
  --grad-jade: linear-gradient(135deg, var(--madera-400) 0%, var(--madera-500) 100%);

  /* --- Métrica --- */
  --radio: 14px;
  --radio-lg: 22px;
  --sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  --sombra-oro: 0 0 0 1px rgba(212, 175, 55, 0.25), 0 18px 45px -20px rgba(212, 175, 55, 0.55);
  --contenedor: 1180px;

  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-num: "SF Mono", "Cascadia Mono", "Consolas", "Roboto Mono", ui-monospace, monospace;

  color-scheme: dark;
}

/* ============================ Base ====================================== */

html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  color: var(--texto);
  background-color: var(--fondo);
  /* El agua en movimiento: dos focos de luz que sugieren flujo, no estancamiento. */
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(91, 33, 182, 0.38), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(212, 175, 55, 0.16), transparent 58%),
    radial-gradient(800px 700px at 50% 108%, rgba(14, 159, 110, 0.14), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a {
  color: var(--acento-claro);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover { color: var(--metal-200); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--borde);
  opacity: 1;
}

::selection {
  background: var(--metal-500);
  color: var(--agua-900);
}

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Texto con acabado de oro batido. */
.texto-oro {
  background: var(--grad-oro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.texto-jade { color: var(--madera-400); }
.texto-fuego { color: var(--fuego-300); }
.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }

.num { font-family: var(--fuente-num); font-variant-numeric: tabular-nums; }

/* ============================ Navbar ==================================== */

.fs-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.fs-nav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  color: var(--texto) !important;
  white-space: nowrap;
  word-break: normal;
}

.fs-nav .navbar-brand:hover { text-decoration: none; }

/* La moneda: metal sobre agua, el símbolo clásico de riqueza acumulada. */
.moneda {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-oro);
  color: var(--agua-900);
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 0 0 1px rgba(255, 233, 168, 0.5), 0 8px 22px -10px rgba(212, 175, 55, 0.9);
}

.fs-nav .nav-link {
  color: var(--texto-suave) !important;
  font-weight: 500;
  padding-inline: 0.85rem;
  transition: color 0.18s ease;
}

.fs-nav .nav-link:hover,
.fs-nav .nav-link:focus { color: var(--metal-400) !important; }

.fs-nav .navbar-toggler {
  border-color: var(--borde-fuerte);
  color: var(--metal-400);
}

.fs-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d4af37' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================ Botones =================================== */

.btn-oro,
.btn-primary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  background: var(--grad-oro);
  border: 0;
  color: var(--agua-900) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radio);
  padding: 0.7rem 1.5rem;
  box-shadow: 0 12px 28px -14px rgba(212, 175, 55, 0.9);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn-oro:hover,
.btn-primary:hover,
.btn-oro:focus,
.btn-primary:focus {
  color: var(--agua-900) !important;
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -14px rgba(212, 175, 55, 1);
}

.btn-oro:active,
.btn-primary:active { transform: translateY(0); }

.btn-jade {
  background: var(--grad-jade);
  border: 0;
  color: #04281c;
  font-weight: 700;
  border-radius: var(--radio);
  padding: 0.7rem 1.5rem;
}

.btn-jade:hover { color: #04281c; filter: brightness(1.08); }

.btn-contorno {
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  color: var(--metal-200);
  font-weight: 600;
  border-radius: var(--radio);
  padding: 0.7rem 1.5rem;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-contorno:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--metal-400);
  color: var(--metal-200);
}

.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.35);
}

/* ============================ Superficies =============================== */

/* Sin backdrop-filter a propósito: los paneles van sobre un fondo opaco, así que
   el desenfoque no se distingue, pero sí obliga al navegador a promover cada
   panel a su propia capa de composición — y esta página tiene decenas. El
   desenfoque se reserva para la barra fija y la tarjeta de acceso, los dos
   sitios donde de verdad hay contenido moviéndose por detrás. */
.panel {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.6rem;
  box-shadow: var(--sombra);
}

.panel-oro { border-color: var(--borde-fuerte); box-shadow: var(--sombra-oro); }

/* Hilo de oro superior: remata el panel sin recargarlo. */
.panel-hilo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--metal-500), transparent);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  background: rgba(212, 175, 55, 0.08);
  color: var(--metal-200);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.etiqueta-jade {
  border-color: rgba(45, 212, 160, 0.4);
  background: rgba(45, 212, 160, 0.1);
  color: var(--madera-100);
}

.etiqueta-fuego {
  border-color: rgba(230, 57, 70, 0.42);
  background: rgba(230, 57, 70, 0.1);
  color: var(--fuego-300);
}

.titulo-seccion {
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  margin: 0.65rem 0 0.5rem;
}

.bajada {
  color: var(--texto-suave);
  max-width: 62ch;
  line-height: 1.65;
  margin: 0;
}

section { scroll-margin-top: 84px; }

/* ============================ Hero ====================================== */

.hero {
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.hero h1 {
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  margin: 1rem 0;
}

.hero-bajada {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: var(--texto-suave);
  max-width: 60ch;
  line-height: 1.7;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Las cuatro balotas del resultado: metal encendido sobre agua. */
.bolas { display: flex; gap: 0.6rem; }

.bola {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-family: var(--fuente-num);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--agua-900);
  background: var(--grad-oro);
  box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(212, 175, 55, 0.95);
}

.bola-jade { background: var(--grad-jade); color: #04281c; }
.bola-sm { width: 38px; height: 38px; font-size: 1rem; }

/* ============================ Cifras ==================================== */

.rejilla-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.cifra {
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem 1.35rem;
}

.cifra-valor {
  display: block;
  font-family: var(--fuente-num);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  background: var(--grad-oro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cifra-rotulo {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================ Barras de frecuencia ====================== */

.rejilla {
  display: grid;
  gap: 1.25rem;
}

.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.barras { display: grid; gap: 0.7rem; margin-top: 1.25rem; }

.barra {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.85rem;
}

.barra-clave {
  font-family: var(--fuente-num);
  font-weight: 700;
  color: var(--metal-200);
  font-size: 0.95rem;
}

.barra-clave-txt {
  font-family: var(--fuente);
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.barra-pista {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.barra-valor {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-oro);
  /* La riqueza crece: la barra se despliega al cargar. */
  animation: crecer 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.barra-valor-jade { background: var(--grad-jade); }
.barra-valor-riqueza { background: linear-gradient(135deg, var(--riqueza-400), var(--riqueza-600)); }

.barra-cifra {
  font-family: var(--fuente-num);
  font-size: 0.85rem;
  color: var(--texto-suave);
  min-width: 3.6rem;
  text-align: right;
}

@keyframes crecer {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

.barra-ancha { grid-template-columns: 6.5rem 1fr auto; }

/* Medidor par / impar: yin y yang del número. */
.medidor {
  display: flex;
  height: 42px;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  margin-top: 1.25rem;
}

.medidor span {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--agua-900);
}

.medidor .yin { background: var(--grad-jade); }
.medidor .yang { background: var(--grad-oro); }

/* ============================ Ciclo de los elementos ==================== */

.ciclo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.elemento {
  position: relative;
  border-radius: var(--radio);
  padding: 1.2rem 1.1rem;
  border: 1px solid var(--borde);
  background: var(--superficie-alta);
  overflow: hidden;
}

.elemento::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--tono);
}

.elemento-punto {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tono);
  box-shadow: 0 0 22px -4px var(--tono);
  margin-bottom: 0.8rem;
}

.elemento h4 {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.elemento p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--texto-suave);
  line-height: 1.55;
}

.el-agua   { --tono: #2a4a8a; }
.el-madera { --tono: var(--madera-500); }
.el-fuego  { --tono: var(--fuego-500); }
.el-tierra { --tono: var(--tierra-500); }
.el-metal  { --tono: var(--metal-500); }

/* ============================ Tabla ===================================== */

.tabla-envoltura { overflow-x: auto; margin-top: 1.25rem; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
}

.tabla th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--texto-suave);
  white-space: nowrap;
}

.tabla tbody tr:hover td { background: rgba(212, 175, 55, 0.05); color: var(--texto); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .destacado { color: var(--metal-200); font-weight: 700; font-family: var(--fuente-num); }

/* ============================ Aviso ===================================== */

.aviso {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border-radius: var(--radio);
  border: 1px solid rgba(230, 57, 70, 0.3);
  background: rgba(230, 57, 70, 0.07);
  padding: 1.1rem 1.25rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.6;
}

.aviso strong { color: var(--fuego-300); }

/* ============================ Pie ======================================= */

.pie {
  margin-top: 4rem;
  border-top: 1px solid var(--borde);
  background: rgba(5, 7, 15, 0.6);
  color: var(--texto-tenue);
  font-size: 0.88rem;
}

.pie a { color: var(--texto-suave); }
.pie a:hover { color: var(--metal-400); }

/* ============================================================================
   IDENTITY
   Las páginas de cuenta (login, registro, perfil, recuperación) heredan el
   mismo sistema: el formulario es una "caja fuerte" de metal sobre agua.
   ========================================================================== */

.auth-envoltura {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 4rem) 0;
  min-height: calc(100vh - 240px);
}

.auth-caja {
  width: 100%;
  max-width: 560px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--sombra-oro);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.auth-caja::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-oro);
}

.auth-ancha { max-width: 820px; }

.auth-marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Los títulos que emite el scaffolding de Identity, alineados al sistema. */
.auth-caja h1,
.auth-caja h2,
.auth-caja h3 {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  margin: 0 0 0.35rem;
}

.auth-caja h2 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto-suave);
  letter-spacing: 0;
}

.auth-caja hr { margin: 1.25rem 0 1.5rem; }

.auth-pie {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
  font-size: 0.9rem;
  color: var(--texto-tenue);
}

/* --- Controles de formulario sobre fondo agua --- */
.form-control,
.form-select {
  background-color: rgba(5, 7, 15, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--radio);
  color: var(--texto);
  padding: 1rem 0.95rem;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.form-control:hover { border-color: rgba(212, 175, 55, 0.4); }

.form-control:focus,
.form-select:focus {
  background-color: rgba(5, 7, 15, 0.75);
  border-color: var(--metal-500);
  color: var(--texto);
}

.form-control::placeholder { color: transparent; }

.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--texto-tenue);
}

.form-floating > label {
  color: var(--texto-tenue);
  padding: 1rem 0.95rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--metal-400);
  opacity: 1;
  transform: scale(0.82) translateY(-0.6rem) translateX(0.15rem);
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.5rem;
  padding-bottom: 0.45rem;
}

/* Autocompletado de Chrome: sin el parche pinta el campo de blanco. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 1000px #0b1020 inset;
  caret-color: var(--texto);
}

.form-check-input {
  background-color: rgba(5, 7, 15, 0.6);
  border-color: var(--borde-fuerte);
}

.form-check-input:checked {
  background-color: var(--metal-500);
  border-color: var(--metal-500);
}

.checkbox label,
.form-check-label { color: var(--texto-suave); }

/* Validación: el rojo fuego, en dosis pequeña. */
.text-danger,
.field-validation-error,
.validation-summary-errors ul {
  color: var(--fuego-300) !important;
  font-size: 0.86rem;
}

.validation-summary-errors {
  border: 1px solid rgba(230, 57, 70, 0.35);
  background: rgba(230, 57, 70, 0.08);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem 0.9rem 0.6rem;
  margin-bottom: 1.25rem;
}

.validation-summary-errors ul { margin: 0; }

/* Mensaje de estado del área Manage. */
.alert {
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
}

.alert-success {
  border-color: rgba(45, 212, 160, 0.35);
  background: rgba(45, 212, 160, 0.08);
  color: var(--madera-100);
}

.alert-danger {
  border-color: rgba(230, 57, 70, 0.35);
  background: rgba(230, 57, 70, 0.08);
  color: var(--fuego-300);
}

/* Menú lateral de "Administrar cuenta". */
.nav-pills .nav-link {
  color: var(--texto-suave);
  border-radius: var(--radio);
  font-weight: 500;
}

.nav-pills .nav-link:hover { background: rgba(212, 175, 55, 0.08); color: var(--metal-200); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--grad-oro);
  color: var(--agua-900);
  font-weight: 700;
}

/* ============================ Accesibilidad ============================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .barra-valor { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

@media (max-width: 575.98px) {
  .bola { width: 46px; height: 46px; font-size: 1.2rem; }
  .barra { grid-template-columns: 2rem 1fr auto; gap: 0.6rem; }
  .barra-ancha { grid-template-columns: 5rem 1fr auto; }
}

/* El scaffolding de Identity envuelve cada página de "Administrar cuenta" en
   .row > .col-md-6. Dentro del panel ya estrecho eso deja los campos a media
   caña, así que se expanden a todo el ancho. Solo afecta a las filas que son
   hijas directas del cuerpo: las rejillas propias (perfil, registro) conservan
   sus columnas. */
.manage-cuerpo > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.manage-cuerpo > h3 {
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}

/* Los códigos de recuperación y la clave del autenticador se leen a mano. */
.manage-cuerpo kbd,
.manage-cuerpo code {
  font-family: var(--fuente-num);
  background: rgba(5, 7, 15, 0.7);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  color: var(--metal-200);
}

/* ============================================================================
   PANELES (administración y usuario)
   Mismo sistema de color: barra lateral de navegación sobre el fondo agua y
   el contenido en paneles de metal. El acento distingue el área: oro para
   administración, jade para el panel de usuario.
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding: 2rem 0 3rem;
}

@media (max-width: 991.98px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

.shell-lateral {
  position: sticky;
  top: 84px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 1.25rem;
}

@media (max-width: 991.98px) {
  .shell-lateral { position: static; }
}

.shell-rotulo {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0 0 0.85rem 0.35rem;
}

.shell-menu { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.25rem; }

.shell-menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radio);
  color: var(--texto-suave);
  font-weight: 500;
  font-size: 0.94rem;
  transition: background 0.16s ease, color 0.16s ease;
}

.shell-menu a:hover { background: rgba(212, 175, 55, 0.08); color: var(--metal-200); text-decoration: none; }

.shell-menu a.activo {
  background: var(--grad-oro);
  color: var(--agua-900);
  font-weight: 700;
}

.shell-usuario .shell-menu a.activo { background: var(--grad-jade); color: #04281c; }
.shell-usuario .shell-menu a:hover { background: rgba(45, 212, 160, 0.1); color: var(--madera-100); }

.shell-menu .glifo {
  width: 1.4rem;
  text-align: center;
  opacity: 0.85;
  font-size: 0.95rem;
}

.shell-pie {
  border-top: 1px solid var(--borde);
  padding-top: 1rem;
  font-size: 0.82rem;
  color: var(--texto-tenue);
  line-height: 1.5;
}

.shell-cuerpo { min-width: 0; }

.shell-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.shell-encabezado h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0.4rem 0 0.35rem;
}

/* --- Píldoras de estado --- */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pildora-activo { background: rgba(45, 212, 160, 0.12); color: var(--madera-100); border-color: rgba(45, 212, 160, 0.35); }
.pildora-inactivo { background: rgba(230, 57, 70, 0.12); color: var(--fuego-300); border-color: rgba(230, 57, 70, 0.35); }
.pildora-pendiente { background: rgba(212, 175, 55, 0.12); color: var(--metal-200); border-color: var(--borde-fuerte); }
.pildora-rol { background: rgba(168, 85, 247, 0.14); color: #e9d5ff; border-color: rgba(168, 85, 247, 0.35); }
.pildora-permiso { background: rgba(255, 255, 255, 0.05); color: var(--texto-suave); border-color: var(--borde); }

/* --- Casillas de permisos y roles --- */
.casillas { display: grid; gap: 0.6rem; }

.casilla {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(5, 7, 15, 0.35);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.casilla:hover { border-color: var(--borde-fuerte); background: rgba(212, 175, 55, 0.05); }
.casilla input { margin-top: 0.2rem; flex: 0 0 auto; }
.casilla-nombre { display: block; font-weight: 600; color: var(--texto); font-size: 0.94rem; }
.casilla-ayuda { display: block; font-size: 0.83rem; color: var(--texto-tenue); line-height: 1.45; }

/* --- Captura de dígitos del resultado --- */
.digitos { display: flex; gap: 0.6rem; }

/* Los cuatro dígitos se mantienen en una sola fila aunque la columna sea
   estrecha: partirlos en dos líneas rompe la lectura del número. */
.digito-campo { flex: 1 1 0; min-width: 56px; max-width: 92px; }

.digito-campo input {
  text-align: center;
  font-family: var(--fuente-num);
  font-size: 1.8rem;
  font-weight: 800;
  padding: 0.85rem 0.4rem;
  letter-spacing: 0.02em;
}

.digito-campo label {
  display: block;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 0.4rem;
}

/* --- Zona de trabajo pendiente --- */
.pendiente {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-lg);
  background: rgba(212, 175, 55, 0.04);
  padding: 1.5rem;
}

.pendiente h3 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--metal-200); }

/* --- Acciones en tabla --- */
.acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.btn-mini {
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid var(--borde-fuerte);
  background: transparent;
  color: var(--metal-200);
  transition: background 0.16s ease, color 0.16s ease;
}

.btn-mini:hover { background: rgba(212, 175, 55, 0.12); color: var(--metal-200); }

.btn-mini-jade { border-color: rgba(45, 212, 160, 0.4); color: var(--madera-100); }
.btn-mini-jade:hover { background: rgba(45, 212, 160, 0.12); color: var(--madera-100); }

.btn-mini-fuego { border-color: rgba(230, 57, 70, 0.4); color: var(--fuego-300); }
.btn-mini-fuego:hover { background: rgba(230, 57, 70, 0.12); color: var(--fuego-300); }

/* --- Barra de filtros --- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

.filtros .form-control,
.filtros .form-select { padding: 0.6rem 0.8rem; min-width: 180px; }

.filtros label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 0.35rem;
}

.vacio {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--texto-tenue);
}

.vacio strong { display: block; color: var(--texto-suave); font-size: 1.05rem; margin-bottom: 0.4rem; }

/* --- El pronóstico como movimiento -----------------------------------------
   Se lee como una frase: esta columna, desde este dígito, se mueve tanto, y
   cae en uno de estos dos. El número nunca es el protagonista; el movimiento sí. */

.cambios { display: grid; gap: 0.6rem; margin-top: 1rem; }

.cambio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(5, 7, 15, 0.35);
}

.cambio-columna {
  flex: 1 1 7rem;
  font-size: 0.86rem;
  color: var(--texto-suave);
  letter-spacing: 0.02em;
}

.cambio-flecha { color: var(--texto-tenue); font-size: 1.05rem; }

.cambio-mov {
  min-width: 2.6rem;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--metal-200);
}

.cambio-destino { display: flex; gap: 0.35rem; }

@media (max-width: 420px) {
  .cambio-columna { flex-basis: 100%; }
}


/* --- La evidencia del movimiento -------------------------------------------
   Todo lo de abajo existe para una sola cosa: que la cuenta con la que se
   decide quede a la vista. Un numero sin su cuenta no se puede discutir. */

.cambio-valor {
  font-size: 0.9rem;
  color: var(--texto-suave);
  font-weight: 600;
}

.cambio-valor-jade { color: var(--madera-100); }

.cambio-prueba {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  padding-top: 0.15rem;
}

/* La tira: los movimientos de la ventana en orden, el ultimo destacado. */
.tira {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.85rem;
}

.tira-paso {
  min-width: 2.2rem;
  text-align: center;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--borde);
  border-radius: 0.4rem;
  background: rgba(5, 7, 15, 0.35);
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.tira-paso-vacio { color: var(--texto-tenue); border-style: dashed; }

.tira-paso-actual {
  border-color: var(--borde-fuerte);
  color: var(--metal-200);
  font-weight: 700;
}

.tabla-compacta th,
.tabla-compacta td { padding: 0.45rem 0.6rem; font-size: 0.85rem; }

.fila-lider { background: rgba(45, 212, 160, 0.06); }
.fila-semilla { opacity: 0.55; }

/* Los numeros que salen del movimiento. Van al final a proposito: son la
   consecuencia, no el punto de partida. */
.grupos-numeros { display: grid; gap: 1rem; margin-top: 1.25rem; }

.grupo-numeros-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--texto-tenue);
}

.grupo-numeros-cabeza .shell-rotulo { margin: 0; }

.numeros { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }

.numero {
  font-family: var(--fuente-num);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.45rem;
  border: 1px solid var(--borde);
  background: rgba(5, 7, 15, 0.35);
  color: var(--texto-suave);
}

.numero-jade {
  font-size: 1.15rem;
  padding: 0.4rem 0.8rem;
  background: var(--grad-jade);
  border-color: transparent;
  color: #04281c;
}


/* --- La charla con el asistente --------------------------------------------
   Dos voces que se distinguen por alineacion y borde, no por color de fondo:
   sobre el agua, los bloques llenos pesan demasiado. */

.charla { display: grid; gap: 0.9rem; }

.charla-turno {
  max-width: 42rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(5, 7, 15, 0.35);
}

.charla-mio {
  margin-left: auto;
  border-color: var(--borde-fuerte);
}

.charla-suyo { margin-right: auto; }

.charla-quien {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 0.3rem;
}

.charla-mio .charla-quien { color: var(--metal-200); }
.charla-suyo .charla-quien { color: var(--madera-100); }

.charla-texto {
  margin: 0;
  color: var(--texto-suave);
  line-height: 1.55;
  /* El modelo responde en parrafos; hay que respetar sus saltos de linea. */
  white-space: pre-wrap;
}