/*
  El panel.

  Un solo lenguaje para todas las pestañas: fondo oscuro con tres luces,
  paneles de vidrio y el azul de la marca para lo que se puede pulsar.
  Las medidas salen de los bocetos; si algo se ve raro, se corrige aquí
  y no en la pestaña.
*/

:root {
  --fondo:        #050912;
  --tinta:        #E8ECF5;
  --tinta-2:      #B9C4DA;
  --tinta-3:      #A9B4CB;
  --tinta-4:      #8A97B4;
  --tinta-5:      #6E7C99;

  --azul:         #2F6BE0;
  --azul-claro:   #6BA4FF;
  --azul-palido:  #9CC4FF;
  --azul-teside:  #7FB0FF;

  --rojo:         #EF2644;
  --rojo-claro:   #FF7A8E;
  --verde:        #34C77B;
  --verde-claro:  #5FD99C;
  --ambar:        #F0B23C;

  --vidrio:       rgba(255,255,255,0.052);
  --vidrio-borde: rgba(255,255,255,0.10);
  --vidrio-luz:   inset 0 1px 0 rgba(255,255,255,0.075);
  --sombra:       0 10px 34px rgba(2,8,22,0.34);

  --borde:        rgba(255,255,255,0.09);
  --borde-suave:  rgba(255,255,255,0.045);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--tinta);
  background:
    radial-gradient(760px 540px at 6% -10%, rgba(47,107,224,.40), transparent 62%),
    radial-gradient(620px 440px at -4% 96%, rgba(239,38,68,.13), transparent 58%),
    radial-gradient(940px 720px at 66% 112%, rgba(30,86,201,.32), transparent 62%),
    var(--fondo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-claro); text-decoration: none; }
a:hover { color: var(--azul-palido); }
.num { font-variant-numeric: tabular-nums; }

/* ─── Armazón ─────────────────────────────────────────────────────────── */

.armazon { display: flex; min-height: 100vh; }

.lateral {
  width: 248px; flex-shrink: 0;
  background: rgba(5,9,18,.52);


  border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; padding: 26px 16px;
  position: sticky; top: 0; height: 100vh;
}

.marca { display: flex; align-items: center; gap: 11px; padding: 0 10px 28px; }
.marca .emblema {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(140deg, #1E56C9, #032E81);
  display: flex; align-items: center; justify-content: center;
}
.marca .titulo { font-size: 14px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.marca .sub { font-size: 11px; color: var(--tinta-5); font-weight: 500; }

.menu { display: flex; flex-direction: column; gap: 3px; }
.menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--tinta-4); font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
}
.menu a:hover { background: rgba(255,255,255,.04); color: var(--tinta-2); }
.menu a.aqui {
  background: rgba(76,141,255,.13); color: var(--tinta);
  font-weight: 600; border-color: rgba(76,141,255,.22);
}
.menu a.aqui svg { stroke: var(--azul-claro); }

.quien {
  display: flex; align-items: center; gap: 11px;
  padding: 12px; margin-top: 8px; border-radius: 11px;
  background: rgba(255,255,255,.035);
}
.quien .inicial {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, #2F6BE0, #032E81);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.quien .nombre { font-size: 13px; font-weight: 600; }
.quien .papel { font-size: 11px; color: var(--tinta-5); }

.lienzo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; padding-bottom: 40px; }
/* Tope de ancho: en una pantalla grande los paneles se estiraban de lado a
   lado y perdían la proporción del diseño. El boceto medía 1.440 px con la
   barra lateral; esto deja el contenido un poco más holgado y centrado en
   el espacio que queda. */
.ancho { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; }

/* ─── Cabecera de pestaña ─────────────────────────────────────────────── */

.cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 30px 34px 22px; flex-wrap: wrap;
}
.cabecera h1 { margin: 0 0 6px; font-size: 25px; font-weight: 700; letter-spacing: -.5px; }
.cabecera .pie { font-size: 14px; color: var(--tinta-4); }
.acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ─── Botones ─────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  background: var(--azul); color: #fff;
}
.boton:hover { background: #3C79F0; color: #fff; }
.boton.sobrio {
  background: transparent; border-color: var(--borde);
  color: var(--tinta-2); font-weight: 500; padding: 11px 15px;
}
.boton.sobrio:hover { background: rgba(255,255,255,.05); color: var(--tinta); }
.boton.peligro { background: rgba(239,38,68,.16); color: var(--rojo-claro); border-color: rgba(239,38,68,.28); }
.boton.peligro:hover { background: rgba(239,38,68,.24); color: var(--rojo-claro); }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.boton.chico { padding: 8px 13px; font-size: 13px; }

/* ─── Filtros ─────────────────────────────────────────────────────────── */

.filtros { display: flex; align-items: center; gap: 9px; padding: 0 34px 20px; flex-wrap: wrap; }
.filtro {
  padding: 8px 14px; border-radius: 9px; white-space: nowrap;
  border: 1px solid var(--borde); font-size: 13px;
  color: var(--tinta-3); font-weight: 500;
}
.filtro:hover { color: var(--tinta); border-color: rgba(255,255,255,.18); }
.filtro.aqui {
  background: rgba(47,107,224,.22); border-color: rgba(76,141,255,.32);
  color: var(--azul-palido); font-weight: 600;
}
.separa { flex-grow: 1; }

/* ─── Panel de vidrio ─────────────────────────────────────────────────── */

.panel {
  margin: 0 34px; border-radius: 18px; overflow: hidden;
  background: var(--vidrio);


  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--sombra), var(--vidrio-luz);
}
.panel.holgado { padding: 26px 28px; }

/* ─── Tablas ──────────────────────────────────────────────────────────── */

.tabla { display: flex; flex-direction: column; }
.tabla .fila { display: grid; gap: 16px; padding: 17px 22px; align-items: center; font-size: 13.5px; }
.tabla .fila + .fila { border-top: 1px solid var(--borde-suave); }
.tabla .titulos {
  padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 11.5px; color: var(--tinta-5); font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
}
.tabla a.fila { color: inherit; }
.tabla a.fila:hover { background: rgba(76,141,255,.06); color: inherit; }
.tabla .principal { font-weight: 600; }
.tabla .secundario { font-size: 12px; color: var(--tinta-5); }
.tabla .apagado { color: var(--tinta-3); }

.vacio { padding: 54px 22px; text-align: center; color: var(--tinta-4); font-size: 14px; }
.vacio strong { display: block; color: var(--tinta-2); font-size: 15px; margin-bottom: 6px; }

/* ─── Etiquetas ───────────────────────────────────────────────────────── */

