/* ==========================================================================
   Forprocer LMS — Gestor SCORM (lista + detalle)
   Estilos para scorm-lista.js y scorm-detalle.js.
   Usa los design tokens de variables.css y las clases base existentes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecera y acciones
   -------------------------------------------------------------------------- */
.scorm-acciones {
    display: flex;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Botón outline (variante usada en el gestor; complementa los .btn base)
   -------------------------------------------------------------------------- */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary-100, rgba(52, 144, 132, 0.1));
    color: var(--color-primary-dark, var(--color-primary));
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */
.scorm-filtros {
    display: grid;
    grid-template-columns: 1fr 220px 220px;
    gap: var(--space-3, 12px);
    align-items: center;
    margin-bottom: var(--space-6, 24px);
}

.scorm-filtros__buscar {
    position: relative;
    display: flex;
    align-items: center;
}

.scorm-filtros__icono {
    position: absolute;
    left: var(--space-3, 12px);
    display: inline-flex;
    color: var(--color-gray-400, #9ca3af);
    pointer-events: none;
}

.scorm-filtros__buscar .input-field {
    padding-left: calc(var(--space-3, 12px) + 24px);
    width: 100%;
}

/* --------------------------------------------------------------------------
   Rejilla de tarjetas
   -------------------------------------------------------------------------- */
.scorm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4, 16px);
}

.scorm-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-5, 20px);
    text-decoration: none;
    color: inherit;
    min-height: 180px;
}

.scorm-card:hover {
    text-decoration: none;
}

/* Skeleton de tarjeta mientras carga */
.scorm-card.skeleton {
    min-height: 180px;
    border-radius: var(--glass-radius, 16px);
}

.scorm-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}

.scorm-card__nombre {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    line-height: var(--leading-tight, 1.25);
    /* Limitar a 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scorm-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.scorm-card__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-error, #dc2626);
    background: var(--color-error-light, #fef2f2);
    border: 1px solid var(--color-error-border, #fecaca);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    line-height: var(--leading-normal, 1.5);
    overflow: hidden;
}

.scorm-card__error svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.scorm-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-600, #4b5563);
    margin-top: auto;
}

.scorm-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

.scorm-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-gray-500, #6b7280);
}

.scorm-card__footer-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scorm-card__eliminar {
    flex-shrink: 0;
    color: var(--color-error, #dc2626);
}

.scorm-card__eliminar:hover {
    background: var(--color-error-light, #fef2f2);
}

/* --------------------------------------------------------------------------
   Detalle del paquete
   -------------------------------------------------------------------------- */
.scorm-detalle__cabecera {
    margin-bottom: var(--space-5, 20px);
}

.scorm-detalle__titulo {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.scorm-detalle__titulo h1 {
    margin: 0;
    font-size: var(--text-2xl, 1.5rem);
}

.scorm-detalle__meta {
    margin: var(--space-2, 8px) 0 0;
    color: var(--color-gray-500, #6b7280);
    font-size: var(--text-sm, 0.875rem);
}

.scorm-detalle__error {
    margin-top: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.scorm-detalle__vacio,
.scorm-detalle__ayuda,
.scorm-detalle__cargando {
    color: var(--color-gray-500, #6b7280);
    font-size: var(--text-sm, 0.875rem);
    margin: 0 0 var(--space-4, 16px);
}

.scorm-seccion__titulo {
    margin: 0 0 var(--space-4, 16px);
    font-size: var(--text-lg, 1.125rem);
}

/* Separación entre tarjetas del detalle */
.scorm-detalle__cabecera + .glass-card,
#scorm-detalle-contenido > .glass-card + .glass-card {
    margin-top: var(--space-5, 20px);
}

/* --------------------------------------------------------------------------
   Tabla de SCOs (con scroll horizontal en móvil)
   -------------------------------------------------------------------------- */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scorm-scos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
}

.scorm-scos-table th,
.scorm-scos-table td {
    padding: var(--space-3, 12px);
    text-align: left;
    border-bottom: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    vertical-align: middle;
}

.scorm-scos-table th {
    font-weight: var(--font-semibold, 600);
    color: var(--color-gray-600, #4b5563);
    white-space: nowrap;
}

.scorm-scos-table__num {
    color: var(--color-primary, #349084);
    font-weight: var(--font-semibold, 600);
    width: 48px;
}

.scorm-scos-table__launch {
    font-family: var(--font-family-mono, monospace);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-gray-500, #6b7280);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sección "Volcar a curso": tabs de modos y formularios
   -------------------------------------------------------------------------- */
.scorm-modos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-4, 16px);
}

.scorm-modo-form:empty {
    display: none;
}

.scorm-form-panel {
    background: var(--color-primary-50, rgba(52, 144, 132, 0.05));
    border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-4, 16px);
}

.scorm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
}

.scorm-form-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.scorm-form-subtitulo {
    margin: var(--space-4, 16px) 0 var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
}

/* Checklist de SCOs */
.scorm-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    margin-bottom: var(--space-3, 12px);
    max-height: 240px;
    overflow-y: auto;
}

.scorm-checklist__item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-size: var(--text-sm, 0.875rem);
}

