/* ============================================
   AULAR Page-Specific Styles — Modern Gamer
   ============================================ */

/* ----- Landing Page ----- */
.landing-hero {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-bg) 50%);
    position: relative;
}

.landing-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600), var(--color-primary-400));
}

[data-theme="dark"] .landing-hero {
    background: linear-gradient(135deg, rgba(11, 123, 161, 0.08) 0%, var(--color-bg) 50%);
}

.stats-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-10) 0;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary-600);
    line-height: 1;
    letter-spacing: 1px;
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.categories-bar {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--space-6) 0;
}

.category-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.category-pill:hover {
    border-color: var(--color-primary-400);
    color: var(--color-primary-600);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-primary-200);
    text-decoration: none;
}

.category-pill svg {
    width: 18px;
    height: 18px;
}

/* ----- Materia Detail Page ----- */
.materia-header {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
    transition: all var(--transition-base);
}

.materia-header:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-md);
}

.materia-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.materia-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
}

.materia-icon svg {
    width: 32px;
    height: 32px;
}

.materia-stats {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.materia-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.materia-stat svg {
    width: 16px;
    height: 16px;
}

/* ----- Resource Detail Page ----- */
.resource-detail {
    max-width: 900px;
    margin: 0 auto;
}

.resource-back {
    margin-top: var(--space-4);
    align-self: flex-start;
    color: var(--color-text-secondary);
}

.resource-back:hover {
    color: var(--color-primary-600);
}

.resource-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-md);
}

.resource-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.resource-embed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-surface);
}

/* Las imagenes no van en un recuadro 16/9 negro como los embeds: siguen su
   proporcion natural y se limitan al alto de la pantalla. object-fit evita
   deformarlas cuando max-height recorta una imagen alta. */
.resource-embed-image {
    aspect-ratio: auto;
    background: var(--color-surface);
    line-height: 0;
}

.resource-embed-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

/* Sitios web externos: la miniatura llena la caja 16/9 y se recorta por
   arriba (que es lo representativo de la pagina). Al hacer clic se abre el
   sitio. Si la miniatura no carga se oculta y se muestra el respaldo. */
.resource-embed-website {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.resource-embed-website .website-preview {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.resource-embed-website img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.website-preview-open {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
}

.resource-embed-website .website-preview-fallback {
    display: none;
}

.resource-embed-website.is-error .website-preview {
    display: none;
}

.resource-embed-website.is-error .website-preview-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
}

.resource-meta-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.resource-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* Botón de icono con etiqueta visible (corazón "Me sirve", "Reportar"). El
   icon-only sigue cuadrado; este alinea icono y texto en una sola línea. */
.btn-icon-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: auto;
    white-space: nowrap;
}

.btn-icon-label .btn-icon-text {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
}

/* Navegación entre recursos hermanos de una misma búsqueda */
.resource-siblings {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    margin: var(--space-8) 0 var(--space-4);
}

.resource-sibling {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.resource-sibling:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    text-decoration: none;
}

.resource-sibling svg {
    flex-shrink: 0;
    opacity: .6;
}

.resource-sibling:hover svg {
    opacity: 1;
    color: var(--color-primary);
}

.resource-sibling-next {
    justify-content: flex-end;
    text-align: right;
}

.resource-sibling-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.resource-sibling-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
}

/* El título se recorta con ellipsis en vez de desbordar: los nombres de
   recurso son largos y romperían la fila de dos columnas. */
.resource-sibling-title {
    font-size: var(--text-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cuando falta un vecino (primer o último resultado) se conserva la columna
   vacía para que el contador quede al centro en lugar de corrida a un lado. */
.resource-sibling-empty {
    flex: 1 1 0;
    min-width: 0;
}

.resource-siblings-position {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.resource-url-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    word-break: break-all;
}

.resource-url {
    flex: 1;
    font-size: var(--text-sm);
    font-family: var(--font-mono, monospace);
    color: var(--color-primary-600);
    text-decoration: none;
    min-width: 0;
}

.resource-url:hover {
    text-decoration: underline;
}

.copy-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .resource-url-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .copy-btn {
        align-self: flex-end;
    }
}

/* ----- Search Page ----- */
.search-page-header {
    text-align: center;
    padding: var(--space-8) 0;
}

.search-page-header h1 {
    margin-bottom: var(--space-2);
    letter-spacing: 1px;
}

.search-page-header .search-bar {
    margin: var(--space-6) auto 0;
}

.search-filters {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-4) 0;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.search-filters .form-select {
    max-width: 200px;
    font-size: var(--text-sm);
}

.search-results-info {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* ----- Student Profile ----- */
.estudiante-header {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
}

.estudiante-info h1 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
    letter-spacing: 1px;
}

.estudiante-stats {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);
}

