/**
 * ==============================================================================
 * ALMACÉN DE IDIOMAS - ESTILOS PERSONALIZADOS PARA TEMA MOOVE 4.5 (REESCRITO)
 * Pegar en: Administración + Apariencia + Temas + Moove + "CSS sin procesar / custom"
 * Reemplaza COMPLETAMENTE la versión anterior. Basado en auditoría con navegación
 * real del sitio (guest, curso Tiles, dashboard, admin, login, móvil).
 *
 * Original: tema Moove 4.5 (c) 2022 Willian Mano - https://conecti.me (GPL v3+)
 * Modificaciones 2026: EVEA - https://evea.com.ar (theming marca Almacén de Idiomas)
 *
 * Arquitectura (de global a particular):
 *   1. Tokens de marca + mapeo de tokens nativos Bootstrap/Moodle (mata el azul)
 *   2. Base y tipografía (Archivo, fondos, enlaces)
 *   3. Header y navegación superior
 *   4. Barra secundaria verde (hover blanco + fondo sutil)
 *   5. Drawers y toggles (botón naranja ÚNICO, sin capa cuadrada)
 *   6. Dropdowns y menús "Más"
 *   7. Botones, timeline, switches, modchooser, formularios
 *   8. Correcciones de residuales (btn-link, alert-info, badges, calendario, editor)
 *   9. Tarjetas de curso
 *  10. Tiles (mosaicos) y colores por mes
 *  11. Componentes custom (adi-btn-live, banners, adolescentes)
 * ==============================================================================
 */

/* ==========================================================================
   1. TOKENS DE MARCA + MAPEO DE TOKENS NATIVOS
   ========================================================================== */
:root {
  /* Paleta Almacén de Idiomas */
  --adi-orange: #FFB145;        /* Naranja principal (botones, acentos) */
  --adi-orange-dark: #E0952C;   /* Naranja hover/active */
  --adi-green-logo: #93B644;    /* Verde exacto del logo (barras) */
  --adi-green-text: #4C6E18;    /* Verde institucional para texto/enlaces (AA ≥ 5:1) */
  --adi-green-hover: #324B0F;   /* Verde profundo para hover de enlaces */
  --adi-lime: #E1EA2E;          /* Lima: EXCLUSIVO badges con texto oscuro */
  --adi-dark: #1E293B;          /* Grafito institucional */
  --adi-text: #0F172A;
  --adi-text-muted: #64748B;
  --adi-bg: #F8FAFC;
  --adi-card: #FFFFFF;
  --adi-border: #E2E8F0;
  --adi-radius: 16px;
  --adi-shadow: 0 4px 14px rgba(30, 41, 59, 0.06);
  --adi-shadow-hover: 0 8px 22px rgba(30, 41, 59, 0.12);

  /* Tokens nativos de Moodle/Boost que todavía traían el azul #0f47ad.
     Con esto, TODO lo que los hereda (focus rings, calendario "hoy",
     badges bg-primary, btn-link, paginación, checkboxes del tema base,
     alertas info, etc.) cae en la paleta institucional automáticamente. */
  --primary: #4C6E18;                    /* antes #0f47ad (azul) */
  --secondary: #64748B;
  --info: #64748B;                       /* antes teal #008196 */
  --warning: #E0952C;
  --success: #4C6E18;
  --bs-primary: #4C6E18;
  --bs-primary-rgb: 76, 110, 24;
  --bs-info-rgb: 100, 116, 139;
  --bs-focus-ring-color: rgba(255, 177, 69, 0.55);
  --bs-link-color: #4C6E18;
  --bs-link-hover-color: #324B0F;
  --bs-link-color-rgb: 76, 110, 24;
}

/* ==========================================================================
   2. BASE Y TIPOGRAFÍA
   ========================================================================== */
body {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--adi-bg) !important;
}

h1, h2, h3, h4, h5, h6, .card-title {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Anillo de foco institucional (elimina el azul #0f47ad de TODOS los botones) */
.btn:focus,
.btn:focus-visible,
.custom-switch .custom-control-input:focus ~ .custom-control-label::before,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 177, 69, 0.45) !important;
  outline: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--adi-green-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(147, 182, 68, 0.25) !important;
}

/* Enlaces de contenido: verde institucional, hover verde profundo.
   Se excluyen .nav-link (menús): tienen su propio fondo/estado y la barra
   verde secundaria necesita letras blancas. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.carousel-control-prev):not(.carousel-control-next) {
  color: var(--adi-green-text) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s ease !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--adi-green-hover) !important;
  text-decoration: underline !important;
}

/* Títulos de contenido en verde institucional
   (excluida la etiqueta de los mosaicos: su h3 va en pastilla de cristal,
   con texto carbón; ver sección 10. .photo-tile-text h3) */
#region-main h1, #region-main h2, #region-main h3:not(.photo-tile-text h3),
#region-main h4,
.admin_category_title, .category_title, .sectionname {
  color: var(--adi-green-text) !important;
  font-weight: 700 !important;
}