.eti {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.eti.teside  { background: rgba(47,107,224,.16); color: var(--azul-teside); }
.eti.rithana { background: rgba(239,38,68,.14);  color: var(--rojo-claro); }
.eti.bien    { background: rgba(52,199,123,.14); color: var(--verde-claro); }
.eti.medias  { background: rgba(240,178,60,.15); color: var(--ambar); }
.eti.mal     { background: rgba(239,38,68,.14);  color: var(--rojo-claro); }
.eti.quieto  { background: rgba(255,255,255,.06); color: var(--tinta-4); }

.barra { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra > div { height: 100%; border-radius: 2px; }
.barra.espera > div { width: 28%; opacity: .75; animation: barra-espera 1.3s ease-in-out infinite alternate; }
@keyframes barra-espera { from { transform: translateX(-10%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .barra.espera > div { animation: none; width: 100%; opacity: .25; } }

/* ─── Formularios ─────────────────────────────────────────────────────── */

.campos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 24px; }
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo > label { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.campo .ayuda { font-size: 12px; color: var(--tinta-5); line-height: 1.5; }

input[type=text], input[type=password], input[type=tel], input[type=url],
input[type=date], input[type=number], input[type=email],
input[type=search], input[type=file], select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid var(--borde);
  color: var(--tinta); font-size: 14px; font-family: inherit;
}
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(76,141,255,.55);
  background: rgba(76,141,255,.07);
}
input::placeholder, textarea::placeholder { color: var(--tinta-5); }
/* Cuando el navegador o un gestor de contraseñas rellena un campo, le pone
   su propio fondo claro. Esto lo tapa con el color del panel. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  caret-color: var(--tinta);
  -webkit-box-shadow: 0 0 0 1000px #121826 inset;
  transition: background-color 9999s ease-out;
}
select option { background: #0B1424; color: var(--tinta); }

.marcas { display: flex; gap: 10px; flex-wrap: wrap; }
.marcas label {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 10px;
  border: 1px solid var(--borde); font-size: 14px;
  color: var(--tinta-2); cursor: pointer;
}
.marcas label:has(input:checked) {
  background: rgba(47,107,224,.16); border-color: rgba(76,141,255,.35); color: var(--tinta);
}
.marcas input { accent-color: var(--azul); width: 16px; height: 16px; }

.error { font-size: 12.5px; color: var(--rojo-claro); }
input.malo, select.malo, textarea.malo { border-color: rgba(239,38,68,.5); }

/* ─── Avisos ──────────────────────────────────────────────────────────── */

.aviso {
  margin: 0 34px 20px; padding: 14px 18px; border-radius: 11px;
  font-size: 13.5px; line-height: 1.6;
  border: 1px solid; display: flex; gap: 11px; align-items: flex-start;
}
.aviso.bien { background: rgba(52,199,123,.10); border-color: rgba(52,199,123,.28); color: #9BE6C0; }
.aviso.mal  { background: rgba(239,38,68,.10);  border-color: rgba(239,38,68,.28);  color: #FFB3BE; }
.aviso.ojo  { background: rgba(240,178,60,.10); border-color: rgba(240,178,60,.28); color: #F6D08A; }

/* ─── Paginación ──────────────────────────────────────────────────────── */

.paginas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 34px 0; font-size: 13px; color: var(--tinta-5);
  flex-wrap: wrap;
}
.paginas nav { display: flex; gap: 7px; }
.paginas a, .paginas span {
  min-width: 31px; height: 31px; padding: 0 9px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-5); font-weight: 600; font-size: 13px;
}
.paginas a:hover { background: rgba(255,255,255,.05); color: var(--tinta-2); }
.paginas .aqui { border: 1px solid var(--borde); color: var(--tinta-2); }

/* ─── Estrecho ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .armazon { flex-direction: column; }
  .lateral {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 14px 18px; overflow-x: auto;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .marca { padding: 0 10px 0 0; }
  .marca .titulo, .marca .sub { display: none; }
  .menu { flex-direction: row; gap: 6px; }
  .menu a { white-space: nowrap; padding: 9px 12px; }
  .lateral > .separa, .quien { display: none; }
  .cabecera, .filtros, .paginas { padding-left: 18px; padding-right: 18px; }
  .panel, .aviso { margin-left: 18px; margin-right: 18px; }
  .campos { grid-template-columns: 1fr; }
}

/* ─── Dos columnas: lo que se edita y lo que se ve ────────────────────── */

.doble { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; margin: 0 34px; align-items: start; }
.doble > .panel { margin: 0; }
.columna-fija { position: sticky; top: 24px; }

.bloque + .bloque { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--borde-suave); }
.bloque > h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.bloque > .pie { margin: 0 0 18px; font-size: 13px; color: var(--tinta-5); }

.pie-formulario {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde-suave);
}

/* Vista previa del texto del certificado */
.previa {
  background: #fff; color: #14171F; border-radius: 12px; padding: 22px 24px;
  font-size: 13px; line-height: 1.7;
}
.previa .quien { background: none; padding: 0; margin: 0 0 14px; display: block; }
.previa .nombre-alumno { font-size: 19px; font-weight: 800; color: #002879; letter-spacing: -.4px; margin-bottom: 12px; }
.previa .rellenado { background: rgba(47,107,224,.12); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.previa .firma { margin-top: 18px; padding-top: 14px; border-top: 1px solid #EDEBE7; font-size: 12px; color: #6E7482; }

.marcador {
  display: inline-block; padding: 3px 8px; margin: 0 3px 5px 0; border-radius: 6px;
  background: rgba(76,141,255,.14); color: var(--azul-palido);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; cursor: pointer;
  border: 1px solid rgba(76,141,255,.2);
}
.marcador:hover { background: rgba(76,141,255,.24); }

@media (max-width: 1100px) {
  .doble { grid-template-columns: 1fr; margin: 0 18px; }
  .columna-fija { position: static; }
}

/* ─── Cabecera de un programa ─────────────────────────────────────────── */

.migas { font-size: 13px; color: var(--tinta-5); margin-bottom: 8px; }
.migas a { color: var(--tinta-4); }
.migas a:hover { color: var(--tinta-2); }

.avance { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.avance .cifra { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.avance .cifra small { font-size: 15px; font-weight: 500; color: var(--tinta-5); letter-spacing: 0; }
.avance .desglose { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-3); }
.avance .punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }

.persona { display: flex; align-items: center; gap: 11px; min-width: 0; }
.persona .inicial {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(76,141,255,.14); color: var(--azul-teside);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.recorta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.enlace-pdf {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--borde); color: var(--tinta-3);
}
.enlace-pdf:hover { background: rgba(255,255,255,.05); color: var(--tinta); }
.enlace-pdf.teside  { color: var(--azul-teside);  border-color: rgba(47,107,224,.3); }
.enlace-pdf.rithana { color: var(--rojo-claro);   border-color: rgba(239,38,68,.28); }

/* ─── Pasos ───────────────────────────────────────────────────────────── */

.pasos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 34px 20px; }
.paso { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tinta-5); }
.paso .bola {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.06); color: var(--tinta-5);
}
.paso.aqui { color: var(--tinta); font-weight: 600; }
.paso.aqui .bola { background: var(--azul); color: #fff; }
.paso.hecho .bola { background: rgba(52,199,123,.18); color: var(--verde-claro); }
.pasos .raya { width: 28px; height: 1px; background: var(--borde); }

/* ─── Soltar archivo ──────────────────────────────────────────────────── */

.soltadero {
  /* Es un <label>: sin display de bloque, el borde se parte en pedazos alrededor del contenido. */
  display: flex; flex-direction: column; align-items: center;
  border: 1.5px dashed rgba(255,255,255,.16); border-radius: 14px;
  padding: 44px 24px; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.02);
}
.soltadero:hover, .soltadero.encima { border-color: rgba(76,141,255,.5); background: rgba(76,141,255,.06); }
.soltadero .grande { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }
.soltadero .chica { font-size: 13px; color: var(--tinta-5); }
.soltadero input { display: none; }

.columnas-leidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.columna-leida {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid var(--borde-suave);
}
.columna-leida .destino { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.columna-leida .origen { font-size: 13px; margin-top: 3px; }
.columna-leida.perdida { border-color: rgba(240,178,60,.3); background: rgba(240,178,60,.07); }
.columna-leida.perdida .origen { color: var(--ambar); }

/* Un bloque que viene después de un formulario también necesita su aire. */
form + .bloque { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--borde-suave); }

/* ─── Resumen ─────────────────────────────────────────────────────────── */

.tablero { display: flex; flex-direction: column; gap: 15px; margin: 0 34px; }
.rejilla { display: grid; gap: 15px; }
.rejilla.cuatro  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla.tres    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.ancha   { grid-template-columns: 2.05fr 1fr; }
.rejilla.media   { grid-template-columns: 1.55fr 1fr; }

.ficha {
  background: var(--vidrio);

  border: 1px solid var(--vidrio-borde); border-radius: 18px;
  box-shadow: var(--sombra), var(--vidrio-luz);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.ficha h2 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.ficha .sub { font-size: 12.5px; color: var(--tinta-5); }

/* Pastillas con tendencia */
.tarjeta { border-radius: 20px; padding: 17px 19px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta .rotulo { font-size: 12.5px; color: var(--tinta-5); font-weight: 500; }
.tarjeta .nota   { font-size: 11.5px; color: #7E8CA8; }
.tarjeta .cifra  { font-size: 29px; font-weight: 800; letter-spacing: -1.1px; line-height: 1.15;
                   -webkit-background-clip: text; background-clip: text;
                   color: transparent; -webkit-text-fill-color: transparent; }

/* La cifra principal: fondo lleno en azul marca que se abre a cian, en vez
   de un brillo tenue. Todo lo de dentro va en blanco para que se lea. */
.tarjeta.faro {
  background:
    radial-gradient(520px 260px at 100% -20%, rgba(125,227,255,.42), transparent 62%),
    linear-gradient(140deg, #1D4FD1 0%, #1668C8 48%, #0B8CC4 100%);
  border-color: rgba(160,235,255,.45);
  box-shadow: 0 14px 44px rgba(20,120,210,.34), inset 0 1px 0 rgba(255,255,255,.20);
}
.tarjeta.faro .cifra  { background-image: linear-gradient(140deg, #FFFFFF 0%, #EAF9FF 60%, #C6F1FF 100%); }
.tarjeta.faro .rotulo { color: rgba(236,248,255,.88); }
.tarjeta.faro .nota   { color: rgba(226,245,255,.74); }

.tarjeta.azul { background: radial-gradient(460px 240px at 102% -10%, rgba(47,107,224,.30), transparent 60%), rgba(255,255,255,.05); }
.tarjeta.azul .cifra  { background-image: linear-gradient(140deg, #DCE9FF 0%, #8FB8FF 45%, #3D7DF0 100%); }

.tarjeta.ambar { background: radial-gradient(460px 240px at 102% -10%, rgba(240,178,60,.24), transparent 60%), rgba(255,255,255,.05); }
.tarjeta.ambar .cifra { background-image: linear-gradient(140deg, #FFE7B8 0%, #F0B23C 55%, #D08A16 100%); }

.tendencia { font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.tendencia.sube { color: var(--verde-claro); }
.tendencia.baja { color: var(--rojo-claro); }

/* Selector de año */
.anios {
  display: flex; gap: 4px; padding: 3px; border-radius: 11px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);

}
.anios a { padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--tinta-4); }
.anios a:hover { color: var(--tinta-2); }
.anios a.aqui { background: rgba(47,107,224,.26); color: var(--azul-palido); font-weight: 600; }

/* Barras con nombre a la izquierda y cifra a la derecha */
.listado { display: flex; flex-direction: column; gap: 12px; margin-top: 11px; }
.listado .renglon { display: flex; align-items: center; gap: 12px; }
.listado .cual { width: 104px; flex-shrink: 0; font-size: 12.5px; color: var(--tinta-2); font-weight: 500;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listado .riel { flex-grow: 1; height: 12px; display: flex; }
.listado .riel > div { background: var(--azul); border-radius: 0 4px 4px 0; min-width: 2px; }
.listado .cuanto { width: 46px; text-align: right; font-size: 12.5px; font-weight: 700; }

/* Porcentaje grande con barra */
.porcentaje { font-size: 42px; font-weight: 800; letter-spacing: -1.8px; line-height: 1; }
.porcentaje span { font-size: 23px; color: var(--tinta-5); font-weight: 700; }

.apunte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(47,107,224,.08); border: 1px solid rgba(76,141,255,.16);
  font-size: 12.5px; color: var(--tinta-3);
}
.apunte strong { font-size: 15px; font-weight: 700; color: var(--tinta); }

.leyenda { display: flex; gap: 15px; font-size: 12px; flex-wrap: wrap; }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 14px; height: 2.5px; border-radius: 2px; display: inline-block; }

.canal-fila { display: flex; flex-direction: column; gap: 8px; }
.canal-fila .encima { display: flex; align-items: baseline; justify-content: space-between; }
.canal-fila .nombre { font-size: 12.5px; color: var(--tinta-2); font-weight: 500; }
.canal-fila .dato { font-size: 16px; font-weight: 700; }

.repartida { display: flex; height: 12px; gap: 2px; margin-top: 12px; }
.repartida > div:first-child { border-radius: 4px 0 0 4px; }
.repartida > div:last-child  { border-radius: 0 4px 4px 0; }
.repartida > div:only-child  { border-radius: 4px; }

.recuento { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.recuento .linea { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.recuento .linea span:first-of-type { color: var(--tinta-2); flex-grow: 1; }
.recuento .linea .valor { font-weight: 700; flex-grow: 0; }
.recuento .linea svg { flex-shrink: 0; }

@media (max-width: 1100px) {
  .tablero { margin: 0 18px; }
  .rejilla.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla.tres, .rejilla.ancha, .rejilla.media { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .rejilla.cuatro { grid-template-columns: 1fr; }
}

/* ─── Vista previa de los certificados ────────────────────────────────── */

.previas { display: flex; flex-direction: column; gap: 14px; }
.previa-entidad { display: flex; flex-direction: column; gap: 7px; }
.previa-entidad > .fila { display: flex; align-items: center; gap: 8px; }
.previa-entidad .medidas { font-size: 11.5px; color: var(--tinta-5); }
.previa-entidad .dominio {
  font-size: 10.5px; color: var(--tinta-5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.previa-entidad .dominio b { font-weight: 400; }

/* El papel. Las medidas van en porcentaje sobre la hoja real, y el tamaño
   de letra en cqw, para que todo escale junto cuando cambia el ancho. */
.hoja {
  position: relative; width: 100%; border-radius: 7px; overflow: hidden;
  background: #FDFDFE; container-type: inline-size;
}
.hoja img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hoja > div { position: absolute; }
.hoja .qr {
  background: #0A0A0A; padding: 5%; aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 4%;
}
.hoja .qr i { display: block; }

.hoja.teside  { aspect-ratio: 1499 / 1080; }
.hoja.rithana { aspect-ratio: 960 / 690; }

.nota-previa {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px;
  border-radius: 10px; background: rgba(47,107,224,.08); border: 1px solid rgba(76,141,255,.16);
  font-size: 11.5px; color: var(--tinta-3); line-height: 1.5;
}

/* Cada entidad con su color también al marcarla */
.marcas label.teside:has(input:checked) {
  background: rgba(47,107,224,.16); border-color: rgba(76,141,255,.35); color: var(--tinta);
}
.marcas label.rithana:has(input:checked) {
  background: rgba(239,38,68,.14); border-color: rgba(239,38,68,.32); color: var(--tinta);
}
.marcas label.rithana input { accent-color: var(--rojo); }

/* ── Movimiento del Resumen ─────────────────────────────────────────────── */

/* Pastillas: se elevan un poco y un brillo suave sigue al mouse. La línea
   de tendencia se vuelve a dibujar de izquierda a derecha. */
.tarjeta { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.tarjeta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), transparent 70%);
}
.tarjeta > * { position: relative; }
.tarjeta:hover { transform: translateY(-3px); border-color: rgba(140,180,255,.28); box-shadow: 0 18px 44px rgba(2,8,22,.45), inset 0 1px 0 rgba(255,255,255,.10); }
.tarjeta:hover::before { opacity: 1; }
.tarjeta.faro:hover { border-color: rgba(190,242,255,.7); box-shadow: 0 20px 54px rgba(20,120,210,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.tarjeta.faro::before { background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 70%); }
.tarjeta.ambar:hover { border-color: rgba(240,178,60,.35); }
.tarjeta svg { clip-path: inset(0 0 0 0); }
.tarjeta:hover svg { animation: redibuja .9s cubic-bezier(.3,.7,.2,1); }
@keyframes redibuja { from { clip-path: inset(0 100% 0 0); } }
.tarjeta .cifra { transition: transform .35s cubic-bezier(.2,.8,.2,1); transform-origin: left center; }
.tarjeta:hover .cifra { transform: scale(1.04); }

/* Gráficos de línea: al pasar el mouse lo de la izquierda se enciende */
.grafico-caja { position: relative; }
.grafico { cursor: crosshair; touch-action: pan-y; }
.grafico .base, .grafico .fijas { transition: opacity .3s; }
.grafico.activo .base { opacity: .38; }
.grafico.activo .fijas { opacity: 0; }
.grafico .viva { opacity: 0; transition: opacity .25s; }
.grafico.activo .viva { opacity: 1; }
.grafico .corte { transition: width .12s ease-out; }
.grafico .guia, .grafico .marca { opacity: 0; transition: opacity .2s, x .18s ease-out, cx .18s ease-out, cy .18s ease-out; pointer-events: none; }
.grafico.activo .guia, .grafico.activo .marca { opacity: 1; }
.grafico .marca { filter: drop-shadow(0 0 6px rgba(107,164,255,.8)); }
.grafico .mes { transition: fill .2s; }
.grafico .mes.aqui { fill: #E8ECF5; font-weight: 700; }

.globo {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s, left .18s ease-out, top .18s ease-out;
  min-width: 132px; padding: 9px 12px; border-radius: 10px;
  background: rgba(10,16,30,.92); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; color: var(--tinta-3); white-space: nowrap;
}
.con-globo .globo { opacity: 1; transform: none; }
.globo .cuando { font-size: 11.5px; color: var(--tinta-5); font-weight: 600; margin-bottom: 5px; text-transform: capitalize; }
.globo .fila { display: flex; align-items: center; gap: 7px; }
.globo .fila + .fila { margin-top: 3px; }
.globo .fila i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.globo .fila b { margin-left: auto; padding-left: 12px; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Barras por familia y por país: la fila que se señala se destaca */
.listado .renglon { transition: opacity .2s; }
.listado:hover .renglon { opacity: .5; }
.listado .renglon:hover { opacity: 1; }
.listado .riel > div { transition: filter .2s; }
.listado .renglon:hover .riel > div { filter: brightness(1.35); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta, .tarjeta .cifra, .tarjeta::before, .globo, .grafico *, .listado .renglon { transition: none !important; }
  .tarjeta:hover { transform: none; }
  .tarjeta:hover .cifra { transform: none; }
  .tarjeta:hover svg { animation: none; }
}

/* ── Emitir y enviar ────────────────────────────────────────────────────── */
.entrega { margin-bottom: 20px; }
.entrega-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.entrega-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.entrega-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entrega-texto strong { font-size: 15px; font-weight: 700; }
.entrega-texto span, .entrega-texto div > span { font-size: 13px; color: var(--tinta-4); }
.entrega-texto.con-icono { flex-direction: row; align-items: center; gap: 14px; }
.entrega-texto.con-icono > div { display: flex; flex-direction: column; gap: 3px; }
.entrega-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entrega-cifra { font-size: 26px; font-weight: 700; letter-spacing: -.6px; }
.entrega-cifra small { font-size: 14px; font-weight: 500; color: var(--tinta-5); letter-spacing: 0; }
.entrega-pie { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tinta-4); }
.entrega .rojo { color: var(--rojo-claro); } .entrega .verde { color: #5FD99C; } .entrega .ambar { color: var(--ambar); }
.circulo-ok { width: 40px; height: 40px; border-radius: 50%; background: rgba(52,199,123,.12); border: 1px solid rgba(52,199,123,.35);
              display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: brota .5s cubic-bezier(.2,.8,.2,1); }
@keyframes brota { from { transform: scale(.6); opacity: 0; } }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(76,141,255,.25); border-top-color: #4C8DFF; flex-shrink: 0; animation: gira-entrega .9s linear infinite; }
.girando.ambar { border-color: rgba(240,178,60,.25); border-top-color: #F0B23C; }
@keyframes gira-entrega { to { transform: rotate(360deg); } }
.entrega .barra > div { transition: width .8s cubic-bezier(.2,.8,.2,1); }
.canales { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.canal-cabeza { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-4); margin-bottom: 8px; }
.canal-cabeza b { color: var(--tinta); font-weight: 600; margin-right: 4px; }
.entrega-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.entrega-cifras > div { display: flex; flex-direction: column; gap: 4px; }
.entrega-cifras span { font-size: 12.5px; color: var(--tinta-4); }
.entrega-cifras b { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.entrega-cifras b small { font-size: 14px; color: var(--tinta-5); font-weight: 500; letter-spacing: 0; }
.entrega-cifras > div > small { font-size: 12px; color: var(--tinta-5); }
@media (max-width: 760px) { .canales, .entrega-cifras { grid-template-columns: 1fr 1fr; } }

/* Diálogos */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(3,6,14,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .18s; }
.velo[hidden] { display: none; }
.velo.abierto { opacity: 1; }
.dialogo { width: 100%; max-width: 560px; border-radius: 18px; background: #0E1525; border: 1px solid rgba(255,255,255,.12);
           box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 26px; display: flex; flex-direction: column; gap: 16px;
           transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.2,.8,.2,1); max-height: calc(100vh - 32px); overflow: auto; }
.velo.abierto .dialogo { transform: none; }
.dialogo-titulo { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.dialogo-sub { font-size: 13.5px; color: var(--tinta-4); margin-top: 4px; }
.dialogo-seccion { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); margin-bottom: -6px; }
.dialogo-texto { font-size: 13.5px; color: var(--tinta-3); line-height: 1.6; }
.dialogo-texto p { margin: 0 0 10px; }
.dialogo-texto b, .dialogo b { color: var(--tinta); }
.lista-ok { margin: 0; padding: 14px 16px 14px 36px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.lista-ok li { margin: 3px 0; }
.lista-ok li::marker { color: #5FD99C; }
.dialogo-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.dialogo-botones.centrados { justify-content: center; }
.casilla { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.09); cursor: pointer; color: var(--tinta-4); transition: background .15s, border-color .15s; }
.casilla input { width: 18px; height: 18px; accent-color: var(--azul); flex-shrink: 0; margin: 0; }
.casilla > span { display: flex; flex-direction: column; gap: 2px; }
.casilla strong { font-size: 13.5px; color: var(--tinta); font-weight: 600; }
.casilla small { font-size: 12px; color: var(--tinta-4); }
.casilla.marcada { background: rgba(47,107,224,.10); border-color: rgba(76,141,255,.30); }
.casilla.apagada { opacity: .6; cursor: not-allowed; }
.nota-azul { padding: 12px 14px; border-radius: 10px; background: rgba(47,107,224,.08); border: 1px solid rgba(76,141,255,.16); font-size: 12.5px; color: var(--tinta-3); line-height: 1.5; }
.dialogo .aviso { margin: 0; font-size: 12.5px; line-height: 1.5; }

/* Aviso de fin */
.celebra { max-width: 460px; align-items: center; text-align: center; padding: 40px 34px 30px; gap: 12px; }
.sello { position: relative; width: 88px; height: 88px; margin-bottom: 6px; }
.sello::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(52,199,123,.22), transparent 70%); }
.sello.aviso-ambar::before { background: radial-gradient(circle, rgba(240,178,60,.18), transparent 70%); }
.sello .icono { position: relative; }
.velo.abierto .sello .anillo { stroke-dasharray: 151; stroke-dashoffset: 151; animation: anillo-fin .5s .1s cubic-bezier(.65,0,.45,1) forwards; }
.velo.abierto .sello .visto { stroke-dasharray: 36; stroke-dashoffset: 36; animation: visto-fin .35s .5s cubic-bezier(.65,0,.45,1) forwards; }
@keyframes anillo-fin { to { stroke-dashoffset: 0; } }
@keyframes visto-fin { to { stroke-dashoffset: 0; } }
.velo.abierto .sello:not(.aviso-ambar) .icono { animation: latido-fin .4s .85s ease-out; }
@keyframes latido-fin { 50% { transform: scale(1.08); } }
.confetis { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.confetis span { position: absolute; left: 0; top: 0; opacity: 0; }
.celebra-titulo { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.celebra-etiqueta { margin-top: -4px; }
.cifras { display: flex; justify-content: center; margin: 6px 0 2px; }
.cifras > div { display: flex; flex-direction: column; gap: 3px; padding: 0 18px; }
.cifras > div + div { border-left: 1px solid rgba(255,255,255,.08); }
.cifras b { font-size: 20px; font-weight: 700; }
.cifras span { font-size: 12px; color: var(--tinta-4); }
.celebra-texto { font-size: 14px; color: var(--tinta-3); line-height: 1.5; max-width: 380px; }

@media (prefers-reduced-motion: reduce) {
  .velo, .dialogo, .entrega .barra > div { transition: none; }
  .girando, .circulo-ok { animation: none; }
  .velo.abierto .sello .anillo, .velo.abierto .sello .visto { animation: none; stroke-dashoffset: 0; }
  .velo.abierto .sello .icono { animation: none; }
}

/* ── Página del lanzamiento ─────────────────────────────────────────────── */
.mas { position: relative; }
.mas-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 270px; z-index: 20; padding: 6px;
            border-radius: 12px; background: #111A2E; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,0,0,.55);
            display: flex; flex-direction: column; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.mas.abierto .mas-menu { opacity: 1; transform: none; pointer-events: auto; }
.mas-menu a, .mas-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 0; background: none;
            font: inherit; font-size: 13.5px; color: var(--tinta); text-align: left; cursor: pointer; }
.mas-menu a:hover, .mas-menu button:hover { background: rgba(255,255,255,.06); color: var(--tinta); }
.mas-menu svg { color: var(--tinta-4); flex-shrink: 0; }
.mas-menu small { display: block; font-size: 11.5px; color: var(--tinta-5); margin-top: 2px; }
.mas-menu .peligro, .mas-menu .peligro svg { color: var(--rojo-claro); }
.mas-separa { height: 1px; background: rgba(255,255,255,.07); margin: 5px 6px; }

.estado-canal { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.estado-canal.bien   { background: rgba(52,199,123,.14); color: var(--verde-claro); }
.estado-canal.bien::before { content: "✓"; }
.estado-canal.gris   { background: rgba(255,255,255,.06); color: var(--tinta-2); }
.estado-canal.quieto { background: rgba(255,255,255,.04); color: var(--tinta-5); }
.estado-canal.falta  { padding: 0; color: var(--ambar); font-weight: 500; font-size: 12.5px; }
.estado-canal.falta::before { content: "⚠"; }

.nota-lista { margin-bottom: 16px; }
.motivo { display: flex; flex-direction: column; gap: 4px; }
.motivo strong { color: #F6C860; font-size: 13.5px; }
.motivo span { color: var(--tinta-4); font-size: 12.5px; line-height: 1.5; }
.tabla .fila input { padding: 9px 12px; font-size: 13px; min-width: 0; width: 100%; }
.estado-fila { font-size: 12.5px; }
.estado-fila.falta { color: var(--ambar); } .estado-fila.falta::before { content: "⚠ "; }
.estado-fila.listo { color: #5FD99C; } .estado-fila.listo::before { content: "✓ "; }
.pie-tabla { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--borde-suave); font-size: 12.5px; color: var(--tinta-4); }

.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.dialogo .campo { display: flex; flex-direction: column; gap: 7px; }
.dialogo .campo > span { font-size: 12.5px; color: var(--tinta-4); font-weight: 500; }
.vista-nombre { padding: 16px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.vista-nombre small { font-size: 12px; color: var(--tinta-4); }
.vista-nombre div { font-family: Georgia, serif; font-size: 20px; font-weight: 700; color: var(--tinta); margin-top: 6px; }
.boton.rojo { background: #D63A4F; }
.boton.rojo:hover { background: #E04A5E; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* Plantilla de Excel en Importar */
.plantilla-aviso { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.plantilla-icono { width: 44px; height: 44px; border-radius: 12px; background: rgba(52,199,123,.10); border: 1px solid rgba(52,199,123,.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plantilla-texto { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.plantilla-texto strong { font-size: 14.5px; }
.plantilla-texto span { font-size: 13px; color: var(--tinta-4); line-height: 1.5; }

/* ── Personas ───────────────────────────────────────────────────────────── */
.puntaje { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.puntaje b { font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.puntaje span { font-size: 12px; color: var(--tinta-5); }
.puntaje.grande b { font-size: 18px; font-weight: 800; }
.puntaje.grande span { font-size: 12.5px; color: var(--tinta-4); }
.punto-programa { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; flex-shrink: 0; vertical-align: middle; }
.compras { display: flex; flex-wrap: wrap; gap: 6px; max-height: 58px; overflow: hidden; }
.compra { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
          background: rgba(255,255,255,.06); color: var(--tinta-2); }
.compra .punto-programa { width: 6px; height: 6px; margin-right: 6px; }
.mas-compras { color: var(--tinta-4); }
.selector { width: auto; padding: 8px 13px; font-size: 13px; }
.tabla .titulos a { color: inherit; }

.columna { display: flex; flex-direction: column; gap: 20px; }
.columna > .panel { margin: 0; }
.ficha-compras { padding-bottom: 8px; }
.ficha-titulo { padding: 20px 22px 14px; }
.ficha-titulo h2 { margin: 0; font-size: 15px; font-weight: 700; }
.ficha-titulo .pie { font-size: 13px; color: var(--tinta-5); margin-top: 4px; }
.compra-bloque { padding: 16px 22px 6px; border-top: 1px solid rgba(255,255,255,.06); }
.compra-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.compra-nombre { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.compra-detalle { font-size: 12.5px; color: var(--tinta-5); padding-left: 14px; margin-top: 3px; }
.compra-detalle a { color: var(--tinta-4); }
.compra-fechas { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.cert-fila { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--borde-suave); }
.cert-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cert-texto .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--tinta-2); }
.cert-estado { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-4); }
.cert-botones { display: flex; gap: 7px; flex-shrink: 0; }
.boton.azul { color: #9CC4FF; border-color: rgba(76,141,255,.32); }
.datos { display: flex; flex-direction: column; gap: 14px; }
.datos > div:not(.raya) { display: flex; flex-direction: column; gap: 4px; }
.datos span { font-size: 12px; color: var(--tinta-5); font-weight: 600; }
.datos b { font-size: 14px; font-weight: 500; color: var(--tinta); word-break: break-word; }
.datos .raya { height: 1px; background: rgba(255,255,255,.06); }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--azul-claro); cursor: pointer; }
.enlace-boton:hover { color: var(--azul-palido); }
.nota-nueva textarea { width: 100%; resize: vertical; min-height: 70px; }
.nota { padding-top: 13px; margin-top: 13px; border-top: 1px solid rgba(255,255,255,.06); }
.nota-texto { font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.nota-pie { font-size: 12px; color: var(--tinta-5); margin-top: 6px; }
.nota-pie .enlace-boton { font-size: 12px; margin-left: 6px; color: var(--tinta-5); }
.afectado { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--tinta-3); }
.afectado .mono { font-family: ui-monospace, monospace; }
.casilla > .eti { flex-shrink: 0; }
.dialogo .ayuda { font-size: 11.5px; color: var(--tinta-5); }
@media (max-width: 1100px) { .doble { grid-template-columns: 1fr; } }

.tres-campos { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 13px; }

.canal-envio { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); font-size: 13px; }
.canal-envio svg { color: var(--tinta-4); }
.estado-envio { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.estado-envio strong { font-size: 13px; font-weight: 600; }
.estado-envio strong.ambar { color: var(--ambar); } .estado-envio strong.verde { color: #5FD99C; } .estado-envio strong.gris { color: var(--tinta-4); }
.estado-envio span { font-size: 12px; color: var(--tinta-5); overflow: hidden; text-overflow: ellipsis; }

/* ── Movimiento en todas las pestañas ───────────────────────────────────────
   Suave y corto: la página entra en cascada, las filas responden al mouse y
   las barras se llenan al cargar. Nada se mueve solo después de eso. */
@keyframes entra-suave { from { opacity: 0; transform: translateY(10px); } }
@keyframes fila-entra  { from { opacity: 0; transform: translateY(6px); } }
@keyframes llena       { from { width: 0; } }

.lienzo .cabecera { animation: entra-suave .45s cubic-bezier(.2,.8,.2,1) both; }
/* La animación crea su propia capa: sin esto, el menú «Más» queda debajo de las tarjetas. */
.lienzo .cabecera { position: relative; z-index: 30; }
.lienzo .filtros, .lienzo .pasos { animation: entra-suave .45s .06s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aparece-solo { from { opacity: 0; } }
.lienzo .panel, .lienzo .doble, .lienzo .tablero > * { animation: aparece-solo .5s .1s ease-out both; }
.lienzo .panel + .panel, .lienzo .tablero > * + * { animation-delay: .16s; }

/* Filas: entran una tras otra (solo las primeras, para no demorar) */
.tabla .fila:not(.titulos) { animation: fila-entra .35s cubic-bezier(.2,.8,.2,1) both; }
.tabla .fila:nth-child(2)  { animation-delay: .14s; } .tabla .fila:nth-child(3)  { animation-delay: .17s; }
.tabla .fila:nth-child(4)  { animation-delay: .20s; } .tabla .fila:nth-child(5)  { animation-delay: .23s; }
.tabla .fila:nth-child(6)  { animation-delay: .26s; } .tabla .fila:nth-child(7)  { animation-delay: .29s; }
.tabla .fila:nth-child(8)  { animation-delay: .32s; } .tabla .fila:nth-child(9)  { animation-delay: .35s; }
.tabla .fila:nth-child(10) { animation-delay: .38s; } .tabla .fila:nth-child(n+11) { animation-delay: .4s; }

/* Filas que llevan a algún lado: una raya azul entra por la izquierda */
.tabla .fila { transition: background .2s, box-shadow .25s; }
.tabla a.fila:hover { background: rgba(76,141,255,.07); box-shadow: inset 3px 0 0 var(--azul-claro); }
.tabla .fila:not(.titulos):not(a):hover { background: rgba(255,255,255,.025); }
.tabla a.fila .boton.chico { transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, border-color .2s; }
.tabla a.fila:hover .boton.chico { transform: translateX(3px); color: var(--tinta); border-color: rgba(76,141,255,.45); background: rgba(76,141,255,.12); }
.tabla a.fila .inicial { transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s; }
.tabla a.fila:hover .inicial { transform: scale(1.08); background: rgba(76,141,255,.24); }
.tabla a.fila .puntaje svg { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tabla a.fila:hover .puntaje svg { transform: scale(1.18) rotate(-12deg); }
.compra { transition: background .2s; }
.tabla a.fila:hover .compra { background: rgba(255,255,255,.09); }

/* Barras que se llenan al cargar (no las del avance en vivo, que se actualizan solas) */
.tabla .barra > div, .canal-fila .barra > div, .listado .riel > div { animation: llena .9s .25s cubic-bezier(.2,.8,.2,1) both; }

/* Botones y filtros */
.boton { transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; }
.boton:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(47,107,224,.25); }
.boton.sobrio:not(:disabled):hover { box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.boton:not(:disabled):active { transform: translateY(0) scale(.98); box-shadow: none; }
.filtro { transition: color .2s, border-color .2s, background .2s, transform .15s; }
.filtro:hover { transform: translateY(-1px); }

/* Ficha: bloques de compra y certificados */
.compra-bloque, .cert-fila { transition: background .2s; }
.cert-fila:hover { background: linear-gradient(90deg, transparent, rgba(255,255,255,.025) 20%, rgba(255,255,255,.025) 80%, transparent); }
.nota { animation: fila-entra .35s cubic-bezier(.2,.8,.2,1) both; }

/* Menú lateral */
.menu a { transition: background .2s, color .2s; }
.menu a svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.menu a:hover svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .lienzo .cabecera, .lienzo .filtros, .lienzo .pasos, .lienzo .panel, .lienzo .doble, .lienzo .tablero > *,
  .tabla .fila, .tabla .barra > div, .canal-fila .barra > div, .listado .riel > div, .nota { animation: none !important; }
  .boton:hover, .filtro:hover, .tabla a.fila:hover .boton.chico, .tabla a.fila:hover .inicial,
  .tabla a.fila:hover .puntaje svg, .menu a:hover svg { transform: none !important; }
}

/* Completar la base histórica */
.grupo-base { margin: 0 34px 10px; }
.grupo-base h2 { margin: 0 0 4px; font-size: 15px; }
.grupo-base .pie { font-size: 13px; color: var(--tinta-5); }
.cambios-base { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--tinta-3); min-width: 0; }
.cambios-base b { color: var(--tinta-4); font-weight: 600; margin-right: 4px; }
.cambios-base b.nuevo { color: var(--tinta); margin: 0; }
.cambios-base .rojo { color: var(--rojo-claro); } .cambios-base .ambar { color: var(--ambar); }
.cambios-base .distinto { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.cambios-base .distinto input { width: 15px; height: 15px; margin-top: 1px; accent-color: var(--azul); flex-shrink: 0; }

/* Sin desenfoque de fondo en paneles y pastillas: Safari lo partía en franjas
   (una raya vertical fija) al animar o al pasar el mouse. El fondo detrás es
   un degradado liso, así que un vidrio algo más opaco se ve igual. */
:root { --vidrio: rgba(255,255,255,0.058); }

/* Notas */
#notas { scroll-margin-top: 24px; }
.nota-aviso { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 12px; border-radius: 9px; overflow: hidden;
              background: rgba(52,199,123,.10); border: 1px solid rgba(52,199,123,.28); color: #9BE6C0; font-size: 13px;
              max-height: 60px; animation: nota-aviso 4s ease forwards; }
@keyframes nota-aviso {
  0%       { opacity: 0; transform: translateY(-4px); }
  8%, 82%  { opacity: 1; transform: none; max-height: 60px; margin-bottom: 12px; padding-top: 9px; padding-bottom: 9px; }
  100%     { opacity: 0; max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
.nota-pie .borrar-nota { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 8px; border-radius: 6px;
                         color: var(--tinta-4); transition: color .2s, background .2s; }
.nota-pie .borrar-nota:hover { color: var(--rojo-claro); background: rgba(239,38,68,.12); }
.nota-nueva textarea { outline: none; transition: border-color .2s, box-shadow .2s; }
.nota-nueva textarea:focus { border-color: rgba(76,141,255,.55); box-shadow: 0 0 0 3px rgba(47,107,224,.18); }
@media (prefers-reduced-motion: reduce) { .nota-aviso { animation: none; } }

/* Historial de entrega: línea de tiempo vertical */
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1.5px; background: rgba(255,255,255,.08); }
.evento { position: relative; display: flex; gap: 14px; padding: 0 0 16px; animation: fila-entra .35s cubic-bezier(.2,.8,.2,1) both; }
.evento:last-child { padding-bottom: 0; }
.evento.oculto { display: none; }
.evento-punto { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; position: relative;
                background: #0E1525; border: 2px solid var(--tinta-5); }
.evento.abierto .evento-punto { background: #34C77B; border-color: #34C77B; box-shadow: 0 0 0 4px rgba(52,199,123,.15); }
.evento.enviado .evento-punto { border-color: #4C8DFF; background: #1B3A78; }
.evento.emitido .evento-punto { border-color: #8A97B4; }
.evento.fallo .evento-punto   { border-color: var(--ambar); background: rgba(240,178,60,.25); }
.evento.cola .evento-punto    { border-style: dashed; }
.evento-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evento-texto strong { font-size: 13.5px; font-weight: 600; }
.evento.fallo .evento-texto strong { color: var(--ambar); }
.evento-texto span { font-size: 12px; color: var(--tinta-5); }
.tabla .titulos a { white-space: nowrap; }
.soltadero { margin-bottom: 24px; }

.caja-nuevo { padding: 14px 16px; border-radius: 12px; background: rgba(47,107,224,.07); border: 1px solid rgba(76,141,255,.22); }
.caja-nuevo label[for=nuevo_programa] { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }

/* ── Campos incompletos ─────────────────────────────────────────────────── */
@keyframes sacude { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes latido-error { 0% { box-shadow: 0 0 0 0 rgba(239,38,68,.45); } 100% { box-shadow: 0 0 0 7px rgba(239,38,68,0); } }
@keyframes aparece-error { from { opacity: 0; transform: translateY(-4px); } }
@keyframes entra-aviso { 0% { opacity: 0; transform: translateY(-10px); } 60% { opacity: 1; transform: translateY(2px); } 100% { transform: none; } }
.sacude { animation: sacude .45s cubic-bezier(.36,.07,.19,.97) both; }
input.malo, select.malo, textarea.malo { border-color: rgba(239,38,68,.65) !important; background-color: rgba(239,38,68,.06); animation: latido-error .9s ease-out 2; }
input.malo:focus, select.malo:focus, textarea.malo:focus { box-shadow: 0 0 0 3px rgba(239,38,68,.2); }
.error-campo { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--rojo-claro); animation: aparece-error .25s ease-out both; }
.error-campo::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.error-campo.se-va { opacity: 0; transition: opacity .2s; }
.aviso.mal.entra-aviso { animation: entra-aviso .5s cubic-bezier(.2,.8,.2,1) both, latido-error 1s .5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .sacude, input.malo, select.malo, textarea.malo, .error-campo, .aviso.mal.entra-aviso { animation: none !important; }
}

/* «hidden» siempre oculta, aunque la clase tenga su propio display */
[hidden] { display: none !important; }

/* Vista previa real del certificado */
.hoja { background: #fff; }
.hoja img.pdf-previa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s, filter .25s; }
.hoja img.pdf-previa:not([src]) { opacity: 0; }
.hoja.cargando img.pdf-previa { opacity: .55; filter: blur(1px); }
.girando-previa { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2.5px solid rgba(47,107,224,.25); border-top-color: #2F6BE0; animation: gira-entrega .9s linear infinite; opacity: 0; transition: opacity .2s; }
.hoja.cargando .girando-previa { opacity: 1; }
.hoja.fallo::after { content: "No se pudo generar la vista previa"; position: absolute; inset: auto 0 10px; text-align: center; font-size: 11px; color: #B42318; }

/* Color del programa nuevo */
.colores-programa { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.etiqueta-colores { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.muestras { display: flex; gap: 8px; }
.muestra { position: relative; cursor: pointer; }
.muestra input { position: absolute; opacity: 0; pointer-events: none; }
.muestra span { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
                box-shadow: inset 0 0 0 2px rgba(11,18,32,.9); transition: transform .15s, border-color .15s; }
.muestra:hover span { transform: scale(1.12); }
.muestra input:checked + span { border-color: #fff; transform: scale(1.12); }
.muestra input:focus-visible + span { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.nombre-color { margin: 0; }

.etiqueta-con-accion { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.caja-nuevo .etiqueta-con-accion { margin-bottom: 7px; }
.etiqueta-con-accion label { margin: 0 !important; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.accion-etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; border: 1px solid rgba(76,141,255,.35);
                   background: rgba(47,107,224,.10); color: var(--azul-palido); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
                   transition: background .2s, border-color .2s, transform .15s; }
.accion-etiqueta:hover { background: rgba(47,107,224,.2); border-color: rgba(76,141,255,.6); transform: translateY(-1px); }

.fila-con-boton { display: flex; gap: 10px; align-items: stretch; }
.fila-con-boton select { flex: 1; min-width: 0; }
.fila-con-boton .boton { padding: 0 16px; white-space: nowrap; }

.filtros-datos { margin-top: -8px; }
.rotulo-filtro { font-size: 12px; color: var(--tinta-5); font-weight: 600; margin-right: 2px; }

/* Resumen · alumnos */
.enlace-ficha { color: inherit; }
.enlace-ficha:hover { color: inherit; }
.barra-niveles { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 14px 0 12px; }
.barra-niveles span { display: block; min-width: 2px; animation: llena .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.leyenda-niveles { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.leyenda-niveles a { display: flex; align-items: center; gap: 7px; color: #9AA6BF; }
.leyenda-niveles a:hover { color: var(--tinta); }
.leyenda-niveles i { width: 8px; height: 8px; border-radius: 2px; }
.leyenda-niveles b { margin-left: auto; color: var(--tinta); font-weight: 600; }
.datos-completos { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 8px; }
.datos-completos a { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; color: #9AA6BF; font-size: 12.5px; }
.datos-completos a:hover { color: var(--tinta); }
.datos-completos b { font-size: 17px; font-weight: 700; color: var(--tinta); }
.datos-completos .barra { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.datos-completos .barra span { display: block; height: 100%; min-width: 3px; background: var(--ambar); border-radius: 3px; animation: llena .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.tarjeta.azul .datos-completos .barra span { background: #5FD99C; }
@media (prefers-reduced-motion: reduce) { .barra-niveles span, .datos-completos .barra span { animation: none; } }

@keyframes autollenado { 0% { box-shadow: 0 0 0 0 rgba(76,141,255,.5); background-color: rgba(47,107,224,.14); } 100% { box-shadow: 0 0 0 6px rgba(76,141,255,0); } }
input.autollenado { animation: autollenado .9s ease-out; }

.tabla .titulos a.ordenar { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; margin: -3px -6px; border-radius: 6px; transition: background .2s, color .2s; }
.tabla .titulos a.ordenar:hover { background: rgba(255,255,255,.06); color: var(--tinta-2); }
.tabla .titulos a.ordenar .flecha { opacity: .45; font-size: 11px; }
.tabla .titulos a.ordenar.activa { color: var(--azul-palido); }
.tabla .titulos a.ordenar.activa .flecha { opacity: 1; }

/* Satisfacción del lanzamiento */
.satisfaccion .verde { color: #5FD99C; } .satisfaccion .rojo { color: var(--rojo-claro); }
.comentarios { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde-suave); }
.comentario { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.comentario small { display: block; font-size: 11px; color: var(--tinta-5); font-weight: 600; }
.comentario-cabeza { display: flex; justify-content: space-between; align-items: center; }
.nota-nps { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(240,178,60,.15); color: var(--ambar); }
.nota-nps.alta { background: rgba(52,199,123,.14); color: #5FD99C; } .nota-nps.baja { background: rgba(239,38,68,.14); color: var(--rojo-claro); }
@media (max-width: 900px) { .comentarios { grid-template-columns: 1fr; } }

.evento.encuesta .evento-punto { border-color: #E2B93B; background: rgba(226,185,59,.3); }

/* ─── Importar: qué revisar ───────────────────────────────────────────── */
.que-hacer h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.que-hacer > .pie { font-size: 13px; color: var(--tinta-5); }
.que-hacer-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; margin-top: 16px; }
.que-hacer-item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 11px;
  background: rgba(240,178,60,.06); border: 1px solid rgba(240,178,60,.18); font-size: 13px; line-height: 1.5; }
.que-hacer-item.grave { background: rgba(239,38,68,.07); border-color: rgba(239,38,68,.22); }
.que-hacer-item .eti { min-width: 26px; text-align: center; flex-shrink: 0; }
.que-hacer-item strong { color: var(--tinta); font-weight: 600; }
.que-hacer-item .quienes { color: var(--tinta-5); margin-left: 6px; }
.que-hacer-item .accion { color: var(--tinta-3, #C9D2E3); margin-top: 3px; }
.tabla-importar .fila > div { min-width: 0; }
@media (max-width: 720px) { .que-hacer-lista { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .columnas-leidas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; } }

/* ─── Importar: nombre completo separado solo ─────────────────────────── */
.separacion { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde-suave); display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--tinta-3); line-height: 1.55; }
.separacion .ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: rgba(107,164,255,.12); color: var(--azul-claro); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.separacion b { color: var(--tinta); }
.tabla .fila.duda { background: rgba(240,178,60,.05); }
.tabla .fila.duda.lista { background: transparent; }
.fila .campo-nombre { width: 100%; padding: 7px 9px; font-size: 13px; border-radius: 8px; }
.fila.duda .campo-nombre { border-color: rgba(240,178,60,.45); }
.fila.duda.lista .campo-nombre { border-color: var(--borde); }
.fila .completo { font-size: 11.5px; color: var(--tinta-5); margin-top: 5px; }
.bien-asi { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; color: var(--tinta-4); margin-top: 3px; white-space: nowrap; }
.bien-asi input[type=checkbox] { flex: none; width: 15px; height: 15px; margin: 0; padding: 0; }
.contador { font-size: 13px; color: var(--ambar); font-weight: 600; }
.contador.listo { color: var(--verde-claro); }
.columna-leida.detectada { border-color: rgba(107,164,255,.35); background: rgba(47,107,224,.07); }
.columna-leida .como { font-size: 11px; color: var(--azul-claro); margin-top: 3px; }

/* Ficha: el nombre con su botón al lado */
.cabecera h1.titulo-con-accion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cabecera h1.titulo-con-accion .boton { font-size: 13px; font-weight: 600; letter-spacing: 0; }

/* ─── Pendientes de la base histórica ─────────────────────────────────── */
.tabla-pendientes { min-width: 1080px; }
.col-pendientes { display: grid; gap: 10px; align-items: center; grid-template-columns: 40px minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.4fr) 140px minmax(0,1.6fr); }
.tabla .fila.fila-pendiente { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.fila-pendiente input, .fila-pendiente select { padding: 7px 9px; font-size: 13px; border-radius: 8px; width: 100%; }
.pendiente-notas { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; padding-left: 50px; }
.pendiente-notas .motivo { color: var(--tinta-3); }
.pendiente-notas .ambar { color: var(--ambar); }
.acciones-masivas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--tinta-4); }
.lista-pendientes { display: flex; flex-direction: column; gap: 8px; }
.lista-pendientes a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(240,178,60,.25); background: rgba(240,178,60,.06); color: var(--tinta); font-size: 13.5px; }
.lista-pendientes a:hover { background: rgba(240,178,60,.1); color: var(--tinta); }

/* ─── Unir con… · Quitar · Papelera ───────────────────────────────────── */

.aviso-accion { align-items: center; justify-content: space-between; }
.aviso-accion .boton { flex-shrink: 0; }
.enlace-apagado { font-size: 12.5px; color: var(--tinta-5); opacity: .7; cursor: help; }
.dialogo.dialogo-unir { max-width: 640px; }
.unir-buscar { width: 100%; }
.unir-lista { max-height: 300px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 10px; }
.unir-grupo { font-size: 11.5px; font-weight: 600; color: var(--tinta-5); padding: 10px 14px 6px; position: sticky; top: 0; background: #0E1525; }
.unir-fila { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--borde-suave); padding: 10px 14px; font: inherit; color: var(--tinta-3); cursor: pointer; }
.unir-fila:hover, .unir-fila:focus-visible { background: rgba(76,141,255,.10); outline: none; }
.unir-fila strong { font-size: 13.5px; color: var(--tinta); font-weight: 600; margin-right: 6px; }
.unir-fila small { display: block; font-size: 12px; color: var(--tinta-4); margin-top: 3px; }
.unir-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.unir-lado { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.unir-lado strong { font-size: 13.5px; color: var(--tinta); }
.unir-lado small { font-size: 12px; color: var(--tinta-4); overflow-wrap: anywhere; }
.unir-rotulo { font-size: 11.5px; color: var(--tinta-5); margin-bottom: 4px; }
.unir-rotulo b { color: #5FD99C; }
.unir-resultado b { overflow-wrap: anywhere; }
@media (max-width: 560px) { .unir-par { grid-template-columns: 1fr; } }
.unir-resultado { display: grid; gap: 7px; margin-top: 8px; border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; }
.unir-resultado > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; }
.unir-resultado > div > span { color: var(--tinta-4); flex-shrink: 0; }
.unir-resultado > div > b { text-align: right; font-weight: 600; }

/* ─── Pegar o subir (paso 1 de las cargas) ────────────────────────────── */

.carga { position: relative; }
.carga-titulo { display: block; font-size: 15px; font-weight: 600; color: var(--tinta); margin-bottom: 10px; }
.carga-zona { position: relative; }
.carga-zona textarea { width: 100%; min-height: 230px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; tab-size: 18; white-space: pre; overflow-x: auto; }
.carga-zona textarea:disabled { opacity: .45; }
.carga-soltar { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 10px;
  border: 2px dashed rgba(76,141,255,.6); background: rgba(14,21,37,.92); color: #9CC4FF; font-size: 14px; font-weight: 600; pointer-events: none; }
.carga.encima .carga-soltar { display: flex; }
.carga-ayuda { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--tinta-5); margin-top: 8px; line-height: 1.5; }
.carga-ayuda .num { flex-shrink: 0; color: var(--tinta-3); }
.carga-archivo { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(52,199,123,.28); background: rgba(52,199,123,.08); font-size: 13px; color: var(--tinta-2); }
.carga-archivo[hidden] { display: none; }
.carga-otras { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde-suave); font-size: 12.5px; color: var(--tinta-5); }
.carga-otras a { color: var(--azul-claro); }
.carga-cuenta { display: flex; align-items: baseline; gap: 12px; flex-shrink: 0; }
.carga-cuenta .enlace-boton[hidden] { display: none; }