/* =============================================================================
   FICHA VIVA — capa del portal Ocean · ai.ocean-tech.com.mx
   Extiende Ocean 2.0. NO toca el marcado: re-mapea por variables las DOS
   nomenclaturas que conviven en el portal (shell.css y ocean-2.0.css).
   Va como ÚLTIMA hoja del documento. Reversible quitando el <link>.

   CUATRO SUELOS — data-suelo="papel|blanco|abisal|negro"
     texturados  papel · abisal    (llevan trama de puntos)
     planos      blanco · negro
   Sin data-suelo manda prefers-color-scheme.

   CLAVE DE ARQUITECTURA: las hojas de contenido son CLARAS en los cuatro
   suelos — igual que un documento sobre una mesa. Por eso --text, --muted y
   --border NO cambian con el suelo: sólo cambian el fondo, la barra lateral
   y los acentos. Eso mantiene el contraste de lectura en jornada larga.

   Canónico: ~/ocean-context/ocean-design-system/
   Documentación: https://claude.ai/code/artifact/14c41cfb-2c6a-4f97-8ac3-cdf2b28233bb
   Felipe · 2026-09-02
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* ── lo verdaderamente invariante: familias y acentos de marca ── */
  --display:'Space Grotesk',system-ui,sans-serif !important;
  --body:'Inter',system-ui,sans-serif !important;
  --fv-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --fv-osc:#141616; --fv-claro:#E6E8E7;
  --fv-cian:#00CBE6; --fv-cian2:#3ADFFA; --fv-cianh:#006B7A;
  --fv-ambar:#FFB020;            /* EXCLUSIVO de chips DEMO — no es --amber */
  --fv-cta-tinta:#052A30;

  /* ══ PAPEL — el suelo base ══
     CORRECCIÓN 2026-09-02: la tinta ya NO es invariante. La versión anterior la
     fijó en oscuro suponiendo que el contenido siempre vive sobre una hoja clara;
     en index.html el texto va directo sobre el suelo y en abisal quedó invisible.
     Ahora superficie y tinta cambian JUNTAS con el suelo. */
  --bg:#EFF1F0 !important;  --bg-2:#FFFFFF !important;
  --surface:#FFFFFF !important;  --surface-2:#F6F8F7 !important;
  --text:#101312 !important;     --muted:#3A3F3D !important;   --muted-2:#5C615F !important;
  --border:rgba(28,38,35,.16) !important;  --border-strong:rgba(0,203,230,.45) !important;
  --side:#0E0E0E !important; --side-2:#1C1F1E !important; --side-txt:#A6ABA8 !important;
  --side-on:#FFFFFF !important;
  --ocean:#006B7A !important;    /* sobre claro el cian de marca no alcanza contraste */
  --ocean-bright:#00CBE6 !important; --ocean-deep:#00CBE6 !important;
  --ocean-soft:rgba(0,203,230,.10) !important;
  --red:#A33333 !important;      --amber:#B4780A !important;   --green:#1A7F4F !important;
  --fv-linea:#C9CDC8; --fv-tenue:#5C615F;
  --fv-trama:#D2D7D4; --fv-velo:239,241,240;
  --glow:0 14px 44px rgba(18,28,26,.09) !important;
  --fv-filo:1px solid #DFE3E0;
}
/* ══ BLANCO — plano, para imprimir ══ */
:root[data-suelo="blanco"]{
  --bg:#FFFFFF !important; --side:#141616 !important; --side-2:#222625 !important;
  --fv-trama:transparent; --glow:none !important; --fv-filo:1px solid #E2E6E3;
  --fv-velo:255,255,255;
}
/* ══ ABISAL — superficie Y tinta se invierten juntas ══ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-suelo]){
    --bg:#0E0E0E !important; --bg-2:#000 !important;
    --surface:#141616 !important; --surface-2:#1A1D1C !important;
    --text:#ECEEED !important; --muted:#A6ABA8 !important; --muted-2:#8A918E !important;
    --border:rgba(255,255,255,.11) !important;
    --side:#0A0A0A !important; --side-2:#181B1A !important;
    --ocean:#3ADFFA !important; --ocean-soft:rgba(58,223,250,.12) !important;
    --red:#FF716C !important; --amber:#F4B740 !important; --green:#28C76F !important;
    --fv-linea:#2A2E2D; --fv-tenue:#A6ABA8; --fv-trama:#1F2222; --fv-velo:14,14,14;
    --glow:0 24px 70px rgba(0,0,0,.5) !important; --fv-filo:1px solid #2A2E2D;
  }
}
:root[data-suelo="abisal"], :root[data-suelo="negro"],
:root[data-theme="dark"]:not([data-suelo]){
  --bg:#0E0E0E !important; --bg-2:#000 !important;
  --surface:#141616 !important; --surface-2:#1A1D1C !important;
  --text:#ECEEED !important; --muted:#A6ABA8 !important; --muted-2:#8A918E !important;
  --border:rgba(255,255,255,.11) !important;
  --side:#0A0A0A !important; --side-2:#181B1A !important;
  --ocean:#3ADFFA !important; --ocean-soft:rgba(58,223,250,.12) !important;
  --red:#FF716C !important; --amber:#F4B740 !important; --green:#28C76F !important;
  --fv-linea:#2A2E2D; --fv-tenue:#A6ABA8; --fv-trama:#1F2222; --fv-velo:14,14,14;
  --glow:0 24px 70px rgba(0,0,0,.5) !important; --fv-filo:1px solid #2A2E2D;
}
/* ══ NEGRO — abisal sin textura, contraste máximo ══ */
:root[data-suelo="negro"]{
  --bg:#000000 !important; --surface:#0E0E0E !important; --surface-2:#141616 !important;
  --side:#000000 !important; --side-2:#141616 !important;
  --fv-trama:transparent; --glow:0 30px 84px rgba(0,0,0,.72) !important; --fv-velo:0,0,0;
}