/* Categorías de cursos (tarjetas y listados) */
.categoryname, .categoryname a,
.dashboard-card .categoryname, .dashboard-card .categoryname a,
.coursebox .category, .coursebox .category a,
.course-summary-card .categoryname, .course-info-container .category a,
.card-subtitle.text-muted a {
  color: var(--adi-green-text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.categoryname a:hover, .dashboard-card .categoryname a:hover,
.coursebox .category a:hover, .card-subtitle.text-muted a:hover {
  color: var(--adi-green-hover) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   3. HEADER Y NAVEGACIÓN SUPERIOR
   ========================================================================== */
#header, .navbar.fixed-top,
.popover-region-notifications .popover-region-container .popover-region-header-container {
  background-color: #FFFFFF !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.navbar .site-name {
  font-weight: 700 !important;
  color: var(--adi-dark) !important;
}

/* Menú superior (header blanco): texto pizarra, hover y activo en verde institucional */
.primary-navigation .nav-link,
.navbar-nav .nav-link {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  color: #475569 !important;
  transition: color 0.15s ease !important;
}

.primary-navigation .nav-link:hover,
.navbar-nav .nav-link:hover,
.primary-navigation .nav-link:focus,
.navbar-nav .nav-link:focus {
  color: var(--adi-green-text) !important;
}

.primary-navigation .nav-link.active,
.primary-navigation .nav-item.active .nav-link {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  font-weight: 700 !important;
  color: var(--adi-green-text) !important;
}

/* Usermenu y campana: sin focus ring azul residual ni bordes extra */
.usermenu .dropdown-toggle {
  border: none !important;
}

/* ==========================================================================
   4. BARRA SECUNDARIA VERDE + ACENTO NARANJA
   ========================================================================== */
.secondary-navigation,
.secondary-navigation .navigation,
#theme_moove_header {
  background-color: var(--adi-green-logo) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Pestañas: blanco nítido */
.secondary-navigation .nav-link {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

/* Hover/focus: TEXTO BLANCO + fondo apenas más oscuro (sin naranja) */
.secondary-navigation .nav-link:hover,
.secondary-navigation .nav-link:focus {
  background-color: rgba(0, 0, 0, 0.16) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Pestaña activa: fondo oscuro + línea naranja inferior */
.secondary-navigation .nav-link.active,
.secondary-navigation .nav-item.active .nav-link,
.secondary-navigation .nav-link.active:hover {
  background-color: rgba(0, 0, 0, 0.22) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: none !important;
  border-bottom: 3px solid var(--adi-orange) !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   5. DRAWERS Y TOGGLES
   ==========================================================================
   El botón "doble capa" venía de pintar el CONTENEDOR .drawer-toggler
   (cuadrado) además del .btn interior (redondeado). Ahora el contenedor
   queda transparente y TODO el estilo vive en el .btn: un único botón
   naranja redondeado. */
.drawer-toggles .drawer-toggler {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.drawer-toggles .drawer-toggler .btn {
  background-color: var(--adi-orange) !important;
  border: 1px solid var(--adi-orange-dark) !important;
  color: var(--adi-dark) !important;
  border-radius: 0.65rem !important;
  box-shadow: 0 4px 12px rgba(255, 177, 69, 0.35) !important;
  transition: all 0.2s ease-in-out !important;
}

.drawer-toggles .drawer-toggler .btn:hover,
.drawer-toggles .drawer-toggler .btn:focus {
  background-color: var(--adi-orange-dark) !important;
  border-color: var(--adi-orange-dark) !important;
  color: var(--adi-dark) !important;
  box-shadow: 0 4px 14px rgba(224, 149, 44, 0.45) !important;
}

/* Header del drawer (botón cerrar X): sin anillo azul */
.drawerheader .drawertoggle {
  color: var(--adi-dark) !important;
}

/* 27/10: × cerrar de los drawers con aro naranja PERMANENTE (los dos
   cajones, índice y bloques, para que se note que es botón). En hover
   ya lo reforzaba el focus-ring naranja global (0 0 0 3.2px). */
.drawer .drawerheader .drawertoggle {
  border: 1px solid #F8DCAF !important;
  border-radius: 8px !important;
}

/* Índice del curso: un solo fondo redondeado, sin placas encajadas */
.courseindex .courseindex-item,
.courseindex-item {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  margin-bottom: 2px !important;
  transition: background-color 0.15s ease !important;
}

.courseindex .courseindex-link {
  color: var(--adi-dark) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
}

.courseindex .courseindex-item:hover,
.courseindex .courseindex-item:focus-within,
.courseindex .courseindex-link:hover,
.courseindex .courseindex-link:focus {
  background-color: rgba(147, 182, 68, 0.12) !important;
  border-radius: 8px !important;
  color: var(--adi-green-hover) !important;
  outline: none !important;
}

.courseindex .courseindex-item.pageitem,
.courseindex .courseindex-item.pageitem a,
.courseindex .courseindex-item.pageitem .courseindex-link {
  background-color: rgba(147, 182, 68, 0.18) !important;
  border-radius: 8px !important;
  color: var(--adi-green-text) !important;
  font-weight: 700 !important;
}

.courseindex .courseindex-item.pageitem .courseindex-link:hover {
  color: var(--adi-green-hover) !important;
}

.courseindex .courseindex-item.pageitem::before {
  background-color: var(--adi-orange) !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   6. DROPDOWNS Y MENÚS "MÁS" (CERO AZUL)
   ========================================================================== */
.dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid var(--adi-border) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden;
  padding: 0.4rem !important;
}

.dropdown-item {
  color: var(--adi-dark) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.85rem !important;
  transition: all 0.15s ease-in-out !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(147, 182, 68, 0.14) !important;
  color: var(--adi-green-hover) !important;
  outline: none !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--adi-green-logo) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   7. BOTONES Y CONTROLES
   ========================================================================== */
/* Primario: naranja */
.btn-primary {
  background-color: var(--adi-orange) !important;
  border-color: var(--adi-orange) !important;
  color: var(--adi-dark) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease-in-out !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--adi-orange-dark) !important;
  border-color: var(--adi-orange-dark) !important;
  color: var(--adi-dark) !important;
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(255, 177, 69, 0.45) !important;
}

/* btn-link y botones outline-primario: verde institucional (antes azules) */
.btn-link,
.btn-outline-primary {
  color: var(--adi-green-text) !important;
}

.btn-link:hover,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--adi-green-hover) !important;
  text-decoration: underline;
}

.btn-outline-primary {
  border-color: var(--adi-green-text) !important;
}

.btn-outline-primary:hover {
  background-color: rgba(147, 182, 68, 0.12) !important;
}

/* Botón de búsqueda */
.simplesearchform .btn, .adminsearchform .btn {
  background-color: var(--adi-orange) !important;
  border-color: var(--adi-orange) !important;
  color: var(--adi-dark) !important;
}

.simplesearchform .btn:hover, .adminsearchform .btn:hover {
  background-color: var(--adi-orange-dark) !important;
}

/* Switches (Modo de edición, etc.) */
.form-switch .form-check-input:checked,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--adi-orange) !important;
  border-color: var(--adi-orange-dark) !important;
}

.form-check-input:checked {
  background-color: var(--adi-orange) !important;
  border-color: var(--adi-orange-dark) !important;
}

/* Etiqueta del Modo de edición: dark, no azul */
.flex-moodle-editing-switch .form-check-label,
.flex-moodle-editing-switch .custom-control-label {
  color: var(--adi-dark) !important;
}

/* Avatar */
.userpicture {
  border: 2px solid var(--adi-orange) !important;
}

/* Barras de progreso */
.progress-bar {
  background-color: var(--adi-green-logo) !important;
}

/* Timeline (Próximos 7 días / Ordenar) */
.block_timeline .btn-outline-secondary,
.block-timeline .btn-outline-secondary,
.block_timeline .dropdown-toggle,
.block-timeline .dropdown-toggle,
[data-region="day-filter"] button,
[data-region="sort-filter"] button {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.85rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease-in-out !important;
}

.block_timeline .btn-outline-secondary:hover,
.block_timeline .btn-outline-secondary:focus,
.block-timeline .dropdown-toggle:hover,
[data-region="day-filter"] button:hover,
[data-region="sort-filter"] button:hover {
  border-color: var(--adi-orange) !important;
  background-color: #FFFDF9 !important;
  color: var(--adi-dark) !important;
  box-shadow: 0 2px 6px rgba(255, 177, 69, 0.2) !important;
}

/* Botón "+ Añadir una actividad o recurso" */
.section-modchooser-link,
.section-modchooser-link button,
.activity-add-link,
.modchooserbutton,
.course-content .section-modchooser-link .activity-add-link {
  background-color: #FFFFFF !important;
  border: 2px dashed var(--adi-orange) !important;
  color: var(--adi-dark) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 0.65rem 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.section-modchooser-link:hover,
.section-modchooser-link button:hover,
.activity-add-link:hover,
.modchooserbutton:hover,
.course-content .section-modchooser-link .activity-add-link:hover {
  background-color: var(--adi-orange) !important;
  border-color: var(--adi-orange-dark) !important;
  border-style: solid !important;
  color: var(--adi-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 177, 69, 0.35) !important;
}

/* Selector de actividades (modchooser): pestañas */
.modchooser .nav-tabs .nav-link.active {
  color: var(--adi-green-text) !important;
  border-bottom: 3px solid var(--adi-orange) !important;
  font-weight: 700 !important;
}

/* Íconos de edición rápida */
.inplaceeditable .quickeditlink,
.quickeditlink,
.editing_title {
  color: var(--adi-green-text) !important;
}

.inplaceeditable .quickeditlink:hover,
.editing_title:hover {
  color: var(--adi-green-hover) !important;
}

/* ==========================================================================
   8. RESIDUALES: ALERTAS, BADGES, CALENDARIO, TEXTOS DE INFORMACIÓN
   ========================================================================== */
/* alert-info: de celeste a verde suave institucional */
.alert-info {
  background-color: rgba(147, 182, 68, 0.12) !important;
  color: var(--adi-green-hover) !important;
  border-color: rgba(147, 182, 68, 0.25) !important;
  border-radius: 12px !important;
}

/* Iconos y textos "info" (antes teal #008196) */
.text-info, .badge-info, .badge.bg-info {
  color: var(--adi-green-text) !important;
}

.badge-info, .badge.bg-info {
  background-color: rgba(147, 182, 68, 0.18) !important;
}

/* Badges bg-primary (ej. "Categoría 1" en tarjetas) en verde institucional */
.badge-primary, .badge.bg-primary,
.page-item.active .page-link {
  background-color: var(--primary) !important;
}

/* Calendario: NO pintar la celda td.today con fondos ni radios grandes.
   El número del día ya lleva su propio círculo naranja nativo
   (.day-number-circle), que queda #FFB145 con los tokens institucionales.
   Pintar la celda entera de verde + radius 50% generaba un "óvalo" con la
   altura de la fila. La celda queda neutra: */
.calendarmonth .today .calendar-day-today,
.calendarmonth .today,
.calendar .today,
.calendar-day-today {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}

/* Botones de filepicker/subida de archivos en verde (antes azules) */
.fp-btn-add, .fp-iconview .icon, .filepicker .btn.btn-primary {
  color: var(--adi-green-text) !important;
}

.filepicker .btn.btn-primary {
  background-color: var(--adi-green-text) !important;
  border-color: var(--adi-green-text) !important;
  color: #FFFFFF !important;
}

/* Enlaces dentro de alertas (antes azules) */
.alert a,
.alert .alert-link {
  color: var(--adi-green-hover) !important;
  text-decoration: underline;
}

/* ==========================================================================
   9. TARJETAS DE CURSOS
   ========================================================================== */
.block_myoverview .dashboard-card .dashboard-card-img,
#page-site-index .dashboard-card .dashboard-card-img {
  width: 100% !important;
  height: 180px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 16px 16px 0 0 !important;
}

.block_myoverview .dashboard-card,
#page-site-index .dashboard-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--adi-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* La barra de progreso del card de curso (bajo la imagen de portada)
   27/10 rev12: unificado con el criterio de la pastilla de progreso
   del tile: cápsula limpia sin borde y SIN capas cuadradas del
   llenado. Con 8px de alto el radio no se percibía (el navegador lo
   acota a media altura), asique la barrita sube a 16px para que el
   criterio "cápsula verde" se VEA igual en el card que en el tile. */
.block_myoverview .dashboard-card .progress,
#page-site-index .dashboard-card .progress {
  height: 16px !important;
  border-radius: 50px !important;
  border: none !important;
  overflow: hidden;
}
.block_myoverview .dashboard-card .progress .progress-bar,
#page-site-index .dashboard-card .progress .progress-bar {
  background: var(--adi-green-logo) !important;
}

