/* Libercap - Aula Virtual: la administracion de Moodle con la piel del aula.
   Solo cambia la presentacion: ningun ajuste, formulario ni enlace se toca. */

body.pagelayout-admin {
    background: #F4F6F8;
    color: #111A2B;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------ barra superior de Moodle. */
body.pagelayout-admin nav.navbar {
    background: rgba(244, 246, 248, .9) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(17, 26, 43, .06);
    box-shadow: none !important;
    padding: 10px 20px;
}
body.pagelayout-admin nav.navbar .navbar-brand,
body.pagelayout-admin nav.navbar .nav-link,
body.pagelayout-admin nav.navbar a {
    color: #5A6472;
    font-weight: 500;
}
body.pagelayout-admin nav.navbar .navbar-brand {
    color: #111A2B;
    font-weight: 600;
    letter-spacing: -.03em;
}
body.pagelayout-admin nav.navbar a:hover { color: #111A2B; }

/* ------------------------------------------------------- caja del contenido. */
body.pagelayout-admin .main_content_container {
    background: #fff;
    border: 1px solid #E7EBF0;
    border-radius: 26px !important;
    box-shadow: 0 10px 30px rgba(17, 26, 43, .04);
    padding: 8px 10px 26px;
    margin-bottom: 48px;
}

/* ------------------------------------------------- cabecera con el titulo. */
body.pagelayout-admin nav.breadcrumb_widgets {
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #EDEFF3;
    padding: 26px 26px 20px !important;
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
body.pagelayout-admin nav.breadcrumb_widgets h2.title {
    float: none !important;
    margin: 0;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.05;
    color: #111A2B;
}
body.pagelayout-admin nav.breadcrumb_widgets .breadcrumb,
body.pagelayout-admin nav.breadcrumb_widgets ol,
body.pagelayout-admin nav.breadcrumb_widgets ul {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    color: #8A94A3;
}
body.pagelayout-admin nav.breadcrumb_widgets a { color: #5A6472; font-weight: 500; }
body.pagelayout-admin nav.breadcrumb_widgets a:hover { color: #E97C25; }

/* ------------------------------------------------------------- pestanas. */
body.pagelayout-admin .secondary-navigation {
    background: transparent;
    padding: 0 26px;
}
body.pagelayout-admin .secondary-navigation .nav-tabs {
    border: 0;
    border-bottom: 1px solid #EDEFF3;
    gap: 0;
}
body.pagelayout-admin .secondary-navigation .nav-tabs .nav-link {
    border: 0 !important;
    background: transparent !important;
    color: #5A6472;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.015em;
    padding: 13px 2px;
    margin-right: 26px;
    border-radius: 0;
}
body.pagelayout-admin .secondary-navigation .nav-tabs .nav-link:hover { color: #111A2B; }
body.pagelayout-admin .secondary-navigation .nav-tabs .nav-link.active {
    color: #111A2B;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #E97C25;
}

/* --------------------------------------------- titulos y listas de ajustes. */
body.pagelayout-admin h3,
body.pagelayout-admin .settingsblock > h3,
body.pagelayout-admin #region-main h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #111A2B;
}
body.pagelayout-admin .adminsettingsflags,
body.pagelayout-admin .form-description,
body.pagelayout-admin .form-defaultinfo,
body.pagelayout-admin .text-muted,
body.pagelayout-admin .dimmed_text {
    color: #8A94A3 !important;
    font-size: 12.5px;
    line-height: 1.55;
}
body.pagelayout-admin a { color: #1F5FA6; }
body.pagelayout-admin a:hover { color: #123E6E; }

/* Los bloques de ajustes quedan como filas separadas por una linea fina. */
body.pagelayout-admin .form-item {
    border-top: 1px solid #F0F2F5;
    padding: 18px 0;
    margin: 0;
}
body.pagelayout-admin .form-item:first-of-type { border-top: 0; }
body.pagelayout-admin .form-label label,
body.pagelayout-admin .form-item .form-label {
    font-weight: 500;
    letter-spacing: -.015em;
    color: #111A2B;
}

/* --------------------------------------------------------- campos y botones. */
body.pagelayout-admin input[type="text"],
body.pagelayout-admin input[type="search"],
body.pagelayout-admin input[type="url"],
body.pagelayout-admin input[type="email"],
body.pagelayout-admin input[type="number"],
body.pagelayout-admin input[type="password"],
body.pagelayout-admin select,
body.pagelayout-admin textarea,
body.pagelayout-admin .form-control,
body.pagelayout-admin .custom-select {
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    padding: 9px 13px;
    font-size: 14px;
    color: #111A2B;
    background-color: #fff;
    box-shadow: none;
}
body.pagelayout-admin input:focus,
body.pagelayout-admin select:focus,
body.pagelayout-admin textarea:focus,
body.pagelayout-admin .form-control:focus {
    border-color: #1F5FA6;
    box-shadow: 0 0 0 3px rgba(31, 95, 166, .12);
    outline: 0;
}
body.pagelayout-admin .btn {
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    padding: 10px 22px;
    box-shadow: none;
}
body.pagelayout-admin .btn-primary {
    background: #1F5FA6;
    border-color: #1F5FA6;
    color: #fff;
}
body.pagelayout-admin .btn-primary:hover {
    background: #123E6E;
    border-color: #123E6E;
}
body.pagelayout-admin .btn-secondary,
body.pagelayout-admin .btn-outline-secondary {
    background: #fff;
    border: 1px solid #DDE3EA;
    color: #5A6472;
}
body.pagelayout-admin .btn-secondary:hover,
body.pagelayout-admin .btn-outline-secondary:hover {
    border-color: #C9D2DC;
    color: #111A2B;
    background: #fff;
}
body.pagelayout-admin .btn-danger { background: #C0392B; border-color: #C0392B; }

/* -------------------------------------------------------------- tablas. */
body.pagelayout-admin table.generaltable,
body.pagelayout-admin table.admintable,
body.pagelayout-admin .table {
    --bs-table-bg-type: transparent;
    border-collapse: separate;
    border-spacing: 0;
}
body.pagelayout-admin table th {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8A94A3;
    border-top: 0;
    border-bottom: 1px solid #EDEFF3;
    padding: 12px 14px;
    background: transparent;
}
body.pagelayout-admin table td {
    font-size: 14px;
    border-top: 0;
    border-bottom: 1px solid #F3F5F8;
    padding: 13px 14px;
    box-shadow: none !important;
}

/* --------------------------------------------------------------- avisos. */
body.pagelayout-admin .alert {
    border: 0;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.6;
    padding: 15px 18px;
}
body.pagelayout-admin .alert-info { background: #F1F5FA; color: #2E4A66; }
body.pagelayout-admin .alert-success { background: #F3F6E9; color: #3F4D0B; }
body.pagelayout-admin .alert-warning { background: #FDF4EC; color: #8A5A12; }
body.pagelayout-admin .alert-danger { background: #FDF2EF; color: #8E2B20; }

/* --------------------------------------------------------------- tarjetas. */
body.pagelayout-admin .card {
    border: 1px solid #E9ECF1;
    border-radius: 18px;
    box-shadow: none;
}
body.pagelayout-admin .card-body { padding: 18px 20px; }

@media (max-width: 720px) {
    body.pagelayout-admin .main_content_container { border-radius: 18px !important; padding: 4px 4px 18px;
        margin-bottom: 32px; }
    body.pagelayout-admin nav.breadcrumb_widgets { padding: 20px 18px 16px !important; }
    body.pagelayout-admin .secondary-navigation { padding: 0 18px; }
}

/* Los nombres de seccion (IA, Competencias) son rotulos, no titulares. */
body.pagelayout-admin .main_content_container h4 {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.5;
}
body.pagelayout-admin .main_content_container h4 a {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: #8A94A3;
}
body.pagelayout-admin .main_content_container h4 a:hover { color: #111A2B; }

/* La marca de la barra: el logo Libercap y el rotulo del aula. */
body.pagelayout-admin nav.navbar .navbar-brand {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7A8290;
}
body.pagelayout-admin nav.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0;
    line-height: 1;
}
body.pagelayout-admin nav.navbar .navbar-brand::before {
    content: '';
    flex: none;
    width: 132px;
    height: 30px;
    background-image: url('logo.png');
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}
body.pagelayout-admin nav.navbar .navbar-brand::after {
    content: 'Aula virtual';
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #7A8290;
    line-height: 1;
    padding: 6px 0 6px 14px;
    margin-left: 14px;
    border-left: 1px solid #D8DEE6;
    white-space: nowrap;
}
body.pagelayout-admin nav.navbar .navbar-brand:hover { color: #111A2B; }

/* Los enlaces del centro y los controles de la derecha, mas livianos. */
body.pagelayout-admin nav.navbar .navbar-nav .nav-link,
body.pagelayout-admin nav.navbar .primary-navigation a { font-size: 13.5px; letter-spacing: -.015em; }
body.pagelayout-admin nav.navbar .btn,
body.pagelayout-admin nav.navbar .nav-link.icon-no-margin { padding: 8px 12px; }

/* Buscador: el campo y el boton como una sola pieza. */
body.pagelayout-admin .input-group > .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
body.pagelayout-admin .input-group > .btn {
    border-radius: 0 12px 12px 0;
    padding: 9px 18px;
}

/* ------------------------------- controles de la derecha de la barra. */
/* Los circulos grises se van: quedan botones livianos que solo se pintan al pasar. */
body.pagelayout-admin nav.navbar .popover-region.popover-region-notifications,
body.pagelayout-admin nav.navbar a.popover-region-toggle,
body.pagelayout-admin nav.navbar a.nice-settings {
    background: transparent !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background .18s ease;
}
body.pagelayout-admin nav.navbar .popover-region.popover-region-notifications:hover,
body.pagelayout-admin nav.navbar a.popover-region-toggle:hover,
body.pagelayout-admin nav.navbar a.nice-settings:hover {
    background: #EEF1F5 !important;
}
body.pagelayout-admin nav.navbar a.nice-settings .icon,
body.pagelayout-admin nav.navbar .popover-region .icon {
    color: #5A6472;
    font-size: 15px;
    margin: 0;
}

/* El boton interior ocupa el cuadro entero, sin desbordarlo. */
body.pagelayout-admin nav.navbar .popover-region { position: relative; overflow: visible; }
body.pagelayout-admin nav.navbar .popover-region .popover-region-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El aviso de pendientes: pildora pequena arriba a la derecha, sin tapar el icono. */
body.pagelayout-admin nav.navbar .count-container {
    position: absolute;
    top: -3px !important;
    right: -7px !important;
    left: auto !important;
    bottom: auto !important;
    background: #C0392B;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 12px;
    border: 2px solid #F4F6F8;
}

/* Las iniciales de la cuenta. */
body.pagelayout-admin nav.navbar .userinitials {
    background: #EEF1F5 !important;
    border: 1px solid #E1E6EC;
    color: #5A6472 !important;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    width: 34px !important;
    height: 34px !important;
}
body.pagelayout-admin nav.navbar .usermenu .icon { color: #8A94A3; }

/* El interruptor de edicion, en los verdes del aula. */
body.pagelayout-admin nav.navbar .editmode-switch-form label {
    font-size: 13px;
    font-weight: 500;
    color: #5A6472;
    letter-spacing: -.015em;
}
body.pagelayout-admin nav.navbar .form-check-input {
    border: 1px solid #D8DEE6;
    box-shadow: none;
}
body.pagelayout-admin nav.navbar .form-check-input:checked {
    background-color: #647C14;
    border-color: #647C14;
}
body.pagelayout-admin nav.navbar .form-check-input:focus {
    border-color: #647C14;
    box-shadow: 0 0 0 3px rgba(100, 124, 20, .16);
}


/* ------------------------------ lc-movil-marca: la marca en pantalla angosta.
   En el telefono no cabe el rotulo junto al logo, asi que solo queda el logo. */
@media (max-width: 700px) {
    body.pagelayout-admin nav.navbar { padding: 10px 14px; }
    body.pagelayout-admin nav.navbar .navbar-brand { max-width: none; overflow: visible; min-width: 0; }
    body.pagelayout-admin nav.navbar .navbar-brand::before { width: 116px; height: 26px; }
    body.pagelayout-admin nav.navbar .navbar-brand::after { display: none !important; }
}

/* ------------------------------------- lc-movil-aire: respiro en el telefono.
   Esta hoja solo se carga en administracion, asi que pintar html es seguro:
   evita la franja blanca que asomaba al costado. */
html { background: #F4F6F8; }

@media (max-width: 700px) {
    html, body.pagelayout-admin { overflow-x: hidden; }
    body.pagelayout-admin #page,
    body.pagelayout-admin #page-wrapper { background: transparent; }
    body.pagelayout-admin .main_content_container {
        margin: 0 16px 40px;
        padding: 6px 6px 22px;
        border-radius: 22px !important;
    }
    body.pagelayout-admin nav.breadcrumb_widgets { padding: 22px 18px 16px !important; }
    body.pagelayout-admin .secondary-navigation { padding: 0 18px; }
    body.pagelayout-admin #region-main,
    body.pagelayout-admin [role='main'] { padding-left: 18px; padding-right: 18px; }
}

/* --------------------------------- lc-movil-cajon: que nada se salga de cuadro.
   El desenfoque de la barra convierte el cajon de navegacion (que va dentro
   de ella) en un elemento desplazable: por eso asomaba una franja blanca a la
   izquierda y la pantalla se corria de lado. En el telefono se quita el
   desenfoque y el cajon cerrado se manda del todo fuera. */
@media (max-width: 700px) {
    body.pagelayout-admin nav.navbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #F4F6F8 !important;
    }
    body.pagelayout-admin .nice-navbar-drawer:not(.show):not(.showing):not(.collapsing) {
        transform: translateX(calc(-100% - 28px)) !important;
    }
}