/* Landing del SSO, version 2 (2026-10-12): el lenguaje grafico de FICEM Workspace.
   Tokens tomados de ficem-workspace/assets/theme.css (claro y oscuro). CSP default-src 'self':
   todo el estilo vive aqui, nada en linea. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}

:root {
  --acento: #0D6E6E;
  --acento-texto: #0D6E6E;
  --acento-suave: rgba(13, 110, 110, .125);
  --atencion-texto: #B44A21;
  --lienzo: #FAFAFA;
  --tarjeta: #FFFFFF;
  --control: #FFFFFF;
  --hundido: #F9FAFB;
  --barra: #1A1A1A;
  --barra-texto: #AAAAAA;
  --barra-acento: #3AAFAF;
  --borde: #E5E5E5;
  --borde-control: #8B95A4;
  --tinta: #1A1A1A;
  --secundario: #666666;
  --tenue: #737373;
  --sombra: 0 4px 24px #00000008;
  --sombra-modal: 0 8px 32px #00000018;
  --fondo-modal: #00000066;
  --peligro: #DC2626;
  --ok: #05875F;
  --ok-suave: #F0FAF0;

  --azul: #2563EB;
  --ambar: #B16105;
  --turquesa: #0D6E6E;
  --verde: #05875F;
  --violeta: #7C3AED;
  --rosa: #C65124;

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --margen: clamp(16px, 5vw, 72px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acento: #0D7373;
    --acento-texto: #3AAFAF;
    --acento-suave: rgba(45, 170, 170, .28);
    --atencion-texto: #E8916F;
    --lienzo: #121212;
    --tarjeta: #1C1C1C;
    --control: #232323;
    --hundido: #171717;
    --barra: #1E1E1E;
    --barra-texto: #B0B0B0;
    --borde: #2E2E2E;
    --borde-control: #6D6D6D;
    --tinta: #EDEDED;
    --secundario: #A8A8A8;
    --tenue: #8F8F8F;
    --sombra: none;
    --sombra-modal: 0 8px 32px #00000066;
    --fondo-modal: #000000A6;
    --peligro: #F87171;
    --ok: #34D399;
    --ok-suave: rgba(52, 211, 153, .16);

    --azul: #7AA2F7;
    --ambar: #E0A458;
    --turquesa: #3AAFAF;
    --verde: #4CC38A;
    --violeta: #A78BFA;
    --rosa: #E8916F;
  }
}

:root[data-theme="dark"] {
  --acento: #0D7373;
  --acento-texto: #3AAFAF;
  --acento-suave: rgba(45, 170, 170, .28);
  --atencion-texto: #E8916F;
  --lienzo: #121212;
  --tarjeta: #1C1C1C;
  --control: #232323;
  --hundido: #171717;
  --barra: #1E1E1E;
  --barra-texto: #B0B0B0;
  --borde: #2E2E2E;
  --borde-control: #6D6D6D;
  --tinta: #EDEDED;
  --secundario: #A8A8A8;
  --tenue: #8F8F8F;
  --sombra: none;
  --sombra-modal: 0 8px 32px #00000066;
  --fondo-modal: #000000A6;
  --peligro: #F87171;
  --ok: #34D399;
  --ok-suave: rgba(52, 211, 153, .16);

  --azul: #7AA2F7;
  --ambar: #E0A458;
  --turquesa: #3AAFAF;
  --verde: #4CC38A;
  --violeta: #A78BFA;
  --rosa: #E8916F;
  }

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--lienzo); }

body.landing {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento-texto); }

:focus-visible {
  outline: 2px solid var(--acento-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- barra superior: la navegacion oscura del Workspace ---------- */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--margen);
  background: var(--barra);
  border-bottom: 1px solid #333333;
}

.barra__marca { display: inline-flex; }
.barra__marca img { display: block; height: 36px; width: auto; }

.barra__nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }

.barra__persona { color: #EDEDED; font-size: 14px; font-weight: 500; }

.barra__enlace {
  color: var(--barra-texto);
  font-size: 14px;
  text-decoration: none;
}
.barra__enlace:hover { color: #FFFFFF; }

.barra__enlace--fuerte {
  padding: 7px 16px;
  border-radius: 8px;
  background: #0D6E6E;
  color: #FFFFFF;
  font-weight: 500;
}
.barra__enlace--fuerte:hover { background: #0B5E5E; }

@media (max-width: 560px) {
  .barra__enlace--cuenta { display: none; }
}

/* ---------- portada: una sola pantalla, texto a la izquierda y sistemas a la derecha ---------- */

html, body.landing--entrada { height: 100%; }
body.landing--entrada { min-height: 0; }

.escena {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--margen);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.portada { max-width: 460px; }

.rotulo {
  margin: 0 0 14px;
  color: var(--acento-texto);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.titular {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.titular__acento { color: var(--acento-texto); font-style: italic; }
.titular--pagina { font-size: clamp(30px, 4vw, 42px); }

.bajada {
  margin: 0 0 24px;
  max-width: 40ch;
  color: var(--secundario);
  font-size: 16px;
}
.bajada strong { color: var(--tinta); font-weight: 600; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 500 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.boton--primario { background: var(--acento); color: #FFFFFF; }
.boton--primario:hover { filter: brightness(.92); }
.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--borde-control); }
.boton--secundario:hover { background: var(--hundido); }
.boton--chico { min-height: 34px; padding: 0 14px; font-size: 14px; }
.boton--sistema { min-height: 0; padding: 0; border: 0; background: none; color: var(--acento-texto); font-size: 14px; }
.boton--sistema:hover { text-decoration: underline; }

.aviso {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--atencion-texto);
  background: var(--hundido);
  color: var(--tinta);
  font-size: 14px;
}
.aviso--ok { border-left-color: var(--ok); background: var(--ok-suave); }

.contador {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento-texto);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* ---------- sistemas: iconos sueltos sobre el lienzo, sin tarjetas ---------- */

.catalogo { min-width: 0; }

.catalogo__pie { display: flex; margin-top: clamp(24px, 5vh, 44px); opacity: .7; }

.leyenda {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--tenue);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.leyenda li { display: inline-flex; align-items: center; gap: 7px; }

.punto {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.punto--produccion { color: var(--ok); }
.punto--construccion { color: var(--atencion-texto); }
.punto--desarrollo { color: var(--tenue); background: transparent; border: 1.5px dotted currentColor; }

.catalogo__grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 5vh, 48px) clamp(16px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sistema {
  --c: var(--turquesa);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.sistema--azul { --c: var(--azul); }
.sistema--ambar { --c: var(--ambar); }
.sistema--turquesa { --c: var(--turquesa); }
.sistema--verde { --c: var(--verde); }
.sistema--violeta { --c: var(--violeta); }
.sistema--rosa { --c: var(--rosa); }

.sistema__icono { display: block; margin-bottom: 10px; }

.sistema__enlace {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sistema__enlace .icono { transition: transform .15s ease; }
.sistema__enlace:hover .icono { transform: translateY(-3px) scale(1.06); }
.sistema__enlace:hover .sistema__nombre { color: var(--c); }
@media (prefers-reduced-motion: reduce) { .sistema__enlace .icono { transition: none; } }

.icono { display: block; width: clamp(48px, 7vh, 64px); height: clamp(48px, 7vh, 64px); overflow: visible; color: var(--c); }
.icono__trazo { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.icono__trazo--fino { stroke-width: 3; }
.icono__suave { fill: color-mix(in srgb, currentColor 22%, transparent); stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.icono__relleno { fill: currentColor; }
.icono__texto { fill: currentColor; font: 700 15px/1 var(--sans); }
.icono__bandera-borde { fill: var(--lienzo); stroke: var(--lienzo); stroke-width: 3; }

.sistema--proximo .icono { opacity: .7; }

.sistema__nombre {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 400;
  line-height: 1.2;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.estado--produccion { color: var(--ok); }
.estado--construccion { color: var(--atencion-texto); }
.estado--desarrollo { color: var(--tenue); }
.estado--desarrollo .punto { background: transparent; border: 1.5px dotted currentColor; }

.pronto {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--atencion-texto) 14%, transparent);
  color: var(--atencion-texto);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sistema__accion { margin: 6px 0 0; }
.sistema__accion--nota { color: var(--tenue); font-size: 13px; }

.sistema__pedir,
.sistema__detalle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--acento-texto);
  font: 500 14px/1.4 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.sistema__pedir:hover,
.sistema__detalle:hover { text-decoration: underline; }

.otras { margin-top: 28px; }
.otras__titulo { margin: 0 0 10px; font-family: var(--serif); font-size: 18px; font-weight: 400; }
.otras__lista { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

@media (max-width: 900px) {
  html, body.landing--entrada { height: auto; }
  .escena { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 520px) {
  .catalogo__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ventana "que viene" ---------- */

.detalle {
  --c: var(--turquesa);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: var(--sombra-modal);
}
.detalle--con-captura { width: min(940px, calc(100vw - 32px)); }
.detalle:popover-open { display: grid; grid-template-columns: minmax(0, 1fr); }
.detalle--con-captura:popover-open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detalle::backdrop { background: var(--fondo-modal); }

.detalle__texto { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); }
.detalle__fase {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  color: var(--atencion-texto); font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
}
.detalle__nombre { margin: 0 0 12px; font-family: var(--serif); font-size: 30px; font-weight: 400; }
.detalle__subtitulo { margin: 20px 0 6px; color: var(--acento-texto); font-size: 13px; font-weight: 600; }
.detalle__parrafo { margin: 0; color: var(--secundario); font-size: 15px; }
.detalle__cerrar { align-self: flex-start; margin-top: 24px; }
.detalle__captura { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--hundido); }

@media (max-width: 760px) {
  .detalle--con-captura:popover-open { grid-template-columns: minmax(0, 1fr); }
  .detalle__captura { height: 220px; }
}

/* ---------- paginas interiores: pedir acceso y su administracion ---------- */

.hoja {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 56px) var(--margen) 48px;
}
.hoja--angosta { max-width: 680px; }

.bajada--sin-filete { margin-top: -8px; }

.formulario-l {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  margin-top: 8px;
  padding: 24px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  box-shadow: var(--sombra);
}
.formulario-l .acciones { grid-column: 1 / -1; }

.campo-l { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.campo-l--mitad { grid-column: auto; }

.campo-l label { color: var(--tinta); font-size: 14px; font-weight: 500; }

.campo-l input,
.campo-l select,
.campo-l textarea,
.solicitud__form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--borde-control);
  border-radius: 8px;
  background: var(--control);
  color: var(--tinta);
  font: 400 15px/1.4 var(--sans);
}
.campo-l textarea { resize: vertical; }
.campo-l input:focus-visible,
.campo-l select:focus-visible,
.campo-l textarea:focus-visible,
.solicitud__form select:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 0; border-color: transparent; }

.campo-l__ayuda { margin: 0; color: var(--tenue); font-size: 13px; }

@media (max-width: 560px) {
  .formulario-l { grid-template-columns: 1fr; padding: 18px; }
  .campo-l--mitad { grid-column: 1 / -1; }
}

.campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vacio { margin-top: 32px; color: var(--secundario); }

.solicitudes { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }

.solicitud {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(200px, .8fr);
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--tarjeta);
  box-shadow: var(--sombra);
}

.solicitud__dominio {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento-texto);
  font-family: var(--mono);
  font-size: 11px;
}
.solicitud__nombre { margin: 0 0 6px; font-family: var(--serif); font-size: 20px; font-weight: 400; }
.solicitud__dato { margin: 0; color: var(--secundario); font-size: 14px; overflow-wrap: anywhere; }
.solicitud__dato--tenue { color: var(--tenue); margin-top: 8px; }
.solicitud__etiqueta {
  margin: 0 0 4px; color: var(--tenue); font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
}
.solicitud__motivo { margin: 0; color: var(--tinta); white-space: pre-line; overflow-wrap: anywhere; }
.solicitud__acciones { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.solicitud__form { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 860px) {
  .solicitud { grid-template-columns: 1fr; }
}

/* ---------- pie ---------- */

.pie {
  padding: 20px var(--margen);
  border-top: 1px solid var(--borde);
  color: var(--tenue);
  font-size: 13px;
  text-align: center;
}
.pie p { margin: 0; }
.pie__tenue { margin-top: 6px !important; }
.pie__enlace { color: var(--acento-texto); }

/* ---------- boton de tema (claro / oscuro), como la luna del Workspace ---------- */

.tema {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #333333;
  border-radius: 8px;
  background: transparent;
  color: var(--barra-texto);
  cursor: pointer;
}
.tema:hover { color: #FFFFFF; border-color: #555555; }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tema__sol { display: none; }
:root[data-theme="dark"] .tema__sol { display: block; }
:root[data-theme="dark"] .tema__luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema__sol { display: block; }
  :root:not([data-theme="light"]) .tema__luna { display: none; }
}