/* --- rev13 (27/10): en el card TAMBIÉN la pastilla con el texto
   adentro, tal cual el tile. La crema el snippet del footer
   (.adi-card-progress); los nativos (barra fina + "N% completado")
   se esconden solo cuando la pastilla existe (.adi-pill-ready),
   así si el JS no corre el card sigue mostrando la barra de siempre. */
.block_myoverview .dashboard-card .adi-pill-ready .progress,
#page-site-index .dashboard-card .adi-pill-ready .progress,
.block_myoverview .dashboard-card .adi-pill-ready > p,
#page-site-index .dashboard-card .adi-pill-ready > p {
  display: none !important;
}

.block_myoverview .dashboard-card-footer .adi-card-progress,
#page-site-index .dashboard-card-footer .adi-card-progress {
  display: inline-block;
  position: relative;
  margin: 0 0 8px 0 !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #2C3E50 !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow:
    0 1px 2px rgba(30, 41, 59, 0.06),
    0 3px 10px rgba(30, 41, 59, 0.08) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  padding: 4px 14px !important;
  letter-spacing: 0.2px !important;
  box-sizing: border-box;
  overflow: hidden !important;
  isolation: isolate !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* fill verde sólido detrás del texto: misma regla del tile
   (re-escrita acá porque el padre es otro) */
.block_myoverview .dashboard-card .adi-card-progress .adi-tile-fill,
#page-site-index .dashboard-card .adi-card-progress .adi-tile-fill {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: -1;
  background: var(--adi-green-logo) !important;
  transition: width 0.35s ease;
}

/* ==========================================================================
   10. TILES (MOSAICOS) Y COLORES POR MES
   ========================================================================== */
/* Subrayado del título de sección/módulo: naranja institucional
   (pisa el azul de --format-tiles-colour del plugin Tiles) */
.format-tiles .sectiontitle::after,
.format-tiles.path-course-view-section .page-header-headings h1::after {
  background-color: var(--adi-orange) !important;
  border-radius: 2px !important;
}

.course-content ul.tiles .tile,
.format-tiles ul.tiles .tile {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.course-content ul.tiles .tile:hover,
.format-tiles ul.tiles .tile:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--adi-shadow-hover) !important;
}

.course-content ul.tiles .tile.current,
.format-tiles ul.tiles .tile.current {
  border: 2px solid var(--adi-orange) !important;
}

