/* ============================================================================
   Campus Élite FarmacIA — Hoja de estilos corporativa
   CSS puro con custom properties.
   Marca: verde #8EC420 · Secundario: azul marino #1E3A6E · Fondo: #F5F7FA
   ============================================================================ */

:root {
    /* Paleta corporativa Élite FarmacIA */
    --marca:             #8EC420;  /* naranja de marca: botones y acentos */
    --marca-hover:       #7DB114;
    --marca-claro:       #A5D44A;  /* detalles naranjas sobre fondo oscuro */
    --acento:            #6FA010;  /* naranja oscurecido: enlaces legibles en claro */
    --secundario:        #1E3A6E;  /* morado corporativo: cabeceras, topbar, texto destacado */
    --secundario-oscuro: #142850;  /* hover / activos */
    --fondo-claro:       #E8EDF5;  /* fondos suaves tintados del secundario */
    --fondo-suave:       #F5F7FA;  /* blanco de fondo general */
    --gris:        #595959;   /* texto secundario */
    --gris-claro:  #D5DAE3;   /* bordes */
    --texto:       #333333;
    --blanco:      #FFFFFF;
    --ok:          #2E7D32;
    --ok-fondo:    #E6F2E7;
    --error:       #B3261E;
    --error-fondo: #F9E5E4;
    --aviso:       #8A6D00;
    --aviso-fondo: #FFF4CC;

    /* Espaciado y tipografía */
    --esp-1: 4px;  --esp-2: 8px;  --esp-3: 16px;  --esp-4: 24px;  --esp-5: 40px;
    --radio: 8px;
    --sombra: 0 1px 3px rgba(55, 37, 78, 0.14);
    --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--texto);
    background: var(--fondo-suave);
    line-height: 1.55;
}

h1 { font-size: 1.5rem;  color: var(--secundario); margin: 0 0 var(--esp-3); }
h2 { font-size: 1.2rem;  color: var(--secundario); margin: var(--esp-4) 0 var(--esp-2); }
h3 { font-size: 1.05rem; color: var(--secundario-oscuro); margin: var(--esp-3) 0 var(--esp-2); }

a { color: var(--acento); }
a:hover { color: var(--secundario-oscuro); }

/* Accesibilidad: foco visible y salto al contenido */
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.salto-contenido {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--secundario); color: var(--blanco); padding: var(--esp-2) var(--esp-3);
}
.salto-contenido:focus { left: 0; }