.scorm-checklist__item:hover {
    background: var(--color-primary-50, rgba(52, 144, 132, 0.05));
}

.scorm-checklist__item input {
    accent-color: var(--color-primary, #349084);
}

/* Radios y checkbox del modal de exportación */
.scorm-radios {
    display: flex;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
}

.scorm-radio,
.scorm-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    font-size: var(--text-sm, 0.875rem);
}

.scorm-radio input,
.scorm-check input {
    accent-color: var(--color-primary, #349084);
}

.scorm-modal__intro {
    margin: 0 0 var(--space-4, 16px);
    color: var(--color-gray-600, #4b5563);
    font-size: var(--text-sm, 0.875rem);
}

.scorm-resultado {
    margin-top: var(--space-3, 12px);
}

.scorm-resultado__ir {
    margin-left: var(--space-2, 8px);
}

/* --------------------------------------------------------------------------
   Barra de progreso de exportación (modal)
   -------------------------------------------------------------------------- */
.scorm-export-progreso {
    margin-top: var(--space-4, 16px);
}

.scorm-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-gray-200, #e5e7eb);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    margin-bottom: var(--space-2, 8px);
}

.scorm-progress-fill {
    height: 100%;
    background: var(--color-primary, #349084);
    border-radius: var(--radius-full, 9999px);
    transition: width var(--transition-base, 0.3s ease);
}

.scorm-progress-fill.is-error {
    background: var(--color-error, #dc2626);
}

.scorm-export-mensaje {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-600, #4b5563);
}

/* --------------------------------------------------------------------------
   Metadata colapsable
   -------------------------------------------------------------------------- */
.scorm-metadata__summary {
    cursor: pointer;
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-700, #374151);
}

.scorm-metadata__pre {
    margin-top: var(--space-3, 12px);
    background: var(--color-gray-900, #111827);
    color: var(--color-gray-100, #f3f4f6);
    padding: var(--space-3, 12px);
    border-radius: var(--radius-md, 8px);
    overflow-x: auto;
    font-size: var(--text-xs, 0.75rem);
    font-family: var(--font-family-mono, monospace);
}

/* --------------------------------------------------------------------------
   Fallbacks de clases referenciadas (definidas aquí por seguridad)
   -------------------------------------------------------------------------- */

/* .alert (no definida en components.css; se usa en el gestor) */
.alert {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
    border: 1px solid transparent;
}

.alert-success {
    background: var(--color-success-light, #f0fdf4);
    color: var(--color-success, #16a34a);
    border-color: var(--color-success-border, #bbf7d0);
}

.alert-error {
    background: var(--color-error-light, #fef2f2);
    color: var(--color-error, #dc2626);
    border-color: var(--color-error-border, #fecaca);
}

/* badges de estado usados en el gestor (badge-danger / badge-info como
   alias de color; componente .badge ya define forma desde components.css) */
.badge-danger {
    background: var(--color-error-light, #fef2f2);
    color: var(--color-error, #dc2626);
    border-color: var(--color-error-border, #fecaca);
}

.badge-info {
    background: var(--color-info-light, #eff6ff);
    color: var(--color-info, #2563eb);
    border-color: var(--color-info-border, #bfdbfe);
}

/* --------------------------------------------------------------------------
   Responsive (≤768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .scorm-grid {
        grid-template-columns: 1fr !important;
    }

    .scorm-filtros {
        grid-template-columns: 1fr;
    }

    .scorm-form-grid,
    .scorm-form-grid--3 {
        grid-template-columns: 1fr;
    }

    .scorm-acciones {
        width: 100%;
    }

    .scorm-acciones .btn {
        flex: 1;
    }
}