/* Imagen del mosaico cubre toda la caja superior */
.format-tiles ul.tiles .tile .tile-bg {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 16px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.format-tiles .tile .tile-text {
  font-weight: 600 !important;
  color: var(--adi-dark) !important;
}

/* Etiqueta "Módulo N" sobre la foto del mosaico: pastilla de cristal.
   Blanco 80% (se adapta al fondo de cada ilustración), texto carbón,
   esquinas totalmente redondas, tamaño discreto, esquina superior izq.
   (pisa el tag verde translúcido nativo del plugin Tiles).
   El color/peso lo gana por la exclusión en la regla de títulos verdes
   (sección 2), no por especificidad: el plugin re-renderiza los mosaicos
   por JS y la cadena hasta #region-main no siempre existe al matchear. */
.format-tiles .course-content ul.tiles .tile.phototile
  .photo-tile-text {
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
}

.format-tiles .course-content ul.tiles .tile.phototile
  .photo-tile-text h3 {
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #2C3E50 !important;
  border-radius: 50px !important;
  border: 1px solid rgba(30, 41, 59, 0.06) !important;
  box-shadow:
    0 1px 2px rgba(30, 41, 59, 0.06),
    0 3px 10px rgba(30, 41, 59, 0.08) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  padding: 3px 15px !important;
  letter-spacing: 0.2px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Indicador de progreso del tile ("Progreso: N%"): misma pastilla de
   cristal del título "Módulo N". El plugin lo pinta como etiqueta verde
   sólida y cuadrada (estilo original). El llenado del curso NO depende de
   este estilo: es texto que el AMD del plugin actualiza en vivo
   (data-numcomplete / data-numoutof), y al completarse cambia el contenedor.
   La variante .tilestyle-2 del plugin lo manda arriba a la derecha: la
   posición flotante solo se fija donde el default es abajo-izquierda. */
/* === Pastilla de progreso (Progreso: N%) de los photo tiles ===
   Misma receta de sombra/radio/vidrio que la pastilla del título,
   con dos diferencias pedidas por el cliente (27/10 rev10):
   - SIN borde: la fina línea clara que la rodeaba no armonizaba
     ("secar la línea blanca").
   - Ver rev9->rev10 más abajo: relleno verde SÓLIDO de nuevo. */
.format-tiles .course-content ul.tiles .tile.phototile
  .progress-indic {
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #2C3E50 !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow:
    0 1px 2px rgba(30, 41, 59, 0.06),
    0 3px 10px rgba(30, 41, 59, 0.08) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  padding: 4px 14px !important;
  letter-spacing: 0.2px !important;
  box-sizing: border-box;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* 27/10 rev9: el texto respira — 14px con line-height 1.5 y más aire
   interno, misma altura visual que la pastilla del título */

/* Las cifras del progreso (0, %, completados) un punto más de peso */
.format-tiles .course-content ul.tiles .tile.phototile
  .progress-indic .percent-complete,
.format-tiles .course-content ul.tiles .tile.phototile
  .progress-indic .num-complete,
.format-tiles .course-content ul.tiles .tile.phototile
  .progress-indic .num-out-of {
  font-weight: 700 !important;
}

/* Posición flotante (gemela de la pastilla del título): abajo-izquierda
   con el mismo margen de 12px. :not(.tilestyle-2) preserva el default
   arriba-derecha que trae el plugin para esa variante. */
.format-tiles .course-content ul.tiles .tile.phototile:not(.tilestyle-2)
  .progress-indic {
  bottom: 12px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
}

/* Indicador radial "Progreso total" (arriba de los mosaicos): el círculo
   SVG del plugin usa grises fijos (#888 / #e6e6e6); se llevan a los tokens
   de marca (verde logo y carbón) para que viva en el mismo lenguaje. Números
   y estados los sigue pintando el plugin. */
.format-tiles .progress-indic svg circle.partial {
  stroke: var(--adi-green-logo) !important;
}
.format-tiles .progress-indic svg circle.whole {
  stroke: rgba(30, 41, 59, 0.15) !important;
}
.format-tiles .progress-indic svg text {
  fill: #2C3E50 !important;
  font-weight: 600 !important;
}
.format-tiles .progress-indic .progress-indic-label {
  color: #2C3E50 !important;
  font-weight: 600 !important;
}

/* Subrayado del título de sección en naranja */
.format-tiles .sectionname,
.format-tiles .section-title,
.format-tiles h3.sectionname,
.format-tiles h4.sectionname,
.format-tiles .course-content .sectionname,
.format-tiles .tiles-sub-section-title {
  color: var(--adi-dark) !important;
  font-weight: 800 !important;
  border-bottom: 4px solid var(--adi-orange) !important;
  padding-bottom: 0.4rem !important;
  display: inline-block !important;
}

/* Banner principal redondeado */
.course-content .summary img,
.course-content .section .content img,
#section-0 img {
  border-radius: 16px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Íconos de actividad: contenedor 52px con glifo 36px (el nativo de Boost es
   30/32px y se percibía chico; 36px sobre la fila de ~72px se ve proporcionado) */
.activityiconcontainer,
.activity-item .activityiconcontainer {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 10px !important;
  padding: 0.45rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.75rem !important;
  flex-shrink: 0 !important;
}

img.activityicon, .activityicon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  /* neutraliza el max-width/max-height del core (.smaller limita a 32px) */
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  object-fit: contain !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Ítems de actividad: espaciado limpio */
.course-content .section li.activity,
.format-tiles .section li.activity,
.course-content .activity-item,
.format-tiles .activity-item {
  padding: 0.65rem 0.6rem !important;
  display: flex !important;
  align-items: center !important;
}

.course-content .activityinstance,
.format-tiles .activityinstance {
  display: flex !important;
  align-items: center !important;
}

.course-content .activityinstance a,
.course-content .activity-item a,
.format-tiles .activityinstance a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--adi-dark) !important;
}

.course-content .activityinstance a:hover,
.course-content .activity-item a:hover,
.format-tiles .activityinstance a:hover {
  color: var(--adi-green-hover) !important;
  /* 2026-10-16: hover moderno — solo cambia el color, sin subrayado */
  text-decoration: none !important;
}

/* Colores por mes (10 módulos) */
.format-tiles .tile[data-section="1"] { background-color: #F7FAF1 !important; border-top: 5px solid #8CB833 !important; }
.format-tiles .tile[data-section="2"] { background-color: #FFFBF5 !important; border-top: 5px solid #F99C1B !important; }
.format-tiles .tile[data-section="3"] { background-color: #FBFCF2 !important; border-top: 5px solid #B5D829 !important; }
.format-tiles .tile[data-section="4"] { background-color: #F4F6F9 !important; border-top: 5px solid #5C718A !important; }
.format-tiles .tile[data-section="5"] { background-color: #FFFDF5 !important; border-top: 5px solid #F8A418 !important; }
.format-tiles .tile[data-section="6"] { background-color: #F1FAF9 !important; border-top: 5px solid #1E9D91 !important; }
.format-tiles .tile[data-section="7"] { background-color: #FAFCF1 !important; border-top: 5px solid #A7C91D !important; }
.format-tiles .tile[data-section="8"] { background-color: #FCF6F4 !important; border-top: 5px solid #C76F53 !important; }
.format-tiles .tile[data-section="9"] { background-color: #F3F5FA !important; border-top: 5px solid #6D82B9 !important; }
.format-tiles .tile[data-section="10"] { background-color: #FCFDF1 !important; border-top: 5px solid #D8EA13 !important; }

/* ==========================================================================
   11. COMPONENTES CUSTOM (CLASE EN VIVO, BANNERS, ADOLESCENTES)
   ========================================================================== */
.adi-btn-live-wrapper {
  margin: 1.25rem 0 1.75rem 0;
}

.adi-btn-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #FFB145 0%, #FFC16E 100%);
  border: 1px solid #F59E0B;
  border-radius: var(--adi-radius);
  padding: 1.15rem 1.5rem;
  color: var(--adi-dark) !important;
  text-decoration: none !important;
  box-shadow: var(--adi-shadow);
  transition: all 0.25s ease-in-out;
}

.adi-btn-live:hover {
  transform: translateY(-2px);
  box-shadow: var(--adi-shadow-hover);
  background: linear-gradient(135deg, #F59E0B 0%, #FFA834 100%);
  color: var(--adi-dark) !important;
}

.adi-btn-live__info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.adi-btn-live__icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--adi-dark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.adi-btn-live__text h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--adi-dark);
}

.adi-btn-live__text p {
  margin: 0.2rem 0 0 0;
  font-size: 0.875rem;
  color: #475569;
}

.adi-btn-live__badge {
  background: var(--adi-dark);
  color: #FFFFFF;
  padding: 0.45rem 1rem;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adi-btn-live__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--adi-lime);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(225, 234, 46, 0.7);
  animation: adiPulse 1.8s infinite;
}

@keyframes adiPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 234, 46, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(225, 234, 46, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 234, 46, 0); }
}

.adi-activity-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--adi-card);
  border: 1px solid var(--adi-border);
  border-left: 5px solid var(--adi-orange);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.9rem;
  text-decoration: none !important;
  color: var(--adi-dark) !important;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.adi-activity-banner:hover {
  border-color: #CBD5E1;
  border-left-color: var(--adi-orange);
  transform: translateX(4px);
  box-shadow: var(--adi-shadow);
  color: var(--adi-dark) !important;
}

.adi-activity-banner__main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.adi-activity-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.adi-banner--live { border-left-color: #FFB145; }
.adi-banner--live .adi-activity-banner__icon { background: #FFF7ED; color: #D97706; }
.adi-banner--video { border-left-color: #3B82F6; }
.adi-banner--video .adi-activity-banner__icon { background: #EFF6FF; color: #2563EB; }
.adi-banner--file { border-left-color: #93B644; }
.adi-banner--file .adi-activity-banner__icon { background: #F4F8EB; color: #65821F; }
.adi-banner--doc { border-left-color: #10B981; }
.adi-banner--doc .adi-activity-banner__icon { background: #ECFDF5; color: #059669; }
.adi-banner--plus { border-left-color: #8B5CF6; background: linear-gradient(90deg, #FAF5FF 0%, #FFFFFF 100%); }
.adi-banner--plus .adi-activity-banner__icon { background: #F3E8FF; color: #7C3AED; }

.adi-activity-banner__title {
  font-weight: 600;
  font-size: 0.98rem;
  margin: 0;
  color: var(--adi-dark);
}

.adi-activity-banner__meta {
  font-size: 0.825rem;
  color: var(--adi-text-muted);
  margin-top: 0.2rem;
}

.adi-activity-banner__action {
  font-size: 0.825rem;
  font-weight: 600;
  color: #1E293B;
  background: #F1F5F9;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  white-space: nowrap;
}

/* Variante adolescentes */
.category-adolescentes .secondary-navigation {
  border-bottom: 2px solid var(--adi-lime) !important;
}

.category-adolescentes .adi-btn-live {
  background: linear-gradient(135deg, #E1EA2E 0%, #FFB145 100%);
  border-color: #D97706;
}

.category-adolescentes .adi-btn-live__badge {
  background: var(--adi-dark);
  color: var(--adi-lime);
}

.category-adolescentes .format-tiles .tile.current {
  border-color: var(--adi-lime) !important;
  box-shadow: 0 0 0 3px rgba(225, 234, 46, 0.3) !important;
}

/* Responsive móvil */
@media (max-width: 768px) {
  .adi-btn-live {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
  .adi-btn-live__badge {
    width: 100%;
    justify-content: center;
  }
  .adi-activity-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .adi-activity-banner__action {
    width: 100%;
    text-align: center;
  }
}
/* ============================================================
   Banner automático por tipo de actividad (CSS sobre el nativo)
   Viste los ítems del curso con el look de .adi-activity-banner y
   la variante equivalente: Archivo --file, URL --video, Página
   --doc, SCORM --plus. Sin pill de descarga: el clic mantiene el
   comportamiento nativo (modal viewer de tiles). La directora crea
   las actividades por la ruta normal de Moodle, sin código.
   2026-10-15 (archivo) / 2026-10-16 (generalizado a 4 tipos)
   ============================================================ */

/* Tarjeta (papel de .adi-activity-banner).
   display block para anular el flex !important del theming base
   (línea ~682): ese flex encogía la grilla interna al contenido y
   hacía saltar el título a dos líneas. Con block, la grilla core
   (.activity-grid, 1fr para el nombre) ocupa todo el ancho. */
.activity.modtype_resource .activity-item,
.activity.modtype_url .activity-item,
.activity.modtype_page .activity-item,
.activity.modtype_scorm .activity-item {
  display: block !important;
  background: var(--adi-card);
  border: 1px solid var(--adi-border);
  border-left: 5px solid #93B644;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease-in-out;
  padding: 1rem 1.25rem;
  margin-bottom: 0.9rem;
}

.activity.modtype_url .activity-item { border-left-color: #3B82F6; }
.activity.modtype_page .activity-item { border-left-color: #10B981; }
.activity.modtype_scorm .activity-item { border-left-color: #8B5CF6; }

/* 2026-10-16: el hover ya NO corre la fila hacia la derecha
   (translateX); se refuerza con fondo gris suave + sombra profunda
   (2026-10-16 v2 del hover: versión más visible a pedido del usuario).
   El chip pálido del ícono se conserva (no tapa el color de marca). */
.activity.modtype_resource:hover > .activity-item,
.activity.modtype_url:hover > .activity-item,
.activity.modtype_page:hover > .activity-item,
.activity.modtype_scorm:hover > .activity-item {
  border-color: #94A3B8;
  background: #F1F5F9;
  box-shadow: var(--adi-shadow-hover);
}

/* El hover no cambia el color izquierdo (cada tipo conserva el suyo) */
.activity.modtype_resource:hover > .activity-item { border-left-color: #93B644; }
.activity.modtype_url:hover > .activity-item { border-left-color: #3B82F6; }
.activity.modtype_page:hover > .activity-item { border-left-color: #10B981; }
.activity.modtype_scorm:hover > .activity-item { border-left-color: #8B5CF6; }

/* Ícono: papel de .adi-activity-banner__icon.
   align-self center: la grilla core le da todas las filas de la tarjeta
   pero Bootstrap lo pega arriba (align-self-start !important) */
.activity.modtype_resource .activityiconcontainer,
.activity.modtype_url .activityiconcontainer,
.activity.modtype_page .activityiconcontainer,
.activity.modtype_scorm .activityiconcontainer {
  align-self: center !important;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #F4F8EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity.modtype_url .activityiconcontainer { background: #EFF6FF; }
.activity.modtype_page .activityiconcontainer { background: #ECFDF5; }
.activity.modtype_scorm .activityiconcontainer { background: #F3E8FF; }

/* Fila del nombre: flex para que el chip del tipo quede AL COSTADO
   del título (el display:block del .instancename lo empujaba abajo) */
.activity.modtype_resource .activityname,
.activity.modtype_url .activityname,
.activity.modtype_page .activityname,
.activity.modtype_scorm .activityname {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

/* Título: papel de .adi-activity-banner__title.
   En una sola línea: si el nombre es muy largo, se trunca con
   elipsis (sin saltos de línea dentro de la tarjeta) */
.activity.modtype_resource .instancename,
.activity.modtype_url .instancename,
.activity.modtype_page .instancename,
.activity.modtype_scorm .instancename {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--adi-dark);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.activity.modtype_resource .activity-name-area,
.activity.modtype_url .activity-name-area,
.activity.modtype_page .activity-name-area,
.activity.modtype_scorm .activity-name-area { min-width: 0; }

/* Meta: papel de .adi-activity-banner__meta (tamaño y fecha del
   archivo los provee el módulo vía .resourcelinkdetails) */
.activity.modtype_resource .activity-afterlink,
.activity.modtype_url .activity-afterlink,
.activity.modtype_page .activity-afterlink,
.activity.modtype_scorm .activity-afterlink {
  border-top: 0 !important;
  margin-top: 0.15rem;
}

.activity.modtype_resource .resourcelinkdetails,
.activity.modtype_url .resourcelinkdetails,
.activity.modtype_page .resourcelinkdetails,
.activity.modtype_scorm .resourcelinkdetails {
  font-size: 0.825rem;
  color: var(--adi-text-muted);
}

/* Chip de tipo:
   - Archivo: badge core (badge-none => "PDF", "DOC", …) estilado gris
   - URL/Página/SCORM: chip propio por ::after (core no da badge) */
.activity.modtype_resource .activitybadge.badge-none {
  background: #F1F5F9;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
}

.activity.modtype_url .activityname::after,
.activity.modtype_page .activityname::after,
.activity.modtype_scorm .activityname::after {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.activity.modtype_url .activityname::after { content: "ENLACE"; background: #EFF6FF; color: #2563EB; }
.activity.modtype_page .activityname::after { content: "PÁGINA"; background: #ECFDF5; color: #059669; }
.activity.modtype_scorm .activityname::after { content: "SCORM"; background: #F3E8FF; color: #7C3AED; }

/* Pill vacío del badge (altura ~6px sin contenido): no verla */
.activity.modtype_resource .activitybadge:not([class*="badge-"]),
.activity.modtype_url .activitybadge:not([class*="badge-"]),
.activity.modtype_page .activitybadge:not([class*="badge-"]),
.activity.modtype_scorm .activitybadge:not([class*="badge-"]) { padding: 0; }

/* Responsive (mismo breakpoint que el resto del theming) */
@media (max-width: 768px) {
  .activity.modtype_resource .activity-item,
  .activity.modtype_url .activity-item,
  .activity.modtype_page .activity-item,
  .activity.modtype_scorm .activity-item {
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
  }
}

/* ============================================================
   Banner automático: EXTENSIÓN AL RESTO DE LOS MÓDULOS
   ------------------------------------------------------------
   2026-10-26. La tarjeta de 2026-10-15 quedó acotada a
   resource/url/page/scorm; foro de avisos, foro de dudas,
   asistencia y otros módulos se veían sin estilo. Cobertura
   genérica: todo li.activity con modtype_* que NO sea label ni
   los 4 tipos ya estilados (para no pisarles sus colores por
   orden de cascada). Foro y Asistencia: tarjeta + lomo slate
   neutro #64748B con píldoras propias (FORO / ASISTENCIA);
   cualquier módulo futuro hereda la card neutral con su chip
   de ícono sin colores propios.
   ============================================================ */
.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activity-item {
  display: block !important;
  background: var(--adi-card);
  border: 1px solid var(--adi-border);
  border-left: 5px solid #94A3B8;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease-in-out;
  padding: 1rem 1.25rem;
  margin-bottom: 0.9rem;
}

.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm):hover > .activity-item {
  border-color: #94A3B8;
  background: #F1F5F9;
  box-shadow: var(--adi-shadow-hover);
  border-left-color: #94A3B8;
}

/* Ícono: contenedor con chip neutro, mismo tamaño que los 4 tipos */
.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activityiconcontainer {
  align-self: center !important;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}

/* Ícono centrado también en estos tipos (el margin genérico lo desplaza) */
.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activityiconcontainer .activityicon {
  margin: 0 !important;
}

/* Fila del nombre: flex, chip al costado del título (igual que los 4) */
.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activityname {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .instancename {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--adi-dark);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activity-name-area { min-width: 0; }

.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activity-afterlink {
  border-top: 0 !important;
  margin-top: 0.15rem;
}

/* Badge core (si lo hubiere, style gris; forums con novedades
   traen badge-primary que se conserva del core) */
.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activitybadge.badge-none {
  background: #F1F5F9;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
}

/* Píldoras propias por tipo */
.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activityname::after {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.activity.modtype_forum .activityname::after { content: "FORO"; background: #F1F5F9; color: #334155; }
.activity.modtype_attendance .activityname::after { content: "ASISTENCIA"; background: #F1F5F9; color: #334155; }

/* Pill vacío del badge: no verla */
.activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activitybadge:not([class*="badge-"]) { padding: 0; }

/* Responsive */
@media (max-width: 768px) {
  .activity[class*="modtype_"]:not(.modtype_label):not(.modtype_resource):not(.modtype_url):not(.modtype_page):not(.modtype_scorm) .activity-item {
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
  }
}

/* ============================================================
   CLASE GRABADA — player embebido en modal (format_tiles)
   2026-10-16
   ------------------------------------------------------------
   El JS del modal (course_mod_modal.js) crea el iframe del URL
   con height = alto de ventana - 60 ("make as high as poss").
   Con el header del modal y los paddings, el borde inferior del
   iframe (donde Drive dibuja los controles) queda fuera del
   viewport. Se fija la altura del iframe para que quepa entero
   en pantalla (player contenido, controles siempre visibles).
   Selector: el modal de URL usa iframe id="embedded-url-<cmid>".
   ============================================================ */
.modal iframe[id^="embedded-url-"] {
  width: 100% !important;
  height: min(calc(100vh - 200px), 860px) !important;
  min-height: 300px;
  display: block;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

@media (max-width: 768px) {
  .modal iframe[id^="embedded-url-"] {
    height: min(calc(100vh - 170px), 560px) !important;
    border-radius: 8px;
  }
}

/* ============================================================
   14. ESTADO POST-CLICK DE ACTIVIDADES, ESTILO MODERNO
   ------------------------------------------------------------
   2026-10-16
   Tras hacer click el core deja colgando un "subrayado grueso":
   es el estilo de foco de Moodle para .activityinstance > a
   (box-shadow 0 -0.2rem #d2e8fb, 0 0.2rem #343a40, fondo azul).
   Patrones modernos: click con mouse no deja rastro persistente;
   el indicador queda réservado a teclado (:focus-visible) y el
   estado visitado se marca con un color apenas apagado ("leído"),
   sin subrayado en ningún estado.
   ============================================================ */

/* Click con mouse: sin barra gruesa ni fondo azul */
.course-content .activityinstance a:focus,
.course-content .activity-item a:focus,
.format-tiles .activityinstance a:focus,
.format-tiles .activity-item a:focus {
  text-decoration: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}

/* Navegación por teclado: anillo fino (solo con focus-visible) */
.course-content .activityinstance a:focus-visible,
.course-content .activity-item a:focus-visible,
.format-tiles .activityinstance a:focus-visible,
.format-tiles .activity-item a:focus-visible {
  outline: 2px solid rgba(147, 182, 68, 0.9) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Hover: verde institucional sin subrayado (gana aunque la fila
   también esté visitada) */
.course-content .activityinstance a:visited:hover,
.course-content .activity-item a:visited:hover,
.format-tiles .activityinstance a:visited:hover {
  color: var(--adi-green-hover) !important;
  text-decoration: none !important;
}

/* La regla general "enlaces de contenido" no mete subrayado acá
   (el hover del nombre de actividad ya cambia el color solo) */
.course-content .activityinstance a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
.course-content .activity-item a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
.format-tiles .activityinstance a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  text-decoration: none !important;
}

/* Ya abierta ("leído"): mismo tinta, apenas apagada, sin subrayado */
.course-content .activityinstance a:visited,
.course-content .activity-item a:visited,
.format-tiles .activityinstance a:visited {
  color: rgba(30, 41, 59, 0.72) !important;
}

/* ============================================================
   15. SISTEMA DE ÍCONOS POR TIPO DE LINK (Material Symbols)
   ------------------------------------------------------------
   2026-10-16. Cada tipo de link (Meet, YouTube, Zoom, Google
   Workspace, Spotify) lleva su color de marca UNIFICADO en el
   ícono, el lomo de la fila, la píldora del nombre y el fondo
   del contenedor del ícono. Clases urltype-<tipo> que agrega el
   formato tiles al li de la actividad.
   (2026-10-26) La clase GRABADA (archivo de Drive, urltype-
   gdrivefile) se separa de la clase EN VIVO (meet.google.com,
   urltype-meet): antes ambas eran 'meet' y se veían idénticas.
   ============================================================ */

/* Lomo de la fila, color de marca por tipo
   (2026-10-26) 'meet' = clase EN VIVO (meet.google.com, amarillo de la
   marca Meet); 'gdrivefile' = clase GRABADA (archivo de Drive, verde
   actual). Antes ambos caian en 'meet' y se veian identicos. */
.activity.urltype-meet > .activity-item { border-left-color: #F29900; }
.activity.urltype-gdrivefile > .activity-item { border-left-color: #0F9D58; }
.activity.urltype-youtube > .activity-item { border-left-color: #FF0000; }
.activity.urltype-zoom > .activity-item { border-left-color: #2D8CFF; }
.activity.urltype-gdocs > .activity-item { border-left-color: #1967D2; }
.activity.urltype-gsheets > .activity-item { border-left-color: #188038; }
.activity.urltype-gslides > .activity-item { border-left-color: #F4B400; }
.activity.urltype-gforms > .activity-item { border-left-color: #7248B9; }
.activity.urltype-gdrive > .activity-item { border-left-color: #00AC47; }
.activity.urltype-spotify > .activity-item { border-left-color: #1DB954; }

/* Hover: conserva el color del tipo (no vuelve al azul de URL) */
.activity.urltype-meet:hover > .activity-item { border-left-color: #F29900; }
.activity.urltype-gdrivefile:hover > .activity-item { border-left-color: #0F9D58; }
.activity.urltype-youtube:hover > .activity-item { border-left-color: #FF0000; }
.activity.urltype-zoom:hover > .activity-item { border-left-color: #2D8CFF; }
.activity.urltype-gdocs:hover > .activity-item { border-left-color: #1967D2; }
.activity.urltype-gsheets:hover > .activity-item { border-left-color: #188038; }
.activity.urltype-gslides:hover > .activity-item { border-left-color: #F4B400; }
.activity.urltype-gforms:hover > .activity-item { border-left-color: #7248B9; }
.activity.urltype-gdrive:hover > .activity-item { border-left-color: #00AC47; }
.activity.urltype-spotify:hover > .activity-item { border-left-color: #1DB954; }

/* Píldora del nombre, misma tinta de marca */
.activity.urltype-meet .activityname::after { content: "CLASE EN VIVO"; background: #FEF7E0; color: #B06000; }
.activity.urltype-gdrivefile .activityname::after { content: "CLASE GRABADA"; background: #E6F4EA; color: #0B8043; }
.activity.urltype-youtube .activityname::after { content: "YOUTUBE"; background: #FCE8E6; color: #C5221F; }
.activity.urltype-zoom .activityname::after { content: "ZOOM"; background: #E5F2FF; color: #0B5CFF; }
.activity.urltype-gdocs .activityname::after { content: "DOC"; background: #E8F0FE; color: #1967D2; }
.activity.urltype-gsheets .activityname::after { content: "SHEET"; background: #E6F4EA; color: #188038; }
.activity.urltype-gslides .activityname::after { content: "SLIDES"; background: #FEF7E0; color: #B06000; }
.activity.urltype-gforms .activityname::after { content: "FORM"; background: #EFEBF9; color: #7248B9; }
.activity.urltype-gdrive .activityname::after { content: "DRIVE"; background: #E6F4EA; color: #0B8043; }
.activity.urltype-spotify .activityname::after { content: "AUDIO"; background: #E6F4EA; color: #0E7C34; }

/* Contenedor del ícono, tono pálido de la misma marca */
.activity.urltype-meet .activityiconcontainer { background: #FEF7E0; }
.activity.urltype-gdrivefile .activityiconcontainer { background: #E6F4EA; }
.activity.urltype-youtube .activityiconcontainer { background: #FCE8E6; }
.activity.urltype-zoom .activityiconcontainer { background: #E5F2FF; }
.activity.urltype-gdocs .activityiconcontainer { background: #E8F0FE; }
.activity.urltype-gsheets .activityiconcontainer { background: #E6F4EA; }
.activity.urltype-gslides .activityiconcontainer { background: #FEF7E0; }
.activity.urltype-gforms .activityiconcontainer { background: #EFEBF9; }
.activity.urltype-gdrive .activityiconcontainer { background: #E6F4EA; }
.activity.urltype-spotify .activityiconcontainer { background: #E6F4EA; }

/* Blindaje anti-monocromo: los íconos de marca son multicolor;
   en cualquier contexto de Moodle no deben pasar por el filtro. */
img.activityicon[src*="/icon-meet"], img.icon[src*="/icon-meet"],
img.activityicon[src*="/icon-gdrivefile"], img.icon[src*="/icon-gdrivefile"],
img.activityicon[src*="/icon-youtube"], img.icon[src*="/icon-youtube"],
img.activityicon[src*="/icon-zoom"], img.icon[src*="/icon-zoom"],
img.activityicon[src*="/icon-gdocs"], img.icon[src*="/icon-gdocs"],
img.activityicon[src*="/icon-gsheets"], img.icon[src*="/icon-gsheets"],
img.activityicon[src*="/icon-gslides"], img.icon[src*="/icon-gslides"],
img.activityicon[src*="/icon-gforms"], img.icon[src*="/icon-gforms"],
img.activityicon[src*="/icon-gdrive"], img.icon[src*="/icon-gdrive"],
img.activityicon[src*="/icon-spotify"], img.icon[src*="/icon-spotify"] {
  filter: none !important;
}

/* Ícono centrado en su contenedor (el margin-right genérico lo desplaza) */
.activity.modtype_resource .activityiconcontainer .activityicon,
.activity.modtype_url .activityiconcontainer .activityicon,
.activity.modtype_page .activityiconcontainer .activityicon,
.activity.modtype_scorm .activityiconcontainer .activityicon {
  margin: 0 !important;
}
.activity.modtype_resource .activityiconcontainer,
.activity.modtype_url .activityiconcontainer,
.activity.modtype_page .activityiconcontainer,
.activity.modtype_scorm .activityiconcontainer {
  padding: 0;
  justify-content: center !important;
  align-items: center !important;
}

/* ==========================================================================
   16. VENTANA DE MÓDULOS EN MODAL (format_tiles) — PDF/URL/clases
   2026-10-20
   ------------------------------------------------------------
   Problema (captura 20/10): el header del modal nativo de tiles toma
   var(--format-tiles-colour) = el color base del curso (#7A9A01,
   amarillo-verde de mosaicos) con título casi negro encima, y el foco
   del diálogo compila un anillo naranja sólido de 3.2px alrededor de
   toda la ventana (core.scss $input-btn-focus-box-shadow → brandcolor
   del tema). El resultado se ve fuera del lenguaje del theming.

   Solución (todo CSS estático, sin tocar el SCSS del tema):
   - Header = la misma barra verde del sitio: verde logo + título
     blanco + línea naranja de 3px inferior (el mismo dispositivo del
     header de navegación, sección 3). Verde institucional homogéneo;
     NO se toca el color base del curso (afecta a los mosaicos).
   - Anillo de foco: indicador sobrio en dos capas —halo naranja
     translúcido (relevante para teclado, a11y) + sombra de caída
     grafito— aplicado a TODOS los modales del sitio (homogéneo:
     el anillo naranja macizo del compilado es global, no solo tiles).
   - Ventana: blanca, radio 14px, sin borde crudo, overflow oculto.
   ============================================================ */

/* Header: barra verde institucional de la plataforma */
.format-tiles .embed_cm_modal .modal-header {
  background-color: var(--adi-green-logo) !important;
  border-bottom: 3px solid var(--adi-orange) !important;
  border-radius: 14px 14px 0 0;
  padding: 0.8rem 1.15rem !important;
  align-items: center;
  gap: 0.75rem;
}

/* Título de la ventana: blanco, Archivo, tamaño de lectura */
.format-tiles .embed_cm_modal .modal-header .modal-title {
  color: #FFFFFF !important;
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Botones de la barra (ventana aparte, descarga, cerrar): blancos,
   con pastilla de cristal al hover — mismo lenguaje que los tiles */
.format-tiles .embed_cm_modal .embed_file_button {
  color: #FFFFFF !important;
  width: 32px;
  height: 32px;
  line-height: 30px;
  border-radius: 8px;
  text-align: center;
  transition: background-color 0.15s ease-in-out;
}
.format-tiles .embed_cm_modal .embed_file_button:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}
.format-tiles .embed_cm_modal .modal-header .btn-close {
  color: #FFFFFF !important;
  opacity: 1;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  line-height: 30px;
}
.format-tiles .embed_cm_modal .modal-header .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

/* Ventana: blanca, radio 14, sin borde; el cuerpo ya viene con
   padding 0 para el iframe (sección 13 y styles.css de tiles) */
.format-tiles .embed_cm_modal .modal-content {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
}

/* Anillo de foco del diálogo: para TODOS los modales del sitio.
   Reemplaza el anillo macizo rgba(255,177,69,0.75) del compilado
   (foco obligatorio del diálogo al abrir, por a11y no se elimina):
   halo naranja translúcido + sombra de caída grafito, radio unificado */
.modal-dialog[tabindex="0"]:focus .modal-content,
.modal-dialog[tabindex="0"].focus .modal-content,
.modal-dialog:focus .modal-content,
.modal-dialog.focus .modal-content {
  box-shadow: 0 0 0 2px rgba(255, 177, 69, 0.25), 0 18px 44px rgba(15, 23, 42, 0.32) !important;
  border-radius: 14px !important;
}

/* Responsive (mismo breakpoint del resto del theming) */
@media (max-width: 768px) {
  .format-tiles .embed_cm_modal .modal-header {
    padding: 0.6rem 0.85rem;
  }
  .format-tiles .embed_cm_modal .modal-header .modal-title {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   17. VENTANA DE VIDEO FLOTANTE (modal de URL de tiles)
   2026-10-20 (rev d: tamaño nativo homogéneo con PDF, sin tope propio)
   ------------------------------------------------------------
   El JS nativo de tiles (course_mod_modal.js) fija el min-height del
   body a win.height()+20 y su max-width al ancho del iframe: el visor
   de video (clase grabada de Drive, YouTube, Meet) queda ~fullscreen
   con el video arriba y área vacía abajo.

   Fix: el ANCHO lo deja el JS nativo (misma ventana generosa que el
   PDF, que es la referencia del cliente); se corrige solo:
   - Centrado en ambos ejes (flex + safe center + margin:auto y
     width:100% en el dialog — sin width explícito el margin:auto
     contrae la ventana al contenido: regresión vista 20/10 rev c).
   - iframe del video a 16:9 con height:auto (gana al height= del
     atributo), para que la ventana sea exactamente la del video.
   - min-height del body a 0 SOLO para ventanas de URL (el modal de
     PDF/HTML conserva su min-height del JS).
   - El :has() es el único modo de apuntar desde el root (los modales
     de URL no reciben clase distinta); sin :has() queda nativo.
   ============================================================ */

/* Ventana de video: ancho alineado al del PDF (1168px, inline nativo
   del JS para archivos) con seguridad de viewport para pantallas
   bajas; centrada en ambos ejes SIN recortar arriba.
   OJO: el ROOT del modal ES el propio .modal — no hay ningún .modal
   descendiente (rev c falló por poner un .modal de más); y el dialog
   requiere width:100% porque el margin:auto en flex contrae la
   ventana al contenido (regresión rev c al quitarlo) */
.format-tiles .embed_cm_modal:has(iframe[id^="embedded-url-"]) .modal-dialog {
  max-width: min(1168px, 94vw, calc((100vh - 120px) * 1.6)) !important;
}
.format-tiles .modal.embed_cm_modal.show {
  display: flex !important;
  align-items: safe center;
}
.format-tiles .modal.embed_cm_modal.show > .modal-dialog {
  margin: auto !important;
  width: 100% !important;
}

/* Video a 16:9 dentro de la ventana; la ventana le da el cromo */
.format-tiles .embed_cm_modal:has(iframe[id^="embedded-url-"]) iframe[id^="embedded-url-"] {
  aspect-ratio: 16 / 9;
  height: auto !important;
  width: 100% !important;
  border-radius: 0;
  box-shadow: none;
  background-color: #101518; /* letterbox grafito mientras carga */
}

/* El min-height del body del JS (win.height()+20) solo lo necesitan
   PDF y HTML; en URL rompe la ventana (video arriba, vacío abajo).
   Layout en COLUMNA (como el flujo de bloque nativo del plugin, que
   pone la nota SIEMPRE debajo del reproductor, nunca al lado):
   reproductor a todo el ancho (16:9) y la nota abajo, en franja
   grafito del mismo letterbox */
.format-tiles .embed_cm_modal:has(iframe[id^="embedded-url-"]) .modal-body {
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  background-color: #101518;
}

/* El enlace alternativo (si el embed falla) en franja grafito inferior */
.format-tiles .embed_cm_modal:has(iframe[id^="embedded-url-"]) .embed-url-alt-link {
  color: rgba(248, 250, 252, 0.8);
  text-align: center;
  font-size: 0.92rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.format-tiles .embed_cm_modal:has(iframe[id^="embedded-url-"]) .embed-url-alt-link a {
  color: var(--adi-orange);
}

/* ==========================================================================
   18. TÍTULOS Y CHIPS DE ACTIVIDAD EN MOBILE — truncar con MÁSCARA
   2026-10-20
   ------------------------------------------------------------
   Cadena core: .activity-name-area.activity-instance (flex columna)
   > .activitytitle.media con align-self:center toma el MIN-CONTENT
   del texto nowrap y desborda la tarjeta ANTES de que el ellipsis de
   .instancename pueda truncar. En 360px (cap. 6) el título y el chip
   de marca ("CLASE GRABADA", "PDF") quedaban por fuera del borde.

   Solución aplicada (la "máscara" propuesta por el cliente = el
   patrón estándar de fade-out truncation):
   1) Constraint de la cadena core para que el truncate pueda actuar:
      .activitytitle min-width:0 + max-width:100% (el ancho lo fija
      la tarjeta; el contenido se recorta ADENTRO del borde).
   2) En mobile, el título recorta con fade (mask-image) hacia el
      borde derecho; el chip queda dentro de la tarjeta. El ellipsis
      queda como fallback para navegadores sin mask (donde hay mask,
      el "…" queda bajo el fundido, invisible: mismo resultado limpio).
   Alternativas evaluadas: colapsar a 2 líneas (line-clamp — la que
   el pidió NO usar: "que se colapse hacia abajo" no), desplazamiento
   horizontal o tap-para-ver-más (fricción y estado oculto), marquee
   (movimiento perpetuo, molesto). La máscara es la vía estándar
   (tabs de Google, carruseles) y la elegida por el cliente.
   ============================================================ */

/* 1) Constraint de la cadena (desktop y mobile: no cambia el asunto
   a menos que el contenido exceda, y ahí también corrige) */
.format-tiles .course-content .activity .activitytitle {
  min-width: 0;
  max-width: 100%;
}
.format-tiles .course-content .activity .activitytitle > .media-body {
  min-width: 0; /* flex item de .media (activitytitle): sin esto crece al min-content del título */
}
/* En el listado cm-list el título es a.aalink > span.instancename:
   el A es el flex item de .activityname y sin constraint tampoco
   contrae (el span queda igual a la línea completa, fuera del borde) */
.format-tiles .course-content .activity .activityname .aalink {
  min-width: 0;
  max-width: 100%;
}

/* 2) Mobile: fundido al borde derecho + chip más discreto dentro */
@media (max-width: 768px) {
  .format-tiles .course-content .activity.modtype_resource .instancename,
  .format-tiles .course-content .activity.modtype_url .instancename,
  .format-tiles .course-content .activity.modtype_page .instancename,
  .format-tiles .course-content .activity.modtype_scorm .instancename {
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  }

  .activity.modtype_url .activityname::after,
  .activity.modtype_page .activityname::after,
  .activity.modtype_scorm .activityname::after,
  .activity.modtype_resource .activitybadge.badge-none {
    font-size: 0.62rem;
    padding: 0.08rem 0.4rem;
  }

  /* El chip de marca larga ("CLASE GRABADA") no se lleva casi todo el
     ancho de la fila: techo + elipsis propio dentro de la pastilla */
  .activity.modtype_url .activityname::after,
  .activity.modtype_page .activityname::after,
  .activity.modtype_scorm .activityname::after {
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   19. UN SOLO LIENZO (2026-10-26, rev. 3 2026-10-27)
   ==========================================================================
   La .card base del tema moove lleva sombra difusa de 35px
   (0 0 35px rgba(154,161,171,.15)): los bloques del drawer flotaban
   como "cuadros" con glow propio, y al scrollear el drawer la card
   escondía el contenido del bloque detrás del header. 1a rev los
   dejaba como cards suaves, pero seguían desparejos con el card de
   contenido. Decisión del cliente (27/10): TODO BLANCO PLANO.
   - Bloques en drawers: sin card, sin borde, sin sombra, fondo
     transparente; los separa un divisor sutil (se pierde el "cuadro",
     queda un listado).
   - Drawer + página (body): fondo #FFFFFF vía --adi-bg → el card de
     contenido y el drawer comparten el mismo lienzo blanco.
   ============================================================ */
.drawer .block.card,
.drawer .block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Divisor sutil entre bloques (no hay más "cards"). Nota: no usar
   `.block + .block` — Boost intercala nodos sr-only (skip links) entre
   las secciones, así que :first-of-type es el que matchea bien. */
.drawer .block:not(:first-of-type) {
  border-top: 1px solid #EDF2F7 !important;
  margin-top: 1.25rem !important;
  padding-top: 1.25rem !important;
}

.drawer {
  background: #FFFFFF !important;
}

/* Línea que dibujaba el gris de página alrededor del card de contenido */
body {
  background-color: #FFFFFF !important;
}

/* Header del drawer (franja del botón ×): moove le mete una sombra
   (0 8px 11px -7px rgba(0,0,0,.25)) apenas el drawer tiene clase
   .scrolled — al scrollear el cajón se dibuja un rectángulo con
   sombra que "esconde" el bloque de abajo. En lienzo blanco plano
   queda invisible: sin sombra, sin línea. */
.drawer .drawerheader {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* ==========================================================================
   20. CERO AZUL EN LOS BLOQUES DE PLUGINS (2026-10-27)
   ==========================================================================
   Los plugins propios que quedaban con azul/cian de la paleta por
   defecto:
   - block_xp: el aro del avatar del usuario ACTUAL usa el sky-400 de
     Tailwind del plugin (clase xp-border-sky-400); el resto de
     avatares usa xp-border-gray-200 y no se toca. → verde logo.
   - block_attendance: las filas de "todas las sesiones" del bloque
     llevan la clase legada .highlight, que pinta el cian #008196 del
     CSS compilado de Boost (mismo destino que --info, ya tokenizado
     en :root). → verde texto institucional (#4C6E18), como "Mi
     Asistencia". El .highlight del editor de texto y del banco de
     preguntas solo cambia texto; su borde/uso queda igual.
   ============================================================ */
.block_xp [class*="xp-border-sky"] {
  border-color: var(--adi-green-logo) !important;
}

.highlight {
  color: var(--adi-green-text) !important;
}

/* ==========================================================================
   21. COMBO DE COMPLETADO CENTRADO (2026-10-27)
   ==========================================================================
   El dropdown "Hecho / Pendiente de hacer" (.activity-completion) le
   llega de Boost con la clase align-self-start: dentro del grid de la
   fila (mismo alto que el ícono, 52px) queda pegado arriba mientras
   el título se centra. → centrado vertical para que quede al ras del
   resto de la fila.
   ============================================================ */
.course-content .activity-completion,
.format-tiles .activity-completion {
  align-self: center !important;
}

/* ==========================================================================
   22. PROGRESO EN LOS TILES: LA PASTILLA ES LA BARRA (2026-10-27, rev.2)
   ==========================================================================
   - El plugin esconde la pastilla al 100 y deja solo el ✔ verde
     (styles.css 1329): el cliente pide que el chip "Progreso: 100%"
     siga viéndose.
   - 1a rev puso la barra de progreso DEBAJO de la pastilla (receta del
     card de "Mis cursos"); quedó desprolija con la pastilla del título,
     así que el llenado ahora va DENTRO de la pastilla: un fill verde
     que crece detrás del texto (.adi-tile-fill, creado por el snippet
     de footer.mustache — CSS puro no puede calcular el % de
     data-numcomplete). Pastilla = track de cristal, llenado verde
     logo. El ✔ de la esquina se conserva.
   ============================================================ */
/* La pastilla vuelve a verse al 100 (el AMD del plugin le sigue
   actualizando la cifra; data-numcomplete = data-numoutof → 100) */
.format-tiles .course-content ul.tiles .tile.is-complete
  .progress-indic.percent {
  display: inline-block !important;
}

/* El fill llenado crece detrás del texto: pastilla recorta en sus
   bordes redondeados y el texto queda sobre el relleno. isolation
   crea stacking context propio para que el z-index:-1 del fill
   quede abajo sin escapar del pill (el "Progreso: " es un texto
   pelado, sin elemento que lo cubra). */
.format-tiles .course-content ul.tiles .tile.phototile
  .progress-indic {
  overflow: hidden !important;
  isolation: isolate !important;
}

.format-tiles .course-content ul.tiles .tile.phototile
  .progress-indic .adi-tile-fill {
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: -1;
  /* 27/10 rev10: el cliente prefirió el verde SÓLIDO (el tinte al 55%
   de rev9 se "perdía" contra el vidrio) — vuelve el verde logo pleno;
   la unión tinte/vidrio la arregla el hecho de no llevar borde. */
  background: var(--adi-green-logo) !important;
  transition: width 0.35s ease;
}