/* ═══ el suelo: la trama de 24 px es lo que lo hace leer como plano ═══ */
body{
  background-color:var(--bg) !important;
  background-image:radial-gradient(var(--fv-trama) 1px,transparent 1px) !important;
  background-size:24px 24px !important;
  background-attachment:fixed !important;
}

/* ═══ la barra lateral ES el terminal ═══ */
.sb{ border-right:1px solid rgba(255,255,255,.06) }
.sb-lbl{ font-family:var(--fv-mono) !important; font-size:.6rem !important; letter-spacing:.14em !important;
  color:rgba(166,171,168,.5) !important; font-weight:400 !important }
.mi{ border-radius:4px !important }
.mi[aria-current="page"]{
  background:linear-gradient(135deg,var(--fv-cian2),var(--fv-cian)) !important;
  color:var(--fv-cta-tinta) !important }
.sb-toggle{ border-radius:4px !important }

/* ═══ el contenido es una hoja, no una pantalla ═══ */
.topbar{
  background:var(--surface) !important;
  border-bottom:1px solid var(--fv-linea) !important;
  box-shadow:var(--glow) !important }
.topbar h1{ font-family:var(--display) !important; text-transform:uppercase !important;
  letter-spacing:-.02em !important }
.topbar .sub{ font-family:var(--fv-mono) !important; font-size:.62rem !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--muted-2) !important }
.search{ border-radius:4px !important; border:1px solid var(--fv-linea) !important }

/* ═══ tarjetas → celdas ═══
   Lista extraída del CSS real del portal (todo selector con esquina > 6 px).
   Las píldoras (.chip .pill .tag .badge) NO entran: son redondas a propósito. */
