/* ==========================================================================
   AEC Platform — portal (selector de plataformas + login)

   Mismo mundo visual que PLATFORM_MARKET/assets/style.css, «el boletín de
   mercado»: suelo gris frío, paneles blancos con filete de 1px, Archivo,
   petróleo como tinta y teal solo para marca, selección y foco.

   Los tokens se duplican a propósito: cada app Dash sirve su propia carpeta de
   assets. Esta carpeta la usan la app /platforms/ (assets_folder) y
   templates/login.html (vía /static/portal/).
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --aec-font: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --aec-ground: #F2F5F6;
  --aec-surface: #FFFFFF;
  --aec-surface-alt: #F7F9FA;

  --aec-ink: #04586F;
  --aec-ink-deep: #032F3D;
  --aec-body: #4A5D64;
  --aec-muted: #627278;
  --aec-on-ink: rgb(227, 222, 215);

  --aec-rule: #DCE4E7;
  --aec-rule-soft: #EAEFF1;
  --aec-rule-strong: #C3D0D5;

  --aec-accent: #63C7C1;
  --aec-accent-ink: #007D7D;
  --aec-accent-soft: rgba(99, 199, 193, 0.08);
  --aec-focus: rgba(99, 199, 193, 0.45);

  --aec-down: #B3392C;
  --aec-down-soft: rgba(179, 57, 44, 0.08);

  --pf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pf-width: 1160px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--aec-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--aec-body);
  background-color: var(--aec-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pf-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* --------------------------------------------------------------------------
   Iconos — SVG dibujados a trazo 1.6, pintados con currentColor vía máscara
   -------------------------------------------------------------------------- */

.pf-icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}

.pf-icon--market   { -webkit-mask-image: url('icons/market.svg');   mask-image: url('icons/market.svg'); }
.pf-icon--risk     { -webkit-mask-image: url('icons/risk.svg');     mask-image: url('icons/risk.svg'); }
.pf-icon--budget   { -webkit-mask-image: url('icons/budget.svg');   mask-image: url('icons/budget.svg'); }
.pf-icon--billing  { -webkit-mask-image: url('icons/billing.svg');  mask-image: url('icons/billing.svg'); }
.pf-icon--screener { -webkit-mask-image: url('icons/screener.svg'); mask-image: url('icons/screener.svg'); }
.pf-icon--arrow    { -webkit-mask-image: url('icons/arrow.svg');    mask-image: url('icons/arrow.svg'); }
.pf-icon--lock     { -webkit-mask-image: url('icons/lock.svg');     mask-image: url('icons/lock.svg'); }
.pf-icon--logout   { -webkit-mask-image: url('icons/logout.svg');   mask-image: url('icons/logout.svg'); }

/* --------------------------------------------------------------------------
   Barra superior — el mismo petróleo que el navbar de las plataformas
   -------------------------------------------------------------------------- */

.pf-bar {
  background-color: var(--aec-ink);
  color: var(--aec-on-ink);
}

/* De borde a borde con 12px, el `.container-fluid` de los navbars de los módulos.
   El contenido y el pie siguen a --pf-width centrados: la barra ya no alinea con
   ellos, a cambio de ser la misma barra en las seis superficies. */
.pf-bar-inner {
  height: 56px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.pf-brand {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}

.pf-brand img {
  display: block;
  height: 26px;
  width: auto;
}

.pf-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* 14px: the banner size, shared with the module navbars. */
  font-size: 14px;
}

.pf-user-name {
  color: #FFFFFF;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-role {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aec-on-ink);
  border: 1px solid rgba(227, 222, 215, 0.35);
  border-radius: 4px;
}

.pf-bar-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background-color: rgba(227, 222, 215, 0.25);
}

.pf-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: var(--aec-on-ink);
  text-decoration: none;
  border-radius: 4px;
  transition: color 160ms ease-out;
}

.pf-logout .pf-icon { width: 18px; height: 18px; }

.pf-logout:hover { color: var(--aec-accent); }

.pf-brand:focus-visible,
.pf-logout:focus-visible {
  outline: 2px solid var(--aec-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Cabecera de página
   -------------------------------------------------------------------------- */

.pf-main {
  flex: 1;
  width: 100%;
  max-width: var(--pf-width);
  margin: 0 auto;
  padding: 56px 24px 64px;
}

.pf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 32px;
}

.pf-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--aec-ink-deep);
}