/* ----- Forms (Create/Edit Pages) ----- */
.form-page {
    max-width: 720px;
    margin: 0 auto;
}

.form-page h1 {
    margin-bottom: var(--space-8);
    letter-spacing: 1px;
}

.form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.form-section h2 {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    letter-spacing: 0.5px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-6);
}

/* ----- Login/Register ----- */
.auth-separator {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
}

.auth-separator::before,
.auth-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* ----- Stats Page ----- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.stats-chart {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all var(--transition-base);
}

.stats-chart:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-sm);
}

.stats-chart h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
    letter-spacing: 0.5px;
}

/* Simple bar chart */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 200px;
    padding-top: var(--space-4);
}

.bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.bar-fill {
    width: 100%;
    max-width: 40px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height var(--transition-slow);
    min-height: 4px;
    background: linear-gradient(180deg, var(--color-primary-400), var(--color-primary-600));
}

.bar-label {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ----- Mobile adjustments ----- */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    /* En móvil el contador baja a su propia línea: con dos botones de texto
       largo al lado no cabe y los títulos se cortan a nada. */
    .resource-siblings {
        flex-wrap: wrap;
    }

    .resource-siblings-position {
        order: -1;
        width: 100%;
        justify-content: center;
        padding-bottom: var(--space-1);
    }

    .resource-sibling-empty {
        display: none;
    }

    .resource-sibling {
        flex-basis: 100%;
    }

    .materia-header-top {
        flex-direction: column;
    }

    .estudiante-header {
        flex-direction: column;
        text-align: center;
    }

    .estudiante-stats {
        justify-content: center;
    }

    .resource-meta-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .resource-actions {
        margin-left: 0;
    }
}

/* ----- Materia Search Component ----- */
.materia-search-container {
    position: relative;
}

.materia-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    margin-top: 2px;
}

.materia-search-item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
}

.materia-search-item:hover,
.materia-search-item:focus {
    background: var(--color-primary-50);
    outline: none;
}

[data-theme="dark"] .materia-search-item:hover,
[data-theme="dark"] .materia-search-item:focus {
    background: var(--color-primary-900);
}

.materia-search-empty {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
}

.materia-selected {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary-700);
}

[data-theme="dark"] .materia-selected {
    background: var(--color-primary-900);
    border-color: var(--color-primary-700);
    color: var(--color-primary-300);
}

.materia-selected .btn-icon {
    margin-left: auto;
    flex-shrink: 0;
}

/* ----- Report Modal ----- */
/* Reportes (admin): la causa se recorta a dos lineas en la tabla y se lee
   completa en el modal de detalle. */
.reporte-causa-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.reporte-causa-detalle {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-height: 40vh;
  overflow-y: auto;
}

/* Datos del reporte y del reportante, en pares etiqueta/valor */
.reporte-datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.reporte-datos dt {
  color: var(--color-text-tertiary);
}
.reporte-datos dd {
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}

@media (max-width: 480px) {
  .reporte-datos {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }
  .reporte-datos dd {
    margin-bottom: var(--space-2);
  }
}

.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    vertical-align: middle;
    cursor: pointer;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    inset: 0;
    background: var(--color-border-strong, var(--color-text-tertiary));
    border-radius: 999px;
    transition: background var(--transition-base);
}
.switch .slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--transition-base);
}
.switch input:checked + .slider {
    background: var(--color-primary);
}
.switch input:checked + .slider::before {
    transform: translateX(20px);
}
/* ----- Tarjeta de recurso con enlace y acciones directas ----- */

/* La lista de recursos se muestra de a uno por fila, en una sola columna.
   Antes era una grilla de 2-3 cards por fila que recortaba los títulos
   (line-clamp) y obligaba a leer en diagonal; en una sola columna cada título
   se lee entero y sin apuro. Las celdas del grid se estiran a la altura de la
   fila, así que los botones de favorito / reportar / ver / copiar quedan
   alineados al fondo.
   minmax(0, 1fr) en vez de 1fr porque el contenido impone un ancho mínimo: sin
   el 0 el grid desborda en vez de recortar. */