.card,.kpi,.aviso,.sheet,.hero,.sec,.modal,.toast,.tbl,.vacio,.panel,.bar,.col,.glass,.item,.pendbox,.alert,.paso,.pn,.pr,.phone,.it,.dropzone,.prompt,.news,.dash,.side-item,.dash-search,.box,.tile,.widget{
  border-radius:4px !important;
  border:1px solid var(--fv-linea) !important;
  box-shadow:none !important }
.btn,.btn2,.filebtn,.ragbtn,.send,.tool,.iconbtn,.grp,.menu,.oa-sheet,.brand,.burger,.active{ border-radius:4px !important }

/* ═══ tablas: filo por celda con colapso, la excepción documentada ═══ */
table{ border-collapse:collapse !important }
th, td{ border:1px solid var(--fv-linea) !important }
thead th{
  background:var(--surface-2) !important; font-family:var(--fv-mono) !important;
  font-size:.6rem !important; letter-spacing:.12em !important; text-transform:uppercase !important;
  font-weight:400 !important; color:var(--muted-2) !important }

/* ═══ botones: un solo degradado por pantalla ═══ */
button.primary, .btn-primary, .btn.primary, [type="submit"]{
  background:linear-gradient(135deg,var(--fv-cian2),var(--fv-cian)) !important;
  color:var(--fv-cta-tinta) !important; border:0 !important; border-radius:4px !important;
  font-family:var(--fv-mono) !important; font-size:.66rem !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; font-weight:500 !important }

input, select, textarea{ border-radius:4px !important }
h1,h2,h3,h4{ font-family:var(--display) !important; letter-spacing:-.02em !important }

/* ═══ COMPONENTES NUEVOS — se usan agregando la clase, no tocan lo existente ═══ */
.fv-folio{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:9px clamp(1rem,3vw,2rem);background:var(--surface-2);
  border-bottom:1px solid var(--fv-linea);font-family:var(--fv-mono);font-size:8.5px;
  letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase}
.fv-rej{display:grid;gap:1px;background:var(--fv-linea);border:1px solid var(--fv-linea)}
.fv-cel{background:var(--surface);padding:18px 16px}
.fv-cel--osc{background:var(--fv-osc);color:var(--fv-tenue)}
.fv-cel--osc h1,.fv-cel--osc h2,.fv-cel--osc h3,.fv-cel--osc strong{color:var(--fv-claro)}
.fv-dato{font-family:var(--display);font-size:26px;font-weight:700;color:var(--text);line-height:1.1}
.fv-mono{font-family:var(--fv-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.fv-chip{font-family:var(--fv-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:2px;padding:2px 7px;white-space:nowrap;display:inline-block}
.fv-chip--validar{color:var(--muted-2);border:1px dashed var(--muted-2)}
.fv-chip--demo{background:var(--fv-ambar);color:#7A5200;font-weight:600}
.fv-chip--vivo{color:var(--fv-cianh);border:1px solid var(--fv-cianh)}
.fv-mk{background:linear-gradient(transparent 44%,var(--fv-cian) 44%,var(--fv-cian) 92%,transparent 92%)}

/* ═══ selector de suelo ═══ */
/* POSICIÓN (corregida 29-sep-2026). Antes iba ARRIBA A LA DERECHA con top fijo
   (73 px el selector, 118 px «Instalar app»). Esa columna es donde las páginas
   ponen su botón principal («＋ Agregar servicio»), y como el aviso de Ocean Harness
   empuja el contenido 35 px cuando aparece, en TODAS las combinaciones se tapaba
   algo: con aviso, «Instalar app» caía sobre el botón; sin aviso, el selector; y el
   selector tapaba siempre la ✕ del aviso. Ningún valor fijo de top arregla los dos
   estados, así que en pantallas de escritorio (≥821 px) ambos flotantes viven ABAJO
   A LA IZQUIERDA (ver el bloque al final de esta sección). La esquina inferior
   derecha sigue reservada para los flotantes de soporte y ayuda. */
.fv-suelos{position:fixed;top:73px;right:16px;z-index:250;display:flex;flex-wrap:wrap;
  justify-content:flex-end;gap:1px;background:var(--fv-linea);border-radius:6px;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.28)}
.fv-suelos button{border:0;cursor:pointer;background:var(--surface);color:var(--muted-2);
  font-family:var(--fv-mono);font-size:8px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 11px;line-height:1;transition:.15s}
.fv-suelos button:hover{color:var(--text)}
.fv-suelos button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--fv-cian2),var(--fv-cian));
  color:var(--fv-cta-tinta);font-weight:600}