.pf-lede {
  margin: 0;
  max-width: 60ch;
  font-size: 13px;
  color: var(--aec-body);
}

.pf-date {
  margin: 0;
  font-size: 13px;
  color: var(--aec-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Flujo de plataformas — un solo panel, columnas separadas por filete y
   unidas por una línea que se traza de izquierda a derecha al cargar:
   mercado → riesgos → presupuestos → facturación.
   -------------------------------------------------------------------------- */

.pf-flow {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  background-color: var(--aec-surface);
  border: 1px solid var(--aec-rule);
  border-radius: 6px;
  overflow: hidden;
}

.pf-node {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 272px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  transition: background-color 200ms ease-out;
}

.pf-node + .pf-node { border-left: 1px solid var(--aec-rule); }

a.pf-node:hover { background-color: var(--aec-accent-soft); }

a.pf-node:focus-visible {
  outline: 2px solid var(--aec-accent-ink);
  outline-offset: -2px;
}

.pf-node-head {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.pf-mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--aec-ink);
  background-color: var(--aec-surface);
  border: 1px solid var(--aec-rule);
  border-radius: 6px;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

a.pf-node:hover .pf-mark {
  color: var(--aec-accent-ink);
  border-color: var(--aec-accent-ink);
}

/* La línea sale del icono y termina, con su punta, justo antes del icono
   de la columna siguiente (24px de padding + 1px de filete). */
.pf-link {
  position: absolute;
  z-index: 1;
  top: 44px;
  left: 76px;
  right: -18px;
  height: 1px;
  background-color: var(--aec-rule-strong);
  clip-path: inset(-4px 0 -4px 0);
  animation: pf-draw 900ms var(--pf-ease) both;
  animation-delay: calc(160ms + var(--i, 0) * 180ms);
  transition: background-color 200ms ease-out;
}

.pf-link::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--aec-rule-strong);
  border-right: 1px solid var(--aec-rule-strong);
  transform: rotate(45deg);
  transition: border-color 200ms ease-out;
}

a.pf-node:hover .pf-link { background-color: var(--aec-accent-ink); }
a.pf-node:hover .pf-link::after { border-color: var(--aec-accent-ink); }

@keyframes pf-draw {
  from { clip-path: inset(-4px 100% -4px 0); }
  to   { clip-path: inset(-4px 0 -4px 0); }
}

.pf-name {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--aec-ink-deep);
}

.pf-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--aec-body);
}

.pf-scope {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--aec-muted);
}

.pf-node-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

.pf-go,
.pf-locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.pf-go { color: var(--aec-accent-ink); }
.pf-locked { color: var(--aec-muted); }

.pf-go .pf-icon,
.pf-locked .pf-icon { width: 16px; height: 16px; }

.pf-go .pf-icon { transition: transform 280ms var(--pf-ease); }

a.pf-node:hover .pf-go .pf-icon,
a.pf-band:hover .pf-go .pf-icon { transform: translateX(4px); }

.pf-kbd {
  min-width: 22px;
  padding: 3px 6px;
  font: 600 11px/1 var(--aec-font);
  text-align: center;
  color: var(--aec-muted);
  background-color: var(--aec-surface);
  border: 1px solid var(--aec-rule);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* Sin acceso: atenuada, no navegable. */
.pf-node.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.pf-node.is-locked .pf-link { animation: none; }

/* --------------------------------------------------------------------------
   Monitorización — el Screener va aparte: no es un paso del flujo
   -------------------------------------------------------------------------- */

.pf-section { margin-top: 40px; }

.pf-section-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--aec-ink);
}

.pf-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  color: inherit;
  text-decoration: none;
  background-color: var(--aec-surface);
  border: 1px solid var(--aec-rule);
  border-radius: 6px;
  transition: background-color 200ms ease-out;
}

a.pf-band:hover { background-color: var(--aec-accent-soft); }
a.pf-band:hover .pf-mark { color: var(--aec-accent-ink); border-color: var(--aec-accent-ink); }

a.pf-band:focus-visible {
  outline: 2px solid var(--aec-accent-ink);
  outline-offset: -2px;
}

.pf-band .pf-name { margin: 0 0 2px; font-size: 18px; }
.pf-band .pf-desc { margin: 0; }

.pf-band-end {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pf-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--aec-muted);
  white-space: nowrap;
}

