/* ============================================================
   carreras.css  —  Sección de carreras
   Paleta institucional:
     Principal : #750946
     Hover/dark : #5a0736
     Gris medio : #636569
     Casi negro : #211f20
     Blanco     : #FFFFFF
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --c-principal    : #750946;
    --c-principal-dk : #5a0736;
    --c-gris         : #636569;
    --c-negro        : #211f20;
    --c-blanco       : #ffffff;
    --c-fondo        : #f4f4f4;
    --c-card         : #ffffff;
    --c-borde        : #e0e0e0;
    --c-texto        : #211f20;
    --c-texto-suave  : #636569;
    --c-like-activo  : #c0185e;

    --radio-card     : 6px;
    --radio-btn      : 4px;
    --sombra-card    : 0 1px 4px rgba(33,31,32,.10);
    --sombra-hover   : 0 4px 14px rgba(33,31,32,.14);
    --trans          : .2s ease;

    --fuente         : 'Segoe UI', Arial, sans-serif;
}

/* ── Reset básico ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--fuente);
    background : var(--c-fondo);
    color      : var(--c-texto);
    line-height: 1.55;
}
img  { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }

/* ── Sección principal ──────────────────────────────────────── */
.carreras-seccion {
    max-width : 1100px;
    margin    : 0 auto;
    padding   : 48px 20px 64px;
}

.carreras-header {
    margin-bottom: 36px;
    border-left  : 4px solid var(--c-principal);
    padding-left : 16px;
}

.carreras-titulo {
    font-size  : 1.75rem;
    font-weight: 600;
    color      : var(--c-negro);
    letter-spacing: -.3px;
}

.carreras-subtitulo {
    margin-top: 4px;
    font-size : .95rem;
    color     : var(--c-gris);
}

/* ── Grid de tarjetas ───────────────────────────────────────── */
.carreras-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 24px;
}

@media (max-width: 900px) {
    .carreras-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .carreras-grid { grid-template-columns: 1fr; }
    .carreras-titulo { font-size: 1.4rem; }
}

/* ── Tarjeta ────────────────────────────────────────────────── */
.carrera-card {
    background   : var(--c-card);
    border       : 1px solid var(--c-borde);
    border-radius: var(--radio-card);
    overflow     : hidden;
    display      : flex;
    flex-direction: column;
    box-shadow   : var(--sombra-card);
    transition   : box-shadow var(--trans), transform var(--trans);
}

.carrera-card:hover {
    box-shadow: var(--sombra-hover);
    transform : translateY(-2px);
}

/* ── Thumbnail ──────────────────────────────────────────────── */
.carrera-thumb {
    position  : relative;
    cursor    : pointer;
    overflow  : hidden;
    aspect-ratio: 16/9;
    background: var(--c-negro);
}

.carrera-thumb img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform .4s ease, opacity .3s ease;
}

.carrera-thumb:hover img {
    transform: scale(1.04);
    opacity  : .85;
}

.carrera-thumb:focus-visible {
    outline: 3px solid var(--c-principal);
    outline-offset: 2px;
}