.resource-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.resource-card {
    display: flex;
    flex-direction: column;
    /* Estira la tarjeta a toda la altura de la fila del grid. */
    height: 100%;
    min-width: 0;
}

/* ----- Aparición de resultados de búsqueda -----
   La grilla se reemplaza entera por innerHTML al llegar la respuesta, así que
   sin esto los cards aparecen de golpe: primero la lista vieja desaparece y
   un instante después la nueva ya está completa. Ese salto es el "choque
   visual" que se nota al teclear.

   El desvanecido va sobre el contenedor, no sobre cada card. Las cards
   individuales no fadean: se vio que el efecto escalonado por índice distraía
   más de lo que ayudaba, porque el ojo iba card por card en vez de leer la
   grilla entera. Animar 20 a 500 elementos por separado además obliga al
   navegador a recalcular estilo y layout por cada uno.

   opacity y no transform, porque con transform el navegador tiene que promover
   el contenedor a capa compuesta, y eso duplica la memoria de una grilla que
   puede tener cientos de cards. */
.search-results {
    transition: opacity 180ms ease-out;
}

/* Mientras se espera la respuesta la lista no se oculta (display:none la
   colapsaba y el salto de altura era la mayor parte del choque), solo se
   atenúa: la altura se mantiene y el usuario ve que algo está pasando. */
.search-results.is-pending {
    opacity: .25;
}

.search-results.is-visible {
    opacity: 1;
}

/* Quien pidió menos movimiento en el sistema no lo recibe: sin transición. La
   búsqueda sigue funcionando igual, la lista aparece de golpe. */
@media (prefers-reduced-motion: reduce) {
    .search-results {
        transition: none;
    }
}

.resource-card .card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.resource-card-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 600;
    line-height: 1.3;
}

.resource-card-title a {
    color: inherit;
    text-decoration: none;
    /* Sin negrita: el h4 hereda font-weight:600 del h1-h6 global de
       design-system, y el título no tiene por qué ir resaltado en la lista.
       Se baja a peso normal (400). */
    font-weight: 400;
    /* Tamaño fijo de 12pt para el título en la lista de recursos. */
    font-size: 12pt;
    /* El título no se transforma: el h4 hereda text-transform: uppercase del
       h1-h6 global de design-system, y el título lo escribe un usuario (el
       administrador) con su propio formato, que es el que tiene que verse. */
    text-transform: none;
    /* La lista es de una columna (un recurso por fila), así que el título no
       se recorta: se muestra completo, en las líneas que hagan falta. El
       line-clamp de 2 líneas era del grid de 2-3 columnas, donde un título
       largo desbalanceaba las tarjetas de la misma fila. */
    display: block;
    overflow-wrap: anywhere;
}

.resource-card-title a:hover {
    color: var(--color-primary);
}

.resource-card-subtitle {
    display: block;
    /* tertiary daba 2.5:1 en claro y 2.3:1 en oscuro (falla AA) y a 11px no
       reachaba la exención de texto grande. secondary da 4.8:1 / 5.8:1. */
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-secondary);
    /* 1 línea fija, con puntos suspensivos si no entra. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La fila con la URL cruda del documento se eliminó de la tarjeta: el título
   lleva a la ficha y el botón de copiar conserva el enlace. Se borran también
   las reglas .resource-card-link / -text / -url que solo la sostenían. */

.resource-card-footer {
    display: flex;
    align-items: center;
    /* Empuja la fila de acciones al fondo de la tarjeta, así queda al mismo
       alto en las dos columnas aunque una tenga el título a 2 líneas y la
       otra a 1. */
    margin-top: auto;
    padding-top: var(--space-2);
}

/* Tres zonas: favorito+reportar a la izquierda, "Ver" al centro, copiar a la derecha. */
.resource-card-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    /* Los 4 botones comparten siempre la misma caja: 18px del icono + 2*space-2. */
    min-height: 34px;
    flex-wrap: nowrap;
}

.resource-card-actions-start {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-start;
    min-width: 0;
}