/* ---------------------------------------------------------------- topbar */
.topbar {
    display: flex; align-items: center; gap: var(--esp-3);
    background: var(--secundario); color: var(--blanco);
    padding: var(--esp-2) var(--esp-3);
    position: sticky; top: 0; z-index: 50;
}
.marca { display: flex; align-items: center; gap: var(--esp-2); text-decoration: none; color: var(--blanco); }
.marca-texto { font-size: 1.15rem; letter-spacing: 0.3px; }
.marca-texto strong { color: var(--marca); }
.marca-texto small { font-weight: 300; opacity: 0.85; margin-left: var(--esp-1); }
.topbar-usuario { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.usuario-nombre { font-size: 0.9rem; }
.rol-badge {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 99px; background: var(--secundario-oscuro); color: var(--marca-claro);
}
.rol-inspector { background: var(--aviso-fondo); color: var(--aviso); }

.btn-menu {
    display: none; background: none; border: 1px solid var(--marca-claro); color: var(--blanco);
    border-radius: var(--radio); font-size: 1.1rem; padding: 2px 10px; cursor: pointer;
}

/* ------------------------------------------------------------- estructura */
.cuerpo { display: flex; min-height: calc(100vh - 120px); }

.lateral {
    width: 230px; flex-shrink: 0; background: var(--blanco);
    border-right: 1px solid var(--gris-claro); padding: var(--esp-3) 0;
}
.lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral a {
    display: block; padding: 10px var(--esp-3); color: var(--texto);
    text-decoration: none; border-left: 4px solid transparent;
}
.lateral a:hover { background: var(--fondo-suave); color: var(--secundario); }
.lateral a.activo { border-left-color: var(--secundario); background: var(--fondo-claro); color: var(--secundario); font-weight: 600; }
.lateral .separador { border-top: 1px solid var(--gris-claro); margin-top: var(--esp-3); padding-top: var(--esp-2); }
.lateral .separador a { font-size: 0.85rem; color: var(--gris); }

.principal { flex: 1; padding: var(--esp-4); max-width: 1200px; }

.pie {
    background: var(--secundario-oscuro); color: var(--marca-claro);
    text-align: center; font-size: 0.8rem; padding: var(--esp-3);
}
.pie a { color: var(--blanco); }

/* ----------------------------------------------------------------- cards */
.card {
    background: var(--blanco); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: var(--esp-4); margin-bottom: var(--esp-4);
}
.card-compacta { padding: var(--esp-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
.kpi { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--esp-3); }
.kpi .valor { font-size: 1.7rem; font-weight: 700; color: var(--secundario); display: block; }
.kpi .etiqueta { font-size: 0.82rem; color: var(--gris); }

/* --------------------------------------------------------------- botones */
.btn {
    display: inline-block; background: var(--marca); color: var(--secundario);
    border: none; border-radius: var(--radio); padding: 9px 18px; font-weight: 600;
    font-family: inherit; font-size: 0.95rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--marca-hover); color: var(--secundario-oscuro); }
.btn-claro { background: var(--fondo-claro); color: var(--secundario); }
.btn-claro:hover { background: var(--marca-claro); color: var(--secundario-oscuro); }
.btn-peligro { background: var(--error); }
.btn-peligro:hover { background: #8f1d17; }
.btn-pequeno { padding: 4px 12px; font-size: 0.82rem; }
.btn[disabled], .btn.deshabilitado { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ------------------------------------------------------------ formularios */
form .campo { margin-bottom: var(--esp-3); }
label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: var(--esp-1); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="url"], input[type="file"], select, textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--gris-claro);
    border-radius: var(--radio); font-family: inherit; font-size: 0.95rem;
    background: var(--blanco); color: var(--texto);
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); }
textarea { min-height: 120px; resize: vertical; }
.ayuda { font-size: 0.8rem; color: var(--gris); margin-top: var(--esp-1); }
fieldset { border: 1px solid var(--gris-claro); border-radius: var(--radio); margin-bottom: var(--esp-3); }
legend { font-weight: 600; color: var(--secundario); padding: 0 var(--esp-2); }
.form-inline { display: flex; gap: var(--esp-2); align-items: end; flex-wrap: wrap; }
.form-inline .campo { margin-bottom: 0; flex: 1; min-width: 140px; }

/* ------------------------------------------------------------------ tablas */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gris-claro); }
th { background: var(--fondo-claro); color: var(--secundario-oscuro); font-weight: 600; white-space: nowrap; }
tr:hover td { background: var(--fondo-suave); }
td.num, th.num { text-align: right; }

/* ----------------------------------------------------------------- estados */
.flash { padding: var(--esp-3); border-radius: var(--radio); margin-bottom: var(--esp-3); }
.flash-ok    { background: var(--ok-fondo); color: var(--ok); }
.flash-error { background: var(--error-fondo); color: var(--error); }
.flash-aviso { background: var(--aviso-fondo); color: var(--aviso); }

.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; }
.badge-ok     { background: var(--ok-fondo); color: var(--ok); }
.badge-error  { background: var(--error-fondo); color: var(--error); }
.badge-aviso  { background: var(--aviso-fondo); color: var(--aviso); }
.badge-neutro { background: var(--fondo-claro); color: var(--secundario-oscuro); }

/* Barra de progreso accesible */
.progreso { background: var(--fondo-claro); border-radius: 99px; height: 14px; overflow: hidden; }
.progreso > span {
    display: block; height: 100%; background: var(--acento);
    border-radius: 99px; min-width: 4px; transition: width 0.3s;
}
.progreso-ok > span { background: var(--ok); }
.progreso-bajo > span { background: var(--error); }
.progreso-texto { font-size: 0.8rem; color: var(--gris); }

/* ------------------------------------------------------------- contenidos */
.indice-curso { list-style: none; padding: 0; }
.indice-curso .modulo-titulo {
    background: var(--fondo-claro); padding: var(--esp-2) var(--esp-3);
    border-radius: var(--radio); font-weight: 600; color: var(--secundario-oscuro);
    margin: var(--esp-3) 0 var(--esp-2);
}
.indice-curso .item {
    display: flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--fondo-claro);
}
.indice-curso .item .titulo { flex: 1; }
.indice-curso .bloqueado { color: var(--gris); }
.indice-curso .bloqueado .titulo::after { content: " 🔒"; }
.icono-estado { width: 22px; text-align: center; }

