/* ==========================================================
   Datsool — tema oscuro "Control Room" (prueba, oct 2026)
   Basado en el kit Atlas + Control Room: carbón casi negro,
   acento lima, líneas finas, esquinas rectas y metadatos en mono.
   Se carga DESPUÉS de styles.css y solo sobrescribe.
   Para volver al diseño anterior basta con quitar el <link>
   a este archivo (y regresar las fuentes Bricolage/Instrument).

   Señales:
   - Lima  = acción, fortalezas, avance.
   - Ámbar = prioridades y alertas (antes morado).
   - Papel = producto para empresas (antes morado).
   ========================================================== */
:root {
  --negro: #10212B;
  --carbon: #142833;
  --carbon-2: #1A303C;
  --linea: #2C4451;
  --texto: #F2F0E9;
  --gris: #9FB0B8;

  --lima: #55B8A5;
  --lima-suave: #8FD3C5;
  --ambar: #D99A78;
  --papel: #F2F0E9;
  --tinta: #172A35;

  /* Los nombres viejos apuntan a las señales nuevas */
  --azul: var(--lima);
  --azul-claro: var(--lima);
  --verde: var(--lima);
  --verde-claro: var(--lima-suave);
  --morado: var(--papel);
  --morado-claro: var(--ambar);

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 4px;
}
body { background: var(--negro); }
a:hover { color: var(--lima); }
::selection { background: var(--lima); color: var(--tinta); }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.045em; }
h1 { letter-spacing: -0.055em; line-height: 1; }
h1 em, h2 em { font-style: normal; color: var(--lima); }

