/* ==========================================================================
   El Camino DT — EL CLUB, LA SALA DE LA COMISIÓN DIRECTIVA
   --------------------------------------------------------------------------
   11/10/2026. La mezcla de la A y la E que eligió Alberto: la foto de la sala
   de reuniones de fondo, en su pantalla el informe de cómo te ven, y abajo la
   mesa de madera con cada miembro en su lugar. Lo pinta
   `pantalla-club-comision.js`. Prefijo `cdir`: `.sala__*` es de la sala de
   prensa (`seleccion.css`). El escudo y la marca salen de `oficina-club.css`.
   Cero tokens nuevos.
   ========================================================================== */

/* LA SALA: la foto ocupa toda la pantalla, apagada para que se lea encima. */
.cdir {
  --madera-a: hsl(28 42% 26%);
  --madera-b: hsl(26 45% 15%);
  position: relative; min-width: 0; min-height: calc(100vh / var(--escala-sitio, 1) - 8rem);
  display: flex; flex-direction: column; gap: clamp(16px, 2.2vh, 32px);
  padding: clamp(14px, 1.8vh, 28px) clamp(16px, 4vw, 64px) 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.25) 38%, rgb(0 0 0 / 0.6) 62%, rgb(0 0 0 / 0.85) 100%),
    radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--nac-a, var(--accent)) 16%, transparent), transparent 60%),
    url('../assets/fotos/modal-oficina-4.jpg') center 52% / cover no-repeat,
    var(--bg-base, #070707);
}
.cdir .sube { color: var(--verde-300); }
.cdir .baja { color: var(--clay-300); }
.cdir em { font-style: normal; color: var(--accent-texto); font-weight: 700; }
.cdir__nota { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-secondary); }
.cdir__nota strong { color: var(--text-primary); }
.cdir .label { font-size: var(--fs-2xs); }
.cdir__link { color: var(--accent-texto); font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .cdir__link:hover { text-decoration: underline; } }

/* --------------------------------------------------------------------------
   1. LA PANTALLA DE LA SALA
   -------------------------------------------------------------------------- */