.contenido-cuerpo img, .contenido-cuerpo video, .contenido-cuerpo iframe { max-width: 100%; height: auto; border-radius: var(--radio); }
.contenido-cuerpo img { display: block; margin: 0 auto; }
.contenido-cuerpo figure { margin: var(--esp-3) 0; }
.contenido-cuerpo figcaption { text-align: center; font-size: 0.85rem; color: var(--gris); margin-top: 6px; }
.contenido-cuerpo blockquote {
    margin: var(--esp-3) 0; padding: var(--esp-2) var(--esp-3); background: var(--fondo-claro);
    border-left: 4px solid var(--marca); border-radius: var(--radio);
}
.contenido-cuerpo blockquote p { margin: 4px 0; }
.contenido-cuerpo pre {
    white-space: pre-wrap; overflow-wrap: anywhere; background: var(--secundario-oscuro); color: #fff;
    padding: var(--esp-3); border-radius: var(--radio); font-size: 0.9rem; line-height: 1.5;
}
.contenido-cuerpo code { font-family: Consolas, "Courier New", monospace; }
.contenido-cuerpo p code, .contenido-cuerpo li code, .contenido-cuerpo td code {
    background: var(--fondo-claro); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere;
}
.contenido-cuerpo table { display: block; overflow-x: auto; }
.contenido-cuerpo th { white-space: normal; }
.contenido-cuerpo li { margin-bottom: 6px; }
.progreso-paginas { height: 6px; background: var(--fondo-claro); border-radius: 3px; margin-bottom: var(--esp-3); overflow: hidden; }
.progreso-paginas span { display: block; height: 100%; background: var(--acento); }
.video-marco { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--radio); background: #000; }

.nav-contenido { display: flex; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-4); }

/* ---------------------------------------------------------------- mensajes */
.hilo-mensajes { display: flex; flex-direction: column; gap: var(--esp-2); }
.mensaje { padding: var(--esp-3); border-radius: var(--radio); max-width: 85%; }
.mensaje-propio { background: var(--fondo-claro); align-self: flex-end; }
.mensaje-ajeno  { background: var(--blanco); border: 1px solid var(--gris-claro); align-self: flex-start; }
.mensaje .meta { font-size: 0.75rem; color: var(--gris); margin-top: var(--esp-1); }

/* --------------------------------------------------------------- login */
.pagina-login { display: grid; place-items: center; min-height: 70vh; }
.caja-login { width: 100%; max-width: 420px; }
.caja-login .marca-grande { text-align: center; margin-bottom: var(--esp-3); }
.caja-login .marca-grande img { width: 64px; height: 64px; }

