@import url("tokens.css?v=6");

/* Sistemas PHN (proher.app). Mismo diseño que mi-panel (phn-panel/css/mi-panel.css y mi-v2.css):
   fondo #F5F5F7, tarjetas blancas de radio 22, verde que rellena con letra blanca, fuente del sistema.
   Celular (< 673): barra inferior · tablet (673-1023): riel de íconos · escritorio (>= 1024): menú lateral con logo. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--phn-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--phn-text);
  background: var(--phn-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--phn-focus); outline-offset: 2px; }
.icono { width: 20px; height: 20px; flex: none; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ botones y campos */
.boton {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 16px; width: 100%;
  border: 0; border-radius: calc(var(--phn-radius-card) - 6px);
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.boton--primario { background: var(--phn-accent); color: var(--phn-on-accent); }
.boton--primario:hover { filter: brightness(.95); }
.boton--primario:disabled { opacity: .6; cursor: progress; }
.boton--suave { background: var(--phn-border); color: var(--phn-text); }
.boton--texto {
  width: auto; min-height: 44px; padding: 0 8px; background: none;
  color: var(--phn-accent-text); font-size: .875rem;
}
.campos { display: grid; gap: 10px; }
.campos label { font-size: .8125rem; font-weight: 600; color: var(--phn-text-2); }
.campos input {
  min-height: 46px; padding: 0 14px; border: 0;
  border-radius: var(--phn-radius-field); background: var(--phn-surface-2); color: var(--phn-text);
}
.ayuda { font-size: .8125rem; color: var(--phn-text-2); }
.error, .correcto, .aviso { border-radius: calc(var(--phn-radius-card) - 6px); padding: 12px 14px; font-size: .8125rem; line-height: 1.45; }
.error { background: var(--phn-danger-bg); color: var(--phn-danger-fg); }
.correcto { background: var(--phn-ok-bg); color: var(--phn-ok-fg); }
.aviso { background: var(--phn-warn-bg); color: var(--phn-warn-fg); }

/* ------------------------------------------------------------ login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; }
.login__tarjeta {
  width: min(100%, 400px); display: grid; gap: 16px;
  background: var(--phn-surface); border-radius: calc(var(--phn-radius-card) + 2px);
  box-shadow: var(--phn-shadow-card); padding: 28px 22px;
}
.login__logo { width: 160px; height: auto; }
.login h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; }
.login__bajada { color: var(--phn-text-2); font-size: .9375rem; }

/* ------------------------------------------------------------ shell */
.ap { --ancho: 100%; min-height: 100dvh; padding-bottom: 24px; }
.ap-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 14px 16px 0; }
.ap-cab__izq { display: flex; align-items: center; gap: 8px; }
.ap-menu-boton {
  width: 44px; height: 44px; border: 0; border-radius: 14px; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--phn-surface); color: var(--phn-text); box-shadow: var(--phn-shadow-card);
}
.ap-menu-boton .icono { width: 22px; height: 22px; }
.ap-marca { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; }
.ap-marca img { width: 32px; height: 32px; object-fit: contain; }
.ap-quien { display: flex; align-items: center; gap: 8px; text-align: right; }
.ap-quien b { display: block; font-size: .8125rem; }
.ap-quien small { font-size: .6875rem; color: var(--phn-text-2); }
.ap-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--phn-accent-soft); color: var(--phn-accent-soft-text); font-size: .875rem; font-weight: 700;
}
.ap-main { max-width: var(--ancho); margin: 0 auto; padding: 14px 16px 20px; display: grid; gap: 16px; }
.ap-main > * { min-width: 0; }
.ap-pantalla { display: grid; gap: 20px; min-width: 0; }

