/* Tablero de participación accionaria — sin recursos externos. Claro/oscuro según el sistema; móvil primero. */
:root {
  --fondo: #f3f5f8; --superficie: #ffffff; --superficie-2: #f8fafc; --borde: #e2e7ee;
  --texto: #111827; --texto-2: #4b5563; --texto-3: #6b7280;
  --acento: #1d4ed8; --acento-fuerte: #1e40af; --acento-suave: #eaf0fe;
  --aviso-fondo: #fff8e8; --aviso-borde: #f2c46d;
  --sube: #047857; --baja: #b91c1c;
  --ok: #047857; --ok-fondo: #e3f6ee; --parcial: #a15c00; --parcial-fondo: #fff1d6;
  --just: #3756a6; --just-fondo: #e8edfb; --mal: #b42318; --mal-fondo: #fde8e6;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --raya: rgba(255, 255, 255, .42); --texto-tramo: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c1016; --superficie: #151a22; --superficie-2: #1a2029; --borde: #29313d;
    --texto: #e7ecf2; --texto-2: #b4bdc8; --texto-3: #8a94a3;
    --acento: #8fb0ff; --acento-fuerte: #3b63d6; --acento-suave: #18233a;
    --aviso-fondo: #261f12; --aviso-borde: #7a5d22;
    --sube: #34d399; --baja: #f87171;
    --ok: #4ade80; --ok-fondo: #12291d; --parcial: #fbbf24; --parcial-fondo: #2e2410;
    --just: #a5b8f5; --just-fondo: #1a2340; --mal: #f87171; --mal-fondo: #331516;
    --sombra: none; --raya: rgba(12, 16, 22, .45); --texto-tramo: #0c1016;
  }
}