.resource-card-actions-center {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.resource-card-actions-center .btn {
    white-space: nowrap;
}

.resource-card-actions-end {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
}

.resource-card-actions .btn-icon[data-favorito][data-favorito="true"] svg {
    color: #EF4444;
    fill: currentColor;
}

/* Con las etiquetas visibles, las tres zonas ya no caben en 1fr/auto/1fr en
   pantallas angostas (el bloque "Me sirve"+"Reportar" desbordaría hacia el
   "Ver"). Columnas de ancho natural y etiquetas más chicas. */
@media (max-width: 600px) {
    .resource-card-actions {
        grid-template-columns: auto auto auto;
        justify-content: space-between;
    }
    .btn-icon-label {
        padding: var(--space-1);
        gap: 2px;
    }
    .btn-icon-label .btn-icon-text {
        font-size: var(--text-xs);
        letter-spacing: 0;
    }
}

/* En pantallas muy angostas las palabras no entran: quedan solo los iconos con
   su tooltip. */
@media (max-width: 380px) {
    .btn-icon-label .btn-icon-text {
        display: none;
    }
}

/* ----- Detalle de recurso -----
   La descripción es texto libre: puede traer palabras larguísimas sin espacios
   (URLs, códigos) que se salen del contenedor. "anywhere" parte la palabra en
   cualquier punto, a diferencia de break-word que sólo parte si no hay otra
   oportunidad. */
.resource-detail .breadcrumbs-item.current,
.resource-title,
.resource-text-content,
.resource-detail .resource-url {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.resource-detail .breadcrumbs-item.current {
    min-width: 0;
}

.resource-text-content {
    padding: var(--space-4);
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.7;
    white-space: pre-wrap;
    max-width: 100%;
    overflow-x: auto;
}

/* ==========================================================================
   Valoración por estrellas
   ========================================================================== */

/* Ficha del recurso: cinco estrellas + promedio.
   El widget se dibuja siempre (aunque no haya votos) para que se lea la
   escala; sin sesión pierde el puntero y las estrellas quedan grises. */
.rating-widget {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1px;
    background: none;
    border: none;
    color: var(--color-border);
    line-height: 0;
    cursor: pointer;
    transition: color var(--transition-fast, 150ms) ease, transform var(--transition-fast, 150ms) ease;
}

/* is-on lo pinta el servidor (PHP) y el JS al previsualizar o guardar. */
.rating-star.is-on {
    color: var(--color-warning);
}

.rating-editable .rating-star:hover,
.rating-editable .rating-star.is-on {
    transform: scale(1.1);
}

/* Los botones deshabilitados no deben agarrar el cursor de mano: son la
   versión de lectura para el visitante sin sesión. */
.rating-readonly .rating-star {
    cursor: default;
    transform: none;
}

.rating-info {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.rating-average {
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Promedio en las grillas: estrella + número + entre paréntesis las personas. */
.stars-summary {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.stars-summary-icon {
    color: var(--color-warning);
    flex-shrink: 0;
}

.stars-summary-value {
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   Comentarios de la ficha de recurso
   ==========================================================================

   La sección vive en pages/recurso.php. El form para comentar solo se pinta
   en sesión; sin sesión la conversación se lee pero no se participa.
   -------------------------------------------------------------------------- */
.resource-comments {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.resource-comments-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.resource-comments-header h2 {
    font-size: var(--text-xl);
    margin: 0;
}

.resource-comments-count {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* Formulario de comentario propio */
.comment-form {
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.comment-count {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* Lista de comentarios */
.comment-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.comment-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-author {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
}

.comment-author-name {
    font-weight: 600;
    color: var(--color-text-strong);
}

.comment-author-time {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.comment-text {
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--text-sm);
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.comment-concuerdo.is-active {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    border-color: var(--color-primary-300);
}

/* Cuenta de "Coincido" en lectura (visitante sin sesión o comentario propio) */
.comment-concuerdo-static {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* Aviso sobre el form: ya comentaste o el recurso llegó al límite */
.comment-note {
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.comment-own {
    border-color: var(--color-primary-300);
    background: var(--color-primary-50, var(--color-surface));
}

[data-theme="dark"] .comment-own {
    background: var(--color-surface);
    border-color: var(--color-primary-600);
}

/* Título del recurso en los forms de crear/editar: un input de una sola línea
   hace scrollear en horizontal un título de hasta 400 caracteres. El textarea
   de ancho completo y 4 filas deja ver y revisar el texto entero. Anula el
   min-height:100px de .form-textarea, que quedaba desmedido para un título. */
.titulo-recurso-input {
    min-height: 0;
}