/* ------------------------------------------------------------- utilidades */
.texto-gris { color: var(--gris); }
.texto-pequeno { font-size: 0.85rem; }
.derecha { text-align: right; }
.mt { margin-top: var(--esp-3); }
.mb { margin-bottom: var(--esp-3); }
.acciones-fila { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
details { margin-bottom: var(--esp-2); }
summary { cursor: pointer; font-weight: 600; color: var(--secundario); padding: var(--esp-2) 0; }

/* ------------------------------------------- informe visual (admin/informes) */
.iv .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.iv-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-4); }
.iv-fila > .iv-panel-estrecho { max-width: 260px; }
.iv-fila:has(> .iv-panel-estrecho) { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
.iv-panel { border: 1px solid var(--gris-claro); border-radius: var(--radio); padding: var(--esp-3); margin-bottom: var(--esp-4); min-width: 0; }
.iv-panel h3 { margin-top: 0; }
.iv-svg { display: block; width: 100%; height: auto; }
.iv-svg .iv-rejilla { stroke: var(--fondo-claro); stroke-width: 1; }
.iv-svg .iv-base { stroke: var(--gris-claro); stroke-width: 1; }
.iv-svg .iv-eje { font-size: 11px; fill: var(--gris); font-family: var(--fuente); }
.iv-svg .iv-umbral { stroke: var(--error); stroke-width: 1.5; stroke-dasharray: 5 4; }
.iv-svg .iv-umbral-texto { font-size: 11px; fill: var(--error); font-family: var(--fuente); }
.iv-svg rect:hover { opacity: 0.8; }
.iv-s-1 { fill: var(--secundario); }
.iv-s-2 { fill: var(--marca); }
.iv-s-3 { fill: var(--ok); }
.iv-anillo { display: block; width: 100%; max-width: 170px; margin: 0 auto var(--esp-2); }
.iv-anillo circle { fill: none; stroke-width: 18; }
.iv-anillo .iv-anillo-fondo { stroke: var(--fondo-claro); }
.iv-anillo .iv-seg-ok { stroke: var(--ok); }
.iv-anillo .iv-seg-pendiente { stroke: var(--marca); }
.iv-anillo .iv-seg-riesgo { stroke: var(--error); }
.iv-anillo-centro { font-size: 20px; font-weight: 700; fill: var(--secundario); font-family: var(--fuente); }
.iv-leyenda { list-style: none; padding: 0; margin: 0 0 var(--esp-2); font-size: 0.82rem; color: var(--gris); }
.iv-leyenda-linea { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); }
.iv-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.iv-c-ok { background: var(--ok); }
.iv-c-pendiente, .iv-c-s2, .iv-c-progreso { background: var(--marca); }
.iv-c-riesgo { background: var(--error); }
.iv-c-controles, .iv-c-s1 { background: var(--secundario); }
.iv-c-s3 { background: var(--ok); }
.iv-leyenda .iv-c-umbral { width: 3px; background: var(--error); }
.iv-tabla td { vertical-align: middle; }
.iv-celda-barras { min-width: 160px; }
.iv-barra { position: relative; background: var(--fondo-claro); border-radius: 99px; height: 9px; margin: 3px 0; overflow: visible; }
.iv-barra > span { display: block; height: 100%; border-radius: 99px; min-width: 2px; }
.iv-barra .iv-barra-umbral { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--error); }
.iv-b-progreso { background: var(--marca); }
.iv-b-controles { background: var(--secundario); }
.iv-b-ok { background: var(--ok); }
.iv-b-tiempo { background: var(--acento); }
td.num .iv-barra { margin-left: auto; max-width: 110px; }
@media (max-width: 860px) {
    .iv-fila, .iv-fila:has(> .iv-panel-estrecho) { grid-template-columns: minmax(0, 1fr); }
    .iv-fila > .iv-panel-estrecho { max-width: none; }
}
@media print {
    .iv-panel { break-inside: avoid; }
}

/* Franja «estás en la cuenta de un tutor» (acceso del administrador) */
.franja-acceso-admin {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2);
    background: var(--aviso-fondo); color: var(--aviso); border-left: 4px solid var(--marca);
    border-radius: var(--radio); padding: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-3);
}

/* ------------------------------------- calendario de sesiones en directo */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-4); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-2); color: var(--secundario); }
.cal-tabla { table-layout: fixed; }
.cal-tabla th { text-align: center; padding: 6px 2px; }
.cal-tabla td { height: 58px; vertical-align: top; padding: 4px; border: 1px solid var(--gris-claro); }
.cal-tabla tr:hover td { background: transparent; }
.cal-num { display: block; font-size: 0.8rem; color: var(--gris); }
.cal-hoy .cal-num {
    display: inline-block; min-width: 22px; text-align: center; border-radius: 99px;
    background: var(--secundario); color: var(--blanco); font-weight: 600;
}
.cal-tabla td.cal-evento { background: var(--fondo-claro); }
.cal-chip {
    display: block; margin-top: 2px; padding: 1px 4px; border-radius: 4px; font-size: 0.75rem;
    font-weight: 600; text-align: center; background: var(--marca); color: var(--secundario); text-decoration: none;
}
.cal-chip:hover { background: var(--marca-hover); color: var(--secundario-oscuro); }
.cal-chip-pasada { background: var(--gris-claro); color: var(--gris); }
.cal-sesion {
    display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3);
    padding: var(--esp-2) 0 var(--esp-2) var(--esp-3); margin-bottom: var(--esp-2);
    border-left: 4px solid var(--marca);
}
.cal-sesion .btn { flex-shrink: 0; }
@media (max-width: 860px) {
    .cal-layout { grid-template-columns: minmax(0, 1fr); }
    .cal-tabla td { height: 48px; padding: 2px; }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 860px) {
    .btn-menu { display: block; }
    .cuerpo { flex-direction: column; }
    .lateral {
        width: 100%; border-right: 0; border-bottom: 1px solid var(--gris-claro);
        display: none;
    }
    .lateral.abierto { display: block; }
    .principal { padding: var(--esp-3); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .topbar-usuario { gap: var(--esp-1); }
    .usuario-nombre { display: none; }
    .mensaje { max-width: 100%; }
}

@media print {
    .topbar, .lateral, .pie, .btn, .btn-menu { display: none !important; }
    .principal { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}