@import url('marca.css');

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--pbs-gris);
  color:var(--pbs-texto);
  font-family:var(--tipo-texto);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--tipo-titulo);margin:0;font-weight:600;line-height:1.15}
a{color:var(--pbs-teal)}
:focus-visible{outline:3px solid var(--pbs-teal);outline-offset:2px}
.oculto{display:none!important}
.dato{font-family:var(--tipo-dato);font-variant-numeric:tabular-nums}

/* ---------- controles ---------- */
.btn{
  font-family:var(--tipo-titulo);font-weight:500;font-size:14px;
  background:var(--pbs-azul);color:var(--blanco);border:1px solid var(--pbs-azul);
  padding:10px 18px;border-radius:var(--r);cursor:pointer;transition:background .15s;
}
.btn:hover{background:var(--pbs-noche);border-color:var(--pbs-noche)}
.btn.sec{background:transparent;color:var(--pbs-azul);border-color:var(--pbs-azul-20)}
.btn.sec:hover{background:var(--pbs-azul-20)}
.btn.oro{background:var(--pbs-oro);border-color:var(--pbs-oro);color:var(--pbs-noche)}
.btn.riesgo{background:transparent;color:var(--alerta);border-color:var(--alerta)}
.btn.chico{padding:6px 12px;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.campo{display:block;margin-bottom:14px}
.campo>span{
  display:block;font-family:var(--tipo-titulo);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pbs-apagado);margin-bottom:6px;
}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 13px;border:1px solid var(--pbs-linea);border-radius:var(--r);
  background:var(--blanco);font-family:var(--tipo-texto);font-size:15px;color:var(--pbs-texto);
}
.campo textarea{min-height:170px;font-family:var(--tipo-dato);font-size:13px;line-height:1.7}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--pbs-teal);outline:none;box-shadow:0 0 0 3px var(--pbs-teal-15)}

/* ---------- acceso ----------
   Fondo claro por indicación del manual (Estructura Gráfica y
   Recomendaciones Finales: "procurar el manejo de colores claros").
   El logotipo va en la posición principal: superior central. */
.acceso{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--pbs-gris)}
.acceso::before{
  content:"";position:fixed;inset:0;
  background:linear-gradient(180deg,#f7f8f8 0%,var(--pbs-gris) 60%);
  pointer-events:none;
}
.acceso-caja{
  position:relative;width:100%;max-width:430px;background:var(--blanco);
  border-radius:var(--r);box-shadow:0 2px 4px rgba(20,33,51,.04),0 24px 60px rgba(20,33,51,.12);
  border:1px solid var(--pbs-linea);overflow:hidden;
}
/* El área de reserva del manual (12X x 10X) se traduce aquí en el
   espacio libre alrededor del logotipo: nada lo invade. */
.acceso-cima{padding:var(--reserva) 28px calc(var(--reserva) - 8px);text-align:center;border-bottom:1px solid var(--pbs-linea)}
.acceso-cima img{width:118px;height:auto;display:block;margin:0 auto}
.acceso-cuerpo{padding:26px 28px 30px}
.acceso-cuerpo h1{font-size:21px;margin-bottom:6px;color:var(--pbs-azul)}
.acceso-cuerpo p.intro{color:var(--pbs-apagado);font-size:14px;margin:0 0 22px}
.aviso-error{
  background:var(--alerta-15);color:var(--alerta);border-left:3px solid var(--alerta);
  padding:11px 13px;border-radius:0 var(--r) var(--r) 0;font-size:14px;margin-bottom:16px;
}
.acceso-pie{border-top:1px solid var(--pbs-linea);padding:15px 28px;background:var(--pbs-gris);font-size:12.5px;color:var(--pbs-apagado)}

/* ---------- cabecera ----------
   El nombre de la empresa cliente ocupa la izquierda y el logotipo de
   PBS la esquina superior derecha, como indica el manual cuando la
   pieza comparte espacio con otra organización. */
.cabecera{
  background:var(--blanco);color:var(--pbs-texto);padding:10px 24px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  position:sticky;top:0;z-index:30;border-bottom:1px solid var(--pbs-linea);
}
.cabecera .marca-pbs{
  height:46px;width:auto;order:99;margin-left:var(--reserva);
}
.cabecera .rotulo{font-family:var(--tipo-titulo);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pbs-apagado)}
.cabecera h2{font-size:19px;font-weight:600;color:var(--pbs-azul)}
.cabecera .separa{flex:1}
.cabecera .btn.sec{color:var(--pbs-azul);border-color:var(--pbs-azul-20)}
.cabecera .btn.sec:hover{background:var(--pbs-azul-20)}
.envoltura{max-width:1220px;margin:0 auto;padding:26px 24px 80px}