/* «Instalar app» — el guion lo posiciona con estilo en línea; un !important de hoja
   gana sobre eso. Se ancla debajo del selector, no abajo a la derecha. */
#ocean-pwa-install{
  top:118px !important; right:16px !important; bottom:auto !important; left:auto !important }
#ocean-pwa-ioshint{
  top:118px !important; right:16px !important; bottom:auto !important; left:auto !important }

@media print{.fv-suelos{display:none}}
@media (max-width:820px){
  .fv-suelos{top:auto;bottom:12px;right:10px}
  .fv-suelos button{padding:8px 9px;font-size:7.5px}
  #ocean-pwa-install,#ocean-pwa-ioshint{top:auto !important;bottom:60px !important}
}

/* Escritorio: selector y «Instalar app» abajo a la izquierda, apilados, sin tocar
   la columna superior derecha. Con barra lateral (páginas de shell.js) se corren
   a la derecha de ella: 236 px abierta, 76 px minimizada. El selector es hermano
   de .shell en <body>, por eso basta el combinador ~ (sin :has). Va DESPUÉS del
   bloque de arriba a propósito: mismas especificidades, gana el último. */
@media (min-width:821px){
  .fv-suelos{top:auto;right:auto;left:20px;bottom:16px}
  #ocean-pwa-install,#ocean-pwa-ioshint{
    top:auto !important; right:auto !important; left:20px !important; bottom:60px !important }
  .shell:not(.mini) ~ .fv-suelos{left:256px}
  .shell.mini ~ .fv-suelos{left:96px}
  .shell:not(.mini) ~ #ocean-pwa-install,.shell:not(.mini) ~ #ocean-pwa-ioshint{left:256px !important}
  .shell.mini ~ #ocean-pwa-install,.shell.mini ~ #ocean-pwa-ioshint{left:96px !important}
}

/* ═══ ORNAMENTO DECORATIVO ═══
   La Hoja 7 prohíbe los degradados de relleno: la estructura es la decoración.
   login.html trae un "planeta", un "aura" y un campo de "estrellas" en degradado
   radial que contradicen el lenguaje. Se apagan aquí, no se borran del marcado:
   quitando esta hoja vuelven. */
.planet, .aura, .stars{ display:none !important }
.card{ background:var(--surface) !important; backdrop-filter:none !important }

/* ═══ TEXTO CON DEGRADADO ═══
   `.title` (index) y `.cy` (chat, instalar, presentacion-bluax) usan
   `background-clip:text` con un degradado azul que termina en #2ea6e6 — sobre suelo claro
   queda casi ilegible, y la Hoja 7 prohíbe los degradados de relleno. Se aplanan al token
   de tinta. Hay que reponer `-webkit-text-fill-color`: sin él el texto queda transparente. */
.title, .cy{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
}

/* ═══ CONTRASTE DEL TEXTO ═══
   Las páginas fijan su propio color en body/h1..h6/p. Con cuatro suelos eso deja
   texto oscuro sobre negro. Se reconduce a los tokens, que ya cambian con el suelo. */
body{ color:var(--muted) !important }
h1,h2,h3,h4,h5,h6{ color:var(--text) !important }
p,li,td,dd,span:not([class*="chip"]):not([class*="badge"]):not([class*="pill"]){ color:inherit }
a{ color:var(--ocean) }
.sub,.muted,.hint,.small,.nota,.desc,.lead{ color:var(--muted) !important }