/* Menú: en celular y tablet es un desplegable bajo la cabecera; en escritorio, el panel lateral (más abajo). */
.ap-nav {
  position: fixed; z-index: 60; top: 66px; left: 12px; right: 12px; max-height: calc(100dvh - 80px); overflow-y: auto;
  display: none; flex-direction: column; gap: 4px; padding: 10px;
  background: var(--phn-surface); border-radius: var(--phn-radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14), 0 0 0 1px var(--phn-border);
}
.ap-nav.is-abierto { display: flex; }
.ap-velo { position: fixed; inset: 0; z-index: 55; background: rgba(29, 29, 31, .18); }
.ap-nav__logo { display: none; }
.ap-nav__lista { display: flex; flex-direction: column; gap: 2px; }
.ap-nav__titulo { margin: 10px 14px 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--phn-text-2); }
.ap-nav__item {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; width: 100%;
  border: 0; border-radius: 14px; background: none; color: var(--phn-text); font-size: .9375rem; font-weight: 500;
  cursor: pointer; text-decoration: none; text-align: left;
}
.ap-nav__item span { flex: 1; min-width: 0; line-height: 1.25; padding-block: 6px; }
.ap-nav__item .icono { width: 22px; height: 22px; color: var(--phn-text-2); }
.ap-nav__item:hover { background: var(--phn-neutral-bg); }
.ap-nav__item.is-activo { background: var(--phn-accent-soft); color: var(--phn-accent-soft-text); font-weight: 700; }
.ap-nav__item.is-activo .icono { color: var(--phn-accent-text); }
.ap-nav__item .ap-nav__ext { width: 16px; height: 16px; flex: none; }
.ap-nav__salir { margin-top: 6px; border-top: 1px solid var(--phn-border); border-radius: 0 0 14px 14px; }

/* ------------------------------------------------------------ títulos */
.ap-titulo h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.025em; }
.ap-titulo p { margin-top: 6px; color: var(--phn-text-2); font-size: .9375rem; }
.ap-seccion { display: grid; gap: 12px; }
.ap-seccion__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ap-seccion__cab h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.ap-nota { font-size: .8125rem; color: var(--phn-text-2); }