/* ---------- tarjetas ---------- */
.tarjeta{background:var(--blanco);border:1px solid var(--pbs-linea);border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:20px;overflow:hidden}
.tarjeta>header{padding:15px 18px;border-bottom:1px solid var(--pbs-linea);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tarjeta>header h3{font-size:17px}
.tarjeta>header .separa{flex:1}
.tarjeta-cuerpo{padding:18px}

.ficha-sesion{padding:20px 18px 0}
.ficha-sesion h3{font-size:23px;color:var(--pbs-azul)}
.ficha-sesion .meta{color:var(--pbs-apagado);font-size:13.5px;margin-top:4px}
.barra-pulso{display:flex;height:8px;background:var(--pbs-gris);margin-top:18px}
.barra-pulso i{display:block;height:100%}
.cifras{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--pbs-linea)}
.cifra{padding:14px 16px;border-right:1px solid var(--pbs-linea)}
.cifra:last-child{border-right:0}
.cifra b{display:block;font-family:var(--tipo-titulo);font-size:26px;font-weight:600;line-height:1}
.cifra span{font-family:var(--tipo-titulo);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pbs-apagado)}
.cifra.completo b{color:var(--estado-completo)}
.cifra.parcial b{color:var(--estado-parcial)}
.cifra.insuf b{color:var(--estado-insuf)}

/* ---------- filtros ---------- */
.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filtros .campo{margin-bottom:0;min-width:160px}
.filtros .buscar{flex:1;min-width:220px}
.fichas{display:flex;gap:6px;flex-wrap:wrap}
.ficha{
  font-family:var(--tipo-titulo);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  background:var(--blanco);border:1px solid var(--pbs-linea);color:var(--pbs-apagado);
  padding:9px 14px;border-radius:var(--r);cursor:pointer;
}
.ficha[aria-pressed="true"]{background:var(--pbs-azul);border-color:var(--pbs-azul);color:var(--blanco)}

/* ---------- lista ---------- */
.encabezado,.renglon{
  display:grid;grid-template-columns:minmax(180px,2fr) 76px 76px minmax(200px,2.6fr) 70px 116px;
  gap:14px;align-items:center;padding:12px 18px;
}
.encabezado{
  background:var(--pbs-gris);border-bottom:1px solid var(--pbs-linea);
  font-family:var(--tipo-titulo);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--pbs-apagado);
}
.renglon{border-bottom:1px solid var(--pbs-gris)}
.renglon:last-child{border-bottom:0}
.renglon:hover{background:#fafbfb}
.persona{font-weight:600;font-family:var(--tipo-titulo);font-size:14.5px}
.codigo{font-family:var(--tipo-dato);font-size:11.5px;color:var(--pbs-apagado)}
.hora{font-family:var(--tipo-dato);font-size:13.5px}
.hora.sin{color:var(--pbs-linea)}
.porcentaje{font-family:var(--tipo-titulo);font-weight:600;font-size:15px;text-align:right}

/* barra de permanencia */
.permanencia{position:relative;height:22px;background:var(--pbs-gris);border-radius:2px;overflow:hidden}
.permanencia i{position:absolute;top:0;bottom:0;background:var(--pbs-teal)}
.permanencia i.breve{background:var(--pbs-oro)}
.permanencia .sin-marca{
  position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;color:var(--pbs-apagado);
  font-family:var(--tipo-titulo);letter-spacing:.12em;text-transform:uppercase;
}
.escala{display:flex;justify-content:space-between;font-family:var(--tipo-dato);font-size:10px;color:var(--pbs-apagado);margin-top:3px}

.etiqueta{
  font-family:var(--tipo-titulo);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;display:inline-block;white-space:nowrap;
}
.e-completo{background:var(--estado-completo-fondo);color:var(--estado-completo)}
.e-parcial{background:var(--estado-parcial-fondo);color:var(--estado-parcial)}
.e-insuficiente{background:var(--estado-insuf-fondo);color:var(--estado-insuf)}
.e-ausente{background:var(--estado-ausente-fondo);color:var(--estado-ausente)}

.vacio{padding:48px 24px;text-align:center;color:var(--pbs-apagado)}
.vacio h3{color:var(--pbs-texto);margin-bottom:8px;font-size:19px}

/* ---------- resumen del curso ---------- */
.malla{overflow-x:auto;background:var(--blanco);border:1px solid var(--pbs-linea);border-radius:var(--r)}
.malla table{border-collapse:collapse;width:100%}
.malla th,.malla td{padding:8px 10px;border-bottom:1px solid var(--pbs-gris);text-align:left;font-size:13px;white-space:nowrap}
.malla thead th{background:var(--pbs-gris);font-family:var(--tipo-titulo);font-size:11px;letter-spacing:.08em;text-transform:uppercase;position:sticky;top:0}
.malla .fija{position:sticky;left:0;background:var(--blanco);z-index:2;min-width:200px;border-right:1px solid var(--pbs-linea)}
.malla thead .fija{background:var(--pbs-gris);z-index:3}
.cuadro{display:inline-block;width:24px;height:24px;border-radius:2px;font-family:var(--tipo-dato);font-size:10px;line-height:24px;text-align:center;color:var(--blanco)}
.c-completo{background:var(--pbs-teal)}
.c-parcial{background:var(--pbs-oro);color:var(--pbs-noche)}
.c-insuficiente{background:var(--alerta)}
.c-ausente{background:var(--pbs-gris);color:var(--pbs-apagado)}

/* ---------- pestañas ---------- */
.pestanas{display:flex;gap:2px;border-bottom:1px solid var(--pbs-linea);margin-bottom:20px}
.pestana{
  background:none;border:0;border-bottom:3px solid transparent;padding:11px 16px;cursor:pointer;
  font-family:var(--tipo-titulo);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--pbs-apagado);
}
.pestana[aria-selected="true"]{color:var(--pbs-azul);border-bottom-color:var(--pbs-oro)}