.cdir__pantalla {
  position: relative; align-self: center; width: min(100%, 1120px);
  display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 24px);
  padding: clamp(16px, 2.6vh, 28px) clamp(20px, 3vw, 44px);
  border: 10px solid #0b0b0c; border-radius: 12px;
  background: linear-gradient(160deg, hsl(222 50% 15% / 0.94), hsl(225 40% 5% / 0.96) 72%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 80px rgb(0 0 0 / 0.75), 0 0 120px color-mix(in srgb, var(--nac-a, #3c5ac8) 22%, transparent);
  animation: pre-entra 260ms var(--ease-entrada) both;
}
.cdir__pantalla-cab { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cdir__pantalla-cab .cdir__escudo { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.cdir__pantalla-cab .franja-club__migas { justify-content: center; }
.cdir__ante { margin: 0 0 4px; color: var(--text-secondary); white-space: normal; }
/* `franja-del-club.js` vuelve migas el rótulo: que parta en renglones y no corte el club. */
.cdir__ante.franja-club__migas { flex-wrap: wrap; row-gap: 2px; }
.cdir__ante.franja-club__migas a { overflow: visible; }
.cdir__titulo {
  margin: 0; color: var(--text-primary);
  font-size: clamp(1.9rem, 1.8vw + 0.8rem, 2.6rem); font-weight: 700; line-height: 0.95;
  font-stretch: var(--wd-condensed); text-transform: uppercase;
}
.cdir__escudo .oficlub__escudo { width: 64px; height: 64px; }
/* Las solapas de la sección (El club / Pretemporada) que mete `franja-del-club.js`. */
.cdir__pantalla .franja-club__subs--en-hero { position: absolute; right: clamp(20px, 3vw, 44px); bottom: calc(100% + 18px); }

.cdir__tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.cdir__juez {
  --tono: var(--accent);
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center;
  padding-top: var(--sp-5); border-top: 3px solid var(--tono);
}
.cdir__juez--bien { --tono: var(--verde-400); }
.cdir__juez--neutro { --tono: #e0a23a; }
.cdir__juez--mal { --tono: var(--danger); }
.cdir__juez .label { color: var(--text-muted); }
.cdir__n {
  font-size: clamp(3.4rem, 4.4vw, 5.2rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.01em;
  font-stretch: var(--wd-condensed); font-variant-numeric: tabular-nums; color: var(--tono);
}
.cdir__juez--bien .cdir__n, .cdir__juez--bien .cdir__palabra { color: var(--verde-300); }
.cdir__juez--mal .cdir__n, .cdir__juez--mal .cdir__palabra { color: var(--clay-300); }
.cdir__juez--neutro .cdir__palabra { color: #e8b04a; }
.cdir__palabra { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); }
.cdir__frase { margin: 6px auto 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); max-width: 36ch; text-wrap: balance; }

/* --------------------------------------------------------------------------
   2. LA MESA: la madera de lado a lado y los cuatro lugares encima
   -------------------------------------------------------------------------- */
.cdir__mesa {
  position: relative; margin: auto calc(-1 * clamp(16px, 4vw, 64px)) 0;
  padding: clamp(18px, 2.4vh, 36px) clamp(16px, 4vw, 64px);
  background:
    repeating-linear-gradient(92deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--madera-a), var(--madera-b));
  border-top: 3px solid hsl(26 40% 10%);
  box-shadow: inset 0 22px 40px rgb(0 0 0 / 0.5), 0 -10px 30px rgb(0 0 0 / 0.35);
}
.cdir__lugares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); align-items: stretch; }
.cdir__lugar {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: var(--sp-7);
  border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.12);
  background: linear-gradient(180deg, rgb(26 26 28 / 0.97), rgb(12 12 13 / 0.98));
  box-shadow: 0 16px 26px rgb(0 0 0 / 0.55);
  animation: pre-entra 260ms var(--ease-entrada) both; animation-delay: calc(80ms + var(--i, 0) * 50ms);
}
.cdir__lugar:nth-child(2) { --i: 1; } .cdir__lugar:nth-child(3) { --i: 2; } .cdir__lugar:nth-child(4) { --i: 3; }
.cdir__lugar--tuyo { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cdir__placa { display: flex; align-items: center; gap: var(--sp-5); }
.cdir__placa b { display: block; color: var(--text-primary); font-size: var(--fs-md); line-height: 1.2; }
.cdir__placa .label { color: var(--text-muted); }
.cdir__lugar--tuyo .cdir__av { background: color-mix(in srgb, var(--accent) 18%, #1a1a1c); border-color: var(--accent); color: var(--accent-texto); }
.cdir__av {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #2a2a2e; border: 2px solid color-mix(in srgb, var(--nac-a, #888) 55%, rgb(255 255 255 / 0.25));
  color: var(--text-primary); font-weight: 800; font-size: var(--fs-sm);
}
.cdir__dato { display: grid; justify-items: center; gap: 2px; padding: 10px 0; text-align: center; border-top: 1px solid rgb(255 255 255 / 0.08); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.cdir__dato > b, .cdir__par b {
  color: var(--text-primary); font-size: clamp(2.2rem, 2.6vw, 2.9rem); font-weight: 700; line-height: 1;
  font-stretch: var(--wd-condensed); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cdir__dato .label, .cdir__par .label { color: var(--text-muted); }
.cdir__dato--bien > b, .cdir__dato--bien .cdir__par > div:last-child b { color: var(--verde-300); }
.cdir__dato--neutro > b, .cdir__dato--neutro .cdir__par > div:last-child b { color: #e8b04a; }
.cdir__dato--mal > b, .cdir__dato--mal .cdir__par > div:last-child b { color: var(--clay-300); }
.cdir__dato--vivo > b { color: var(--accent-texto); }
.cdir__par { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cdir__par--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cdir__par > div { display: grid; justify-items: center; gap: 2px; }
.cdir__par > div + div { border-left: 1px solid rgb(255 255 255 / 0.08); }
.cdir__par--tres b { font-size: clamp(1.7rem, 2vw, 2.2rem); }
.cdir__centro { text-align: center; }
.cdir__dice { margin: 0; text-align: center; color: var(--text-primary); font-size: var(--fs-md); font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.cdir__pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-3); }
/* LOS BOTONES DE LA MESA, todos iguales: el mismo alto y el ancho del cartel.
   Lo que los distingue es el peso —uno lleno, el resto con borde, la renuncia
   en rojo—, no el tamaño. */
.cdir__pie .action { width: 100%; height: 44px; font-size: var(--fs-sm); font-weight: 700; }
.cdir__pie .action:disabled { opacity: 1; }
.cdir__borrar {
  align-self: center; padding: 2px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-2xs); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) { .cdir__borrar:hover { color: var(--clay-300); } }

/* Los renglones de dato de cada lugar. */
.cdir__renglones { margin: 0; display: grid; }
.cdir__renglones div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); padding: 8px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.cdir__renglones div:last-child { border-bottom: 0; }
.cdir__renglones dt { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }
.cdir__renglones dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }

/* La vara del presidente: tres tramos y «Vos». */
.cdir__vara { margin: 0; padding: 20px 0 0; list-style: none; display: flex; }
.cdir__vara + .cdir__leyenda { margin-top: 8px; }
.cdir__tramo { position: relative; flex: var(--n, 1) 1 0; min-width: 14px; border-top: 6px solid var(--line-strong); border-radius: 3px; }
.cdir__leyenda { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: var(--fs-2xs); color: var(--text-secondary); }
.cdir__leyenda li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cdir__leyenda li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.cdir__leyenda b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cdir__leyenda--bien::before { background: var(--verde-400) !important; }
.cdir__leyenda--neutro::before { background: #e0a23a !important; }
.cdir__leyenda--mal::before { background: var(--danger) !important; }
.cdir__tramo + .cdir__tramo { margin-left: 2px; }
.cdir__tramo--bien { border-top-color: var(--verde-400); }
.cdir__tramo--neutro { border-top-color: #e0a23a; }
.cdir__tramo--mal { border-top-color: var(--danger); }
.cdir__vos {
  position: absolute; left: var(--p); bottom: calc(100% - 7px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-texto); line-height: 1;
}
.cdir__vos::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #111; }

/* El orden del día del secretario. */
.cdir__orden { margin: 0; padding: 0; list-style: none; display: grid; }
.cdir__orden li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: 9px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.cdir__orden li:last-child { border-bottom: 0; }
.cdir__orden b { color: var(--text-primary); font-size: var(--fs-sm); }
.cdir__estado { flex: none; padding: 4px 11px; border-radius: 999px; white-space: nowrap; font-size: var(--fs-2xs); font-weight: 700; border: 1px solid var(--line-strong); color: var(--text-secondary); }
.cdir__estado--bien { border-color: color-mix(in srgb, var(--verde-400) 60%, transparent); color: var(--verde-300); }
.cdir__estado--vivo { border-color: var(--accent); color: var(--accent-texto); }

/* Tu silla: lo que cuesta irse y la puerta. */
.cdir__costo { text-align: center; }
.cdir__pie .cdir__renunciar { background: none; border: 1px solid var(--danger); color: var(--clay-300); }
@media (hover: hover) { .cdir__renunciar:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--text-primary); } }

/* La ventana de las ofertas de marca. */
.cdir__ofertas { width: min(640px, calc(100vw - 2 * var(--sp-6))); }
.cdir__ofertas-lista { margin: var(--sp-6) 0; padding: 0; list-style: none; display: grid; gap: var(--sp-4); }
.cdir__ofertas-lista li { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line-hairline); border-radius: var(--r-md); background: var(--bg-raised); }
.cdir__ofertas-lista li > span { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.cdir__ofertas-lista b { color: var(--text-primary); }
.cdir__ofertas-lista small { color: var(--text-secondary); font-size: var(--fs-xs); }
.cdir__ofertas .sube { color: var(--verde-300); font-weight: 700; }
.cdir__ofertas .marca-logo { width: 32px; height: 32px; flex: none; color: var(--text-primary); background-color: currentColor; -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat; }

/* --------------------------------------------------------------------------
   EN ANGOSTO
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cdir__lugares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cdir { min-height: 0; gap: var(--sp-6); background-position: center top, center, 62% 0; background-size: auto, auto, auto 520px; background-repeat: no-repeat; }
  .cdir__pantalla { border-width: 6px; padding: var(--sp-6); }
  .cdir__escudo .oficlub__escudo { width: 44px; height: 44px; }
  .cdir__tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .cdir__n { font-size: 2.6rem; }
  .cdir__palabra { font-size: var(--fs-sm); line-height: 1.2; }
  .cdir__frase { display: none; }
  .cdir__pantalla-cab .cdir__escudo { position: static; transform: none; order: -1; margin-bottom: var(--sp-4); }
  .cdir__lugares { grid-template-columns: minmax(0, 1fr); }
  .cdir__lugar { padding: var(--sp-6); }
  .cdir__pantalla .franja-club__subs--en-hero { position: static; }
}