/* Axial Operations Global
   Identidad corporativa AXIAL (manual de octubre de 2026):
   - Colores: gris #575756 (Pantone 445C) y gris claro #F2F2F2 predominan; rojo #CA3122 (Pantone 2035C) solo como acento.
   - Tipografía: Poppins ExtraBold (títulos) y Regular (subtítulos); Aptos para el texto (si no está, Segoe UI).
   - El rojo NO se usa para datos (barras, desviaciones, negativos): en un cuadro de costes leería como "malo". */
:root {
  --gris: #575756;
  --gris-claro: #F2F2F2;
  --rojo: #CA3122;
  --texto: #333333;          /* negro 80 % */
  --suave: #6B6B6A;          /* texto secundario (≥ 4,5:1 sobre blanco y sobre gris claro) */
  --linea: #D9D9D9;
  --pista: #ECECEC;
  --blanco: #FFFFFF;
  --dato: #CA3122;           /* barras de cargos: todas iguales, en rojo corporativo (decisión del usuario) */
  --sube: #CA3122;           /* cifra con signo +: más coste */
  --baja: #2E7D32;           /* cifra con signo −: menos coste (5,1:1 sobre blanco) */
  --titulo: "Poppins", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radio: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--gris-claro);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
a { color: var(--gris); }
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--suave); }
.is-up { color: var(--sube); }
.is-down { color: var(--baja); }

/* ---------- Marca ---------- */
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--gris); }
.brand__logo { display: block; height: 22px; width: auto; }
.brand__product { font-family: var(--titulo); font-weight: 400; font-size: 1rem; letter-spacing: .01em; color: var(--gris); white-space: nowrap; }
.wordmark { display: block; height: 28px; width: auto; }

/* ---------- Botones ---------- */
.btn-ms, .btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .75rem 1.4rem; border-radius: 999px; cursor: pointer;
  font: 600 .9375rem/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-ms, .btn-primary { color: var(--blanco); background: var(--gris); border: 1.5px solid var(--gris); }
