/* =======================  BASE ======================= */
@font-face{
  font-family:'Urbanist';
  src:url('/libreria/fonts/Urbanist-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Urbanist';
  src:url('/libreria/fonts/Urbanist-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900; font-style:italic; font-display:swap;
}
:root{
  --gg-font:'Urbanist',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  --gg-surface:#ffffff; --gg-muted:#f7f8fa; --gg-subtle:#fafafa;
  --gg-border:#e5e7eb; --gg-border-strong:#d1d5db;
  --gg-text:#111827; --gg-text-2:#4b5563; --gg-text-3:#6b7280;
  --gg-brand:#183a64; --gg-brand-2:#069ad3; --gg-red:#e30613;
  --gg-green:#8BC34A; --gg-blue:#0ea5e9; --gg-yellow:#ffc107;
  --gg-radius:12px; --gg-shadow:0 6px 14px rgba(17,24,39,.06);
  --gg-shadow-sm:0 2px 6px rgba(17,24,39,.06);
}
table th, table td{ font-size:15px; }
header{ background:#e30613; border-bottom:6px solid #183a64; }
nav li{ list-style:none; display:inline-block; color:#002149; }
.navbar-brand img{ max-width:150px; }
main{ padding:40px 0; min-height:900px; }

.contenedor-login{ background:#f7f7f7; padding:40px; border-radius:10px; margin:10px; border:2px solid #0062cc; }
.contenedor-login h3{ color:#002149; margin-bottom:20px; font-size:22px!important; }

#form-cursos,#form-listado-cursos{ background:#f8f9fa; padding:30px; border-radius:6px; }
footer{ background:#183a64; padding-bottom:10px; }
#pre-footer{ padding:50px 0; background:#012b48; color:#fff; }

.boton-flotante{ position:fixed; bottom:0; margin-bottom:40px; z-index:2000; padding-top:4px; margin-left:10px; border-radius:100%; width:50px; height:50px; text-align:center; }
.confirmacion-datos{
  position:fixed; bottom:0; width:100%; height:30px; z-index:2000;
  box-shadow:0 -7px 24px -9px rgb(0 0 0 / 68%); margin-bottom:45px;
  background:#e30613; color:#fff; text-align:center; font-size:14px; padding-top:3px; display:none;
}

footer .row>div p{ text-align:center; color:#eaeaea; padding-top:10px; font-size:17px; margin-bottom:0; }

.table-striped tbody tr:nth-of-type(odd){ background:rgb(248,249,250); }
.contenedor-botones{ text-align:center; border-bottom:5px solid #716969; }

.info-extra{ display:none; background:#a1a2a254 !important; font-size:12px; }
.matriculado{ border-left:10px solid #8bc34a; }
.descartado{ border-left:10px solid #e11d48; }
/* .apto antigua sin uso explícito, se deja neutra para no interferir */

.info-extra td,.info-extra th{ font-size:13px; }
.modal-body p.title{ background:#007bff; color:#fff; padding:5px 5px 5px 15px; }
h1.title{ border-bottom:1px solid; color:#0080c9; margin-bottom:25px; }

.bloque{ background:#f8f9fa; padding:30px; border-radius:15px; margin-bottom:25px; }
.contenedor-botones-control{ margin-bottom:20px; }

#content-busqueda-alumno-vivo{ background:#fff; border-radius:10px; }
#content-busqueda-alumno-vivo li{ list-style:none; border-bottom:1px dotted #ccc; padding:10px; }
#content-busqueda-alumno-vivo li:hover{ background:#0080c9; color:#fff; cursor:pointer; }

h4.ficha-registro{ display:inline-block; background:#069ad3; color:#fff; padding:0 10px; }
h4.barra-roja{ background:#e30613; font-size:15px; color:#fff; text-align:center; margin-bottom:10px; padding:6px; }

.fa-check-circle{ color:#11da11; }
.fa-times-circle{ color:#e11d48; }
.bloque h4{ color:#ff4e00; }
#historial-comentarios i:hover{ cursor:pointer; }

.left{text-align:left;} .rigth{text-align:right;} .center{text-align:center;}
.btn-naranja{ background:#ff4e00; border-color:#ff4e00; font-size:12px; color:#fff!important; }
.btn-verde{ background:#8BC34A; border-color:#8bc34a; font-size:12px; }
.btn-rojo{ background:#dc3545; border-color:#dc3545; font-size:12px; }
.btn-amarillo{ background:#F1C40F; border-color:#F1C40F; font-size:12px; }
.btn-azul2{ background:#069ad3; border-color:#069ad3; font-size:12px; }

.titulo-seccion{ background:#007bff; color:#fff; padding:5px 0 5px 20px; border-radius:10px; font-size:20px; margin-bottom:20px; }
#cuerpo-info-curso p{ margin-bottom:0; } #cuerpo-info-curso{ text-align:center; }
.bottom-20{ margin-bottom:20px; }

#content-busqueda-alumno-vivo{ display:none; position:absolute; z-index:5; max-height:280px; overflow-y:auto; border:1px solid #ccc; }

#navbarSupportedContent .navbar-nav{ display:inline-block; float:right; margin-top:15px; }
#navbarSupportedContent .navbar-nav a{ font-size:17px; color:#fff; }
#navbarSupportedContent .navbar-nav a:hover{ background:#0062cc; }

.titulo-pag{ color:#007bff; }
.info-extra p{ margin-bottom:10px; }
.info-detalle-curso p{ margin-bottom:2px; }

.bloque-delegacion{ background:#f8f9fa; padding:25px; margin-bottom:30px; }
.bloque-delegacion h3{ border-bottom:1px solid; padding-bottom:10px; }
.bloque-delegacion label{ margin-right:15px; font-size:18px; }
.medium-select{ font-size:18px; padding:5px; vertical-align:middle; border-radius:5px; }

.form-group{ margin-bottom:0.4rem; }
#usuario-conectado{ color:#007bff; font-style:oblique; }
p.custom-green{ color:#03bf03; }
.total-resultados{ text-align:right; }

.contenedor-titulos label,#contenedor-titulos label{ border:1px solid #007bff; padding:10px; margin-right:10px; }
.contenedor-titulos label:hover,#contenedor-titulos label:hover{ background:#007bff; color:#fff; cursor:pointer; }
.contenedor-titulos label input,#contenedor-titulos label input{ margin-right:7px; }
.contenedor-titulos-comprobacion label,#contenedor-titulos-comprobacion label{ border:1px solid #03bf03; padding:10px; margin-right:10px; }
.contenedor-titulos-comprobacion label input,#contenedor-titulos-comprobacion label input{ margin-right:7px; }

.subseccion{ font-size:26px; border-bottom:1px double; margin-bottom:30px; padding-bottom:10px; }
.text-secundario{ font-style:oblique; }

.impar{ background:#c8f1f7 !important; }
.par{ background:#fff !important; }
.abandono{ background:#e8bcb7 !important; } /* uso general fuera de la lista responsive */

.btn-danger{ color:#fff!important; }
.blockUI h2{ font-size:27px; }
.content-grafica{ width:100%; background:#ececec; height:25px; margin-top:10px; }
.porcentaje-alcanzado{ height:25px; background:#ff4e00; text-align:center; color:#fff; padding-top:2px; }

.btn{ margin-bottom:5px; }
.titulaciones-matriculados li{ display:inline-block; border:2px solid #007bff; padding:0 10px; }
.titulaciones-matriculados{ margin:5px 0; }

.fecha-alta-text{ margin:4px 0 0; font-size:12px; }
.pagado{ border-right:10px solid #007bff; }
.carnet{ border-right:10px solid #ffc107; }

.bloque-expedicion-diploma{ background:#eeeeef; padding:15px; margin-bottom:20px; border-radius:10px; }
.content-id-curso h3{ color:#007bff; }

@media (max-width:991px){ .navbar-nav li{ width:100%; text-align:center; } }
@media (min-width:992px){ #navbarSupportedContent{ display:inline-block!important; } }

/* =================== LISTADO ALUMNOS (RESPONSIVE) =================== */
/* Evita cortes de bandas exteriores */
.alumnos-responsive,
.alumnos-responsive table,
.alumnos-responsive tbody{ overflow:visible!important; }

/* ---------- Desktop / Tablet ---------- */
@media (min-width:766px){
  .alumnos-responsive tr.fila-principal td,
  .alumnos-responsive tr.info-extra td,
  .alumnos-responsive tr.contenedor-botones td{
    background:var(--gg-surface); color:var(--gg-text); border:0; vertical-align:middle;
  }
  .alumnos-responsive tr.fila-principal td{ padding:.70rem .90rem; }
  .alumnos-responsive tr.fila-principal td:first-child{ border-top-left-radius:var(--gg-radius); box-shadow:var(--gg-shadow); position:relative; }
  .alumnos-responsive tr.fila-principal td:last-child{  border-top-right-radius:var(--gg-radius); position:relative; }
  .alumnos-responsive tr.info-extra td{ background:var(--gg-subtle); /*padding:1rem .95rem;*/ position:relative; }
  .alumnos-responsive tr.contenedor-botones td{ background:var(--gg-subtle); padding:.75rem .95rem; border-bottom-left-radius:var(--gg-radius); border-bottom-right-radius:var(--gg-radius); position:relative; }

  /* Bandas exteriores (fuera de la caja) */
  .alumnos-responsive tr.fila-principal>td:first-child::before,
  .alumnos-responsive tr.info-extra>td:first-child::before,
  .alumnos-responsive tr.contenedor-botones>td:first-child::before{
    content:""; position:absolute; left:-8px; top:0; bottom:0; width:8px; z-index:1;
  }
  .alumnos-responsive tr.fila-principal>td:last-child::after,
  .alumnos-responsive tr.info-extra>td:last-child::after,
  .alumnos-responsive tr.contenedor-botones>td:last-child::after{
    content:""; position:absolute; right:-8px; top:0; bottom:0; width:8px; z-index:1;
  }
  /* Izquierda */
  .alumnos-responsive tr.matriculado>td:first-child::before{ background:#8BC34A; }
  .alumnos-responsive tr.descartado>td:first-child::before{ background:#e11d48; }
  .alumnos-responsive tr.abandono>td:first-child::before{ background:#e30613; }
  /* Derecha */
  .alumnos-responsive tr.pagado>td:last-child::after{ background:#0ea5e9; }
  .alumnos-responsive tr.carnet>td:last-child::after{ background:#ffc107; }

  /* Redondeos continuidad tarjeta */
  .alumnos-responsive tr.fila-principal>td:first-child::before{ border-top-left-radius:12px; }
  .alumnos-responsive tr.fila-principal>td:last-child::after{  border-top-right-radius:12px; }
  .alumnos-responsive tr.contenedor-botones>td:first-child::before{ border-bottom-left-radius:12px; }
  .alumnos-responsive tr.contenedor-botones>td:last-child::after{  border-bottom-right-radius:12px; }

  /* IMPAR: extiende el “azulito” */
  .alumnos-responsive tr.fila-principal.impar td{ background:#c8f1f7!important; }
  .alumnos-responsive tr.fila-principal.impar + tr.info-extra td,
  .alumnos-responsive tr.fila-principal.impar + tr.info-extra + tr.contenedor-botones td{ background:#d9f2f8!important; }

  /* ABANDONO: toda la tarjeta en rojo claro */
  .alumnos-responsive tr.fila-principal.abandono td,
  .alumnos-responsive tr.fila-principal.abandono + tr.info-extra td,
  .alumnos-responsive tr.fila-principal.abandono + tr.info-extra + tr.contenedor-botones td{ background:#ffe8e8!important; }

  /* LÍNEA ROJA SUPERIOR (noapto y abandono) */
  .alumnos-responsive tr.fila-principal.noapto td,
  .alumnos-responsive tr.fila-principal.abandono td{ border-top:6px solid #e30613!important; }
  .alumnos-responsive tr.info-extra.noapto td,
  .alumnos-responsive tr.contenedor-botones.noapto td,
  .alumnos-responsive tr.info-extra.abandono td,
  .alumnos-responsive tr.contenedor-botones.abandono td{ border-top:0!important; }

  /* Etiquetas junto al NOMBRE (2º td) */
  .alumnos-responsive tr.fila-principal.noapto  > td:nth-of-type(2),
  .alumnos-responsive tr.fila-principal.abandono> td:nth-of-type(2){ position:relative; padding-right:88px; }
  .alumnos-responsive tr.fila-principal.noapto  > td:nth-of-type(2)::after,
  .alumnos-responsive tr.fila-principal.abandono> td:nth-of-type(2)::after{
    position:absolute; right:10px; top:-12px; z-index:6; display:inline-block; white-space:nowrap;
    font:700 11px/1 var(--gg-font); color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.12); content:"";
  }
  .alumnos-responsive tr.fila-principal.noapto  > td:nth-of-type(2)::after{ content:"NO APTO"; background:#c81e1e; }
  .alumnos-responsive tr.fila-principal.abandono> td:nth-of-type(2)::after{ content:"ABAND.";  background:#e30613; }
}

/* Historial cerrado por defecto */
.alumnos-responsive tr.info-extra{ display:none; }
@media (min-width:766px){ .alumnos-responsive tr.info-extra.visible{ display:table-row; } }
.alumnos-responsive .btn-naranja[aria-expanded="true"]{ box-shadow:0 0 0 3px rgba(227,6,19,.15); }

/* ---------- Móvil (≤765px) ---------- */
@media (max-width:765px){
  .alumnos-responsive table thead{ display:none!important; }
  .alumnos-responsive{ width:100%!important; }
  .alumnos-responsive table{ display:block!important; width:100%!important; table-layout:auto!important; border-collapse:separate!important; }
  .alumnos-responsive tbody{ display:block!important; width:100%!important; }

  /* Cabecera tarjeta */
  .alumnos-responsive tbody tr.fila-principal{
    position:relative; display:grid!important; grid-template-columns:1fr 1fr!important; gap:.6rem!important;
    margin:.6rem 0 0!important; padding:.9rem .9rem!important;
    border:1px solid #e5e7eb!important; border-radius:12px 12px 0 0!important;
    box-shadow:var(--gg-shadow-sm)!important; background:#fff!important;
  }
  .alumnos-responsive tbody tr.fila-principal td{ display:block!important; padding:0!important; border:none!important; width:100%!important; }

  /* Reparto básico */
  .alumnos-responsive tbody tr.fila-principal td:nth-of-type(1){ grid-column:1/3!important; }
  .alumnos-responsive tbody tr.fila-principal td:nth-of-type(2){ grid-column:1/3!important; font-weight:800!important; letter-spacing:.2px; }
  .alumnos-responsive tbody tr.fila-principal td:nth-of-type(3){ grid-column:1/2!important; }
  .alumnos-responsive tbody tr.fila-principal td:nth-of-type(4){ grid-column:2/3!important; }
  .alumnos-responsive tbody tr.fila-principal td:nth-of-type(5){ grid-column:1/3!important; }
  .alumnos-responsive tbody tr.fila-principal td:nth-of-type(6){ grid-column:1/2!important; }
  .alumnos-responsive tbody tr.fila-principal td:nth-of-type(7){ grid-column:2/3!important; }

  /* Detalle + botones */
  .alumnos-responsive tr.info-extra.visible{
    display:grid!important; grid-template-columns:1fr!important; gap:.75em!important; margin:0!important; padding:.85rem!important;
    background:#f7f8fa!important; border-left:1px solid #e5e7eb!important; border-right:1px solid #e5e7eb!important; border-radius:0!important;
  }
  .alumnos-responsive tr.info-extra.visible>td{ display:block!important; border:0!important; width:100%!important; padding:0!important; }
  .alumnos-responsive tbody tr.contenedor-botones{
    display:block!important; margin:0 0 .75rem 0!important;
    border:1px solid #e5e7eb!important; border-top:none!important; border-radius:0 0 12px 12px!important; background:#f7f8fa!important;
  }
  .alumnos-responsive tbody tr.contenedor-botones td{ display:block!important; padding:.6rem .8rem!important; }
  .alumnos-responsive .acciones{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
  .alumnos-responsive .acciones>.btn,.alumnos-responsive .acciones>a{ width:100%; min-height:42px; }
  .alumnos-responsive .acciones .fecha-alta-text{ grid-column:1/-1; margin-top:.2rem; }

  /* Bandas exteriores en móvil (en la tr) */
  .alumnos-responsive tr.fila-principal,
  .alumnos-responsive tr.info-extra.visible,
  .alumnos-responsive tr.contenedor-botones{ position:relative; }
  .alumnos-responsive tr.matriculado::before,
  .alumnos-responsive tr.descartado::before,
  .alumnos-responsive tr.abandono::before{
    content:""; position:absolute; left:-8px; top:0; bottom:0; width:8px; z-index:1;
  }
  .alumnos-responsive tr.matriculado::before{ background:#8BC34A; }
  .alumnos-responsive tr.descartado::before{ background:#e11d48; }
  .alumnos-responsive tr.abandono::before{ background:#e30613; }
  .alumnos-responsive tr.pagado::after,
  .alumnos-responsive tr.carnet::after{
    content:""; position:absolute; right:-8px; top:0; bottom:0; width:8px; z-index:1;
  }
  .alumnos-responsive tr.pagado::after{ background:#0ea5e9; }
  .alumnos-responsive tr.carnet::after{ background:#ffc107; }

  /* IMPAR móvil */
  .alumnos-responsive tr.fila-principal.impar{ background:#c8f1f7!important; }
  .alumnos-responsive tr.fila-principal.impar + tr.info-extra.visible,
  .alumnos-responsive tr.fila-principal.impar + tr.info-extra.visible + tr.contenedor-botones{
    background:#d9f2f8!important; border-left:1px solid #b6e5f1!important; border-right:1px solid #b6e5f1!important;
  }

  /* LÍNEA ROJA SUPERIOR en móvil (inset) */
  .alumnos-responsive tbody tr.fila-principal.noapto{
    box-shadow: inset 0 6px 0 #e30613, var(--gg-shadow-sm)!important;
  }
  .alumnos-responsive tbody tr.fila-principal.abandono{
    box-shadow: inset 0 6px 0 #e30613, var(--gg-shadow-sm)!important;
  }

  /* Etiquetas en el 2º td (no rompen banda derecha) */
  .alumnos-responsive tbody tr.fila-principal.noapto  > td:nth-of-type(2),
  .alumnos-responsive tbody tr.fila-principal.abandono> td:nth-of-type(2){ position:relative; padding-right:84px; }
  .alumnos-responsive tbody tr.fila-principal.noapto  > td:nth-of-type(2)::after,
  .alumnos-responsive tbody tr.fila-principal.abandono> td:nth-of-type(2)::after{
    position:absolute; right:10px; top:-12px; z-index:7; display:inline-block; white-space:nowrap; pointer-events:none;
    font:700 11px/1 var(--gg-font); color:#fff; padding:4px 8px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.12); content:"";
  }
  .alumnos-responsive tbody tr.fila-principal.noapto  > td:nth-of-type(2)::after{ content:"NO APTO"; background:#c81e1e; }
  .alumnos-responsive tbody tr.fila-principal.abandono> td:nth-of-type(2)::after{ content:"ABAND.";  background:#e30613; }

  /* ABANDONO: toda la tarjeta roja */
  .alumnos-responsive tbody tr.fila-principal.abandono,
  .alumnos-responsive tbody tr.fila-principal.abandono + tr.info-extra.visible,
  .alumnos-responsive tbody tr.fila-principal.abandono + tr.info-extra.visible + tr.contenedor-botones{
    background:#ffe8e8!important;
  }
}
@media (max-width:380px){ .alumnos-responsive .acciones{ grid-template-columns:1fr; } }

/* Prioridad: abandono gana a “impar” */
.alumnos-responsive tr.fila-principal.abandono.impar td{ background:#ffe8e8!important; }

/* ================== Tabla de Comentarios ================== */
.table-comentarios{
  margin:.25rem 0 0; background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--gg-border);
}
.table-comentarios thead th{ background:#fafafa; border-bottom:1px solid var(--gg-border-strong); font-weight:700; padding:10px; }
.table-comentarios tbody tr td{ vertical-align:middle; padding:10px; }
.table-comentarios tbody tr:hover{ background:rgba(0,0,0,.02); }
@media (min-width:766px){
  .table-comentarios thead th:first-child{ width:220px; }
  .table-comentarios thead th.col-acciones{ width:80px; }
  .table-comentarios .td-comentario{ word-break:break-word; }
}
/* Forzar estilo móvil en escritorio si añades .comentarios-compact */
.table-comentarios.comentarios-compact thead{ display:none; }
.table-comentarios.comentarios-compact tbody tr{
  display:grid; grid-template-columns:1fr auto; gap:.35rem .75rem; padding:.6rem;
  border-bottom:1px solid #eaeaea; background:#fff;
}
.table-comentarios.comentarios-compact tbody tr td:nth-of-type(1){ grid-column:1/2; font-weight:600; color:#374151; }
.table-comentarios.comentarios-compact tbody tr td:nth-of-type(1)::before{ content:"Fecha - Hora: "; font-weight:700; color:#4b5563; margin-right:.25rem; }
.table-comentarios.comentarios-compact tbody tr td:nth-of-type(2){ grid-column:1/-1; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
.table-comentarios.comentarios-compact tbody tr td:nth-of-type(2)::before{ content:"Comentario: "; display:inline-block; font-weight:700; color:#4b5563; margin-right:.25rem; }
.table-comentarios.comentarios-compact tbody tr td:nth-of-type(3){ grid-column:2/3; justify-self:end; }

/* ================== Historial de Cursos ================== */
@media (min-width:766px){
  .historial-cursos-responsive table{ table-layout:auto; }
  .historial-cursos-responsive thead{ display:table-header-group; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno{ display:table-row; background:transparent; border:0; margin:0; padding:0; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td{ display:table-cell; padding:10px; border-top:1px solid #e5e7eb; vertical-align:middle; }
}
@media (max-width:765px){
  .historial-cursos-responsive thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(1px,1px,1px,1px); white-space:nowrap;
  }
  .historial-cursos-responsive tbody tr.fila-curso-alumno{
    display:grid!important; grid-template-columns:1fr 1fr!important;
    grid-auto-rows:auto!important; gap:.5rem .75rem!important; margin:.75rem 0!important;
    padding:.9rem!important; background:#fff!important; border:1px solid #e5e7eb!important; border-radius:.6rem!important; box-shadow:0 2px 4px rgba(0,0,0,.05)!important;
  }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td{ display:block!important; padding:0!important; border:0!important; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td::before{
    display:inline-block; font-weight:700; color:#4b5563; margin-right:.35rem; content:attr(data-label);
  }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(1)::before{ content:"#"; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(2)::before{ content:"Año"; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(3)::before{ content:"Ciudad"; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(4)::before{ content:"Ident."; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(5)::before{ content:"Matri."; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(6)::before{ content:"Paga."; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(7)::before{ content:"Apto"; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(8)::before{ content:"Reserva"; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(9)::before{ content:"2º Pago"; }
  .historial-cursos-responsive tbody tr.fila-curso-alumno td:nth-of-type(10)::before{ content:"C. Extra"; }
}

/* ===== Bloques del listado ===== */
.sep-bloque td{
  padding: 0;
  border: 0;
  position: relative;
}

/* control de cuánto sobresale a la izquierda */
:root{ --grupo-overshoot: 56px; }  /* << mueve más/menos el bloque */

.grupo-wrap{
  position: sticky;
  top: 56px;                 /* ajusta si tu cabecera es más baja/alta */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem .45rem 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: .85rem;
  background: var(--grupo-bg, #f4f6f9);
  color: var(--grupo-fg, #2b2f33);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04);
}

/* sobresalir por la izquierda */
.grupo-wrap--overshoot{
  transform: translateX(calc(-1 * var(--grupo-overshoot)));
  width: calc(100% + var(--grupo-overshoot));
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-left: calc(1.1rem + 8px); /* no hace falta tocar este valor */
}

/* barra de acento */
.grupo-wrap::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--grupo-accent, #adb5bd);
  border-radius: 0 4px 4px 0;
  opacity: .9;
}

.grupo-wrap i{ font-size: 1rem; opacity: .9; }
.grupo-title{ line-height: 1; }

/* Temas */
.grupo-socorrismo .grupo-wrap{
  --grupo-bg: linear-gradient(90deg,#e8f7ff 0%, #ffffff 55%);
  --grupo-fg: #0b7285;
  --grupo-accent: #15aabf;
}
.grupo-id-22 .grupo-wrap{
  --grupo-bg: linear-gradient(90deg,#fff7db 0%, #ffffff 55%);
  --grupo-fg: #8a6a00;
  --grupo-accent: #f08c00;
}
.grupo-otros .grupo-wrap{
  --grupo-bg: linear-gradient(90deg,#f1f3f5 0%, #ffffff 55%);
  --grupo-fg: #495057;
  --grupo-accent: #868e96;
}

/* si tu tabla está dentro de .table-responsive (Bootstrap),
   evita que recorte el overshoot */
.table-responsive{ overflow: visible; }
@media (max-width: 768px){
  .grupo-wrap{ top: 48px; font-size: .8rem; }
}

/* ======== BLOQUES (móvil: ocupar toda la línea, sin overshoot) ======== */
@media (max-width: 765px){
  /* el encabezado del bloque no se desplaza a la izquierda */
  .grupo-wrap--overshoot{
    transform: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding-left: 1rem !important;
  }
  /* que el bloque se lea como banda completa */
  .grupo-wrap{
    position: sticky;
    top: 48px;            /* ya tenías este valor para móvil */
    left: 0;
    right: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
  }
}

/* Fallback visual si los iconos no cargan bien: reservar ancho */
.grupo-wrap .fa, .grupo-wrap .fas, .grupo-wrap .far, .grupo-wrap .bi{
  display:inline-block;
  width:1.1rem;
  text-align:center;
  opacity:.9;
}

/* ======== ALERTAS (móvil: tarjeta aparte a ancho completo) ======== */
@media (max-width: 765px){
  /* el <td class="alerts-cell"> se renderiza como bloque al 100% */
  .alumnos-responsive tbody tr.fila-principal td.alerts-cell{
    grid-column: 1 / -1 !important;   /* ocupar todo el ancho */
    order: 99;                         /* llevarlo al final de la cabecera */
    background: #ffffff;
    border: 1px solid var(--gg-border);
    border-radius: .6rem;
    padding: .7rem .8rem !important;
    margin-top: .25rem;
    box-shadow: var(--gg-shadow-sm);
  }
  .alumnos-responsive tbody tr.fila-principal td.alerts-cell .listado-alertas{
    max-height: none;                  /* en móvil, sin scroll interno */
  }
  .alumnos-responsive tbody tr.fila-principal td.alerts-cell .badge{
    font-size: .8rem;
  }
  .alumnos-responsive tbody tr.fila-principal td.alerts-cell .alert{
    margin-bottom: .45rem;
  }
}

/* ======== ALERTAS (desktop: mantener aspecto actual, sutiles mejoras) ======== */
@media (min-width: 766px){
  .alerts-cell{
    /* lo que ya tenías, solo pulimos un poco */
    vertical-align: top;
  }
  .alerts-cell .listado-alertas{
    max-height: 160px;
    overflow: auto;
  }
}

/* (opcional) un pequeño título “Alertas” encima de la lista en móvil */
@media (max-width: 765px){
  .alerts-cell::before{
    content: "Alertas";
    display: block;
    font-weight: 700;
    color: var(--gg-text-2);
    margin-bottom: .35rem;
    letter-spacing: .2px;
  }
}