/* =========================================================
Global SENSOS / Instructores - style.css (UNIFICADO)
- Fusiona versión anterior + versión revisada
- Mantiene TODOS los elementos necesarios
- Diseño moderno y profesional (tokens, cards, responsive)
========================================================= */
/* ======================= FUENTES ======================= */
/* Fuente por Google Fonts (recomendado: usar en el ). */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800;900&display=swap');
/* ===================== TOKENS DE MARCA ===================== */
: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; /* azul Global */
--gg-brand-2:#069ad3; /* celeste */
--gg-red:#e30613; /* rojo Global */
--gg-orange:#ff4e00; /* naranja botones */
--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);
/* Listado bloques */
--grupo-overshoot:56px;
}
/* ===================== BASE ===================== */
html,body{ height:100%; }
body{
font-family: var(--gg-font);
color: var(--gg-text);
background: #fff;
}
table th, table td{ font-size:15px; }
a{ color: inherit; }
a:hover{ opacity: .95; }
.left{text-align:left;} .rigth{text-align:right;} .center{text-align:center;}
.bottom-20{ margin-bottom:20px; }
.form-group{ margin-bottom:0.4rem; }
/* ===================== HEADER / NAV (FIX BOOTSTRAP COLLAPSE) ===================== */
.site-header{
background: var(--gg-red);
border-bottom: 6px solid var(--gg-brand);
position: relative;
z-index: 10000;
}
/* Quita floats/inline-block legacy del menú */
#navbarSupportedContent .navbar-nav{
float: none !important;
display: flex !important;
margin-top: 0 !important;
}
/* Links */
#navbarSupportedContent .navbar-nav .nav-link{
color: #fff !important;
font-size: 17px;
padding: .5rem .75rem;
}
#navbarSupportedContent .navbar-nav .nav-link:hover{
background: rgba(255,255,255,.12);
border-radius: 10px;
}
/* Desktop: deja que Bootstrap haga su trabajo (NO forzar display) */
@media (min-width: 992px){
#navbarSupportedContent{
display: flex !important; /* Bootstrap usa flex en lg */
flex-basis: auto !important;
}
}
/* En móvil/tablet: que el menú sea bloque y en columna */
@media (max-width: 991.98px){
#navbarSupportedContent{
width: 100%;
}
/* Quita floats/inline-block que rompen el layout */
#navbarSupportedContent .navbar-nav{
float: none !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
margin-top: 12px !important;
}
#navbarSupportedContent .navbar-nav .nav-item{
width: 100%;
text-align: center;
}
}
/* ===================== LAYOUT BASE ===================== */
main{ padding:40px 0; min-height:900px; }
footer{ background: var(--gg-brand); padding-bottom:10px; }
#pre-footer{ padding:50px 0; background:#012b48; color:#fff; }
footer .row>div p{
text-align:center; color:#eaeaea; padding-top:10px; font-size:17px; margin-bottom:0;
}
/* Titulares / secciones */
h1.title{ border-bottom:1px solid; color:#0080c9; margin-bottom:25px; }
.titulo-pag{ color:#007bff; }
.titulo-seccion{
background: linear-gradient(90deg, var(--gg-brand-2), #2563eb);
color:#fff;
padding: 10px 14px;
border-radius: 14px;
font-size: 18px;
font-weight: 900;
letter-spacing: .01em;
margin-bottom: 18px;
box-shadow: 0 14px 30px rgba(37,99,235,.18);
}
.subseccion{ font-size:26px; border-bottom:1px double; margin-bottom:30px; padding-bottom:10px; }
.text-secundario{ font-style:oblique; }
#form-cursos,#form-listado-cursos{ background:#f8f9fa; padding:30px; border-radius:6px; }
#cuerpo-info-curso{ text-align:left; }
#cuerpo-info-curso p{
margin: 0;
padding: 6px 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
font-size: 14px;
line-height: 1.25;
color: #0f172a;
}
#cuerpo-info-curso p + p{ border-top: 1px dashed rgba(148,163,184,.45); }
#cuerpo-info-curso p b,
#cuerpo-info-curso p strong{
font-weight: 800;
color: #64748b;
flex: 0 0 140px;
}
#cuerpo-info-curso p span{ font-weight: 700; color:#0f172a; text-align:right; }
@media (max-width: 575px){
#cuerpo-info-curso p{ flex-direction: column; align-items: flex-start; gap: 4px; }
#cuerpo-info-curso p b,
#cuerpo-info-curso p strong{ flex: 0 0 auto; }
}
/* ===================== BOTONES ===================== */
.btn{ margin-bottom:5px; }
.btn-naranja{ background:var(--gg-orange); border-color:var(--gg-orange); font-size:12px; color:#fff!important; }
.btn-verde{ background:var(--gg-green); border-color:var(--gg-green); 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:var(--gg-brand-2); border-color:var(--gg-brand-2); font-size:12px; }
.btn-danger{ color:#fff!important; }
.blockUI h2{ font-size:27px; }
/* Botón flotante + confirmación */
.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:var(--gg-red); color:#fff; text-align:center; font-size:14px; padding-top:3px; display:none;
}
/* ===================== ICONOS ===================== */
.fa-check-circle{ color:#11da11; }
.fa-times-circle{ color:#e11d48; }
#historial-comentarios i:hover{ cursor:pointer; }
/* ===================== BLOQUES / COMPONENTES ===================== */
.bloque{ background:#f8f9fa; padding:30px; border-radius:15px; margin-bottom:25px; }
.bloque h4{ color:var(--gg-orange); }
.contenedor-botones-control{ margin-bottom:20px; }
.contenedor-botones{ text-align:center; border-bottom:5px solid #716969; }
.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; }
#usuario-conectado{ color:#007bff; font-style:oblique; }
p.custom-green{ color:#03bf03; }
.total-resultados{ text-align:right; }
/* ===================== BUSCADOR ALUMNO ===================== */
#content-busqueda-alumno-vivo{ background:#fff; border-radius:10px; display:none; position:absolute; z-index:5; max-height:280px; overflow-y:auto; border:1px solid #ccc; }
#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; }
/* ===================== TABLAS / LISTADOS ===================== */
.table-striped tbody tr:nth-of-type(odd){ background:rgb(248,249,250); }
.modal-body p.title{ background:#007bff; color:#fff; padding:5px 5px 5px 15px; }
.info-extra{ display:none; background:#a1a2a254 !important; font-size:12px; }
.info-extra td,.info-extra th{ font-size:13px; }
.info-extra p{ margin-bottom:10px; }
.matriculado{ border-left:10px solid var(--gg-green); }
.descartado{ border-left:10px solid #e11d48; }
.abandono{ background:#e8bcb7 !important; } /* uso general fuera de la lista responsive */
.pagado{ border-right:10px solid var(--gg-blue); }
.carnet{ border-right:10px solid var(--gg-yellow); }
.content-grafica{ width:100%; background:#ececec; height:25px; margin-top:10px; }
.porcentaje-alcanzado{ height:25px; background:var(--gg-orange); text-align:center; color:#fff; padding-top:2px; }
.bloque-expedicion-diploma{ background:#eeeeef; padding:15px; margin-bottom:20px; border-radius:10px; }
.content-id-curso h3{ color:#007bff; }
/* =========================================================
IMPAR / PAR (global)
- Importante: se usa en varias vistas
========================================================= */
.impar{ background:#c8f1f7 !important; }
.par{ background:#fff !important; }
/* =========================================================
LISTADO ALUMNOS (RESPONSIVE)
========================================================= */
/* Evita cortes de bandas exteriores */
.alumnos-responsive,
.alumnos-responsive table,
.alumnos-responsive tbody{ overflow:visible!important; }
/* 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); }
/* ---------- 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);
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 */
.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:var(--gg-green); }
.alumnos-responsive tr.descartado>td:first-child::before{ background:#e11d48; }
.alumnos-responsive tr.abandono>td:first-child::before{ background:var(--gg-red); }
/* Derecha */
.alumnos-responsive tr.pagado>td:last-child::after{ background:var(--gg-blue); }
.alumnos-responsive tr.carnet>td:last-child::after{ background:var(--gg-yellow); }
/* Redondeos */
.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 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 tarjeta */
.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 */
.alumnos-responsive tr.fila-principal.noapto td,
.alumnos-responsive tr.fila-principal.abandono td{ border-top:6px solid var(--gg-red)!important; }
/* Etiquetas junto al nombre */
.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:var(--gg-red); }
/* ALERTAS desktop: scroll interno */
.alerts-cell{ vertical-align: top; }
.alerts-cell .listado-alertas{ max-height:160px; overflow:auto; }
}
/* ---------- 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; }
.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;
}
.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; }
.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 */
.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:var(--gg-green); }
.alumnos-responsive tr.descartado::before{ background:#e11d48; }
.alumnos-responsive tr.abandono::before{ background:var(--gg-red); }
.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:var(--gg-blue); }
.alumnos-responsive tr.carnet::after{ background:var(--gg-yellow); }
/* 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 */
.alumnos-responsive tbody tr.fila-principal.noapto{
box-shadow: inset 0 6px 0 var(--gg-red), var(--gg-shadow-sm)!important;
}
.alumnos-responsive tbody tr.fila-principal.abandono{
box-shadow: inset 0 6px 0 var(--gg-red), var(--gg-shadow-sm)!important;
}
/* Etiquetas */
.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:var(--gg-red); }
/* ABANDONO */
.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;
}
/* ALERTAS móvil: tarjeta aparte a ancho completo */
.alumnos-responsive tbody tr.fila-principal td.alerts-cell{
grid-column: 1 / -1 !important;
order: 99;
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; }
.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; }
.alerts-cell::before{
content: "Alertas";
display: block;
font-weight: 700;
color: var(--gg-text-2);
margin-bottom: .35rem;
letter-spacing: .2px;
}
}
@media (max-width:380px){ .alumnos-responsive .acciones{ grid-template-columns:1fr; } }
.alumnos-responsive tr.fila-principal.abandono.impar td{ background:#ffe8e8!important; }
/* =========================================================
TABLA COMENTARIOS (base) + COMENTARIOS ESPECIALES PASTEL
========================================================= */
.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); }
/* Comentarios especiales (si el tiene la clase comentario-xxx) */
.comentario-instructor{ background-color:#E3F2FD !important; color:#0D47A1 !important; }
.comentario-api{ background-color:#F3E5F5 !important; color:#6A1B9A !important; }
.comentario-campus{ background-color:#E0F2F1 !important; color:#00695C !important; }
.comentario-info{ background-color:#E1F5FE !important; color:#01579B !important; }
.comentario-pago{ background-color:#FFF8E1 !important; color:#E65100 !important; }
.comentario-importante{
background-color:#FFEBEE !important; color:#B71C1C !important; font-weight:700;
border-left:4px solid #D32F2F;
}
/* Hover */
.table-hover>tbody>tr.comentario-instructor:hover{ background-color:#BBDEFB !important; }
.table-hover>tbody>tr.comentario-api:hover{ background-color:#E1BEE7 !important; }
.table-hover>tbody>tr.comentario-campus:hover{ background-color:#B2DFDB !important; }
.table-hover>tbody>tr.comentario-info:hover{ background-color:#B3E5FC !important; }
.table-hover>tbody>tr.comentario-pago:hover{ background-color:#FFECB3 !important; }
.table-hover>tbody>tr.comentario-importante:hover{ background-color:#FFCDD2 !important; }
/* Solución definitiva: sombrear TODA la fila (tr + td) contra Bootstrap */
.table-hover > tbody > tr.comentario-instructor > td { background-color:#E3F2FD !important; color:#0D47A1 !important; }
.table-hover > tbody > tr.comentario-instructor:hover > td { background-color:#BBDEFB !important; }
.table-hover > tbody > tr.comentario-api > td { background-color:#F3E5F5 !important; color:#6A1B9A !important; }
.table-hover > tbody > tr.comentario-api:hover > td { background-color:#E1BEE7 !important; }
.table-hover > tbody > tr.comentario-campus > td { background-color:#E0F2F1 !important; color:#00695C !important; }
.table-hover > tbody > tr.comentario-campus:hover > td { background-color:#B2DFDB !important; }
.table-hover > tbody > tr.comentario-info > td { background-color:#E1F5FE !important; color:#01579B !important; }
.table-hover > tbody > tr.comentario-info:hover > td { background-color:#B3E5FC !important; }
.table-hover > tbody > tr.comentario-pago > td { background-color:#FFF8E1 !important; color:#E65100 !important; }
.table-hover > tbody > tr.comentario-pago:hover > td { background-color:#FFECB3 !important; }
.table-hover > tbody > tr.comentario-importante > td { background-color:#FFEBEE !important; color:#B71C1C !important; font-weight:700; }
.table-hover > tbody > tr.comentario-importante { border-left:5px solid #D32F2F; }
.table-hover > tbody > tr.comentario-importante:hover > td { background-color:#FFCDD2 !important; }
.table-hover > tbody > tr[class^="comentario-"] a,
.table-hover > tbody > tr[class^="comentario-"] i,
.table-hover > tbody > tr[class^="comentario-"] strong { color: inherit !important; }
/* =========================================================
HISTORIAL CURSOS (RESPONSIVE) - IMPAR/PAR EN DESKTOP
+ extender color a diplomas (tr siguiente)
========================================================= */
@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;
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;
}
.historial-cursos-responsive tbody tr.impar td{ background:#c8f1f7 !important; }
.historial-cursos-responsive tbody tr.par td{ background:#fff !important; }
.historial-cursos-responsive tbody tr.impar + tr.impar td{ background:#d9f2f8 !important; }
.historial-cursos-responsive tbody tr.par + tr.par td{ background:#fff !important; }
}
@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"; }
}
/* =========================================================
TÍTULOS / DIPLOMAS - chips con aire
========================================================= */
.checkbox.contenedor-titulos,
#contenedor-titulos,
#contenedor-titulos-comprobacion,
.contenedor-titulos,
.contenedor-titulos-comprobacion{
display:flex;
flex-wrap:wrap;
gap:10px 10px;
align-items:center;
}
.checkbox.contenedor-titulos label,
.contenedor-titulos label,
#contenedor-titulos label{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid #007bff;
padding:8px 12px;
margin:0;
border-radius:999px;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,.06);
line-height:1;
}
.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; }
/* versión “comprobación” verde */
.contenedor-titulos-comprobacion label,
#contenedor-titulos-comprobacion label{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid #03bf03;
padding:8px 12px;
margin:0;
border-radius:999px;
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,.06);
}
/* =========================================================
BLOQUES DEL LISTADO (separadores)
========================================================= */
.sep-bloque td{ padding:0; border:0; position:relative; }
/* si tu tabla está dentro de .table-responsive (Bootstrap), evita que recorte el overshoot */
.table-responsive{ overflow: visible; }
.grupo-wrap{
position:sticky;
top:56px;
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);
}
.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);
}
.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;
}
@media (max-width:768px){
.grupo-wrap{ top:48px; font-size:.8rem; }
}
@media (max-width:765px){
.grupo-wrap--overshoot{
transform:none !important;
width:100% !important;
border-radius:0 !important;
padding-left:1rem !important;
}
.grupo-wrap{
position:sticky;
top:48px;
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;
}
/* =========================================================
LOGIN (base legacy)
========================================================= */
.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; }
/* =========================================================
LOGIN HERO - INSTRUCTORES (moderno, sin doble marco)
Usa: ...
========================================================= */
.page-login.page-instructores{ min-height: calc(100vh - 120px); }
/* Eliminar el marco antiguo SOLO en el login */
.page-login .contenedor-login{
background: transparent !important;
padding: 0 !important;
border: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Fondo pastel + layout */
.hero-mundo.hero-instructores{
position:relative;
border-radius:18px;
overflow:hidden;
background:
radial-gradient(900px 420px at 12% 12%, rgba(6,154,211,.16) 0%, rgba(6,154,211,0) 60%),
radial-gradient(800px 380px at 92% 18%, rgba(227,6,19,.12) 0%, rgba(227,6,19,0) 62%),
linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
border:1px solid rgba(17,24,39,.06);
box-shadow:0 14px 38px rgba(17,24,39,.08);
padding: clamp(18px, 3vw, 34px);
}
.hero-inner{
display:grid;
grid-template-columns:1.1fr .9fr;
gap: clamp(18px, 3vw, 36px);
align-items:start;
}
.hero-text{ padding: clamp(8px, 1vw, 10px); }
.hero-tag{
display:inline-flex;
gap:.55rem;
align-items:center;
font-weight:800;
letter-spacing:.2px;
font-size:13px;
color: var(--gg-brand);
background: rgba(24,58,100,.08);
border:1px solid rgba(24,58,100,.12);
border-radius:999px;
padding:.45rem .75rem;
}
.hero-text h1{
margin:14px 0 10px;
font-size: clamp(28px, 3.2vw, 42px);
line-height:1.08;
font-weight:900;
color: var(--gg-text);
letter-spacing:-.4px;
}
.hero-subtitle{
margin:0 0 18px;
color: var(--gg-text-2);
font-size:16px;
line-height:1.55;
max-width:60ch;
}
.hero-benefits{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:10px;
}
.hero-benefits li{
display:grid;
grid-template-columns:22px 1fr;
gap:10px;
align-items:start;
padding:10px 12px;
border-radius:12px;
background: rgba(255,255,255,.65);
border:1px solid rgba(229,231,235,.7);
box-shadow:0 4px 10px rgba(17,24,39,.04);
}
.hero-benefits li i{ margin-top:3px; color: var(--gg-brand-2); }
.hero-benefits strong{ color: var(--gg-text); }
.hero-footnote{
margin:16px 0 0;
color: var(--gg-text-3);
font-size:13px;
line-height:1.45;
}
.hero-visual{ display:flex; justify-content:flex-end; }
.login-hero-wrapper{ width:100%; max-width:440px; }
/* Tarjeta login (único marco) */
.login-card-hero{
background:#ffffff;
border:1px solid rgba(229,231,235,.95);
border-radius:18px;
box-shadow:0 18px 40px rgba(17,24,39,.10);
overflow:hidden;
}
.login-card-hero-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:16px 18px;
background: linear-gradient(180deg, rgba(24,58,100,.06) 0%, rgba(24,58,100,0) 100%);
border-bottom:1px solid rgba(229,231,235,.9);
}
.login-card-hero-title{
display:flex;
gap:12px;
align-items:center;
}
.login-card-hero-title h2{
margin:0;
font-size:16px;
font-weight:900;
color: var(--gg-text);
}
.login-card-hero-title small{
display:inline-block;
margin-top:2px;
color: var(--gg-text-3);
font-size:12px;
}
.login-card-icon{
width:42px;
height:42px;
border-radius:14px;
display:grid;
place-items:center;
background: rgba(227,6,19,.10);
border:1px solid rgba(227,6,19,.18);
color: var(--gg-red);
}
.login-card-hero-pill{
font-size:12px;
font-weight:800;
color: var(--gg-brand);
padding:.35rem .6rem;
border-radius:999px;
background: rgba(6,154,211,.10);
border:1px solid rgba(6,154,211,.20);
}
/* Form */
.page-instructores .contenedor-login form{ padding:16px 18px 18px; }
.login-help{
color: var(--gg-text-2);
margin:0 0 8px;
line-height:1.45;
font-size:14px;
}
.login-note{
margin:10px 0 0;
color: var(--gg-text-3);
font-size:12px;
}
.link-muted{
color: var(--gg-text-3);
font-size:13px;
text-decoration:none;
}
.link-muted:hover{ color: var(--gg-text); text-decoration: underline; }
/* Inputs con icono */
.input-with-icon{ position:relative; }
.input-with-icon .input-icon{
position:absolute;
left:12px; top:50%;
transform:translateY(-50%);
color:#94a3b8;
pointer-events:none;
}
.input-with-icon .form-control{
padding-left:38px;
border-radius:12px;
border:1px solid rgba(209,213,219,.9);
background:#fff;
height:44px;
}
.input-with-icon .form-control:focus{
border-color: rgba(227,6,19,.55);
box-shadow:0 0 0 3px rgba(227,6,19,.14);
}
/* Botón rojo */
.page-instructores .btn.btn-primary{
background: var(--gg-red) !important;
border-color: var(--gg-red) !important;
border-radius:12px;
font-weight:900;
letter-spacing:.2px;
height:44px;
box-shadow:0 12px 24px rgba(227,6,19,.18);
}
.page-instructores .btn.btn-primary:hover{ filter:brightness(.96); }
.page-instructores .btn.btn-primary:focus{ box-shadow:0 0 0 3px rgba(227,6,19,.18); }
/* Botón ojo */
#show_password{
border-top-right-radius:12px;
border-bottom-right-radius:12px;
height:44px;
min-width:48px;
display:grid;
place-items:center;
}
@media (max-width:991px){
.hero-inner{ grid-template-columns:1fr; }
.hero-visual{ justify-content:stretch; }
.login-hero-wrapper{ max-width:520px; margin:0 auto; }
.hero-benefits li{ grid-template-columns:20px 1fr; }
}
/* =========================================================
Dashboard (portada INSTRUCTOR / INVITA Y GANA)
========================================================= */
.page-dashboard{
background:
radial-gradient(circle at 10% 0%, rgba(227, 6, 19, 0.06) 0%, transparent 55%),
radial-gradient(circle at 90% 100%, rgba(24, 58, 100, 0.06) 0%, transparent 55%),
linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
min-height: 100vh;
}
.dashboard-hero{ padding: 24px 0 8px; }
.dashboard-hero .hero-surface{
border: 1px solid rgba(24,58,100,.08);
background: linear-gradient(180deg, #fff 0%, #f9fafc 100%);
border-radius: 16px;
box-shadow: 0 10px 24px rgba(24,58,100,.10), 0 1px 3px rgba(0,0,0,.05);
padding: 24px;
}
.dashboard-hero .hero-title{ color: var(--secondary); font-weight: 800; letter-spacing: .2px; }
.dashboard-hero .hero-sub{ color: var(--muted); }
.btn-cta{
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
border: none; color: #fff; border-radius: 12px; padding: 12px 18px; font-weight: 800;
box-shadow: 0 8px 18px rgba(227,6,19,.25);
transition: transform .1s, filter .2s;
}
.btn-cta:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn-cta:active{ transform: translateY(1px); }
.kpi-card{
position: relative; display:flex; align-items:center; gap:12px;
border: 1px solid rgba(24,58,100,.08);
background: #fff; border-radius: 14px; padding: 14px 16px;
box-shadow: 0 8px 18px rgba(24,58,100,.06);
overflow: hidden;
}
.kpi-icon{
width:40px; height:40px; border-radius: 10px; display:grid; place-items:center;
color:#fff; font-size:18px;
}
.kpi-blue{ background: #3B82F6; }
.kpi-green{ background: #22C55E; }
.kpi-amber{ background: #F59E0B; }
.kpi-body{ line-height: 1.1; }
.kpi-value{ font-size: 24px; font-weight: 800; color: var(--secondary); }
.kpi-label{ font-size: 12px; color: var(--muted); }
.card-elevated{
border: 1px solid rgba(24,58,100,.08);
background: #fff; border-radius: 16px;
box-shadow: 0 10px 22px rgba(24,58,100,.08), 0 1px 3px rgba(0,0,0,.05);
}
.feature-card{
border: 1px solid rgba(24,58,100,.08);
background: linear-gradient(180deg,#fff 0%, #fbfcfe 100%);
border-radius: 16px;
box-shadow: 0 8px 20px rgba(24,58,100,.07), 0 1px 3px rgba(0,0,0,.05);
transition: transform .15s ease, box-shadow .2s ease;
}
.feature-card:hover{
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(24,58,100,.12);
}
.feature-card img{ aspect-ratio: 16/9; object-fit: cover; }
.quick-links{ display:grid; gap:10px; }
.quick-link{
display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 12px;
border: 1px solid rgba(24,58,100,.08); background: #fff;
text-decoration:none; color: var(--secondary); font-weight: 700;
transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.quick-link i{ width:20px; text-align:center; }
.quick-link:hover{
background: #f9fbff;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(24,58,100,.08);
}
.news-item{
display:flex; gap:10px; align-items:flex-start;
padding:10px 0; border-bottom:1px dashed rgba(24,58,100,.12);
}
.news-item:last-child{ border-bottom:0; }
.news-dot{
width:10px; height:10px; border-radius:50%; background:#94A3B8; margin-top:6px;
}
.news-dot.green{ background:#22C55E; }
.news-dot.amber{ background:#F59E0B; }
.news-title{ font-weight:700; color: var(--secondary); }
.news-meta{ font-size:12px; color: var(--muted); }
.modal-elevated{ border-radius: 16px; box-shadow: 0 20px 45px rgba(0,0,0,.25); }
.grid-dashboard .card,
.grid-dashboard .card-elevated{ overflow:hidden; }
@media (max-width: 991px){
.dashboard-hero .hero-surface{ padding: 18px; }
.kpi-value{ font-size: 22px; }
}
/* =========================
INFO CURSO — versión PRO
========================= */
.info-detalle-curso{
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: 18px;
padding: 18px 18px;
box-shadow: 0 14px 35px rgba(0,0,0,.07);
margin: 18px 0 26px;
}
.info-detalle-curso .col-md-4{ padding: 14px 18px; }
@media (min-width: 992px){
.info-detalle-curso .col-md-4:nth-child(1),
.info-detalle-curso .col-md-4:nth-child(2){
border-right: 1px dashed rgba(0,0,0,.08);
}
}
.info-detalle-curso p{
margin: 0 0 10px;
line-height: 1.35;
color: #111827;
font-size: 14px;
}
.info-detalle-curso p strong{
color: #0f172a;
font-weight: 800;
min-width: 125px;
display: inline-block;
}
/* Chips titulaciones */
.titulaciones-matriculados{
margin: 10px 0 12px;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.titulaciones-matriculados li{
list-style: none;
padding: 7px 12px;
border-radius: 999px;
background: #f1f5ff;
border: 1px solid rgba(59,130,246,.18);
font-size: 13px;
color: #0f172a;
box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.titulaciones-matriculados li b{ font-weight: 900; color: #1d4ed8; }
/* Métricas */
.info-detalle-curso .stats-line{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.info-detalle-curso .badge-soft{
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 12px;
border-radius: 14px;
border: 1px solid rgba(0,0,0,.06);
background: #f8fafc;
font-weight: 800;
font-size: 13px;
box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.badge-soft.red { background:#FFEBEE; color:#991b1b; border-color:#fecdd3; }
.badge-soft.blue { background:#E3F2FD; color:#0b3b8a; border-color:#bfdbfe; }
.badge-soft.green { background:#E8F5E9; color:#14532d; border-color:#bbf7d0; }
/* Botonera */
.info-detalle-curso .acciones-curso{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: stretch;
}
.info-detalle-curso .acciones-curso .btn{
border-radius: 14px !important;
padding: 10px 12px !important;
font-weight: 900 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid rgba(0,0,0,.08) !important;
box-shadow: 0 12px 26px rgba(0,0,0,.08);
white-space: nowrap;
}
.info-detalle-curso .acciones-curso .btn i,
.info-detalle-curso .acciones-curso .btn svg{ font-size: 16px; }
.info-detalle-curso .btn.btn-verde{ background: #16a34a !important; border-color: rgba(0,0,0,.08) !important; }
.info-detalle-curso .btn.btn-success{ background: #0f766e !important; border-color: rgba(0,0,0,.08) !important; }
.info-detalle-curso .btn.btn-primary{ background: #2563eb !important; border-color: rgba(0,0,0,.08) !important; }
.info-detalle-curso .btn.btn-secondary{ background: #475569 !important; border-color: rgba(0,0,0,.08) !important; }
.info-detalle-curso .btn:hover{ filter: brightness(.96); }
/* Caja ID del curso */
.content-id-curso{
margin-top: 12px;
padding: 14px 16px;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff, #f7f7fb) !important;
}
.content-id-curso h5{
margin: 0 0 6px;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: #64748b;
font-weight: 900;
}
.content-id-curso h3{
margin: 0;
font-size: 30px;
font-weight: 1000;
color: #0f172a;
}
@media (max-width: 991px){
.info-detalle-curso .acciones-curso{ grid-template-columns: 1fr; }
.info-detalle-curso .stats-line{ grid-template-columns: 1fr; }
}
/* =========================================================
CURSO - INFO DETALLE (MEJORA PRO)
- Arregla alineación, espaciado y legibilidad
========================================================= */
.info-detalle-curso{ overflow:hidden; }
.info-detalle-curso .row.align-items-center{ align-items: stretch !important; }
.info-detalle-curso .col-md-4{
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.info-detalle-curso .col-md-4 > *{ width:100%; }
.info-detalle-curso h5, .info-detalle-curso h4{
margin: 0 0 8px;
font-weight: 900;
color: #0f172a;
}
.info-detalle-curso .badge,
.info-detalle-curso .badge-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding: 6px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 12px;
border: 1px solid rgba(29,78,216,.18);
background: #eff6ff;
color: #1d4ed8;
}
/* Ajuste: botonera en desktop para que no se vea “apretada” */
@media (min-width: 992px){
.info-detalle-curso .acciones-curso{ justify-items: end; }
.info-detalle-curso .acciones-curso .btn{ width: 100%; }
}
/* =========================================================
INFO CURSO — v3 (más pro / moderno / juvenil)
Recomendado con el pequeño ajuste de HTML que te dejo abajo:
- paneles internos
- títulos por columna
- lista de KV con
- stats en tarjetas
========================================================= */
/* Contenedor principal */
.info-detalle-curso.info-curso{
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,248,252,.98));
border: 1px solid rgba(15,23,42,.06);
border-radius: 22px;
padding: 18px;
box-shadow: 0 18px 45px rgba(2,6,23,.08);
}
/* Columnas */
.info-detalle-curso.info-curso .col-md-4{
padding: 14px 14px;
display: flex;
}
.info-detalle-curso.info-curso .col-md-4 > *{ width:100%; }
@media (min-width: 992px){
.info-detalle-curso.info-curso .col-md-4:nth-child(1),
.info-detalle-curso.info-curso .col-md-4:nth-child(2){
border-right: 1px solid rgba(15,23,42,.06);
}
}
/* Panel interno */
.info-detalle-curso.info-curso .panel-curso{
background: rgba(255,255,255,.85);
border: 1px solid rgba(15,23,42,.06);
border-radius: 18px;
padding: 14px 14px;
box-shadow: 0 10px 25px rgba(2,6,23,.05);
}
/* Título de panel */
.info-detalle-curso.info-curso .panel-title{
margin: 0 0 12px;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: #64748b;
font-weight: 900;
display: flex;
align-items: center;
gap: 10px;
}
.info-detalle-curso.info-curso .panel-title:before{
content:"";
width: 10px;
height: 10px;
border-radius: 999px;
background: #2563eb;
box-shadow: 0 0 0 5px rgba(37,99,235,.12);
}
/* KV list */
.info-detalle-curso.info-curso .kv{
margin: 0;
}
.info-detalle-curso.info-curso .kv-row{
display: grid;
grid-template-columns: 150px 1fr;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgba(15,23,42,.06);
}
.info-detalle-curso.info-curso .kv-row:last-child{ border-bottom: 0; padding-bottom: 0; }
.info-detalle-curso.info-curso .kv dt{
margin: 0;
font-weight: 900;
color: #0f172a;
font-size: 13px;
}
.info-detalle-curso.info-curso .kv dd{
margin: 0;
color: #111827;
font-size: 13.5px;
font-weight: 700;
text-align: right;
}
/* Fila multilinea (Horarios, Duración muy larga, etc.) */
.info-detalle-curso.info-curso .kv-row--stack{
grid-template-columns: 1fr;
}
.info-detalle-curso.info-curso .kv-row--stack dd{
text-align: left;
font-weight: 650;
color: #334155;
}
/* Diplomas / chips */
.info-detalle-curso.info-curso .subtle{
color:#475569;
font-weight: 800;
font-size: 13px;
margin: 12px 0 8px;
}
.info-detalle-curso.info-curso .titulaciones-matriculados{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.info-detalle-curso.info-curso .titulaciones-matriculados li{
list-style: none;
padding: 7px 12px;
border-radius: 999px;
background: #f1f5ff;
border: 1px solid rgba(37,99,235,.18);
font-size: 13px;
color: #0f172a;
box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.info-detalle-curso.info-curso .titulaciones-matriculados li b{ font-weight: 950; }
/* Stats en tarjetas pequeñas */
.info-detalle-curso.info-curso .stats-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.info-detalle-curso.info-curso .stat{
border-radius: 16px;
padding: 10px 12px;
border: 1px solid rgba(15,23,42,.08);
background: #fff;
box-shadow: 0 10px 22px rgba(2,6,23,.05);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.info-detalle-curso.info-curso .stat .stat-label{
font-size: 12px;
font-weight: 900;
color: #475569;
text-transform: uppercase;
letter-spacing: .12em;
}
.info-detalle-curso.info-curso .stat .stat-value{
font-size: 18px;
font-weight: 1000;
color: #0f172a;
}
.info-detalle-curso.info-curso .stat--danger{ background:#fff5f5; border-color:#fecdd3; }
.info-detalle-curso.info-curso .stat--danger .stat-value{ color:#b91c1c; }
.info-detalle-curso.info-curso .stat--warn{ background:#fff7ed; border-color:#fed7aa; }
.info-detalle-curso.info-curso .stat--warn .stat-value{ color:#c2410c; }
.info-detalle-curso.info-curso .stat--info{ background:#eff6ff; border-color:#bfdbfe; }
.info-detalle-curso.info-curso .stat--info .stat-value{ color:#1d4ed8; }
.info-detalle-curso.info-curso .stat--ok{ background:#ecfdf5; border-color:#bbf7d0; }
.info-detalle-curso.info-curso .stat--ok .stat-value{ color:#15803d; }
/* Botonera (si NO añades el wrapper .acciones-curso, esto lo hace pro igual) */
.info-detalle-curso.info-curso .col-md-4:nth-child(3) .btn{
width: 100%;
margin: 0 0 10px;
border-radius: 14px !important;
padding: 10px 12px !important;
font-weight: 950 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid rgba(0,0,0,.08) !important;
box-shadow: 0 14px 28px rgba(2,6,23,.10);
white-space: nowrap;
}
.info-detalle-curso.info-curso .col-md-4:nth-child(3) .btn:hover{ filter: brightness(.97); }
/* Si añades wrapper .acciones-curso => grid 2x2 en desktop */
.info-detalle-curso.info-curso .acciones-curso{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.info-detalle-curso.info-curso .acciones-curso .btn{ margin: 0; }
@media (max-width: 991px){
.info-detalle-curso.info-curso .acciones-curso{ grid-template-columns: 1fr; }
.info-detalle-curso.info-curso .stats-grid{ grid-template-columns: 1fr; }
}
/* Caja ID del curso: más “badge card” */
.info-detalle-curso.info-curso .content-id-curso{
margin-top: 6px;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(180deg, #ffffff, #f1f5ff) !important;
border: 1px solid rgba(37,99,235,.16);
box-shadow: 0 18px 38px rgba(2,6,23,.08);
text-align: center;
}
.info-detalle-curso.info-curso .content-id-curso h5{
margin: 0 0 6px;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: #64748b;
font-weight: 1000;
}
.info-detalle-curso.info-curso .content-id-curso h3{
margin: 0;
font-size: 34px;
font-weight: 1100;
color: #0f172a;
}
/* =========================================================
PRO THEME OVERRIDES (v4)
Objetivo: look más profesional (menos saturación), jerarquía clara,
botones consistentes, cards limpias, sin perder compatibilidad.
Puedes ajustar la paleta tocando SOLO estas variables.
========================================================= */
:root{
--brand-primary: #2563eb; /* Azul profesional */
--brand-primary-2: #1d4ed8;
--brand-accent: #0f766e; /* Verde/teal elegante */
--brand-danger: #dc2626;
--text-strong: #0f172a;
--text-muted: #64748b;
--surface: #ffffff;
--surface-2: #f8fafc;
--border: #e5e7eb;
--radius-lg: 22px;
--radius-md: 14px;
--radius-sm: 12px;
--shadow-soft: 0 10px 30px rgba(15, 23, 42, .08);
--shadow-btn: 0 8px 18px rgba(15, 23, 42, .12);
--ring: 0 0 0 4px rgba(37, 99, 235, .18);
}
/* Tipografía y base */
body{
color: var(--text-strong);
}
p{
color: var(--text-strong);
}
/* =====================
Tarjeta Info Curso
===================== */
.info-curso{
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(229,231,235,.9);
overflow: hidden;
}
/* Quitamos separadores "duros" (si existían) y dejamos aire */
.info-curso .panel-curso{
background: transparent;
border: 0;
box-shadow: none;
padding: 18px 18px 16px;
}
.info-curso .panel-title{
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted);
font-weight: 800;
margin: 0 0 12px;
}
/* KV profesional */
.info-curso .kv .kv-row{
padding: 10px 0;
border-bottom: 1px solid rgba(229,231,235,.85);
}
.info-curso .kv .kv-row:last-child{
border-bottom: 0;
}
.info-curso .kv dt{
color: var(--text-muted);
font-weight: 700;
}
.info-curso .kv dd{
color: var(--text-strong);
font-weight: 700;
}
.info-curso .kv .kv-row--stack dd{
font-weight: 600;
color: #111827;
line-height: 1.35;
}
/* Lista de titulaciones: tipo “pill list” */
.info-curso .titulaciones-matriculados{
margin: 10px 0 14px;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.info-curso .titulaciones-matriculados li{
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid rgba(229,231,235,.9);
border-radius: 12px;
background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.info-curso .titulaciones-matriculados li b{
font-weight: 800;
}
/* Stats: menos “chillón”, más pro */
.info-curso .stats-grid{
gap: 10px;
}
.info-curso .stat{
border-radius: 14px;
border: 1px solid rgba(229,231,235,.9);
background: linear-gradient(180deg, #ffffff, #f8fafc);
box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.info-curso .stat-label{
color: var(--text-muted);
font-weight: 800;
letter-spacing: .02em;
}
.info-curso .stat-value{
color: var(--text-strong);
font-weight: 900;
}
.info-curso .stat--danger{ border-left: 4px solid var(--brand-danger); }
.info-curso .stat--warn{ border-left: 4px solid #f59e0b; }
.info-curso .stat--info{ border-left: 4px solid var(--brand-primary); }
.info-curso .stat--ok{ border-left: 4px solid var(--brand-accent); }
/* =====================
Botones: consistencia PRO
===================== */
.btn{
border-radius: var(--radius-sm) !important;
padding: .7rem 1rem !important;
font-weight: 800 !important;
letter-spacing: .01em;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: .55rem;
min-height: 44px;
transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:focus{
outline: none !important;
box-shadow: var(--ring) !important;
}
/* Dentro de Acciones Curso: 2x2, full width, orden visual pro */
.info-curso .acciones-curso{
gap: 10px;
}
.info-curso .acciones-curso .btn{
width: 100%;
box-shadow: none;
}
/* 1) Principal */
.info-curso .acciones-curso .btn:nth-child(1){
background: linear-gradient(135deg, var(--brand-primary-2), var(--brand-primary)) !important;
border: 0 !important;
}
.info-curso .acciones-curso .btn:nth-child(1):hover{
filter: brightness(.97);
transform: translateY(-1px);
box-shadow: var(--shadow-btn);
}
/* 2) Acción secundaria destacada (teal elegante) */
.info-curso .acciones-curso .btn:nth-child(2){
background: linear-gradient(135deg, #0b766e, #14b8a6) !important;
border: 0 !important;
}
.info-curso .acciones-curso .btn:nth-child(2):hover{
filter: brightness(.97);
transform: translateY(-1px);
box-shadow: var(--shadow-btn);
}
/* 3) Outline (menos agresivo) */
.info-curso .acciones-curso .btn:nth-child(3){
background: #ffffff !important;
color: var(--text-strong) !important;
border: 1px solid rgba(229,231,235,.95) !important;
}
.info-curso .acciones-curso .btn:nth-child(3):hover{
background: #f8fafc !important;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(15,23,42,.10);
}
/* 4) Neutro (subir imágenes) */
.info-curso .acciones-curso .btn:nth-child(4){
background: #111827 !important;
color: #fff !important;
border: 0 !important;
}
.info-curso .acciones-curso .btn:nth-child(4):hover{
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(17,24,39,.18);
}
/* Iconos coherentes */
.info-curso .acciones-curso i,
.info-curso .acciones-curso svg{
width: 16px;
height: 16px;
}
/* ID del curso: más “badge card” */
.info-curso .content-id-curso{
margin-top: 14px;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff, #f8fafc);
border: 1px solid rgba(229,231,235,.95);
box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
.info-curso .content-id-curso h5{
letter-spacing: .08em;
text-transform: uppercase;
font-size: 11px;
color: var(--text-muted);
margin-bottom: 6px;
font-weight: 900;
}
.info-curso .content-id-curso h3{
font-weight: 1000;
color: var(--text-strong);
}
/* Responsive: en móvil que respire */
@media (max-width: 768px){
.info-curso .panel-curso{ padding: 16px; }
.info-curso .acciones-curso{ grid-template-columns: 1fr; }
}
/* =========================================================
GLOBAL SENSOS — BRAND THEME OVERRIDE (2026)
Fuente: Urbanist | Rojo #E30613 | Azul #183A64
(ver brandbook PDF)
========================================================= */
:root{
--brand-primary: #E30613;
--brand-primary-2: #B8050F; /* hover */
--brand-accent: #183A64;
--brand-accent-2: #122C4C; /* hover */
--brand-danger: #E30613;
--ring: 0 0 0 4px rgba(227, 6, 19, .18);
}
/* Cabeceras / títulos de sección (más corporativo) */
.titulo-seccion{
background: var(--brand-accent) !important;
color:#fff !important;
border-radius: 14px !important;
padding: 14px 18px !important;
box-shadow: 0 10px 22px rgba(15, 23, 42, .10) !important;
position: relative;
}
.titulo-seccion::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:10px;
background: var(--brand-primary);
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
/* Tarjetas panel (más limpio y profesional) */
.info-curso .panel-curso{
border: 1px solid rgba(15,23,42,.08) !important;
box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
}
.info-curso .panel-title{
color: var(--brand-accent) !important;
}
/* --- Botonera Acciones Curso (funciona con o sin .acciones-curso) --- */
.info-detalle-curso .col-md-4:last-child > .btn,
.info-detalle-curso .acciones-curso .btn{
width:100% !important;
border-radius: 12px !important;
padding: 11px 12px !important;
font-weight: 750 !important;
letter-spacing: .01em;
box-shadow: 0 8px 18px rgba(15,23,42,.10) !important;
border: 1px solid rgba(15,23,42,.10) !important;
height: 44px;
}
/* Jerarquía por orden (1 principal, 2 secundaria, 3 outline, 4 neutra) */
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(1),
.info-detalle-curso .acciones-curso button.btn:nth-child(1){
background: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
color:#fff !important;
}
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(1):hover,
.info-detalle-curso .acciones-curso button.btn:nth-child(1):hover{
background: var(--brand-primary-2) !important;
border-color: var(--brand-primary-2) !important;
}
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(2),
.info-detalle-curso .acciones-curso button.btn:nth-child(2){
background: var(--brand-accent) !important;
border-color: var(--brand-accent) !important;
color:#fff !important;
}
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(2):hover,
.info-detalle-curso .acciones-curso button.btn:nth-child(2):hover{
background: var(--brand-accent-2) !important;
border-color: var(--brand-accent-2) !important;
}
/* Outline profesional */
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(3),
.info-detalle-curso .acciones-curso button.btn:nth-child(3){
background:#fff !important;
color: var(--brand-accent) !important;
border-color: rgba(24,58,100,.35) !important;
box-shadow: 0 6px 14px rgba(15,23,42,.06) !important;
}
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(3):hover,
.info-detalle-curso .acciones-curso button.btn:nth-child(3):hover{
background: rgba(24,58,100,.06) !important;
}
/* Neutro (subir imágenes) */
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(4),
.info-detalle-curso .acciones-curso button.btn:nth-child(4){
background:#334155 !important;
border-color:#334155 !important;
color:#fff !important;
}
.info-detalle-curso .col-md-4:last-child > button.btn:nth-of-type(4):hover,
.info-detalle-curso .acciones-curso button.btn:nth-child(4):hover{
background:#1f2937 !important;
border-color:#1f2937 !important;
}
/* Focus accesible */
.info-detalle-curso .col-md-4:last-child > .btn:focus,
.info-detalle-curso .acciones-curso .btn:focus{
outline: none !important;
box-shadow: var(--ring), 0 10px 22px rgba(15,23,42,.12) !important;
}
/* Ajuste: por si hay clases legacy en esa zona */
.info-detalle-curso .btn-verde{
background: var(--brand-primary) !important;
border-color: var(--brand-primary) !important;
}
/* ID del curso: bloque premium */
.info-detalle-curso .content-id-curso{
margin-top: 14px !important;
padding: 16px 16px !important;
border-radius: 14px !important;
border: 1px solid rgba(15,23,42,.08) !important;
background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
text-align: center;
}
.info-detalle-curso .content-id-curso h5{
color: rgba(24,58,100,.75) !important;
}
.info-detalle-curso .content-id-curso h3{
color: var(--brand-accent) !important;
font-size: 44px !important;
line-height: 1 !important;
letter-spacing: .02em;
}
/* Stats: menos “colores fuertes”, más corporativo */
.info-curso .stat{
background: #fff !important;
border: 1px solid rgba(15,23,42,.08) !important;
box-shadow: 0 6px 16px rgba(15,23,42,.06) !important;
}
.info-curso .stat--danger{ border-left: 5px solid var(--brand-primary) !important; }
.info-curso .stat--warn{ border-left: 5px solid #f59e0b !important; }
.info-curso .stat--info{ border-left: 5px solid var(--brand-accent) !important; }
.info-curso .stat--ok{ border-left: 5px solid #16a34a !important; }
/* =========================================================
GLOBAL SENSOS — Button sizing refinement (compact)
Objetivo: botones más pequeños, menos borde, look más premium
========================================================= */
/* Base buttons (general) */
.btn{
border-radius: 12px !important;
padding: 9px 12px !important;
border-width: 1px !important;
box-shadow: 0 6px 14px rgba(15,23,42,.08) !important;
font-weight: 700 !important;
gap: 6px !important;
}
.btn.btn-sm{
padding: 7px 10px !important;
border-radius: 11px !important;
font-size: .90rem !important;
}
.btn i, .btn svg{ font-size: 14px !important; }
/* Acciones del curso (más compacto aún) */
.info-detalle-curso .col-md-4:last-child > .btn,
.info-detalle-curso .acciones-curso .btn{
height: 40px !important;
padding: 9px 10px !important;
border-radius: 11px !important;
box-shadow: 0 6px 14px rgba(15,23,42,.08) !important;
border: 1px solid rgba(15,23,42,.06) !important;
}
/* Filled buttons: borde casi invisible (más limpio) */
.info-detalle-curso .acciones-curso .btn.btn-verde,
.info-detalle-curso .acciones-curso .btn.btn-success,
.info-detalle-curso .acciones-curso .btn.btn-primary,
.info-detalle-curso .acciones-curso .btn.btn-secondary{
border-color: rgba(255,255,255,.12) !important;
}
/* Hover/focus más “pro” (sin oscurecer demasiado) */
.info-detalle-curso .acciones-curso .btn:hover{
filter: none !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}
.info-detalle-curso .acciones-curso .btn:active{
transform: translateY(0);
box-shadow: 0 6px 14px rgba(15,23,42,.08) !important;
}
.btn:focus{
box-shadow: var(--ring), 0 10px 22px rgba(15,23,42,.10) !important;
}
/* =========================================================
V7 — BOTONES GLOBALES MÁS COMPACTOS (TODOS)
Objetivo: aspecto más profesional (menos “píldora” y menos “tocho”)
========================================================= */
/* Tamaños base */
:root{
--btn-font-size: 13.5px;
--btn-font-size-sm: 12.5px;
--btn-height: 38px;
--btn-height-sm: 34px;
--btn-radius: 10px;
--btn-radius-sm: 9px;
--btn-pad-y: 8px;
--btn-pad-x: 12px;
--btn-pad-y-sm: 6px;
--btn-pad-x-sm: 10px;
}
/* Bootstrap / global */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: var(--btn-font-size);
font-weight: 700;
line-height: 1;
letter-spacing: .1px;
padding: var(--btn-pad-y) var(--btn-pad-x);
min-height: var(--btn-height);
border-radius: var(--btn-radius);
border-width: 0 !important; /* menos “borde” en botones rellenos */
box-shadow: none !important; /* look más limpio */
}
.btn-sm{
font-size: var(--btn-font-size-sm);
padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
min-height: var(--btn-height-sm);
border-radius: var(--btn-radius-sm);
}
/* Solo los outline mantienen borde */
.btn[class*="btn-outline-"]{
border-width: 1px !important;
}
/* Iconos más pequeños y alineados */
.btn i,
.btn .fa,
.btn .fas,
.btn svg{
width: 14px;
height: 14px;
font-size: 14px;
flex: 0 0 auto;
}
/* Evitar que los svg “rompan” la altura del botón */
.btn svg{
display: inline-block;
vertical-align: middle;
}
/* Botones de acción en listados (si tienes una fila de botones tipo “Historial / Informe / Notas…”) */
.acciones-curso .btn,
.acciones-curso button.btn,
.td-botones .btn,
.td-botones button.btn,
.info-detalle-curso .btn{
min-height: var(--btn-height-sm);
padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
border-radius: var(--btn-radius-sm);
}
/* En móvil: aún un poco más compactos */
@media (max-width: 768px){
.btn{
font-size: 13px;
min-height: 36px;
padding: 7px 11px;
}
.btn-sm{
min-height: 32px;
padding: 6px 10px;
}
}
/* Focus más profesional (sin halos enormes) */
.btn:focus,
.btn:focus-visible{
outline: none !important;
box-shadow: 0 0 0 3px rgba(227, 6, 19, .18) !important; /* rojo marca suave */
}
/* Quitar “borde” de bootstrap en algunos estados */
.btn:active,
.btn.active{
box-shadow: none !important;
}
/* Split contacto (WhatsApp + Llamar) */
.contenedor-botones .acciones .contacto-split{
display: inline-flex;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
vertical-align: middle;
min-width: 0;
}
/* Cada mitad */
.contenedor-botones .acciones .contacto-split .btn{
border: 0 !important;
height: 36px;
padding: 7px 10px !important;
line-height: 1 !important;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
min-width: 0;
}
/* Colores */
.contenedor-botones .acciones .btn-contacto{ color:#fff; }
.contenedor-botones .acciones .btn-whatsapp{ background:#16A34A; } /* verde pro */
.contenedor-botones .acciones .btn-llamar{ background:#183A64; } /* azul marca */
/* Separador fino */
.contenedor-botones .acciones .contacto-split .btn + .btn{
border-left: 1px solid rgba(255,255,255,.22) !important;
}
/* Hover premium */
.contenedor-botones .acciones .btn-whatsapp:hover,
.contenedor-botones .acciones .btn-llamar:hover{
filter: brightness(.95);
color:#fff;
}
/* Iconos */
.contenedor-botones .acciones .contacto-split i{
font-size: 14px;
}
/* ---- FIX móvil: que no se corte ---- */
@media (max-width: 520px){
/* que el split ocupe toda la fila */
.contenedor-botones .acciones .contacto-split{
width: 100%;
}
/* cada mitad 50% */
.contenedor-botones .acciones .contacto-split .btn{
flex: 1 1 50%;
padding: 7px 8px !important;
}
/* en móvil: escondemos el texto y dejamos solo icono */
.contenedor-botones .acciones .contacto-split .txt{
display: none;
}
}
/* Por defecto: texto largo visible, corto oculto */
.contenedor-botones .acciones .contacto-split .txt-short{ display:none; }
/* Móvil: split a 100% + 50/50 y mostramos abreviaturas */
@media (max-width: 520px){
.contenedor-botones .acciones .contacto-split{ width:100%; }
.contenedor-botones .acciones .contacto-split .btn{
flex: 1 1 50%;
padding: 7px 8px !important;
}
.contenedor-botones .acciones .contacto-split .txt-full{ display:none; }
.contenedor-botones .acciones .contacto-split .txt-short{
display:inline;
font-size: 12px;
letter-spacing: .2px;
}
}
/* =========================================================
PARCHE: Acciones rápidas + Stats 2x2 en móvil (ancho total)
Pega este bloque AL FINAL de tu CSS principal
========================================================= */
/* --- Por defecto: etiquetas largas visibles --- */
.info-detalle-curso.info-curso .acciones-curso .txt-short{ display:none; }
/* --- Grid acciones y botones (base) --- */
.info-detalle-curso.info-curso .acciones-curso{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.info-detalle-curso.info-curso .acciones-curso .btn{
width: 100%;
height: 42px;
padding: 10px 12px !important;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.info-detalle-curso.info-curso .acciones-curso .btn i,
.info-detalle-curso.info-curso .acciones-curso .btn svg{
flex: 0 0 auto;
width: 16px;
height: 16px;
}
/* --- Stats grid (base) --- */
.info-detalle-curso.info-curso .stats-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
/* =========================================================
MÓVIL: paneles a ancho completo + botones compactos
========================================================= */
@media (max-width: 576px){
.container{
padding-left: 10px !important;
padding-right: 10px !important;
}
.info-detalle-curso.info-curso > [class*="col-"]{
padding-left: 0 !important;
padding-right: 0 !important;
}
.info-detalle-curso.info-curso{
margin-left: 0 !important;
margin-right: 0 !important;
}
.info-detalle-curso.info-curso .panel-curso{
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.info-detalle-curso.info-curso .acciones-curso{
gap: 10px;
}
.info-detalle-curso.info-curso .acciones-curso .btn{
height: 38px;
padding: 8px 10px !important;
font-size: 13px;
border-radius: 12px;
}
/* En móvil: usamos etiquetas cortas para que NUNCA se corte */
.info-detalle-curso.info-curso .acciones-curso .txt-full{ display:none; }
.info-detalle-curso.info-curso .acciones-curso .txt-short{
display: inline;
font-size: 12px;
letter-spacing: .2px;
}
.info-detalle-curso.info-curso .stats-grid{
gap: 10px;
}
.info-detalle-curso.info-curso .stat{
padding: 10px 12px;
border-radius: 14px;
min-height: 56px;
}
.info-detalle-curso.info-curso .stat-label{
font-size: 11px;
letter-spacing: .08em;
}
.info-detalle-curso.info-curso .stat-value{
font-size: 18px;
}
}
@media (max-width: 360px){
.info-detalle-curso.info-curso .acciones-curso,
.info-detalle-curso.info-curso .stats-grid{
grid-template-columns: 1fr !important;
}
}
/* =========================
TABLA NOTAS (PRO)
========================= */
.notas-wrap{
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.notas-table{
margin: 0;
border-collapse: separate;
border-spacing: 0;
}
.notas-table thead th{
background: #0b1220;
color: #fff;
font-weight: 800;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
border: 0;
padding: 12px 14px;
}
.notas-table tbody td,
.notas-table tbody th{
border-top: 1px solid #eef2f7;
border-bottom: 0;
border-left: 0;
border-right: 0;
padding: 12px 14px;
vertical-align: middle;
}
.grupo-row td{
background: #f7f9fc;
border-top: 1px solid #e7edf5;
padding: 10px 14px;
}
.grupo-title{
font-weight: 900;
color: #0b1220;
letter-spacing: .02em;
}
.curso-chip{
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: #f1f5f9;
color: #0b1220;
font-weight: 800;
letter-spacing: .04em;
}
.nota-row{
position: relative;
background: #fff;
}
/* Indicador lateral (más pro que pintar toda la fila) */
.nota-row.row-pass{ box-shadow: inset 4px 0 0 rgba(22,163,74,.9); }
.nota-row.row-fail{ box-shadow: inset 4px 0 0 rgba(227,6,19,.9); }
.nota-row.row-none{ box-shadow: inset 4px 0 0 rgba(148,163,184,.9); }
.col-nota{
text-align: center;
font-weight: 900;
font-size: 16px;
color: #0b1220;
}
.col-estado{
text-align: center;
}
.estado-badge{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
font-weight: 800;
font-size: 12px;
white-space: nowrap;
}
/* Badges */
.badge-pass{
background: rgba(22,163,74,.12);
color: #166534;
}
.badge-fail{
background: rgba(227,6,19,.12);
color: #9f1239;
}
.badge-none{
background: rgba(148,163,184,.18);
color: #334155;
}
/* Hover sutil */
.notas-table tbody tr.nota-row:hover{
background: #fbfdff;
}
/* Móvil: reduce paddings y tamaños */
@media (max-width: 576px){
.notas-table thead th{ font-size: 11px; padding: 10px 12px; }
.notas-table tbody td, .notas-table tbody th{ padding: 10px 12px; }
.col-nota{ font-size: 15px; }
}
/* =========================
PAGOS (PRO)
========================= */
.pagos-form{ margin-top: 6px; }
/* Resumen */
.pagos-resumen{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
margin-bottom: 14px;
}
.resumen-card{
background:#fff;
border-radius:16px;
padding:14px 14px 12px;
border: 1px solid #eef2f7;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.resumen-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom: 10px;
}
.resumen-title{
font-weight: 900;
color:#0b1220;
letter-spacing:.02em;
}
.resumen-value{
font-weight: 900;
font-size: 22px;
color:#0b1220;
}
.resumen-sub{
margin-top: 4px;
font-size: 12px;
color:#64748b;
}
.resumen-badge{
font-weight: 800;
font-size: 11px;
padding: 6px 10px;
border-radius: 999px;
white-space: nowrap;
}
.resumen-badge--brand{
background: rgba(227,6,19,.12);
color: #9f1239;
}
.resumen-badge--soft{
background: rgba(24,58,100,.10);
color: #183A64;
}
/* Secciones */
.pagos-section{
background:#fff;
border-radius:16px;
padding: 14px;
border: 1px solid #eef2f7;
box-shadow: 0 10px 30px rgba(0,0,0,.04);
margin-top: 14px;
}
.section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom: 10px;
}
.section-title{
margin:0;
font-weight: 900;
color:#0b1220;
}
.pill{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 12px;
white-space: nowrap;
}
.pill--danger{
background: rgba(227,6,19,.12);
color: #9f1239;
}
.pill--soft{
background: rgba(148,163,184,.18);
color:#334155;
}
/* Helpers */
.help-muted{
display:block;
margin-top: 6px;
font-size: 12px;
color:#64748b;
}
/* Input con € */
.input-euro{ position: relative; }
.input-euro .form-control{
padding-right: 40px !important;
border-radius: 12px;
}
.input-euro .euro{
position:absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
font-weight: 900;
color:#64748b;
pointer-events:none;
}
/* Select método (compacto y alineado) */
.metodo-select{
border-radius: 12px;
}
/* =========================
MÓVIL: resumen 2 columnas + una línea cantidad/método
========================= */
@media (max-width: 576px){
/* Reserva y descuento en 2 columnas */
.pagos-resumen{
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.resumen-card{ padding: 12px; }
.resumen-value{ font-size: 18px; }
.resumen-sub{ font-size: 11px; }
/* Compacta controles */
.pagos-section .form-control,
.pagos-section .form-select{
height: 40px;
padding: 8px 10px;
border-radius: 12px;
}
.pagos-section .form-label{
font-size: 12px;
font-weight: 800;
margin-bottom: 6px;
}
.input-euro .euro{ right: 10px; }
/* Evita que el select quede muy estrecho en algunos móviles */
.metodo-select{
font-size: 13px;
}
}
/* Muy pequeño: si queda demasiado apretado, apila */
@media (max-width: 360px){
.pagos-resumen{ grid-template-columns: 1fr; }
}
/* =========================
PRUEBAS PRÁCTICAS (PRO)
========================= */
.practicas-card{
background:#fff;
border-radius: 16px;
padding: 14px;
border: 1px solid #eef2f7;
box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.practicas-head{
display:flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.practicas-title{
margin:0;
font-weight: 900;
color:#0b1220;
}
.practicas-sub{
font-size: 12px;
color:#64748b;
}
.help-muted{
display:block;
margin-top: 6px;
font-size: 12px;
color:#64748b;
}
.limite{
font-size: 12px;
font-weight: 900;
padding: 6px 10px;
border-radius: 999px;
background: rgba(24,58,100,.10);
color: #183A64;
white-space: nowrap;
}
.input-estado{
position: relative;
}
.input-estado .form-control{
padding-right: 92px !important;
border-radius: 12px;
}
.estado-pill{
position:absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
padding: 6px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 12px;
background: rgba(148,163,184,.18);
color:#334155;
min-width: 70px;
text-align: center;
}
.estado-pill.ok{
background: rgba(22,163,74,.12);
color: #166534;
}
.estado-pill.bad{
background: rgba(227,6,19,.12);
color: #9f1239;
}
.estado-pill.warn{
background: rgba(245,158,11,.16);
color: #92400e;
}
.practicas-sep{
margin: 14px 0;
border: 0;
border-top: 1px solid #eef2f7;
}
/* Móvil: compacta */
@media (max-width: 576px){
.limite{ padding: 5px 8px; font-size: 11px; }
.input-estado .form-control{ padding-right: 86px !important; }
.estado-pill{ min-width: 64px; font-size: 11px; }
}
.btn-media-badge{
position: relative;
overflow: visible !important; /* clave: evita que recorte el badge */
}
.btn-media-badge .media-badge{
position: absolute;
top: -8px;
right: -8px;
z-index: 5;
min-width: 20px;
height: 20px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #dc3545; /* rojo */
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
border: 2px solid #fff; /* se ve sobre botones oscuros */
}