/* ═══ PORTADA — hero con globo de nodos ═══
   Sólo aplica donde existe #fv-globo. El ornamento previo (planet/aura/stars)
   ya está apagado más arriba; el lienzo ocupa su lugar. */
.hero{ position:relative; overflow:hidden; isolation:isolate }
#fv-globo{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  z-index:0; pointer-events:none }
/* velo: legibilidad del texto y fundido al suelo por abajo */
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(74% 52% at 50% 34%, rgba(var(--fv-velo),.90) 0%,
                    rgba(var(--fv-velo),.62) 46%, rgba(var(--fv-velo),0) 100%),
    linear-gradient(to bottom, rgba(var(--fv-velo),.55) 0%, transparent 24%,
                    transparent 70%, var(--bg) 100%) }
.hero > .wrap, .hero > .hero-inner{ position:relative; z-index:2 }

/* folio de la portada: lo que la vuelve documento */
.fv-portada-folio{
  position:relative; z-index:2; display:flex; justify-content:space-between; gap:14px;
  flex-wrap:wrap; max-width:1180px; margin:0 auto 26px; padding:9px 4px;
  border-top:1px solid var(--fv-linea); border-bottom:1px solid var(--fv-linea);
  font-family:var(--fv-mono); font-size:8.5px; letter-spacing:.11em;
  color:var(--muted-2); text-transform:uppercase }

/* el titular toma el tratamiento del sistema */
.hero .title{
  font-family:var(--display) !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:-.028em !important;
  line-height:.96 !important }
.hero .title .fv-mk{
  background:linear-gradient(transparent 44%, var(--fv-cian) 44%,
                             var(--fv-cian) 92%, transparent 92%);
  -webkit-text-fill-color:var(--text) }

/* El saludo «Hola — pregunta abajo o elige tu área» sobra: la barra de pregunta
   que está justo debajo ya dice qué hacer, y con su propio campo. */
.hero .badge{ display:none !important }

/* móvil: el selector de suelos se encimaba con el título y con la burbuja del centro de estado (auditoría 8-sep). El tema se cambia en Ajustes. */
@media (max-width: 768px) { .fv-suelos { display: none !important; } }

/* 2026-09-29, instrucción de Joselinne: el selector de suelo y «Instalar app» dejan de
   flotar siempre (arriba, luego abajo-izquierda desde cfa5b91) -- en cualquier posición
   fija terminaban tapando algo real de la página (con barra lateral se corrían, pero en
   nav.js/Programación tapaban una tarjeta de servicio real). Ahora viven ocultos y solo
   se muestran junto al perfil al abrir el interruptor nuevo (.pf-tog, ver prefs.js). Va
   AL FINAL de la hoja a propósito: son más específicos (body.ot-panel-open + la clase)
   que TODAS las reglas de arriba, así que ganan sin importar el orden -- pero ir al
   final además los hace fáciles de encontrar el día que se retire esta función. */
.fv-suelos, #ocean-pwa-install, #ocean-pwa-ioshint{ display:none !important }
body.ot-panel-open .fv-suelos{
  display:flex !important; position:fixed !important; z-index:401 !important;
  top:54px !important; right:16px !important; left:auto !important; bottom:auto !important;
}
body.ot-panel-open #ocean-pwa-install,
body.ot-panel-open #ocean-pwa-ioshint{
  display:inline-flex !important; position:fixed !important; z-index:401 !important;
  top:98px !important; right:16px !important; left:auto !important; bottom:auto !important;
}
@media (max-width:767px){
  body.ot-panel-open .fv-suelos{ top:auto !important; bottom:64px !important; right:10px !important }
  body.ot-panel-open #ocean-pwa-install,
  body.ot-panel-open #ocean-pwa-ioshint{ top:auto !important; bottom:16px !important; right:10px !important }
}