/*
 * Ajusta --accesodemo-azul al azul corporativo exacto de la academia
 * si difiere de este valor por defecto.
 */
:root {
    --accesodemo-azul: #0B4F8A;
    --accesodemo-azul-claro: #E8F1FA;
    --accesodemo-azul-oscuro: #063560;
    --accesodemo-gris: #6B7280;
    --accesodemo-gris-claro: #F3F5F7;
    --accesodemo-verde: #1E8E5A;
    --accesodemo-borde: #E2E8F0;
}

/* ---------- Páginas de administración ---------- */

/* ---------- Barra de accesos rápidos entre páginas del plugin ---------- */

.accesodemo-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--accesodemo-borde);
}

.accesodemo-subnav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--accesodemo-borde);
    background: #ffffff;
    color: var(--accesodemo-azul-oscuro);
    font-weight: 600;
    font-size: 0.92em;
    text-decoration: none;
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out, transform 0.1s ease-in-out;
}

a.accesodemo-subnav-item:hover {
    background: var(--accesodemo-azul-claro);
    border-color: var(--accesodemo-azul);
    transform: translateY(-1px);
}

.accesodemo-subnav-activo {
    background: var(--accesodemo-azul);
    border-color: var(--accesodemo-azul);
    color: #ffffff;
    cursor: default;
}

.accesodemo-subnav-icono {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
}

.accesodemo-subnav-icono-generar {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
    background: currentColor;
}

.accesodemo-subnav-icono-registro {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
    background: currentColor;
}

.accesodemo-subnav-icono-analisis {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
    background: currentColor;
}

.accesodemo-subnav-icono-ajustes {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat;
    background: currentColor;
}

.accesodemo-titulo {
    color: var(--accesodemo-azul-oscuro);
    font-weight: 700;
    border-bottom: 2px solid var(--accesodemo-azul-claro);
    padding-bottom: 8px;
    margin-top: 28px;
}

.accesodemo-wrapper {
    background: #ffffff;
    border: 1px solid var(--accesodemo-azul-claro);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(11, 79, 138, 0.08);
    margin-bottom: 24px;
}

.accesodemo-resultado {
    margin-top: 18px;
    padding: 16px;
    background: var(--accesodemo-azul-claro);
    border-radius: 8px;
    border-left: 4px solid var(--accesodemo-azul);
}

.accesodemo-enlacebox {
    display: block;
    background: #ffffff;
    border: 1px dashed var(--accesodemo-azul);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
    word-break: break-all;
    font-size: 0.95em;
}

.accesodemo-btncopiar {
    background: var(--accesodemo-azul);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s ease-in-out;
}

.accesodemo-btncopiar:hover {
    background: var(--accesodemo-azul-oscuro);
}

.accesodemo-resumen,
.accesodemo-nota {
    color: var(--accesodemo-gris);
    font-size: 0.9em;
}

/* ---------- Tabla de registro de perfiles ---------- */

.accesodemo-tablawrap {
    overflow-x: auto;
    border: 1px solid var(--accesodemo-borde);
    border-radius: 10px;
}

.accesodemo-tabla {
    margin-bottom: 0;
}

.accesodemo-tabla th {
    background: var(--accesodemo-azul-claro);
    color: var(--accesodemo-azul-oscuro);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.accesodemo-tabla tbody tr:hover {
    background: var(--accesodemo-gris-claro);
}

.accesodemo-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.82em;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
}

.accesodemo-badge-verde {
    background: var(--accesodemo-verde);
}

.accesodemo-badge-azul {
    background: var(--accesodemo-azul);
}

.accesodemo-badge-gris {
    background: var(--accesodemo-gris);
}

.accesodemo-badge-morado {
    background: #6d28d9;
}

.accesodemo-volver {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--accesodemo-azul);
    font-weight: 600;
    text-decoration: none;
}

.accesodemo-volver:hover {
    text-decoration: underline;
}

.accesodemo-tabla td:last-child {
    white-space: nowrap;
}

.accesodemo-historial-repetido {
    font-size: 0.8em;
    color: var(--accesodemo-gris);
    margin-top: 2px;
}

/* ---------- Página de Análisis ---------- */

.accesodemo-subtitulo {
    color: var(--accesodemo-azul-oscuro);
    font-weight: 700;
    margin: 26px 0 12px;
}