/* ---------- administración ---------- */
.pasos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.paso{
  font-family:var(--tipo-titulo);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  padding:7px 13px;border:1px solid var(--pbs-linea);border-radius:var(--r);color:var(--pbs-apagado);
}
.paso.activo{background:var(--pbs-azul);color:var(--blanco);border-color:var(--pbs-azul)}
.paso.hecho{border-color:var(--pbs-teal);color:var(--pbs-teal)}
.soltar{border:2px dashed var(--pbs-linea);border-radius:var(--r);padding:34px 20px;text-align:center;background:#fbfcfc}
.soltar.encima{border-color:var(--pbs-teal);background:var(--pbs-teal-15)}
.soltar p{margin:10px 0 0;color:var(--pbs-apagado);font-size:13.5px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.nota{padding:12px 14px;border-left:3px solid var(--pbs-oro);background:var(--pbs-oro-15);border-radius:0 var(--r) var(--r) 0;font-size:14px;margin-bottom:16px}
.nota.bien{border-color:var(--pbs-teal);background:var(--pbs-teal-15)}
.nota.mal{border-color:var(--alerta);background:var(--alerta-15)}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tabla-asig{max-height:440px;overflow:auto;border:1px solid var(--pbs-linea);border-radius:var(--r)}
.tabla-asig table{border-collapse:collapse;width:100%;font-size:13.5px}
.tabla-asig th,.tabla-asig td{padding:8px 11px;border-bottom:1px solid var(--pbs-gris);text-align:left}
.tabla-asig th{background:var(--pbs-gris);position:sticky;top:0;font-family:var(--tipo-titulo);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tabla-asig select{width:100%;padding:7px 9px;border:1px solid var(--pbs-linea);border-radius:var(--r);background:var(--blanco)}
.marca-auto{font-family:var(--tipo-titulo);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--pbs-teal-15);color:var(--pbs-teal);padding:2px 6px;border-radius:2px;margin-right:7px}

.brindis{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:60;
  background:var(--pbs-noche);color:var(--blanco);padding:12px 20px;border-radius:var(--r);
  box-shadow:0 12px 34px rgba(20,33,51,.3);font-size:14px;max-width:90vw;
}
.brindis.mal{background:var(--alerta)}

@media (max-width:880px){
  .encabezado{display:none}
  .renglon{grid-template-columns:1fr auto;gap:8px 14px;padding:16px}
  .renglon .celda-persona,.renglon .celda-barra{grid-column:1/-1}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra{border-bottom:1px solid var(--pbs-linea)}
  .cabecera h2{font-size:16px}
  .cabecera img{height:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- íconos (estilo iconográfico del manual) ---------- */
/* Alineación vertical con el texto y grosor coherente en todos los tamaños. */
.btn svg,.pestana svg,.etiqueta svg,.cifra span svg,.ficha svg{
  vertical-align:-0.14em;margin-right:.4em;flex:none;
}
.btn svg{margin-right:.45em}
.etiqueta{display:inline-flex;align-items:center;gap:.35em}
.etiqueta svg{margin:0}
.cifra span{display:inline-flex;align-items:center;gap:.34em}
.cifra span svg{margin:0;color:currentColor;opacity:.85}
.pestana{display:inline-flex;align-items:center}
.pestana svg{margin-right:.4em}
/* En las cifras el ícono toma el color del estado (hereda de .completo/.parcial/.insuf) */
.cifra.completo span{color:var(--estado-completo)}
.cifra.parcial span{color:var(--estado-parcial)}
.cifra.insuf span{color:var(--estado-insuf)}