.btn-ms:hover, .btn-primary:hover { background: #454544; border-color: #454544; }
.btn-ms { width: 100%; padding: .95rem 1.4rem; font-size: 1rem; }
.btn-secondary { color: var(--gris); background: transparent; border: 1.5px solid var(--gris); }
.btn-secondary:hover { background: var(--gris); color: var(--blanco); }
.btn-link { padding: 0; border: 0; background: none; font: 600 .9375rem var(--font); color: var(--gris); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 4px; cursor: pointer; }
.btn-link:hover { text-decoration-color: var(--gris); }
.btn-link--danger { color: var(--texto); }

/* ---------- Avisos ---------- */
.notice { margin-bottom: 1.25rem; padding: .8rem 1rem; border-left: 3px solid var(--gris); border-radius: 0 var(--radio) var(--radio) 0; background: var(--blanco); font-size: .9375rem; }
.notice--error { border-left-color: var(--rojo); }
.notice--ok { border-left-color: var(--gris); }

/* ---------- Acceso ---------- */
.login { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(400px, 1fr); min-height: 100vh; }
.login__sky { position: relative; overflow: hidden; background: linear-gradient(180deg, #E4E4E3 0%, var(--gris-claro) 70%, #F7F7F7 100%); }
.login__panel { display: flex; align-items: center; padding: 3rem clamp(2rem, 5vw, 4.5rem); background: var(--blanco); }
.login__inner { width: 100%; max-width: 25rem; }
.login__logo { display: block; width: 230px; max-width: 100%; height: auto; margin-bottom: 2.75rem; }
.login__kicker { font-family: var(--titulo); font-weight: 400; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rojo); }
.login__title { margin: .5rem 0 1rem; font-family: var(--titulo); font-weight: 800; font-size: 2rem; line-height: 1.15; color: var(--gris); }
.login__lead { color: var(--texto); font-size: 1.0625rem; margin-bottom: 2rem; }
.login__foot { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--pista); font-size: .875rem; color: var(--suave); }

/* Campo solar: el sol (rojo AXIAL) sale y los seguidores lo siguen hasta mediodía */
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.field__arc { fill: none; stroke: var(--gris); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 2 9; }
.field__ground { stroke: var(--gris); stroke-opacity: .45; stroke-width: 1.5; }
.field__sun {
  fill: var(--rojo);
  offset-path: path("M 40 470 A 360 360 0 0 1 760 470");
  offset-rotate: 0deg;
  offset-distance: 36%;
  animation: sunrise 2.6s cubic-bezier(.33, 0, .2, 1) both;
}
.tracker__post { fill: var(--gris); opacity: .7; }
.tracker--far .tracker__post { opacity: .3; }
.tracker--far .tracker__panel rect { fill: var(--gris); opacity: .4; }
.tracker__panel rect { fill: var(--gris); }
.tracker__panel { transform: rotate(-20deg); animation: follow 2.6s cubic-bezier(.33, 0, .2, 1) both; }
@keyframes sunrise { from { offset-distance: 1%; } to { offset-distance: 36%; } }
@keyframes follow  { from { transform: rotate(-58deg); } to { transform: rotate(-20deg); } }

/* ---------- Páginas simples ---------- */
.plain { max-width: 36rem; margin: 0 auto; padding: 16vh 1.5rem 4rem; }
.plain__title { margin: 2.25rem 0 1rem; font-family: var(--titulo); font-weight: 800; font-size: 1.875rem; line-height: 1.15; color: var(--gris); }
.plain p + p { margin-top: .75rem; }
.plain form { margin-top: 2rem; }

/* ---------- Barra superior ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 68px; padding: .75rem clamp(1.25rem, 4vw, 3rem); background: var(--blanco); border-bottom: 1px solid var(--linea); }
.topbar__home { color: inherit; text-decoration: none; }
.topbar__user { display: flex; align-items: center; gap: 1.5rem; font-size: .9375rem; }
.topbar__nav { position: relative; padding: .35rem 0; color: var(--gris); font-weight: 600; text-decoration: none; }
.topbar__nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: transparent; }
.topbar__nav:hover::after { background: var(--linea); }
.topbar__nav.is-current::after { background: var(--rojo); }
.topbar__name { color: var(--suave); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Páginas con barra superior ---------- */
.home { max-width: 64rem; padding: 3rem clamp(1.25rem, 4vw, 3rem); }
.home__title { font-family: var(--titulo); font-weight: 800; font-size: clamp(1.75rem, 3.4vw, 2.25rem); line-height: 1.15; color: var(--gris); }
.home__lead { margin-top: .75rem; color: var(--texto); font-size: 1.0625rem; max-width: 60ch; }

/* ---------- Cuadro de mando ---------- */
.dash { max-width: 90rem; padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 4rem; }
.dash__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.25rem 2rem; }
.dash__kicker { font-family: var(--titulo); font-weight: 400; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rojo); margin-bottom: .4rem; }
.dash__title { font-family: var(--titulo); font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.1; color: var(--gris); letter-spacing: -.01em; }
.dash__meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); font-size: .9375rem; color: var(--suave); }
.dash__meta strong { color: var(--texto); font-weight: 700; }
.dash__aside { margin: -.25rem 0 1.75rem; font-size: .875rem; color: var(--suave); }
.dash .notice { margin-top: 1.25rem; }

.tabs { display: flex; gap: .25rem; padding: .25rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; }
.tabs__item { padding: .45rem 1.1rem; border-radius: 999px; color: var(--gris); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.tabs__item:hover { background: var(--gris-claro); }
.tabs__item.is-current { background: var(--gris); color: var(--blanco); }

/* Filtros */
.filters { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem 1.5rem 1.1rem; margin-bottom: 1.25rem; }
.filters__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .9rem 1.1rem; }
.fctl { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.fctl--wide { grid-column: span 2; }
.fctl__label { font-size: .8125rem; font-weight: 600; color: var(--suave); }
.fctl select, .fctl input { width: 100%; padding: .55rem .7rem; font: 400 .9375rem var(--font); color: var(--texto); background: var(--blanco); border: 1px solid #C9C9C9; border-radius: 6px; }
.fctl select:hover, .fctl input:hover { border-color: var(--gris); }
.fctl__pair { display: flex; gap: .4rem; }
.filters__actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.1rem; }
.filters__hint { margin-top: .8rem; font-size: .8125rem; color: var(--suave); }

/* Cifras clave */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-bottom: 1rem; }
.kpi { background: var(--blanco); padding: 1.35rem 1.5rem 1.4rem; }
.kpi__label { font-size: .875rem; font-weight: 600; color: var(--suave); }
.kpi__value { margin: .45rem 0 .35rem; font-family: var(--titulo); font-weight: 800; font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1.05; color: var(--gris); letter-spacing: -.01em; }
.kpi__note { font-size: .875rem; color: var(--suave); max-width: 32ch; }
.kpi__value.is-up { color: var(--sube); }
.kpi__value.is-down { color: var(--baja); }