/* control segmentado (periodo) */
.ap-seg { display: inline-flex; padding: 3px; border-radius: var(--phn-radius-field); background: var(--phn-border); }
.ap-seg button {
  min-height: 40px; min-width: 64px; padding: 0 12px; border: 0; background: transparent;
  border-radius: calc(var(--phn-radius-field) - 2px); color: var(--phn-text-2); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.ap-seg button[aria-pressed="true"] { background: var(--phn-surface); color: var(--phn-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* ------------------------------------------------------------ tablero (mi-v2.css) */
.mv-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mv-kpi {
  --kf: var(--phn-neutral-fg); --kb: var(--phn-neutral-bg);
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  border-radius: var(--phn-radius-card); background: var(--kb); min-width: 0;
}
.mv-kpi--ok { --kf: var(--phn-ok-fg); --kb: var(--phn-ok-bg); }
.mv-kpi--info { --kf: var(--phn-info-fg); --kb: var(--phn-info-bg); }
.mv-kpi--warn { --kf: var(--phn-warn-fg); --kb: var(--phn-warn-bg); }
.mv-kpi--team { --kf: var(--phn-team-fg); --kb: var(--phn-team-bg); }
.mv-kpi--danger { --kf: var(--phn-danger-fg); --kb: var(--phn-danger-bg); }
.mv-kpi__etq { font-size: .78rem; font-weight: 600; color: var(--kf); line-height: 1.25; }
.mv-kpi__val { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.mv-kpi__val--sin { font-size: .95rem; font-weight: 600; color: var(--kf); }
.mv-kpi__nota, .mv-kpi__cambio { font-size: .75rem; color: var(--kf); font-weight: 600; line-height: 1.3; }
.mv-kpi__cambio--baja { color: var(--phn-danger-fg); }
.mv-spark { width: 100%; height: 32px; margin-top: 4px; color: var(--kf); }
.mv-spark__linea { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mv-spark__area { fill: currentColor; opacity: .14; }

.mv-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.mv-bloque {
  background: var(--phn-surface); border-radius: var(--phn-radius-card); padding: 18px;
  box-shadow: var(--phn-shadow-card); display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.mv-bloque--ancho { grid-column: 1 / -1; }
.mv-bloque h3 { font-size: .95rem; font-weight: 700; }
.mv-bloque__nota { font-size: .78rem; color: var(--phn-text-2); }
.mv-vacio { font-size: .85rem; color: var(--phn-text-2); }

.mv-barras, .mv-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mv-barra, .mv-ranking li { display: grid; grid-template-columns: minmax(96px, 38%) 1fr auto; align-items: center; gap: 8px; font-size: .82rem; }
.mv-ranking li { grid-template-columns: 20px minmax(80px, 36%) 1fr auto; }
.mv-barra small { grid-column: 2 / -1; color: var(--phn-text-2); font-size: .72rem; }
.mv-barra__etq, .mv-ranking__etq { overflow-wrap: anywhere; line-height: 1.25; }
.mv-barra__pista { height: 8px; border-radius: 999px; background: var(--phn-neutral-bg); overflow: hidden; display: block; }
.mv-barra__pista i { display: block; height: 100%; border-radius: 999px; background: var(--phn-accent); }
.mv-ranking__n {
  width: 20px; height: 20px; border-radius: 50%; background: var(--phn-accent-soft); color: var(--phn-accent-soft-text);
  font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.mv-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; align-items: end; height: 150px; }
.mv-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.mv-col i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--phn-chart-1); opacity: .45; }
.mv-col.is-mayor i { opacity: 1; }
.mv-col span { font-size: .62rem; color: var(--phn-text-2); height: 12px; line-height: 12px; margin-top: 4px; white-space: nowrap; }
.mv-anillo { --tam: 96px; position: relative; width: var(--tam); height: var(--tam); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mv-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mv-anillo circle { stroke-width: 3.4; }
.mv-anillo__fondo { stroke: var(--phn-neutral-bg); }
.mv-anillo__arco { stroke: var(--phn-accent); stroke-linecap: round; transform-origin: center; transform: rotate(90deg) scale(1, -1); transform-box: fill-box; }
.mv-anillo--warn .mv-anillo__arco { stroke: var(--phn-warn-fg); }
.mv-anillo b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.mv-par { display: flex; align-items: center; gap: 16px; }
.mv-par ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .82rem; }
.mv-par li b { font-size: 1rem; margin-right: 4px; }
.mv-lista { list-style: none; margin: 0; padding: 0; }
.mv-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--phn-border); font-size: .85rem; }
.mv-lista li:first-child { border-top: 0; padding-top: 0; }
.mv-lista small { color: var(--phn-text-2); }
.mv-cargando { height: 120px; border-radius: var(--phn-radius-card); background: linear-gradient(90deg, var(--phn-neutral-bg), var(--phn-surface), var(--phn-neutral-bg)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ------------------------------------------------------------ sistemas */
.modulo { display: grid; gap: 10px; }
.modulo h3 { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--phn-text-2); }
.mosaicos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mosaico {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px;
  background: var(--phn-surface); border-radius: var(--phn-radius-card); box-shadow: var(--phn-shadow-card);
  color: inherit; text-decoration: none;
}
a.mosaico:hover { box-shadow: var(--phn-shadow-card), 0 0 0 2px var(--phn-accent-soft); }
.mosaico__icono {
  width: 44px; height: 44px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--phn-accent); color: var(--phn-on-accent);
}
.mosaico__texto { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mosaico__texto strong { font-size: .95rem; }
.mosaico__texto span { font-size: .8125rem; color: var(--phn-text-2); }
.mosaico__flecha { color: var(--phn-text-2); }
.mosaico--pronto { opacity: .6; }
.mosaico--pronto .mosaico__icono { background: var(--phn-neutral-bg); color: var(--phn-neutral-fg); }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 600; background: var(--phn-neutral-bg); color: var(--phn-neutral-fg); justify-self: start; }

/* ------------------------------------------------------------ cuenta */
.tarjeta { background: var(--phn-surface); border-radius: var(--phn-radius-card); box-shadow: var(--phn-shadow-card); padding: 20px 18px; display: grid; gap: 14px; max-width: 520px; }
.tarjeta h2 { font-size: 1.0625rem; font-weight: 700; }

/* ------------------------------------------------------------ anchos */
@media (min-width: 673px) {
  .ap-cab { margin: 22px 24px 0; }
  .ap-main { padding: 20px 24px 28px; }
  .ap-nav { left: auto; right: 24px; width: 340px; top: 74px; }
}
@media (min-width: 1024px) {
  .ap { padding-left: 264px; --ancho: 1180px; }
  .ap-cab { margin: 28px 32px 0; justify-content: flex-end; }
  .ap-cab__izq, .ap-velo { display: none; }
  .ap-main { padding: 24px 32px 40px; gap: 20px; }
  .ap-nav {
    display: flex; top: 0; left: 0; bottom: 0; right: auto; width: 264px; max-height: none;
    padding: 24px 14px; border-radius: 0; box-shadow: none;
    background: var(--phn-surface-nav); border-right: 1px solid var(--phn-border);
  }
  .ap-nav__logo { display: block; padding: 0 8px 18px; }
  .ap-nav__logo img { display: block; width: 100%; max-width: 150px; height: auto; }
  .ap-nav__salir { margin-top: auto; border-top: 0; border-radius: 14px; }
}
@media (min-width: 1500px) { .ap { --ancho: 1320px; } }

@media (prefers-reduced-motion: reduce) { .mv-cargando { animation: none; } }