/* Botón play */
.carrera-play-btn {
    position  : absolute;
    inset     : 0;
    display   : flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.carrera-play-btn svg {
    width     : 52px;
    height    : 52px;
    fill      : var(--c-blanco);
    background: rgba(117,9,70,.82);
    border-radius: 50%;
    padding   : 12px;
    transition: background var(--trans), transform var(--trans);
}

.carrera-thumb:hover .carrera-play-btn svg {
    background: var(--c-principal);
    transform : scale(1.08);
}

/* Barra de progreso (solo si ya vio parte del video) */
.carrera-progreso-barra {
    position: absolute;
    bottom  : 0;
    left    : 0;
    width   : 100%;
    height  : 3px;
    background: rgba(255,255,255,.3);
}

.carrera-progreso-fill {
    height    : 100%;
    background: var(--c-principal);
    transition: width .4s ease;
}

/* ── Información ────────────────────────────────────────────── */
.carrera-info {
    padding        : 18px 18px 20px;
    display        : flex;
    flex-direction : column;
    flex           : 1;
    gap            : 10px;
}

.carrera-nombre {
    font-size  : 1rem;
    font-weight: 600;
    color      : var(--c-negro);
    line-height: 1.35;
}

.carrera-descripcion {
    font-size : .85rem;
    color     : var(--c-gris);
    line-height: 1.5;
    display   : -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow  : hidden;
}

/* ── Métricas (vistas + like) ───────────────────────────────── */
.carrera-metricas {
    display    : flex;
    align-items: center;
    gap        : 16px;
    margin-top : auto;
    padding-top: 8px;
    border-top : 1px solid var(--c-borde);
}

.metrica {
    display    : flex;
    align-items: center;
    gap        : 4px;
    font-size  : .82rem;
    color      : var(--c-gris);
}

.metrica svg {
    width : 16px;
    height: 16px;
    fill  : var(--c-gris);
    flex-shrink: 0;
}

.metrica-num   { font-weight: 600; color: var(--c-texto); }
.metrica-label { font-size: .78rem; }

/* Botón like */
button.metrica.like {
    background: none;
    border    : none;
    padding   : 0;
    transition: color var(--trans);
}

button.metrica.like svg {
    transition: fill var(--trans), transform .15s ease;
}

button.metrica.like:hover svg {
    fill     : var(--c-like-activo);
    transform: scale(1.15);
}

button.metrica.like.activo {
    color: var(--c-like-activo);
}

button.metrica.like.activo svg {
    fill: var(--c-like-activo);
}

/* ── Botón plan de estudios ─────────────────────────────────── */
.btn-plan {
    display    : flex;
    align-items: center;
    justify-content: center;
    gap        : 7px;
    width      : 100%;
    padding    : 9px 12px;
    background : transparent;
    border     : 1px solid var(--c-principal);
    border-radius: var(--radio-btn);
    color      : var(--c-principal);
    font-size  : .85rem;
    font-weight: 500;
    transition : background var(--trans), color var(--trans);
}

.btn-plan svg {
    width : 17px;
    height: 17px;
    fill  : currentColor;
    flex-shrink: 0;
}

.btn-plan:hover {
    background: var(--c-principal);
    color     : var(--c-blanco);
}

/* ── Modales (base compartida) ──────────────────────────────── */
.modal {
    position: fixed;
    inset   : 0;
    z-index : 1000;
    display : flex;
    align-items: center;
    justify-content: center;
    padding : 16px;
}

.modal[hidden] { display: none; }

.modal-overlay {
    position: absolute;
    inset   : 0;
    background: rgba(33,31,32,.72);
}

.modal-contenedor {
    position      : relative;
    background    : var(--c-blanco);
    border-radius : 6px;
    box-shadow    : 0 8px 32px rgba(33,31,32,.28);
    display       : flex;
    flex-direction: column;
    max-height    : 90vh;
    width         : 100%;
    overflow      : hidden;
    animation     : modalEntrada .22s ease;
}

@keyframes modalEntrada {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Header del modal */
.modal-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 14px 18px;
    border-bottom  : 1px solid var(--c-borde);
    background     : var(--c-blanco);
    flex-shrink    : 0;
}

.modal-titulo {
    font-size  : .95rem;
    font-weight: 600;
    color      : var(--c-negro);
    white-space: nowrap;
    overflow   : hidden;
    text-overflow: ellipsis;
    max-width  : 70%;
}

.modal-header-acciones {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

/* Botón cerrar */
.modal-cerrar {
    background: none;
    border    : none;
    padding   : 4px;
    display   : flex;
    color     : var(--c-gris);
    border-radius: 50%;
    transition: background var(--trans), color var(--trans);
}

.modal-cerrar svg {
    width : 20px;
    height: 20px;
    fill  : currentColor;
}

.modal-cerrar:hover {
    background: var(--c-fondo);
    color     : var(--c-negro);
}

/* ── Modal video ────────────────────────────────────────────── */
.modal-video-contenedor {
    max-width: 860px;
}

.modal-video-wrap {
    padding : 0;
    background: #000;
}

#video-player {
    width     : 100%;
    max-height: 72vh;
    display   : block;
    background: #000;
}

.video-progreso-texto {
    padding   : 6px 14px;
    font-size : .78rem;
    color     : #aaa;
    background: #111;
    min-height: 24px;
}

/* ── Modal PDF ──────────────────────────────────────────────── */
.modal-pdf-contenedor {
    max-width: 800px;
}

.modal-pdf-wrap {
    flex: 1;
    overflow: hidden;
}

#pdf-viewer {
    width  : 100%;
    height : 75vh;
    border : none;
    display: block;
}

/* Botón descargar PDF */
.btn-descarga {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 6px 14px;
    background : var(--c-principal);
    color      : var(--c-blanco);
    text-decoration: none;
    border-radius  : var(--radio-btn);
    font-size  : .82rem;
    font-weight: 500;
    transition : background var(--trans);
}

.btn-descarga svg {
    width : 16px;
    height: 16px;
    fill  : currentColor;
}

.btn-descarga:hover {
    background: var(--c-principal-dk);
}

/* ── Accesibilidad ──────────────────────────────────────────── */
:focus-visible {
    outline       : 2px solid var(--c-principal);
    outline-offset: 3px;
}