/* Paneles */
.dash__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; align-items: start; }
.panel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem 1.6rem 1.6rem; min-width: 0; }
.panel__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.panel__title { font-family: var(--titulo); font-weight: 800; font-size: 1.0625rem; line-height: 1.3; color: var(--gris); }
.panel__sub { margin-top: .25rem; font-size: .875rem; color: var(--suave); }
.panel__empty, .panel__more { margin-top: 1rem; color: var(--suave); }
.panel__foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--pista); font-size: .8125rem; color: var(--suave); max-width: 115ch; }
.panel__foot strong { color: var(--texto); font-weight: 700; }
.pending { margin-bottom: 1rem; }

/* Tarjeta plegable (cerrada al entrar) */
.fold { margin-bottom: 1rem; padding: 0; }
.fold__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.6rem; cursor: pointer; list-style: none; }
.fold__summary::-webkit-details-marker { display: none; }
.fold__summary > span { display: flex; flex-direction: column; }
.fold__summary::after { content: ""; flex: none; width: .6rem; height: .6rem; margin-right: .25rem; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; }
.fold[open] > .fold__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold__summary:hover { background: #FAFAFA; border-radius: var(--radio); }
.fold > .bars, .fold > .panel__empty { margin: 0 1.6rem 1.5rem; }

/* Desplegable con casillas (varios años / meses) */
.mdrop { position: relative; }
.mdrop > summary { list-style: none; cursor: pointer; padding: .55rem 2rem .55rem .7rem; border: 1px solid #C9C9C9; border-radius: 6px; background: var(--blanco); font-size: .9375rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.mdrop > summary::-webkit-details-marker { display: none; }
.mdrop > summary::after { content: ""; position: absolute; right: .8rem; top: 50%; width: .4rem; height: .4rem; border-right: 1.5px solid var(--gris); border-bottom: 1.5px solid var(--gris); transform: translateY(-70%) rotate(45deg); }
.mdrop > summary:hover { border-color: var(--gris); }
.mdrop__list { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 18rem; overflow: auto; padding: .4rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.mdrop__list--cols { display: grid; grid-template-columns: repeat(2, minmax(7.5rem, 1fr)); }
.mdrop__item { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: 4px; font-size: .9375rem; white-space: nowrap; cursor: pointer; }
.mdrop__item:hover { background: var(--gris-claro); }
.mdrop__item input { accent-color: var(--gris); }

/* Barras ordenadas: una serie, un color (gris corporativo) */
.bars { list-style: none; margin: 1.15rem 0 0; padding: 0; display: grid; gap: .15rem; }
.bars__row { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 8.5rem; align-items: center; gap: .9rem; padding: .3rem .45rem; margin: 0 -.45rem; border-radius: 6px; font-size: .875rem; }
.bars__row:hover, .bars__row:focus-visible { background: var(--gris-claro); }
.bars__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__track { height: 12px; }
.bars__bar { display: block; height: 12px; min-width: 2px; background: var(--dato); border-radius: 0 6px 6px 0; }
.bars__value { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.bars__share { font-weight: 400; color: var(--suave); margin-left: .3rem; }

/* Tablas */
.table-wrap { overflow-x: auto; margin-top: 1rem; }
.table-wrap--tall { max-height: 70vh; overflow: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: .875rem; }
.grid th, .grid td { padding: .65rem .9rem .65rem 0; border-bottom: 1px solid var(--pista); text-align: left; vertical-align: top; }
.grid thead th { font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); border-bottom: 1.5px solid var(--gris); white-space: nowrap; vertical-align: bottom; }
.grid tbody th { font-weight: 400; }
.grid tbody tr:hover { background: #FAFAFA; }
.grid tr.is-current { background: var(--gris-claro); }
.grid tr.is-total th, .grid tr.is-total td { font-weight: 700; border-top: 1.5px solid var(--gris); border-bottom: 0; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid a { color: var(--gris); font-weight: 700; text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 3px; }
.grid a:hover { text-decoration-color: var(--gris); }
.grid__no { display: block; font-weight: 700; white-space: nowrap; color: var(--gris); }
.grid__desc { display: block; color: var(--suave); max-width: 36ch; }
.grid--compact th, .grid--compact td { padding-top: .5rem; padding-bottom: .5rem; }
.grid--lines thead th { position: sticky; top: 0; background: var(--blanco); z-index: 1; }
.grid--lines .sticky { position: sticky; left: 0; background: var(--blanco); z-index: 2; min-width: 16rem; box-shadow: 1px 0 0 var(--pista); }
.grid--lines thead .sticky { z-index: 3; }
.grid--lines tfoot td, .grid--lines tfoot th { position: sticky; bottom: 0; background: var(--gris-claro); }

.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.tag { font-size: .75rem; line-height: 1; padding: .3rem .55rem; border-radius: 999px; background: var(--gris-claro); color: var(--gris); white-space: nowrap; }
.dash__head .tag { background: var(--blanco); border: 1px solid var(--linea); }

.sortbar { margin-top: 1rem; font-size: .875rem; color: var(--suave); display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.sortbar__item { position: relative; color: var(--gris); text-decoration: none; padding-bottom: 2px; }
.sortbar__item:hover { color: var(--texto); }
.sortbar__item.is-current { font-weight: 700; box-shadow: inset 0 -2px 0 var(--gris); }

/* Ficha de proyecto */
.back { margin-bottom: 1.5rem; }
.proj__desc { margin-top: .4rem; font-family: var(--titulo); font-weight: 400; font-size: 1.125rem; color: var(--gris); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem 1.5rem; margin: 1.5rem 0 1.25rem; padding: 1.1rem 1.4rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.facts dt { font-size: .8125rem; font-weight: 600; color: var(--suave); }
.facts dd { margin: .2rem 0 0; font-weight: 700; color: var(--texto); }

/* ---------- Accesos ---------- */
.grant { margin: 2.5rem 0 2.75rem; }
.grant .notice { margin-top: 1rem; }
.grant__label { display: block; font-family: var(--titulo); font-weight: 800; font-size: 1.0625rem; color: var(--gris); margin-bottom: .7rem; }
.grant__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.grant__input { flex: 1 1 18rem; max-width: 26rem; padding: .7rem .9rem; font: 400 1rem var(--font); color: var(--texto); background: var(--blanco); border: 1px solid #C9C9C9; border-radius: 6px; }
.grant__input:hover { border-color: var(--gris); }
.grant__check { display: inline-flex; align-items: center; gap: .45rem; font-size: .9375rem; cursor: pointer; }
.grant__check input { width: 1.05rem; height: 1.05rem; accent-color: var(--gris); }
.grant__hint { margin-top: .6rem; font-size: .875rem; color: var(--suave); }

.people { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.people th { text-align: left; font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); padding: .8rem 1rem; border-bottom: 1.5px solid var(--gris); }
.people td { padding: 1rem; border-bottom: 1px solid var(--pista); vertical-align: top; }
.people__email { font-weight: 700; }
.people__name { display: block; color: var(--suave); font-size: .875rem; margin-top: .15rem; }
.people__me { font-size: .8125rem; color: var(--suave); margin-left: .35rem; }
.people__muted { color: var(--suave); }
.people__actions { text-align: right; white-space: nowrap; }
.people__actions form { display: inline; margin-left: 1.25rem; }
.people__empty { margin-top: 1.25rem; color: var(--suave); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .login__panel, .login__inner { min-width: 0; }
  .login__sky { min-height: 34vh; }
  .login__logo { width: 180px; margin-bottom: 2rem; }
  .login__panel { align-items: flex-start; padding: 2.5rem 1.5rem 3rem; }
  .topbar__name, .brand__product { display: none; }
  .people thead { display: none; }
  .people tr { display: block; padding: 1rem; border-bottom: 1px solid var(--pista); }
  .people td { display: block; padding: .1rem 0; border: 0; }
  .people__actions { text-align: left; white-space: normal; padding-top: .5rem !important; }
  .people__actions form { margin: 0 1.25rem 0 0; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .fctl--wide { grid-column: auto; }
  .bars__row { grid-template-columns: minmax(0, 1fr) 7.5rem; }
  .bars__track { grid-column: 1 / -1; grid-row: 2; }
  .topbar__user { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .field__sun, .tracker__panel { animation: none; }
}