/*
  Estilo "mosaicos" (aprobado 2026-09-27): la facilidad de Windows 10 con la paleta de Genesis.
  Menú lateral oscuro con barra de color en la sección activa, mosaicos de color para los números,
  esquinas rectas, sin sombras y tipografía Segoe UI (Open Sans donde Segoe no existe).
  Se carga después de app.css y solo sobrescribe: el fondo cálido y los colores de marca se quedan.
*/
:root {
  --rail: #1c2440;
  --rail-hover: #2a3458;
  --rail-activo: rgba(255, 255, 255, .08);
  --rail-texto: #ffffff;
  --rail-texto-2: #c4c8d6;
  /* Mosaicos: colores fijos (con texto blanco) en modo claro y oscuro */
  --mosaico-1: #c0552d;
  --mosaico-2: #243f8f;
  --mosaico-3: #7a5ba6;
  --mosaico-4: #2e7d5b;
  --mosaico-5: #4a5068;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rail: #0e1118; --rail-hover: #1d2230; }
}
:root[data-theme="dark"] { --rail: #0e1118; --rail-hover: #1d2230; }

/* ── Tipografía: títulos ligeros y grandes, como Windows ── */
.encabezado h1 { font-weight: 300; letter-spacing: -0.01em; }
h2, h3 { font-weight: 600; letter-spacing: 0; }

/* ── Superficies planas con borde fino ── */
.metrica, .tarjeta, .item, .plan, .principio, .opcion, .pasos li, .conexion, .tipo-cuenta, .siguiente-paso {
  border: 1px solid var(--linea); box-shadow: none;
}
.pasos li::before { border-radius: 2px; }
.principio__num { border-radius: 2px; }
.barra, .barra > i { border-radius: 0; }

/* ── Menú lateral oscuro ── */
.lateral { background: var(--rail); border-right: 0; padding: var(--e-4) 0; gap: var(--e-4); }
.marca { color: var(--rail-texto); padding: 0 var(--e-4); }
.marca__nombre span { color: var(--rail-texto-2); }
.nav { gap: 0; }
.nav a {
  min-height: 48px; padding: 0 var(--e-4); border-radius: 0; gap: var(--e-4);
  color: var(--rail-texto); border-left: 4px solid transparent; font-size: var(--t-s);
}
.nav a:hover { background: var(--rail-hover); color: var(--rail-texto); }
.nav a[aria-current="page"] {
  background: var(--rail-activo); color: var(--rail-texto); box-shadow: none;
  border-left-color: var(--terracota); font-weight: 600;
}
.nav a[aria-current="page"] svg { color: var(--rail-texto); }
.lateral__pie { padding: var(--e-4) var(--e-4) 0; border-top: 1px solid rgba(255, 255, 255, .12); color: var(--rail-texto-2); }
.lateral .enlace-pie { color: var(--rail-texto); font-weight: 500; }
.lateral .enlace-pie:hover, .lateral .enlace-pie[aria-current="page"] { color: #ffb899; }
.lateral .cliente-chip { background: var(--rail-hover); color: var(--rail-texto); border-radius: 2px; }
.lateral .cliente-chip--selector select { color: var(--rail-texto); }
.lateral .cliente-chip--selector option { color: #1c2440; }

/* ── Botones, chips y campos rectos ── */
.boton { border-radius: 2px; border: 2px solid transparent; min-height: 44px; }
.boton:hover { filter: none; border-color: rgba(0, 0, 0, .35); }
.boton--secundario:hover { border-color: var(--tinta-3); }
.chip span, .cliente-chip { border-radius: 2px; }
.formulario input, .formulario select, .formulario textarea { border-radius: 2px; }

/* ── Mosaicos: el dato principal y las métricas ── */
.plano { background: var(--mosaico-1); color: #fff; border-radius: 0; }
.plano::after { display: none; }
.plano, .plano * { color: #fff; }
.plano *, .metrica * { text-decoration-color: rgba(255, 255, 255, .7) !important; border-color: rgba(255, 255, 255, .7) !important; }
.plano__valor { font-weight: 300; }
.plano .boton { background: #fff; color: #1c2440; }
.metricas { gap: 6px; }
.metrica { border: 0; color: #fff; min-height: 128px; display: flex; flex-direction: column; }
.metrica, .metrica * { color: #fff !important; }
.metrica:nth-child(5n + 1) { background: var(--mosaico-2); }
.metrica:nth-child(5n + 2) { background: var(--mosaico-3); }
.metrica:nth-child(5n + 3) { background: var(--mosaico-4); }
.metrica:nth-child(5n + 4) { background: var(--mosaico-5); }
.metrica:nth-child(5n + 5) { background: var(--mosaico-1); }
.metrica__etiqueta { font-weight: 600; opacity: .95; }
.metrica__valor { font-weight: 300; font-size: 2.25rem; margin-top: var(--e-3); }
.metrica__nota, .delta { opacity: .9; }

/* ── Celular: barra superior y barra inferior oscuras ── */
@media (max-width: 860px) {
  .lateral {
    background: var(--rail); border-top: 0; padding: 0 0 env(safe-area-inset-bottom);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav a { border-left: 0; border-top: 3px solid transparent; min-height: 60px; padding: var(--e-2) 0; gap: 3px; font-size: 11px; }
  .nav a[aria-current="page"] { border-top-color: var(--terracota); background: var(--rail-activo); }
  .barra-movil { background: var(--rail); border-bottom: 0; }
  .barra-movil a { color: var(--rail-texto); }
  .barra-movil .cliente-chip { background: var(--rail-hover); color: var(--rail-texto); }
  .barra-movil .cliente-chip--selector select { color: var(--rail-texto); }
  .barra-movil .cliente-chip--selector option { color: #1c2440; }
  .metrica { min-height: 112px; }
  .metrica__valor { font-size: 1.75rem; }
}
.plano .termino:hover { color: #fff; opacity: .85; }