.pf-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--aec-accent);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pf-foot { border-top: 1px solid var(--aec-rule); }

.pf-foot-inner {
  max-width: var(--pf-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 12px;
  color: var(--aec-muted);
}

.pf-foot p { margin: 0; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.lg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 64px;
}

.lg-panel {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background-color: var(--aec-surface);
  border: 1px solid var(--aec-rule);
  border-radius: 6px;
}

.lg-logo {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 28px;
}

.lg-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--aec-ink-deep);
}

.lg-sub {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--aec-muted);
}

.lg-error {
  margin: 0 0 20px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--aec-down);
  background-color: var(--aec-down-soft);
  border: 1px solid rgba(179, 57, 44, 0.25);
  border-radius: 4px;
}

.lg-field { margin-bottom: 16px; }

.lg-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aec-ink);
}

.lg-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--aec-ink-deep);
  background-color: var(--aec-surface);
  border: 1px solid var(--aec-rule-strong);
  border-radius: 4px;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.lg-input::placeholder { color: var(--aec-muted); }
.lg-input:hover { border-color: var(--aec-muted); }

.lg-input:focus {
  outline: none;
  border-color: var(--aec-accent-ink);
  box-shadow: 0 0 0 3px var(--aec-focus);
}

.lg-submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 24px;
  font: 600 13px/1 var(--aec-font);
  color: #FFFFFF;
  background-color: var(--aec-ink);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}

.lg-submit:hover { background-color: var(--aec-ink-deep); }

.lg-submit:focus-visible {
  outline: 2px solid var(--aec-accent-ink);
  outline-offset: 2px;
}

.lg-help {
  margin: 20px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--aec-muted);
}

/* --------------------------------------------------------------------------
   Responsive y movimiento reducido
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pf-flow { grid-template-columns: minmax(0, 1fr); }
  .pf-node { min-height: 0; }
  .pf-node + .pf-node { border-left: 0; border-top: 1px solid var(--aec-rule); }
  .pf-node-head { margin-bottom: 16px; }
  .pf-link { display: none; }
}

@media (max-width: 600px) {
  .pf-bar-inner { gap: 12px; }
  .pf-brand img { height: 22px; }
  .pf-role, .pf-bar-sep { display: none; }
  .pf-logout-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pf-main { padding: 32px 16px 48px; }
  .pf-title { font-size: 22px; }
  .pf-head { margin-bottom: 24px; }
  .pf-node { padding: 20px; }

  .pf-band { grid-template-columns: auto minmax(0, 1fr); padding: 16px 20px; gap: 16px; }
  .pf-band-end { grid-column: 1 / -1; justify-content: space-between; }

  .pf-foot-inner { padding: 16px; }
  .lg-panel { padding: 24px; }
}

@media (hover: none) {
  .pf-kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-link { animation: none; }
  .pf-node, .pf-band, .pf-mark, .pf-link, .pf-link::after,
  .pf-go .pf-icon, .pf-logout, .lg-input, .lg-submit { transition: none; }
}

/* --------------------------------------------------------------------------
   Language switch — ES / EN, in the banner

   Two anchors to /lang/<code>; no JS, so the same control works in the five
   Dash bars, in the portal and on the Jinja login page. Copied verbatim into
   every platform's stylesheet for the same reason as the banner above it:
   each Dash sub-app serves its own assets folder.

   Quieter than a nav link on purpose — it is a setting, not a destination.
   The inactive option sits at 55% of the bone; the active one takes the accent
   and a hairline under it, so the pair reads as one control with a current
   value rather than as two more links.
   -------------------------------------------------------------------------- */

.aec-lang {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
}

.aec-lang-opt {
  position: relative;
  display: inline-block;
  padding: 3px 1px;
  border-radius: 3px;
  font-family: var(--aec-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(227, 222, 215, 0.55);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.aec-lang-opt:hover {
  color: var(--aec-on-ink);
}

.aec-lang-opt.is-active {
  color: var(--aec-accent);
  box-shadow: inset 0 -1px 0 0 var(--aec-accent);
}

.aec-lang-opt:focus-visible {
  outline: 2px solid var(--aec-focus);
  outline-offset: 2px;
}

/* The same hairline the bar uses between the user chip and Logout. */
.aec-lang-opt + .aec-lang-opt::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background-color: rgba(227, 222, 215, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .aec-lang-opt { transition: none; }
}