/* Colores de cada Promotor (por orden: Principal primero) y de cada criterio */
.c0 { --c: #2563eb; } .c1 { --c: #d97706; } .c2 { --c: #059669; } .c3 { --c: #db2777; }
.c4 { --c: #7c3aed; } .c5 { --c: #0891b2; } .c6 { --c: #dc2626; } .c7 { --c: #4d7c0f; }
.k-C1 { --c: #64748b; } .k-C2 { --c: #4f46e5; } .k-C3a { --c: #0d9488; } .k-C3b { --c: #65a30d; }
.k-C4 { --c: #ea580c; } .k-C5 { --c: #ca8a04; }
@media (prefers-color-scheme: dark) {
  .c0 { --c: #6b9cff; } .c1 { --c: #f5b54a; } .c2 { --c: #34d399; } .c3 { --c: #f472b6; }
  .c4 { --c: #a78bfa; } .c5 { --c: #22d3ee; } .c6 { --c: #f87171; } .c7 { --c: #a3e635; }
  .k-C1 { --c: #94a3b8; } .k-C2 { --c: #818cf8; } .k-C3a { --c: #2dd4bf; } .k-C3b { --c: #a3e635; }
  .k-C4 { --c: #fb923c; } .k-C5 { --c: #facc15; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--acento); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
h2 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -.01em; }
h3 { font-size: 16.5px; margin: 28px 0 6px; }
.intro { color: var(--texto-2); margin: 0 0 14px; max-width: 78ch; }
.nota { color: var(--texto-3); font-size: 13px; margin: 8px 0 0; }
.sub { display: block; font-size: 11.5px; color: var(--texto-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.fuerte { font-weight: 700; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 10; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.barra-interior { max-width: 1120px; margin: 0 auto; padding: 10px 16px 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.marca img { border-radius: 8px; flex: none; }
.marca-titulo { display: block; font-weight: 700; font-size: 16px; line-height: 1.2; }
.marca-sub { display: block; font-size: 12px; color: var(--texto-3); }
.cuenta { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.cuenta form { margin: 0; }
.cuenta-nombre { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.boton-texto { font: inherit; font-size: 13.5px; color: var(--texto-2); background: none; border: 1px solid var(--borde); border-radius: 8px; padding: 5px 11px; cursor: pointer; }
.boton-texto:hover { background: var(--superficie-2); }
.secciones { max-width: 1120px; margin: 0 auto; padding: 0 16px 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.secciones::-webkit-scrollbar { display: none; }
.secciones a { white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.secciones a:hover { filter: brightness(.97); }

.contenido { max-width: 1120px; margin: 0 auto; padding: 18px 16px 8px; }
.seccion { margin-bottom: 44px; scroll-margin-top: 104px; }
.sello { color: var(--texto-3); font-size: 13px; margin: 0 0 12px; }

/* Aviso de cifras provisionales */
.aviso { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.aviso summary { cursor: pointer; }
.aviso ul { margin: 8px 0 2px; padding-left: 20px; color: var(--texto-2); }
.aviso li { margin: 3px 0; }

/* Tarjetas */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 18px; box-shadow: var(--sombra); min-width: 0; }
.heroe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 16px; margin-bottom: 16px; }
.heroe > .tarjeta:only-child { grid-column: 1 / -1; }
.etiqueta { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin: 0 0 8px; font-weight: 650; }
.cifra-grande { font-size: clamp(44px, 10vw, 58px); font-weight: 760; line-height: 1.02; margin: 0; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--acento); }
.cambio { font-size: 13.5px; color: var(--texto-3); margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.sube { color: var(--sube); } .baja { color: var(--baja); }
td.cambio { margin: 0; font-size: inherit; }
.datos-yo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 18px 0 0; }
.datos-yo dt { font-size: 12px; color: var(--texto-3); }
.datos-yo dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Reparto */
.grafico-reparto { display: block; margin: 4px 0 14px; }
.tramo { fill: var(--c); }
.raya { fill: var(--raya); }
.tramo-texto { fill: var(--texto-tramo); font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.leyenda { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda b { font-variant-numeric: tabular-nums; }
.muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.persona { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nombre-corto { display: none; }
.puesto { display: inline-block; min-width: 1.6em; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); margin: 14px 0 0; box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.tabla th { font-size: 12.5px; font-weight: 650; color: var(--texto-2); background: var(--superficie-2); white-space: nowrap; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla .centro { text-align: center; }
.tabla tfoot td { font-weight: 650; border-top: 2px solid var(--borde); border-bottom: none; background: var(--superficie-2); }
.tabla .fila-yo td { background: var(--acento-suave); }
.tabla-compacta th, .tabla-compacta td { padding: 8px 10px; }
.tabla-metricas th .muestra { margin-right: 5px; vertical-align: 0; }
td.documento { min-width: 220px; white-space: normal; }
td.documento a { text-decoration: none; font-weight: 550; }
td.documento a:hover { text-decoration: underline; }
.ruta { display: block; font-size: 11.5px; color: var(--texto-3); }

/* Indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.indicador { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--sombra); }
.indicador .valor { font-size: 23px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.indicador .rotulo { font-size: 12.5px; color: var(--texto-3); }

/* Criterios */
.pesos { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.peso { display: inline-flex; align-items: center; gap: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; }
.peso.inactivo { opacity: .55; }
.peso-valor { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 2px; }
.peso-valor s { font-weight: 400; color: var(--texto-3); margin-right: 2px; }
.barras-puntos { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 16px; display: grid; gap: 12px; margin: 16px 0 0; box-shadow: var(--sombra); }
.fila-puntos { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 14px; }
.fila-puntos-nombre { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.fila-puntos-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.pista { border-radius: 6px; overflow: hidden; background: var(--superficie-2); line-height: 0; }
.grafico-puntos { display: block; }
.grafico-puntos rect { fill: var(--c); }

/* Evolución */
.figura { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 12px 12px; box-shadow: var(--sombra); }
.grafico-evolucion { display: block; width: 100%; height: auto; }
.grafico-evolucion.compacto { display: none; }
.figura figcaption { margin-top: 8px; padding: 0 6px; }
.rejilla { stroke: var(--borde); stroke-width: 1; }
.rejilla-x { stroke-dasharray: 2 4; }
.eje { font-size: 11px; fill: var(--texto-3); font-variant-numeric: tabular-nums; }
.eje-y { text-anchor: end; dominant-baseline: middle; }
.eje-x { text-anchor: middle; }
.linea { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.punto-linea { fill: var(--c); stroke: var(--superficie); stroke-width: 1.5; }
.fin-linea { fill: var(--c); font-size: 12.5px; font-weight: 650; dominant-baseline: middle; }

/* Meses y desplegables */
details.mes { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; margin-bottom: 8px; box-shadow: var(--sombra); }
details.mes > summary { padding: 12px 16px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; list-style: none; }
details.mes > summary::-webkit-details-marker { display: none; }
details.mes > summary::before { content: "▸"; color: var(--texto-3); transition: transform .15s; }
details.mes[open] > summary::before { transform: rotate(90deg); }
details.mes .tabla-envoltura { margin: 0 12px 12px; box-shadow: none; }
.mes-nombre { font-weight: 650; }
.mes-estado { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; }
.mes-estado.estado-definitivo { color: var(--ok); background: var(--ok-fondo); border-color: transparent; }
.mes-resumen { color: var(--texto-3); font-size: 13px; }
.desplegable { margin: 10px 0 0; }
.desplegable > summary { cursor: pointer; color: var(--acento); font-weight: 600; font-size: 14px; padding: 4px 0; }

/* Asistencia */
.matriz td.celda { font-variant-numeric: tabular-nums; }
.matriz .simbolo { font-weight: 800; font-size: 15px; }
.fecha-sesion { font-weight: 650; white-space: nowrap; }
.celda.valida { background: var(--ok-fondo); color: var(--ok); }
.celda.parcial { background: var(--parcial-fondo); color: var(--parcial); }
.celda.justificada { background: var(--just-fondo); color: var(--just); }
.celda.injustificada { background: var(--mal-fondo); color: var(--mal); }
.celda.exento, .celda.vacia { color: var(--texto-3); }
.tabla .fila-yo td.celda.valida { background: var(--ok-fondo); }
.celda .sub { color: inherit; opacity: .85; white-space: nowrap; }
.tope { color: var(--parcial); }
.leyenda-estados { margin-top: 12px; font-size: 13px; color: var(--texto-2); gap: 8px 16px; }
.celda-mini { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 800; font-size: 12px; }
.celda-mini.valida { background: var(--ok-fondo); color: var(--ok); }
.celda-mini.parcial { background: var(--parcial-fondo); color: var(--parcial); }
.celda-mini.justificada { background: var(--just-fondo); color: var(--just); }
.celda-mini.injustificada { background: var(--mal-fondo); color: var(--mal); }
.celda-mini.exento { background: var(--superficie-2); color: var(--texto-3); border: 1px solid var(--borde); }

/* Método */
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.columnas h3 { margin-top: 8px; }
.pasos, .fuentes { padding-left: 20px; margin: 0; color: var(--texto-2); }
.pasos li, .fuentes li { margin-bottom: 7px; }
.fuentes b { color: var(--texto); }
#metodo > p { color: var(--texto-2); max-width: 80ch; margin: 0; }

.pie { max-width: 1120px; margin: 0 auto; padding: 18px 16px 40px; color: var(--texto-3); font-size: 12.5px; border-top: 1px solid var(--borde); }
.pie p { margin: 0; }

/* Entrada y mensajes */
.pagina-centrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.caja-entrada { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); max-width: 420px; width: 100%; padding: 32px 28px; text-align: center; }
.caja-entrada h1 { font-size: 23px; margin: 12px 0 2px; }
.caja-entrada .subtitulo { color: var(--texto-3); margin: 0 0 16px; font-size: 14px; }
.caja-entrada p { color: var(--texto-2); }
.logo-entrada { border-radius: 14px; }
.boton { display: inline-block; background: var(--acento-fuerte); color: #fff; padding: 12px 22px; border-radius: 10px; text-decoration: none; font-weight: 650; margin: 8px 0 4px; }
.boton:hover { filter: brightness(1.08); }
.boton-secundario { background: none; color: var(--texto); border: 1px solid var(--borde); }
.aviso-simple { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: 10px; padding: 10px 12px; }

/* Pantallas pequeñas */
@media (max-width: 760px) {
  .heroe { grid-template-columns: 1fr; }
  .columnas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .solo-amplio, .tramo-texto.chico, .nombre-largo { display: none; }
  .nombre-corto { display: inline; }
  /* tablas anchas: la primera columna (el nombre) queda fija al desplazar */
  .tabla th:first-child, .tabla td:first-child { position: sticky; left: 0; z-index: 1; background: var(--superficie); box-shadow: 1px 0 0 var(--borde); }
  .tabla thead th:first-child, .tabla tfoot td:first-child { background: var(--superficie-2); }
  .tabla .fila-yo td:first-child { background: var(--acento-suave); }
  .grafico-evolucion.amplio { display: none; }
  .grafico-evolucion.compacto { display: block; }
  .fila-puntos { grid-template-columns: 1fr; gap: 4px; }
  h2 { font-size: 20px; }
  .tabla th, .tabla td { padding: 9px 10px; }
}
@media (max-width: 480px) {
  .marca-sub, .cuenta-nombre { display: none; }
  .seccion { scroll-margin-top: 96px; }
  .tarjeta { padding: 16px; }
}