/* Metadatos: mono, mayúsculas, espaciado amplio (los "eyebrows" del kit) */
.marca-producto, .siguiente-etiqueta, .lectura-cat, .journey-estado, .nivel-num,
.nivel-detalle dt, .etiqueta-foco, .etiqueta-inicio, .etiqueta-pro, .cc-contador,
.herramienta-tipo, .herramienta-reco, .chip-etapa, .pie h3, .cc-tabla th,
.portal-kpis span, .kpis-admin span, .hero-datos li, .cinta-titulo, .areas-cc li,
.cc-chip, .filtro-chips a, .skills span, .trayectoria li, .subnav a, .cc-registro button {
  font-family: var(--mono) !important;
  font-weight: 400 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.marca-producto { font-size: .72rem !important; letter-spacing: .17em; color: var(--gris); }
.marca-producto .barras { height: 12px; gap: 2px; }
.marca-producto .barras i { width: 3px; background: var(--lima); }
.marca-producto.marca-verde, .cabecera-pagina .marca-producto.marca-verde { color: var(--gris); }
.hero-datos li, .areas-cc li, .cc-chip, .filtro-chips a, .skills span, .trayectoria li { font-size: .7rem !important; }
.subnav a, .cc-registro button { font-size: .72rem !important; }
.portal-kpis span, .kpis-admin span, .cc-tabla th, .pie h3 { font-size: .68rem !important; color: var(--gris); }
.cc-tabla th { color: var(--gris); }
.siguiente-etiqueta, .lectura-cat, .journey-estado, .nivel-num, .nivel-detalle dt { font-size: .68rem !important; }

/* ---------- Encabezado ---------- */
.encabezado { background: rgba(16,33,43,.94); border-bottom-color: #243C49; backdrop-filter: blur(16px); }
.logo { font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: 1rem; }
/* Barras del logo en lima (azul → lima con el mismo archivo) */
.logo img { filter: hue-rotate(-128deg) saturate(1.5) brightness(1.15); }
.nav a { font-size: .85rem; color: #C3CED3; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--lima); }
.menu-btn { border-radius: 2px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
@media (max-width: 880px) { .nav { background: var(--negro); } }

/* ---------- Botones: rectos, lima sólida o borde fino ---------- */
.btn { border-radius: 2px; font: 700 .82rem var(--cuerpo); letter-spacing: .01em; padding: .95rem 1.2rem; gap: 1.4rem; border-width: 1px; }
.btn-verde, .btn-azul, .productos-3 .producto-emp .btn-morado, .btn-morado { background: var(--lima); color: var(--tinta); }
.btn-verde:hover, .btn-azul:hover, .btn-morado:hover, .productos-3 .producto-emp .btn-morado:hover { background: var(--lima-suave); color: var(--tinta); }
.btn-borde { border-color: #3C5664; color: #E6ECEE; }
.btn-borde:hover { background: transparent; border-color: var(--lima); color: var(--lima); }
.btn-plata { background: var(--papel); color: var(--tinta); }
.btn-plata:hover { background: #fff; }
.nav .btn { padding: .65rem 1rem; font-size: .75rem; }
.nav .btn-verde, .nav .btn-verde:hover { color: var(--tinta); }
.btn-texto { color: var(--lima); }
.btn-texto:hover { color: var(--lima-suave); }

/* ---------- Esquinas rectas en tarjetas y paneles ---------- */
.radar-muestra, .producto, .nivel, .foto-fundador, .cc-captura, .portal-tarjeta, .portal-vacio,
.portal-proximo, .cc-cuenta, .portal-kpis div, .kpis-admin div, .journey-etapa, .siguiente-paso,
.herramienta, .lectura, .proveedor, .pasos-red li, .niveles-emp article, .empresas-para,
.cc-pro, .lanzamiento, .cc-perfil-opcion, .cc-opcion, .cuenta-opciones, .aviso,
.campo input, .campo textarea, .campo select, .solicitud-form select, .solicitud-form input,
.areas-cc li, .btn-salir, .cuenta-enlace, .subnav a, .cc-registro, .cc-registro button { border-radius: var(--r); }
.cc-progreso { border-radius: 0; height: 3px; }
.cc-progreso span { background: var(--lima); }

/* Sin sombras SaaS: capas y líneas */
.producto-pro, .productos-3 .producto, .cuenta-opciones { box-shadow: none; }

/* ---------- Hero: resplandor verde y retícula ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 55% at 85% 35%, rgba(85,184,165,.10), transparent 70%),
    radial-gradient(35% 45% at 10% 90%, rgba(85,184,165,.06), transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 64px 64px;
}
.hero .contenedor { position: relative; }
.hero .bajada { color: #B7C4CA; }
.hero-datos li { background: transparent; border-color: #3C5664; color: #C3CED3; }
.hero-datos li:first-child { border-color: var(--lima); color: var(--lima); }
.hero-ruta a { color: var(--lima); }

/* Panel del radar como monitor */
.radar-muestra { background: rgba(20,40,51,.85); border-color: #3C5664; }
.radar-muestra::before { content: "SEÑAL · CLIENTECHECK"; position: absolute; top: 1.2rem; left: 1.2rem; font: .62rem var(--mono); letter-spacing: .17em; color: var(--gris); }
.radar-muestra .marcador { color: var(--lima); font-weight: 600; letter-spacing: -.04em; }
.radar-muestra .marcador small, .leyenda { font-family: var(--mono); letter-spacing: .06em; }

/* ---------- Radar ---------- */
.radar .rejilla, .radar .eje { stroke: rgba(85,184,165,.14); }
.radar .area { fill: rgba(85,184,165,.16); stroke: var(--lima); stroke-width: 2; }
.radar .punto { fill: var(--lima); }
.radar .punto-alto { fill: var(--lima); stroke: var(--negro); }
.radar .punto-bajo { fill: var(--ambar); stroke: var(--negro); }
.radar .etiqueta { font-family: var(--mono); font-size: 12px; fill: #C3CED3; letter-spacing: .02em; }
.leyenda .l-fuerte::before { background: var(--lima); }
.leyenda .l-prioridad::before { background: var(--ambar); }

/* ---------- Secciones ---------- */
.seccion-carbon { background: var(--carbon); border-top: 1px solid #1E3441; border-bottom: 1px solid #1E3441; }
.pasos li { border-top: 1px solid var(--linea); }
.pasos li::before { content: "0" counter(paso); font: 400 .75rem var(--mono); letter-spacing: .17em; color: var(--lima); margin-bottom: 1.2rem; }
.pasos li h3, .pasos li strong { font-size: 1.15rem; }
.areas-cc li { background: transparent; border-color: var(--linea); color: #C3CED3; }
.cifras div { color: var(--lima); font-weight: 600; }

/* Tarjetas de precios: paneles de control */
.productos-3 .producto { background: var(--carbon-2); border: 1px solid var(--linea); }
.productos-3 .producto-cc { border-color: var(--lima); background: linear-gradient(180deg, rgba(85,184,165,.07), var(--carbon-2) 40%); }
.productos-3 .producto-pro { background: var(--carbon); border-color: #3C5664; }
.productos-3 .producto-emp { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.productos-3 .producto-emp > p:not(.gancho):not(.marca-producto):not(.precio-producto):not(.nota-precio),
.productos-3 .producto-emp .nota-precio { color: #4C5D65; }
.productos-3 .producto-emp .marca-producto { color: #4C5D65; }
.productos-3 .producto-emp .marca-producto .barras i { background: var(--tinta); }
.productos-3 .producto-emp .gancho { color: var(--tinta); }
.productos-3 .producto-emp .precio-producto, .productos-3 .producto-emp .niveles-precio strong { color: var(--tinta); }
.productos-3 .producto-emp .niveles-precio li { border-bottom-color: #D3D1C9; }
.productos-3 .producto-emp .btn-morado { background: var(--tinta); color: var(--lima); }
.productos-3 .producto-emp .btn-morado:hover { background: #000; color: var(--lima-suave); }
.producto-cc .precio-producto { color: var(--lima); }
.precio-producto { font-weight: 600; letter-spacing: -.04em; }
.etiqueta-inicio, .etiqueta-foco { background: var(--lima); color: var(--tinta); border-radius: 2px; font-size: .62rem !important; }
.etiqueta-pro { background: var(--papel); border-radius: 2px; font-size: .62rem !important; }
.producto-pro .lista-check li::before, .cc-pro .lista-check li::before { color: var(--gris); }
.lanzamiento { border: 1px solid var(--linea); background: var(--carbon); }
.lanzamiento-ofertas strong { color: var(--lima); font-weight: 600; }

/* Empresas: panel oscuro con acento papel */
.empresas { border-top: 1px solid var(--linea); }
.empresas .marca-morado, .cabecera-empresas .marca-morado, .empresas-detalle .marca-morado { color: var(--gris); }
.empresas .marca-morado .barras i, .cabecera-empresas .marca-morado .barras i, .empresas-detalle .marca-morado .barras i { background: var(--papel); }
.empresas-para { border-left: 2px solid var(--papel); }
.empresas-para .lista-check li::before, .empresas-detalle .lista-check li::before { color: var(--papel); }
.empresas-detalle .pasos li::before { color: var(--papel); }
.empresas-detalle .niveles-emp article { border-top: 2px solid var(--papel); }
.empresas-detalle .niveles-emp .nivel-num, .nivel-detalle dt { color: var(--lima); }

/* Cinta de marcas: banda lima como el "ticker" del kit */
.cinta { background: var(--lima); color: var(--tinta); }
.cinta-titulo, .cinta-nota { color: #1D3B3A; }
.cinta-titulo b { color: var(--tinta); }
.cinta-lista li { font-weight: 600; letter-spacing: -.04em; }
.cinta-lista li::after { content: "✳"; background: none; width: auto; height: auto; transform: translateY(-50%); font: 400 1rem/1 var(--mono); right: -.35rem; }

/* Raíces sin foto: fondo verde profundo */
.raices { background-color: #10222C; background-image: linear-gradient(180deg, rgba(16,33,43,.1) 0%, rgba(16,33,43,.6) 45%, rgba(16,33,43,.95) 100%), radial-gradient(60% 70% at 80% 20%, rgba(85,184,165,.12), transparent 70%), url("../img/raices.jpg"); }
.raices .datos div { border-left-width: 2px; }
.raices .datos div:nth-child(1) { border-color: var(--lima); }
.raices .datos div:nth-child(2) { border-color: var(--papel); }

/* ---------- Formularios ---------- */
.campo input, .campo textarea, .campo select { background: var(--carbon); border-width: 1px; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--lima); box-shadow: 0 0 0 3px rgba(85,184,165,.15); }
.aviso-ok { background: rgba(85,184,165,.1); color: var(--lima); }
.aviso-error { background: rgba(217,154,120,.12); color: var(--ambar); }
:focus-visible { outline-color: var(--lima); }

/* ---------- ClienteCheck ---------- */
.cc-perfil-opcion { border-width: 1px; }
.cc-perfil-opcion:hover { border-color: var(--lima); background: rgba(85,184,165,.05); }
.cc-perfil-opcion strong { font-weight: 600; letter-spacing: -.03em; }
.cc-opcion { border-width: 1px; }
.cc-opcion:hover { border-color: #4A6270; }
.cc-opcion input { accent-color: var(--lima); }
.cc-opcion:has(input:checked) { border-color: var(--lima); background: rgba(85,184,165,.08); }
.cc-registro button[aria-pressed="true"] { background: var(--lima); color: var(--tinta); }
.cc-total { font-weight: 600; letter-spacing: -.05em; }
.cc-total small { letter-spacing: 0; margin-left: .35rem; }
.cc-nivel { color: var(--lima); font-weight: 600; }
.cc-tabla .marca { font: .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; }
.cc-tabla .m-prioridad { background: var(--ambar); color: var(--tinta); }
.cc-tabla .m-fuerte { background: var(--lima); color: var(--tinta); }
.cc-empezar li { border-left-width: 2px; }
.cc-pro { background: var(--carbon); border-color: #3C5664; border-radius: var(--r); }
.cc-cuenta { border-width: 1px; }

/* ---------- Portal de clientes ---------- */
.portal-hero { background: radial-gradient(70% 120% at 100% 0%, rgba(85,184,165,.09), transparent 60%), var(--negro); }
.portal-hero h1 { font-weight: 600; }
.portal-sub strong { color: var(--lima); }
.portal-kpis div, .kpis-admin div { background: var(--carbon); }
.portal-kpis strong, .kpis-admin strong { font-weight: 600; letter-spacing: -.04em; }
.portal-kpis div:first-child strong { color: var(--lima); }
.subnav { background: rgba(16,33,43,.95); }
.subnav a:hover { color: var(--lima); }
.subnav a[aria-current="page"] { background: transparent; color: var(--lima); box-shadow: inset 0 -2px 0 var(--lima); border-radius: 0; }
.portal-tarjeta, .herramienta, .lectura, .proveedor, .pasos-red li { background: var(--carbon); }
.portal-vacio, .siguiente-paso { border-width: 1px; background: linear-gradient(90deg, rgba(85,184,165,.07), var(--carbon) 60%); }
.siguiente-etiqueta { color: var(--lima); }
.siguiente-etiqueta::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lima); margin-right: .6rem; vertical-align: 1px; box-shadow: 0 0 10px var(--lima); }
.portal-proximo { border-style: solid; border-color: var(--linea); }

/* Journey: etapas como indicadores */
.journey-etapa { background: var(--carbon); }
.journey-num { border-radius: 2px; border-width: 1px; font: 500 .8rem var(--mono); width: 30px; height: 30px; }
.journey-etapa.hecha .journey-num { background: transparent; border-color: var(--lima); color: var(--lima); }
.journey-etapa.actual { border: 1px solid var(--lima); background: linear-gradient(180deg, rgba(85,184,165,.10), var(--carbon)); }
.journey-etapa.actual .journey-num { background: var(--lima); border-color: var(--lima); color: var(--tinta); }
.journey-etapa.actual .journey-estado, .journey-etapa.hecha .journey-estado { color: var(--lima); }
.journey-etapa.pendiente { opacity: .55; }

/* Herramientas, lecturas y red */
.herramienta:hover, .lectura:hover, .proveedor:hover { border-color: var(--lima); transform: none; }
.herramienta .herramienta-tipo { background: var(--papel); color: var(--tinta); border-radius: 2px; font-size: .62rem !important; }
.herramienta .herramienta-reco { background: transparent; color: var(--lima); border: 1px solid rgba(85,184,165,.5); border-radius: 2px; font-size: .6rem !important; }
.herramienta-bajar { color: var(--lima) !important; }
.lectura strong, .proveedor-cabeza strong, .herramienta strong { font-weight: 600; letter-spacing: -.03em; }
.lectura-cat { color: var(--lima) !important; }
.filtro-chips a { border-radius: 999px; color: #C3CED3; }
.filtro-chips a[aria-current="page"], .filtro-chips a:hover { background: var(--lima); color: var(--tinta); border-color: var(--lima); }
.prosa p, .prosa li { color: #D3DCE0; }
.avatar { border-radius: 4px; }
.avatar.a-azul, .avatar.a-verde { background: var(--lima); }
.avatar.a-morado { background: var(--papel); }
.pasos-red li::before { border-radius: 2px; background: var(--lima); color: var(--tinta); font: 500 .8rem var(--mono); }
.skills span { color: #C3CED3; border-radius: 2px; }
.proveedor-ayuda b { color: var(--lima); }
.chip-etapa { border-radius: 2px; font-size: .62rem !important; }

/* Menú de cuenta */
.cuenta-enlace { border-radius: 2px; font-size: .85rem; }
.cuenta-enlace:hover, .cuenta-menu[open] > .cuenta-enlace { border-color: var(--lima); }
.btn-salir { border-radius: 2px; }
.btn-salir:hover { border-color: var(--ambar); }

/* Administración */
.grafica .g-barra { fill: var(--lima); }
.grafica .g-eje { font-family: var(--mono); }
.notas li { border-left: 2px solid var(--lima); }

/* ---------- Pie ---------- */
.pie { border-top-color: #243C49; }
.pie a:hover { color: var(--lima); }
.pie .legal { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; }