/* ============================================================
   PLATAFORMA · Vertex · módulo Congresos — estilos de gestion/ (login · panel por rol · paneles admin)
   Identidad del Congreso: consume ../../assets/css/tokens.css (propiedad de la sesión-web) sin editarlo.
   ============================================================ */
@import url("../../../assets/css/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--cea-font-body); font-size: 15px; line-height: 1.6;
  color: var(--cea-text); background: var(--cea-bg-gray);
}
a { color: var(--cea-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--cea-font-title); font-weight: 500; color: var(--cea-text); line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
p { margin: 0 0 12px; }
small, .muted { color: var(--cea-text-soft); }
code { font-size: 13px; background: #EEF3FA; padding: 1px 5px; border-radius: 3px; }
[hidden] { display: none !important; }

/* Topbar */
.pf-top { background: var(--cea-blue); color: #fff; }
.pf-top__in { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-top__brand { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--cea-font-title); font-weight: 500; font-size: 15px; }
.pf-top__brand img { height: 34px; width: auto; }
.pf-top__brand:hover { text-decoration: none; }
.pf-top__spacer { flex: 1; }
.pf-top__user { font-size: 13px; color: var(--cea-blue-light); display: flex; align-items: center; gap: 12px; }
.pf-top__user b { color: #fff; font-weight: 600; }
.pf-badge-env { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; background: #FFB74D; color: #3B2A00; padding: 2px 8px; border-radius: 3px; font-weight: 700; }
.pf-nav { background: #fff; border-bottom: 1px solid #E3E3E3; }
.pf-nav__in { max-width: 1240px; margin: 0 auto; padding: 0 12px; display: flex; gap: 2px; overflow-x: auto; }
.pf-nav a { display: block; padding: 12px 14px; color: var(--cea-text-soft); font-family: var(--cea-font-title); font-weight: 500; font-size: 14px; border-bottom: 3px solid transparent; white-space: nowrap; }
.pf-nav a.activo, .pf-nav a:hover { color: var(--cea-blue); border-bottom-color: var(--cea-blue); text-decoration: none; }

/* Layout */
.pf-main { max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; }
.pf-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pf-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .pf-grid--2 { grid-template-columns: 1fr; } }
.pf-card { background: #fff; border-radius: var(--cea-radius-card); box-shadow: var(--cea-shadow-card); padding: 20px 22px; }
.pf-card--flat { box-shadow: none; border: 1px solid #E6E6E6; }
.pf-card h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 17px; }
.pf-card__num { font-family: var(--cea-font-title); font-size: 34px; font-weight: 500; color: var(--cea-blue); line-height: 1; }
.pf-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 20px; }
.pf-kpi { background: #fff; border-radius: 8px; padding: 14px 16px; border-left: 4px solid var(--cea-blue); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.pf-kpi small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.pf-kpi b { font-family: var(--cea-font-title); font-size: 26px; font-weight: 500; color: var(--cea-text); }
.pf-kpi--warn { border-left-color: #E8A33D; } .pf-kpi--ok { border-left-color: #3AA76D; } .pf-kpi--bad { border-left-color: #D64545; }

/* Badges / estados */
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 12px; background: #EAEAEA; color: #444; white-space: nowrap; }
.badge--ok { background: #DDF3E5; color: #1E6B3A; }
.badge--warn { background: #FFF1D6; color: #7A4B00; }
.badge--bad { background: #FCE0E0; color: #8E1C1C; }
.badge--info { background: var(--cea-blue-light); color: var(--cea-blue-dark); }
.badge--muted { background: #EEE; color: #666; }

/* Botones (heredan la identidad: radius 0, azul botón) */
.btn { display: inline-block; font-family: var(--cea-font-title); font-weight: 500; font-size: 14px; line-height: 1; padding: 11px 20px; background: var(--cea-btn); color: #fff; border: 2px solid var(--cea-btn); border-radius: var(--cea-radius-btn); cursor: pointer; text-align: center; transition: background .2s; }
.btn:hover { background: var(--cea-btn-hover); border-color: var(--cea-btn-hover); color: #fff; text-decoration: none; }
.btn--outline { background: transparent; color: var(--cea-blue); border-color: var(--cea-blue); }
.btn--outline:hover { background: var(--cea-blue); color: #fff; }
.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--danger { background: #C0392B; border-color: #C0392B; } .btn--danger:hover { background: #A93226; border-color: #A93226; }
.btn--ghost { background: transparent; color: var(--cea-text-soft); border-color: #CCC; } .btn--ghost:hover { background: #F0F0F0; color: var(--cea-text); border-color: #BBB; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn--block { display: block; width: 100%; }

/* Formularios */
.form-row { margin-bottom: 14px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--cea-text); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=tel], input[type=url], select, textarea {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid #C9CED6; border-radius: 4px; background: #fff; color: var(--cea-text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cea-blue-light); border-color: var(--cea-blue); }
/* Error de campo: SIEMPRE :user-invalid, NUNCA :invalid (política de producto · REGLAS-GLOBALES.md §8 regla 27).
   :invalid es verdadero desde el primer render en todo campo required vacío -> el formulario NACE en rojo,
   como si la persona ya se hubiera equivocado. :user-invalid solo aplica tras interactuar con el campo.
   El atajo :invalid:not(:placeholder-shown) NO lo evita: sin atributo placeholder esa pseudoclase es falsa,
   el :not() deja pasar el campo vacio y el rojo vuelve (asi se rompio el registro de CIITEC · 21/08/2026).
   Donde :user-invalid no exista, no se pinta borde — degradacion benigna, al reves que el selector anterior. */
:is(input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], input[type=tel], input[type=url], select, textarea):user-invalid {
  border-color: var(--vpx-bad, #C0392B);
}
textarea { min-height: 90px; resize: vertical; }
.form-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.form-inline > * { flex: 1 1 160px; }
.form-inline > .btn { flex: 0 0 auto; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 14px; }
.check input { margin-top: 4px; }

/* Tablas */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; }
.tabla th { text-align: left; font-family: var(--cea-font-title); font-weight: 500; font-size: 12.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--cea-text-soft); padding: 10px 10px; border-bottom: 2px solid #E3E3E3; white-space: nowrap; }
.tabla td { padding: 9px 10px; border-bottom: 1px solid #EFEFEF; vertical-align: top; }
.tabla tr:hover td { background: #FAFCFF; }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla .accion { white-space: nowrap; }
.tabla a.fila-link { font-weight: 600; }

/* Mensajes */
.aviso { padding: 12px 14px; border-radius: 6px; margin: 0 0 16px; font-size: 14px; border: 1px solid transparent; }
.aviso--info { background: var(--cea-blue-light); border-color: #BBD8F5; color: #17427D; }
.aviso--ok { background: #E7F6EC; border-color: #BFE5CC; color: #1E6B3A; }
.aviso--warn { background: #FFF6E5; border-color: #F5DEB3; color: #7A4B00; }
.aviso--bad { background: #FDECEC; border-color: #F3C4C4; color: #8E1C1C; }
.toast { position: fixed; right: 18px; bottom: 18px; background: #232323; color: #fff; padding: 12px 16px; border-radius: 6px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 99; max-width: 380px; }
.toast--bad { background: #8E1C1C; } .toast--ok { background: #1E6B3A; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; } .login-hero { display: none; } }
.login-hero { background: var(--cea-blue) url("../../../img/hero-interior.jpg") center/cover no-repeat; position: relative; color: #fff; display: flex; align-items: flex-end; padding: 48px; }
.login-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,100,197,.55), rgba(31,76,153,.92)); }
.login-hero > div { position: relative; max-width: 520px; }
.login-hero h1 { color: #fff; font-size: 30px; margin-bottom: 10px; }
.login-hero p { color: var(--cea-blue-light); font-size: 15px; }
.login-box { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-box > form, .login-box > div { width: 100%; max-width: 420px; background: #fff; padding: 34px 32px; border-radius: var(--cea-radius-card); box-shadow: var(--cea-shadow-card); }
.login-logo { height: 54px; margin-bottom: 18px; }
.login-links { display: flex; justify-content: space-between; font-size: 13px; margin-top: 14px; }

/* Panel por rol */
.rol-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.rol-tabs a { padding: 8px 14px; border-radius: 20px; background: #fff; border: 1px solid #DADADA; color: var(--cea-text-soft); font-size: 13px; font-weight: 600; }
.rol-tabs a.activo { background: var(--cea-blue); border-color: var(--cea-blue); color: #fff; }
.tarjeta-estado { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.3fr); gap: 8px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid #EEE; }
.tarjeta-estado:last-child { border-bottom: 0; }
.tarjeta-estado h3 { margin: 0 0 3px; font-size: 15px; }
.tarjeta-estado p { margin: 0; font-size: 13.5px; color: var(--cea-text-soft); }
.tarjeta-estado .acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ponencia-titulo { font-family: var(--cea-font-title); font-weight: 500; font-size: 15px; }
.resumen-box { background: #F8F9FB; border-left: 3px solid var(--cea-blue); padding: 12px 14px; font-size: 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13.5px; }
.dl dt { color: var(--cea-text-soft); } .dl dd { margin: 0; }
.detalle-panel { position: fixed; top: 0; right: 0; width: min(720px, 100vw); height: 100vh; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.2); z-index: 60; overflow: auto; padding: 22px 26px 60px; }
.detalle-panel__cerrar { float: right; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filtros > * { flex: 0 1 200px; }
.filtros .btn { flex: 0 0 auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mini { font-size: 12px; }
.sep { height: 1px; background: #EEE; margin: 16px 0; }
.pf-foot { text-align: center; font-size: 12px; color: var(--cea-text-soft); padding: 20px; }

/* ============================================================
   DASHBOARD v1.1 (VertexPGI · F3) — tablero de gestión.
   Un solo hue de instancia (var(--cea-blue)) + grises + status.
   Los tokens --vpx-* derivan del tema: retemar la instancia retema el dashboard.
   ============================================================ */
:root {
  --vpx-serie: var(--cea-blue);
  --vpx-serie-suave: color-mix(in oklab, var(--cea-blue) 20%, white);
  --vpx-serie-b: color-mix(in oklab, var(--cea-blue) 52%, white);
  --vpx-gris: #C9CED6; --vpx-gris-txt: #616161;
  --vpx-ok: #2E8B57; --vpx-warn: #B26A00; --vpx-bad: #C0392B;
  --vpx-ok-bg: #E7F6EC; --vpx-warn-bg: #FFF4DE; --vpx-bad-bg: #FDECEC;
  --vpx-surface: #FFFFFF;
  --vpx-navy: var(--cea-navy, var(--cea-blue-dark));
}

/* Cabecera del tablero */
.vpx-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.vpx-head h1 { margin: 0; }
.vpx-head .vpx-meta { font-size: 13px; color: var(--cea-text-soft); }
.vpx-countdown { font-family: var(--cea-font-title); font-weight: 600; font-size: 13px; color: var(--vpx-navy); background: color-mix(in oklab, var(--cea-blue) 10%, white); border: 1px solid color-mix(in oklab, var(--cea-blue) 25%, white); padding: 3px 12px; border-radius: 20px; }

/* Bandeja de atención — lo accionable es primera clase */
.vpx-atencion { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 22px; }
.vpx-caso { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 10px; border: 1px solid transparent; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: transform .18s var(--cea-ease, ease), box-shadow .18s; }
.vpx-caso:hover { transform: translateY(-2px); box-shadow: var(--cea-shadow-card-v2, 0 6px 18px rgba(0,0,0,.1)); }
.vpx-caso b { font-family: var(--cea-font-title); font-size: 22px; font-weight: 600; line-height: 1; }
.vpx-caso small { display: block; font-weight: 600; font-size: 12.5px; line-height: 1.25; }
.vpx-caso span.vpx-ir { margin-left: 4px; opacity: .55; font-weight: 700; }
.vpx-caso--bad  { background: var(--vpx-bad-bg);  border-color: #F3C4C4; color: var(--vpx-bad); }
.vpx-caso--warn { background: var(--vpx-warn-bg); border-color: #F0DCB0; color: var(--vpx-warn); }
.vpx-caso--ok   { background: var(--vpx-ok-bg);   border-color: #BFE5CC; color: var(--vpx-ok); }

/* Stat tiles (KPI row) */
.vpx-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 22px; }
.vpx-tile { position: relative; background: var(--vpx-surface); border-radius: var(--cea-radius-card-v2, 12px); box-shadow: var(--cea-shadow-card-v2, var(--cea-shadow-card)); padding: 16px 18px 14px; overflow: hidden; }
.vpx-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--vpx-serie); opacity: .9; }
.vpx-tile--hero::before { background: var(--cea-hairline, var(--vpx-serie)); }
.vpx-tile small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--cea-text-soft); margin-bottom: 6px; }
.vpx-tile .vpx-cifra { font-family: var(--cea-font-title); font-weight: 600; font-size: 32px; line-height: 1.05; color: var(--cea-text); font-variant-numeric: tabular-nums; }
.vpx-tile--hero .vpx-cifra { font-size: 38px; color: var(--vpx-navy); }
.vpx-tile .vpx-sub { font-size: 12.5px; color: var(--cea-text-soft); margin-top: 5px; }
.vpx-tile .vpx-spark { position: absolute; right: 12px; bottom: 10px; opacity: .9; }

/* Cards de gráfico + grid */
.vpx-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 980px) { .vpx-grid { grid-template-columns: 1fr; } }
.vpx-panel { background: var(--vpx-surface); border-radius: var(--cea-radius-card-v2, 12px); box-shadow: var(--cea-shadow-card-v2, var(--cea-shadow-card)); padding: 18px 20px 16px; min-width: 0; }
.vpx-panel h2 { font-size: 16px; margin-bottom: 2px; }
.vpx-panel .vpx-panel-sub { font-size: 12.5px; color: var(--cea-text-soft); margin: 0 0 14px; }
.vpx-vacio { color: var(--cea-text-soft); font-size: 13px; padding: 18px 0; text-align: center; }

/* SVG: grid recesivo · ejes · crosshair */
.vpx-grid-l, .vpx-grid line.vpx-grid { stroke: #ECEEF2; }
line.vpx-grid { stroke: #ECEEF2; stroke-width: 1; }
.vpx-eje { font: 600 10.5px var(--cea-font-body); fill: #9AA1AC; }
.vpx-cross { stroke: var(--vpx-gris); stroke-width: 1; stroke-dasharray: 3 3; }

/* Tooltip compartido */
.vpx-tip { position: fixed; z-index: 120; background: var(--vpx-navy); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: none; max-width: 260px; }
.vpx-tip b { font-family: var(--cea-font-title); font-weight: 600; }

/* Barras horizontales */
.vpx-bars { display: grid; gap: 9px; }
.vpx-bar-fila { display: grid; grid-template-columns: minmax(96px, 150px) 1fr max-content; gap: 10px; align-items: center; font-size: 13px; color: inherit; text-decoration: none !important; border-radius: 6px; }
a.vpx-bar-fila:hover .vpx-bar-label { color: var(--cea-blue); }
.vpx-bar-label { color: var(--cea-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpx-bar-pista { position: relative; height: 14px; background: #F0F2F5; border-radius: 4px; overflow: hidden; }
.vpx-bar-ctx { position: absolute; inset: 0 auto 0 0; background: var(--vpx-gris); opacity: .55; border-radius: 4px; }
.vpx-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--vpx-serie); box-shadow: inset -2px 0 0 var(--vpx-surface); }
.vpx-bar--ok { background: var(--vpx-ok); } .vpx-bar--warn { background: #D98E1B; } .vpx-bar--bad { background: var(--vpx-bad); }
.vpx-bar--contexto { background: var(--vpx-gris); }
.vpx-bar-num { font-family: var(--cea-font-title); font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vpx-bar-num small { color: var(--cea-text-soft); font-weight: 400; }

/* Stacked — etiqueta directa SIEMPRE (relief del validador) */
.vpx-stack { display: flex; height: 30px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 4px 0 8px; }
.vpx-stack-seg { display: flex; align-items: center; justify-content: center; min-width: 26px; transition: flex-basis .6s var(--cea-ease, ease); }
.vpx-stack-seg b { font: 600 12px var(--cea-font-title); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.vpx-stack--a { background: var(--vpx-serie); } .vpx-stack--b { background: var(--vpx-serie-b); }
.vpx-stack--gris { background: var(--vpx-gris); } .vpx-stack--gris b { color: #4A4F57; text-shadow: none; }
.vpx-stack-ley { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--cea-text-soft); }
.vpx-stack-ley span { display: inline-flex; align-items: center; gap: 6px; }
.vpx-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Meter */
.vpx-meter { height: 10px; background: #F0F2F5; border-radius: 5px; overflow: hidden; margin-top: 10px; }
.vpx-meter i { display: block; height: 100%; background: var(--vpx-serie); border-radius: 5px; }
.vpx-meter-txt { font-size: 12.5px; margin-top: 6px; }
.vpx-meter-txt b { font-family: var(--cea-font-title); font-size: 15px; }

/* Entrada en cascada de las cards */
@media (prefers-reduced-motion: no-preference) {
  .vpx-anim { opacity: 0; transform: translateY(10px); animation: vpxIn .5s var(--cea-ease, ease) forwards; }
  .vpx-anim:nth-child(2) { animation-delay: .06s; } .vpx-anim:nth-child(3) { animation-delay: .12s; }
  .vpx-anim:nth-child(4) { animation-delay: .18s; } .vpx-anim:nth-child(5) { animation-delay: .24s; }
  @keyframes vpxIn { to { opacity: 1; transform: none; } }
}

/* ── v1.2 · paginador · export · mapa ── */
.vpx-pag { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.vpx-pag-info { font-size: 12.5px; color: var(--cea-text-soft); font-weight: 600; }
.vpx-pag-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.vpx-pag-num { font-size: 12.5px; color: var(--cea-text-soft); padding: 0 6px; white-space: nowrap; }
.vpx-btn-xlsx { flex: 0 0 auto; }
.vpx-panel-acciones { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; } .vpx-panel-acciones .btn { white-space: nowrap; }
.vpx-sel-n { font: 600 12.5px var(--cea-font-body); color: var(--cea-text-soft); border: 1px solid #C9CED6; border-radius: 4px; padding: 5px 8px; background: #fff; }
.vpx-panel--mapa { grid-column: 1 / -1; margin-bottom: 18px; }
.vpx-mapa-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(230px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .vpx-mapa-grid { grid-template-columns: 1fr; } }
#mapaMundo { width: 100%; height: 360px; }
.vpx-mapa-total { font-size: 13px; color: var(--cea-text-soft); margin-bottom: 10px; }
.vpx-mapa-total b { font-family: var(--cea-font-title); font-size: 16px; color: var(--cea-text); }
.vpx-pais { display: grid; grid-template-columns: minmax(90px, 130px) 1fr max-content; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; }
.vpx-pais-nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpx-pais-bar { height: 10px; background: #F0F2F5; border-radius: 4px; overflow: hidden; }
.vpx-pais-bar i { display: block; height: 100%; background: var(--vpx-serie); border-radius: 4px; }
.vpx-pais-n { font-family: var(--cea-font-title); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── v1.5 · postulación (M2) ── */
.pst-main { max-width: 980px; }
.pst-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pst-cab h1 { margin-bottom: 4px; }
.pst-acceso { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .pst-acceso { grid-template-columns: 1fr; } }
.pst-paso { background: #fff; border-radius: var(--cea-radius-card-v2, 12px); box-shadow: var(--cea-shadow-card-v2, var(--cea-shadow-card)); padding: 20px 22px 18px; margin-bottom: 16px; border: 2px solid transparent; }
.pst-paso h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 6px; }
.pst-paso h3 { font-size: 14px; margin: 6px 0 8px; }
.pst-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cea-blue); color: #fff; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.pst-paso textarea { min-height: 120px; }
.pst-radios { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pst-radios .check { padding: 8px 10px; border: 1px solid #E3E3E3; border-radius: 6px; }
.pst-radios .check:has(input:checked) { border-color: var(--cea-blue); background: color-mix(in oklab, var(--cea-blue) 8%, white); }
.pst-contador { font-size: 12.5px; color: var(--cea-text-soft); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pst-contador.ok { color: var(--vpx-ok, #2E8B57); } .pst-contador.warn { color: var(--vpx-warn, #B26A00); } .pst-contador.bad { color: var(--vpx-bad, #C0392B); font-weight: 600; }
.chips-kw { margin-top: 8px; }
.pst-autor { border: 1px solid #E6E6E6; border-radius: 8px; padding: 12px 14px 2px; margin-bottom: 10px; }
.pst-autor__t { display: flex; align-items: center; justify-content: space-between; font-family: var(--cea-font-title); font-weight: 600; font-size: 13.5px; margin-bottom: 8px; color: var(--cea-text-soft); }
.pst-autor__g { display: grid; gap: 0 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .pst-autor__g { grid-template-columns: 1fr; } }
.pst-autor input[readonly] { background: #F5F6F8; color: var(--cea-text-soft); }
.pst-lista { margin-bottom: 8px; }
.pst-barra { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; background: #fff; border-top: 1px solid #E3E3E3; padding: 12px 16px; margin: 0 -20px; box-shadow: 0 -6px 18px rgba(0,0,0,.06); z-index: 5; }
.pst-barra .mini { color: var(--cea-text-soft); }
.campo-error { border-color: var(--vpx-bad, #C0392B) !important; }
.pst-codigo { font-family: var(--cea-font-title); font-size: 30px; font-weight: 600; color: var(--cea-blue); letter-spacing: 1px; margin: 4px 0 14px; }

/* QR de acceso al congreso (panel del participante y del ponente).
   Mientras el código por persona no existe, la instancia puede enseñar una vista previa: el rótulo
   forma parte del componente para que nunca se muestre como si fuera el código definitivo. */
.qr-acceso{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.qr-acceso img{width:150px;height:150px;border:1px solid var(--cea-linea,#E1E7EF);border-radius:6px;background:#fff;padding:6px}
@media(max-width:640px){.qr-acceso{align-items:center;text-align:center}}

/* ── Cola del revisor: filtros por estado + paginación ──────────────────────────────────────────
   La cola llegó a tener 75 ponencias en una columna sin fin: para ver la última había que arrastrar
   toda la lista, y el orden no cambiaba al ir dictaminando. Los chips y el paginador reutilizan el
   lenguaje visual de .rol-tabs y .vpx-pag* del panel de gestión — no es un sistema nuevo. */
.rev-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 4px; }
.rev-chip { padding: 7px 13px; border-radius: 20px; background: #fff; border: 1px solid #DADADA;
            color: var(--cea-text-soft); font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.2; }
.rev-chip:hover { border-color: var(--cea-blue); color: var(--cea-blue); }
.rev-chip.activo { background: var(--cea-blue); border-color: var(--cea-blue); color: #fff; }
.rev-chip__n { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 10px;
               background: rgba(0,0,0,.07); font-size: 11.5px; }
.rev-chip.activo .rev-chip__n { background: rgba(255,255,255,.25); }
.rev-porpag { display: inline-flex; align-items: center; gap: 6px; }
.rev-porpag select { padding: 3px 6px; font-size: 12.5px; }

/* El botón «Siguiente» tiene que verse: si pasa por un secundario más, el revisor cree que su cola
   son solo las 5 de pantalla. Late hasta que la persona pasa de página por primera vez. */
.rev-sig-wrap { position: relative; display: inline-block; }
@keyframes revPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,136,204,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(0,136,204,0); }
}
.rev-pulso { animation: revPulso 1.9s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .rev-pulso { animation: none; outline: 2px solid var(--cea-btn); outline-offset: 2px; } }

/* Globo de primera visita, anclado al propio botón (se muestra una vez por persona).
   Va ENCIMA del botón, no debajo: colgado hacia abajo se comía el título de la primera ponencia
   —lo primero que la persona necesita leer—, mientras que arriba cae sobre el hueco de la fila de
   filtros. Un aviso que tapa el contenido que anuncia es peor que no ponerlo. */
.rev-guia { position: absolute; bottom: calc(100% + 12px); right: 0; z-index: 30; width: 272px;
            background: var(--cea-text, #232323); color: #fff; border-radius: 8px; padding: 12px 13px;
            font-size: 12.5px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.22); text-align: left; }
.rev-guia::after { content: ''; position: absolute; top: 100%; right: 26px; border: 7px solid transparent;
                   border-top-color: var(--cea-text, #232323); }
.rev-guia b { color: #fff; display: block; margin-bottom: 3px; }
.rev-guia .btn { display: block; margin: 10px 0 0 auto; background: #fff; color: var(--cea-text, #232323); border: 0; }
@media (max-width: 560px) { .rev-guia { right: auto; left: 0; width: min(272px, 78vw); } .rev-guia::after { right: auto; left: 26px; } }

/* ── Guardado del dictamen sin recargar la página ───────────────────────────────────────────────
   Antes, registrar un dictamen recargaba todo: la persona volvía al filtro «Todas» y a la página 1
   después de CADA ponencia. Ahora se refresca solo su ficha, así que hacen falta dos señales que la
   recarga daba gratis: que ALGO está pasando (el botón) y que quedó guardado (el check). */
.btn--cargando { position: relative; padding-left: 30px; opacity: .85; cursor: progress; }
.btn--cargando::before { content: ''; position: absolute; left: 11px; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: revGirar .6s linear infinite; }
@keyframes revGirar { to { transform: rotate(360deg); } }

.rev-ok { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 8px 12px;
  background: #E9F7EF; border: 1px solid #BFE5CE; border-radius: 6px; color: #1B6B3A;
  font-size: 13px; font-weight: 600; animation: revEntra .28s ease-out; }
.rev-ok__check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: #1B6B3A; color: #fff; font-size: 12px; line-height: 1; }
.rev-ok--fin { opacity: 0; transition: opacity .5s ease, max-height .5s ease, margin .5s ease, padding .5s ease;
  max-height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden; }
@keyframes revEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rev-guardada { box-shadow: 0 0 0 2px #BFE5CE; transition: box-shadow .5s ease; }
@media (prefers-reduced-motion: reduce) { .btn--cargando::before, .rev-ok { animation: none; } }

/* ── Revisión de MESAS (rol revisor_mesas) ──────────────────────────────────────────────────────
   Quien entra aquí es la dirección del congreso y decide sobre decenas de mesas seguidas. La
   jerarquía es: qué mesa es → qué va a pasar si la apruebo → el detalle si quiero verlo. Las
   ponencias van plegadas porque son el detalle, no el titular. */
.mesa-card { margin-bottom: 16px; border-left: 4px solid var(--cea-btn); }
.mesa-card--lista { border-left-color: #BFE5CE; opacity: .93; }
.mesa-card__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mesa-card__t { margin: 0 0 3px; font-size: 17px; line-height: 1.3; }
.mesa-card__meta { margin: 0; }
.mesa-card__resumen { margin: 12px 0 0; padding: 9px 12px; background: #F4F8FD; border-radius: 6px; color: var(--cea-text); }
.mesa-card__resumen b { color: var(--cea-blue-dark); }
.mesa-card__acc { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.mesa-det { margin-top: 12px; }
.mesa-det > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cea-blue); padding: 6px 0; }
.mesa-det > summary:hover { text-decoration: underline; }
.mesa-pons { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid #EEE; }
.mesa-pon { padding: 10px 0 10px 12px; border-bottom: 1px solid #F1F1F1; border-left: 3px solid transparent; }
.mesa-pon--aceptables { border-left-color: #3AA76D; }
.mesa-pon--dictaminadas_por_otros { border-left-color: #E8A33D; }
.mesa-pon--no_tocables { border-left-color: #D64545; }
.mesa-pon--ya_aceptadas { border-left-color: #D5D5D5; }
.mesa-pon__t { font-weight: 600; font-size: 14px; line-height: 1.35; }
.mesa-pon__m { color: var(--cea-text-soft); margin: 2px 0 5px; }
.mesa-pon__e { display: flex; gap: 6px; flex-wrap: wrap; }
.mesa-integr { margin-top: 12px; padding: 10px 12px; background: #FAFAFA; border-radius: 6px; color: var(--cea-text-soft); }

/* Lo aceptado y lo respetado se quedan a la vista: es el registro de una decisión sobre varias
   ponencias a la vez, y un aviso que se desvanece no sirve para repasar qué pasó. */
.mesa-hecho { margin: -4px 0 14px; padding: 12px 14px; background: #E9F7EF; border: 1px solid #BFE5CE; border-radius: 6px; }
.mesa-hecho__cab { display: flex; align-items: center; gap: 9px; color: #1B6B3A; font-weight: 600; font-size: 14px; }
.mesa-hecho__lista { margin: 9px 0 0; padding-left: 30px; color: #2C6B47; }
.mesa-hecho__lista li { margin-bottom: 3px; }
@media (max-width: 640px) {
  .mesa-card__cab { flex-direction: column; gap: 8px; }
  .mesa-card__acc .btn { width: 100%; }
}
.mesa-hecho__resp { margin-top: 10px; padding-top: 9px; border-top: 1px solid #BFE5CE; color: #2C6B47; }
.mesa-vacia { text-align: center; padding: 30px 22px; }

/* ── Refinos de la revisión de mesas (feedback del recorrido del 27/08) ─────────────────────────
   La pestaña del rol exclusivo se distingue con el teal de la identidad («Participa») + icono: quien
   dirige el congreso convive con varias pestañas y esta tiene que reconocerse sin leerla. */
.rol-tabs a.tab-mesas { display: inline-flex; align-items: center; gap: 7px;
  border-color: var(--cea-participa); color: var(--cea-participa); font-weight: 700; }
.rol-tabs a.tab-mesas svg { width: 15px; height: 15px; flex: 0 0 auto; }
.rol-tabs a.tab-mesas.activo { background: var(--cea-participa); border-color: var(--cea-participa); color: #fff; }

/* Bienvenida de primera vez: explica qué hace el apartado ANTES del primer clic. Una sola vez. */
.mesa-bienvenida { background: #EAF6F4; border: 1px solid #BFE0DC; border-left: 4px solid var(--cea-participa);
  border-radius: var(--cea-radius-card, 8px); padding: 18px 22px; margin-bottom: 16px; }
.mesa-bienvenida h3 { margin: 0 0 8px; color: #1F6A61; font-size: 16px; }
.mesa-bienvenida p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--cea-text); }
.mesa-bienvenida .btn { background: var(--cea-participa); border-color: var(--cea-participa); }

/* Aire entre la cabecera y la primera mesa: iban pegadas. */
#mesas-lista { margin-top: 18px; }
#mesas-pag-bot { margin-top: 4px; }

/* Resumen desplegable por ponencia dentro de la mesa. */
.mesa-pon__res { margin: 4px 0 6px; }
.mesa-pon__res > summary { cursor: pointer; color: var(--cea-blue); font-size: 12.5px; font-weight: 600; }
.mesa-pon__res > summary:hover { text-decoration: underline; }
.mesa-pon__res .resumen-box { margin-top: 6px; }

/* D-CORE-9 · la propuesta completa en la ficha del revisor y en las mesas */
.rev-sec-titulo { margin: 14px 0 4px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cea-blue); }
.rev-sec-titulo:first-child { margin-top: 0; }
.rev-sec-texto { font-size: 14px; white-space: pre-wrap; }
/* Con 7 secciones dentro, la caja de 260px obliga a leer por una rendija: en la cola del revisor se
   abre a media pantalla (el details ya colapsa todo cuando no se está leyendo). */
#rev-lista .resumen-box { max-height: min(60vh, 640px); }

/* ── Modal de confirmación propio (sustituye a window.confirm) ──────────────────────────────────
   El diálogo nativo del navegador aparecía con el cromo del sistema justo en el momento más
   delicado del flujo. Este hereda la identidad: acento teal del rol de mesas, badges del desglose. */
.modal-velo { position: fixed; inset: 0; z-index: 200; background: rgba(17, 22, 33, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: revEntra .18s ease-out; }
.modal-caja { background: #fff; border-radius: 8px; border-top: 4px solid var(--cea-participa);
  max-width: 520px; width: 100%; padding: 22px 26px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.modal-caja h3 { margin: 0 0 4px; font-size: 18px; }
.modal-mesa { margin: 0 0 14px; font-family: var(--cea-font-title); font-weight: 600; font-size: 15px;
  color: var(--cea-text); line-height: 1.4; }
.modal-detalle { list-style: none; margin: 0 0 14px; padding: 12px 14px; background: #F4F8FD;
  border-radius: 6px; display: grid; gap: 8px; }
.modal-detalle li { font-size: 13.5px; line-height: 1.45; color: var(--cea-text); }
.modal-detalle .badge { margin-right: 4px; }
.modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-btn-ok { background: var(--cea-participa); border-color: var(--cea-participa); }
.modal-btn-ok:hover { background: #3D8A84; border-color: #3D8A84; }
@media (max-width: 560px) { .modal-acciones { flex-direction: column-reverse; } .modal-acciones .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .modal-velo { animation: none; } }

/* ============================================================
   PROGRAMACIÓN v2 (26/09/2026) — parrilla operable + selector de hueco en la ficha de mesa.
   Solo clases prog-*: la hoja la comparten gestión y el panel de participantes.
   ============================================================ */
.prog-libre, .prog-mesa, .prog-seg__b, .prog-tab, .prog-sel__h, .prog-cand, .prog-modal__cerrar { font-family: inherit; }
.prog-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.prog-head h1 { margin: 0; }
.prog-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; }
.prog-kpi { background: #fff; border-radius: var(--cea-radius-card-v2, 12px); box-shadow: var(--cea-shadow-card-v2, 0 6px 24px rgba(11,37,69,.08)); padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.prog-kpi small { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--cea-text-soft); }
.prog-kpi b { font-family: var(--cea-font-title); font-size: 28px; font-weight: 500; line-height: 1.1; color: var(--cea-text); }
.prog-kpi b span { font-size: 16px; color: var(--cea-text-soft); font-weight: 400; }
.prog-kpi__barra { height: 6px; border-radius: 3px; background: #E9EDF3; overflow: hidden; margin: 2px 0; }
.prog-kpi__barra i { display: block; height: 100%; background: var(--cea-blue); border-radius: 3px; transition: width .4s var(--cea-ease, ease); }

.prog-seg { display: inline-flex; background: #fff; border-radius: 10px; padding: 4px; gap: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 14px; }
.prog-seg__b { border: 0; background: transparent; border-radius: 7px; padding: 8px 16px; font-family: var(--cea-font-title); font-weight: 500; font-size: 14px; color: var(--cea-text-soft); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.prog-seg__b span { font-family: var(--cea-font-body); font-size: 12px; font-weight: 400; }
.prog-seg__b:hover { background: #F2F5FA; color: var(--cea-text); }
.prog-seg__b.activo { background: var(--cea-blue); color: #fff; }
.prog-seg__b.activo span { color: var(--cea-blue-light); }
.prog-card { margin-bottom: 16px; }

/* Parrilla (vista Programación) */
.prog-parrilla-wrap { overflow: auto; max-height: 72vh; border: 1px solid #E4E8EE; border-radius: 10px; }
.prog-parrilla { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; font-size: 13px; }
.prog-parrilla thead th { position: sticky; top: 0; z-index: 3; background: #F7F9FC; border-bottom: 1px solid #E4E8EE; padding: 8px 6px; font-family: var(--cea-font-title); font-weight: 600; font-size: 13px; color: var(--cea-text); text-align: center; white-space: nowrap; cursor: default; }
.prog-parrilla thead th small { display: block; font-family: var(--cea-font-body); font-weight: 400; font-size: 11px; color: var(--cea-text-soft); }
.prog-parrilla .prog-parrilla__esq { left: 0; z-index: 4; text-align: left; }
.prog-parrilla__dia th { position: sticky; top: 45px; z-index: 2; background: var(--cea-blue-light); color: var(--cea-blue-dark); text-align: left; padding: 6px 12px; font-family: var(--cea-font-title); font-weight: 600; font-size: 13px; border-bottom: 1px solid #CFE2F7; }
.prog-parrilla__hora { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; padding: 6px 12px; white-space: nowrap; font-weight: 600; font-size: 12.5px; color: var(--cea-text-soft); border-right: 1px solid #EEF1F5; }
.prog-parrilla td { padding: 4px; border-bottom: 1px solid #EEF1F5; border-right: 1px solid #F3F5F8; vertical-align: top; height: 60px; min-width: 104px; }
.prog-libre { width: 100%; height: 100%; min-height: 52px; border: 1px dashed #DDE3EB; border-radius: 8px; background: #FBFCFD; color: #C3CCD8; font-size: 18px; line-height: 1; cursor: pointer; transition: all .15s; }
.prog-parrilla tr:hover .prog-libre { border-color: #C9D3DF; color: #9AA7B8; }
.prog-libre:hover, .prog-libre:focus-visible { border-color: var(--cea-blue) !important; background: #F2F7FE; color: var(--cea-blue); outline: none; }
.prog-mesa { width: 100%; height: 100%; min-height: 52px; text-align: left; border: 0; border-left: 3px solid var(--vpx-ok, #2E8B57); border-radius: 8px; background: #EEF8F2; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; transition: box-shadow .15s, transform .15s; }
.prog-mesa--borrador { border-left-color: #E8A33D; background: #FFF7E8; }
.prog-mesa:hover, .prog-mesa:focus-visible { box-shadow: 0 4px 14px rgba(11,37,69,.14); transform: translateY(-1px); outline: none; }
.prog-mesa__t { font-size: 12px; line-height: 1.3; color: var(--cea-text); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prog-mesa__m { font-size: 11px; color: var(--cea-text-soft); }
.prog-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.prog-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.prog-ley { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.prog-ley--pub { background: #EEF8F2; border-left: 3px solid #2E8B57; }
.prog-ley--bor { background: #FFF7E8; border-left: 3px solid #E8A33D; }
.prog-ley--libre { border: 1px dashed #B9C4D2; }

/* Por programar */
.prog-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.prog-filtros input[type=search] { flex: 1 1 280px; }
.prog-filtros select { flex: 0 1 260px; }
.prog-pend { display: grid; gap: 8px; grid-template-columns: 1fr; }
.prog-pend__item { padding: 12px 14px; border: 1px solid #E6EAF0; border-radius: 10px; background: #fff; }
.prog-pend__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.prog-pend__acc { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.prog-hueco { font-size: 12px; font-weight: 600; color: #1E6B3A; background: #E7F6EC; border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.prog-pend__per { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.prog-pend__item:hover { border-color: #C9D6E8; }
.prog-pend__t { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--cea-text); }
.prog-pend__item .btn { flex: 0 0 auto; }
.prog-vacio { padding: 14px; background: var(--vpx-ok-bg, #E7F6EC); color: #1E6B3A; border-radius: 8px; margin: 0; font-size: 14px; }
@media (max-width: 700px) { .prog-pend__cab { flex-direction: column; } }
/* Quién presenta: procedencia y perfil de cada mesa (pedido de la Dirección, 26/09/2026) */
.prog-paises { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.prog-pais { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 1px 6px; border-radius: 4px; background: #EEF1F5; color: #4A5565; cursor: default; }
.prog-pais b { font-weight: 600; opacity: .75; }
.prog-pais--int { background: var(--cea-blue-light); color: var(--cea-blue-dark); }
.prog-pais--nd { background: transparent; border: 1px dashed #CBD3DE; color: #8A93A0; font-weight: 600; }
.prog-mesa .prog-paises { margin-top: 2px; }
.prog-senales { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.prog-senal { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: #F1F3F6; color: #4A5565; white-space: nowrap; }
.prog-senal--int { background: var(--cea-blue-light); color: var(--cea-blue-dark); }
.prog-senal--warn { background: #FFF1D6; color: #7A4B00; }
.prog-quien { margin-top: 8px; }
.prog-quien summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cea-blue); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prog-quien summary::-webkit-details-marker { color: var(--cea-blue); }
.prog-quien[open] summary { margin-bottom: 8px; }
.prog-quien > .prog-senales { margin-bottom: 8px; }
.prog-quien--abierto { margin-top: 16px; padding-top: 12px; border-top: 1px solid #EEF1F5; }
.prog-quien--abierto h4 { font-size: 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prog-personas { display: flex; flex-direction: column; border: 1px solid #EEF1F5; border-radius: 8px; overflow: hidden; }
.prog-persona { padding: 8px 12px; border-bottom: 1px solid #EEF1F5; }
.prog-persona:last-child { border-bottom: 0; }
.prog-persona:nth-child(even) { background: #FAFBFC; }
.prog-persona__n { font-weight: 600; font-size: 13.5px; color: var(--cea-text); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prog-persona__d { font-size: 12.5px; color: var(--cea-text-soft); margin-top: 2px; }
.prog-persona__d .badge { font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.prog-sep { color: #C9D1DC; margin: 0 2px; }
.prog-cand__per { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; }

/* Selector de hueco (ficha de mesa y modal) */
.prog-estado { padding: 10px 14px; border-radius: 8px; background: #FFF6E5; border: 1px solid #F5DEB3; color: #7A4B00; font-size: 14px; margin-bottom: 12px; }
.prog-estado--ok { background: #E7F6EC; border-color: #BFE5CC; color: #1E6B3A; }
.prog-estado__et { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-right: 6px; }
.prog-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.prog-tab { border: 1px solid #D5DCE6; background: #fff; border-radius: 20px; padding: 5px 14px; font-size: 13px; font-family: var(--cea-font-title); font-weight: 500; color: var(--cea-text-soft); cursor: pointer; }
.prog-tab:hover { border-color: var(--cea-blue); color: var(--cea-blue); }
.prog-tab.activo { background: var(--cea-blue); border-color: var(--cea-blue); color: #fff; }
.prog-sel-wrap { overflow-x: auto; }
.prog-sel { border-collapse: separate; border-spacing: 3px; font-size: 12px; margin: 0 auto 0 0; }
.prog-sel thead th { font-family: var(--cea-font-title); font-weight: 600; font-size: 11.5px; text-align: center; padding: 2px 0; white-space: nowrap; cursor: default; }
.prog-sel thead th small { display: block; font-weight: 400; font-size: 10px; letter-spacing: -.2px; color: var(--cea-text-soft); }
.prog-sel tbody th { text-align: right; padding-right: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--cea-text-soft); }
.prog-sel td { padding: 0; }
.prog-sel__h, .prog-sel__oc { display: flex; align-items: center; justify-content: center; width: 38px; height: 30px; border-radius: 6px; font-size: 12px; }
.prog-sel__h { border: 1px solid #D5DCE6; background: #fff; cursor: pointer; color: var(--cea-blue); font-weight: 700; transition: all .12s; }
.prog-sel__h:hover, .prog-sel__h:focus-visible { border-color: var(--cea-blue); background: #F2F7FE; outline: none; }
.prog-sel__h.es-actual { background: #E7F6EC; border-color: #3AA76D; color: #1E6B3A; }
.prog-sel__h.es-elegido { background: var(--cea-blue); border-color: var(--cea-blue); color: #fff; }
.prog-sel__oc { background: #EEF0F3; color: #8A93A0; font-size: 10.5px; cursor: help; }
.prog-sel__pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEF1F5; }
.prog-sel__acc { display: flex; gap: 8px; }

/* Modal */
.prog-modal-velo { position: fixed; inset: 0; z-index: 200; background: rgba(17, 22, 33, .5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto; }
.prog-modal { position: relative; background: #fff; border-radius: 12px; border-top: 4px solid var(--cea-blue); box-shadow: 0 20px 60px rgba(0,0,0,.25); width: min(760px, 100%); padding: 22px 24px; }
.prog-modal h3 { margin: 0 34px 10px 0; font-size: 18px; line-height: 1.35; }
.prog-modal__eyebrow { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--cea-blue); }
.prog-modal__cerrar { position: absolute; top: 12px; right: 12px; border: 0; background: #F1F3F6; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--cea-text-soft); }
.prog-modal__cerrar:hover { background: #E4E8EE; color: var(--cea-text); }
.prog-modal__q { width: 100%; margin-bottom: 10px; }
.prog-modal__lista { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.prog-cand { text-align: left; border: 1px solid #E6EAF0; border-radius: 8px; background: #fff; padding: 9px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.prog-cand:hover, .prog-cand:focus-visible { border-color: var(--cea-blue); background: #F7FAFE; outline: none; }
.prog-cand__t { font-weight: 600; font-size: 14px; color: var(--cea-text); line-height: 1.35; }