.accesodemo-rango-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.accesodemo-rango-btn {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--accesodemo-borde);
    color: var(--accesodemo-azul-oscuro);
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    background: #ffffff;
}

.accesodemo-rango-btn:hover {
    background: var(--accesodemo-gris-claro);
}

.accesodemo-rango-activo {
    background: var(--accesodemo-azul);
    border-color: var(--accesodemo-azul);
    color: #ffffff;
}

.accesodemo-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.accesodemo-kpi {
    background: #ffffff;
    border: 1px solid var(--accesodemo-borde);
    border-radius: 12px;
    padding: 20px;
    border-top: 4px solid var(--accesodemo-azul);
    box-shadow: 0 2px 8px rgba(11, 79, 138, 0.06);
}

.accesodemo-kpi-azul { border-top-color: #0B4F8A; }
.accesodemo-kpi-verde { border-top-color: #1E8E5A; }
.accesodemo-kpi-morado { border-top-color: #6d28d9; }
.accesodemo-kpi-gris { border-top-color: #6B7280; }

.accesodemo-kpi-titulo {
    font-size: 0.82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accesodemo-gris);
    margin-bottom: 8px;
}

.accesodemo-kpi-valor {
    font-size: 2em;
    font-weight: 800;
    color: var(--accesodemo-azul-oscuro);
    line-height: 1.1;
}

.accesodemo-kpi-subtitulo {
    font-size: 0.85em;
    color: var(--accesodemo-gris);
    margin-top: 6px;
}

.accesodemo-embudo {
    background: #ffffff;
    border: 1px solid var(--accesodemo-borde);
    border-radius: 12px;
    padding: 22px;
}

.accesodemo-embudo-fila {
    display: grid;
    grid-template-columns: 220px 1fr 140px;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.accesodemo-embudo-fila:last-child {
    margin-bottom: 0;
}

.accesodemo-embudo-etiqueta {
    font-weight: 600;
    color: var(--accesodemo-azul-oscuro);
    font-size: 0.92em;
}

.accesodemo-embudo-barra-fondo {
    background: var(--accesodemo-gris-claro);
    border-radius: 999px;
    height: 22px;
    overflow: hidden;
}

.accesodemo-embudo-barra {
    background: linear-gradient(90deg, var(--accesodemo-azul), #6d28d9);
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease-in-out;
}

.accesodemo-embudo-valor {
    text-align: right;
    font-weight: 700;
    color: var(--accesodemo-azul-oscuro);
    font-size: 0.92em;
}

.accesodemo-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.accesodemo-grafico-bloque {
    background: #ffffff;
    border: 1px solid var(--accesodemo-borde);
    border-radius: 12px;
    padding: 20px;
}

.accesodemo-grafico-bloque .accesodemo-subtitulo {
    margin-top: 0;
}

@media (max-width: 700px) {
    .accesodemo-embudo-fila {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .accesodemo-embudo-valor {
        text-align: left;
    }
}

.accesodemo-accion-eliminar {
    color: #B42318;
}

.accesodemo-accionsep {
    color: var(--accesodemo-borde);
    margin: 0 4px;
}

.accesodemo-tabla a.accesodemo-enlacenombre,
.accesodemo-tabla a.accesodemo-enlacecurso {
    color: var(--accesodemo-azul);
    font-weight: 600;
    text-decoration: none;
}

.accesodemo-tabla a.accesodemo-enlacenombre:hover,
.accesodemo-tabla a.accesodemo-enlacecurso:hover {
    text-decoration: underline;
}

.accesodemo-tabla td.accesodemo-col-check,
.accesodemo-tabla th.accesodemo-col-check {
    width: 34px;
    text-align: center;
}

.accesodemo-barra-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.accesodemo-barra-acciones button,
.accesodemo-barra-acciones .accesodemo-btnbarra {
    background: #ffffff;
    border: 1px solid var(--accesodemo-borde);
    color: var(--accesodemo-azul-oscuro);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
}

.accesodemo-barra-acciones button:hover,
.accesodemo-barra-acciones .accesodemo-btnbarra:hover {
    background: var(--accesodemo-gris-claro);
}

.accesodemo-barra-acciones .accesodemo-btneliminarsel {
    background: #B42318;
    border-color: #B42318;
    color: #ffffff;
    margin-left: auto;
}

.accesodemo-barra-acciones .accesodemo-btneliminarsel:hover {
    background: #8f1c14;
}

/* ---------- Bloque de filtros colapsable ---------- */

.accesodemo-filtros {
    margin-bottom: 18px;
    border: 1px solid var(--accesodemo-borde);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.accesodemo-filtros summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 18px;
    font-weight: 600;
    color: var(--accesodemo-azul-oscuro);
    background: var(--accesodemo-gris-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    user-select: none;
}

.accesodemo-filtros summary::-webkit-details-marker {
    display: none;
}

.accesodemo-filtros summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s ease-in-out;
    color: var(--accesodemo-azul);
}

.accesodemo-filtros[open] summary::before {
    transform: rotate(90deg);
}

.accesodemo-filtros-body {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}

.accesodemo-filtros-body label {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--accesodemo-gris);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.accesodemo-filtros-body input,
.accesodemo-filtros-body select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--accesodemo-borde);
    border-radius: 6px;
    font-size: 0.95em;
}

.accesodemo-filtros-acciones {
    display: flex;
    gap: 10px;
    align-items: center;
}

.accesodemo-btnfiltrar {
    background: var(--accesodemo-azul);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    cursor: pointer;
    font-weight: 600;
}

.accesodemo-btnfiltrar:hover {
    background: var(--accesodemo-azul-oscuro);
}

.accesodemo-btnlimpiar {
    color: var(--accesodemo-gris);
    font-size: 0.9em;
    text-decoration: underline;
}

/* ---------- Landing pública de la campaña ---------- */

body.pagelayout-login #page,
body.pagelayout-login #page-content {
    background: linear-gradient(160deg, var(--accesodemo-azul-claro) 0%, #ffffff 55%);
}

.accesodemo-landing {
    max-width: 480px;
    margin: 48px auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 12px 32px rgba(6, 53, 96, 0.14);
}

.accesodemo-landing-header {
    text-align: center;
    margin-bottom: 28px;
}

.accesodemo-landing-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--accesodemo-azul-claro);
    position: relative;
}

.accesodemo-landing-icon::after {
    content: "🎓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.accesodemo-landing h2 {
    color: var(--accesodemo-azul-oscuro);
    margin: 0 0 10px;
    font-size: 1.5em;
    font-weight: 700;
}

.accesodemo-landingdesc {
    color: var(--accesodemo-gris);
    font-size: 0.96em;
    line-height: 1.5;
    margin: 0;
}

.accesodemo-landing .mform label {
    font-weight: 600;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accesodemo-azul-oscuro);
    margin-bottom: 6px;
    white-space: normal;
    line-height: 1.3;
}

/* El formulario de Moodle/Boost usa una rejilla horizontal (etiqueta a la
   izquierda, campo a la derecha) que con columnas estrechas corta palabras
   como "TELÉFONO" o "APELLIDOS". Lo forzamos a layout apilado (etiqueta
   arriba, campo debajo), mucho más legible en un formulario tan corto. */
.accesodemo-landing .mform .row {
    display: block;
}

.accesodemo-landing .mform .row > [class*="col-"] {
    max-width: 100%;
    flex: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.accesodemo-landing .mform .form-control {
    border: 1.5px solid var(--accesodemo-borde);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 1em;
    width: 100%;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.accesodemo-landing .mform .form-control:focus {
    border-color: var(--accesodemo-azul);
    box-shadow: 0 0 0 3px var(--accesodemo-azul-claro);
    outline: none;
}

.accesodemo-landing .mform .form-group {
    margin-bottom: 16px;
}

.accesodemo-landing .mform .felement {
    margin-top: 0;
}

.accesodemo-submit-wrap {
    margin-top: 14px;
}

.accesodemo-landing .accesodemo-submit {
    display: block;
    width: 100%;
    background: var(--accesodemo-azul);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 1.02em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease-in-out, transform 0.1s ease-in-out;
}

.accesodemo-landing .accesodemo-submit:hover {
    background: var(--accesodemo-azul-oscuro);
    transform: translateY(-1px);
}

.accesodemo-landing .mform .form-group:last-child {
    text-align: center;
}

@media (max-width: 560px) {
    .accesodemo-landing {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        padding: 32px 22px;
    }
}