/* ============================================================
   styles.css
   EVALUACIÓN FINAL TRANSVERSAL (EFT) - SEMANA 9
   Estudiante: Nicole Monje Cerda
   Asignatura: Lenguajes Interactivos (IFD2202)
   ============================================================
   Trabajo sobre Bootstrap 5. Aquí van:
     - Clases de la Semana 7 (.destacado, .agrandado)
     - Temas claro/sepia/oscuro del EFT
     - Animación del título (animar-titulo, animar-titulo-nota)
     - Estilos de impresión @media print (diseño distinto)
   ============================================================ */


/* -------------------- TIPOGRAFÍA Y FONDO GENERAL -------------------- */

body {
    background-color: #f4f6fb;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: #2b2b2b;
    transition: background-color 0.4s ease, color 0.4s ease;
}


/* -------------------- BARRA DE HERRAMIENTAS DEL EFT -------------------- */

.barra-herramientas {
    background: #1f1f2e;
    color: #fff;
    border-bottom: 2px solid rgba(255,255,255,0.15);
}

.barra-herramientas .btn {
    border-radius: 6px;
    font-weight: 500;
}


/* -------------------- ENCABEZADO PRINCIPAL -------------------- */

.encabezado {
    background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
}


/* -------------------- IMAGEN DE LA ACTIVIDAD -------------------- */

.imagen-principal {
    min-height: 200px;
    width: 100%;
    background-color: #e9ecef;
    border: 2px dashed #adb5bd;
    color: #6c757d;
    object-fit: cover;
}


/* -------------------- LISTAS DE LA ACTIVIDAD (Semana 7) -------------------- */

.lista-actividad {
    line-height: 1.9;
    font-size: 1.05rem;
}

.lista-actividad li {
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.35s ease-in-out;
}

.destacado {
    background-color: #fff3cd;
    color: #664d03;
    font-weight: bold;
    border-left: 4px solid #ffc107;
}

.agrandado {
    font-size: 1.5rem;
    letter-spacing: 0.5px;
}


/* -------------------- TARJETAS Y BOTONES -------------------- */

.card {
    border: none;
    border-radius: 12px;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.btn {
    border-radius: 8px;
    font-weight: 500;
}

.btn:hover {
    transform: translateY(-1px);
    transition: transform 0.15s ease;
}


/* ============================================================
   ANIMACIONES DEL TÍTULO (EFT - punto: animación en h2 detalle)
   ============================================================ */

/* Animación del h1 principal: entra desde arriba con fade */
@keyframes entradaTitulo {
    0%   { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animar-titulo {
    animation: entradaTitulo 1s ease-out;
}

/* Animación de los títulos de nota (h2/h3): subrayado animado al pasar el mouse
   y leve "pulso" al cargar — suave para no distraer al usuario. */
@keyframes pulsoTitulo {
    0%   { transform: scale(1);   opacity: 0.7; }
    50%  { transform: scale(1.03);opacity: 1;   }
    100% { transform: scale(1);   opacity: 1;   }
}

.animar-titulo-nota {
    position: relative;
    display: inline-block;
    animation: pulsoTitulo 0.9s ease-in-out;
    transition: color 0.3s ease;
}

.animar-titulo-nota::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 3px;
    background: linear-gradient(90deg, #4361ee, #7209b7);
    transition: width 0.45s ease-in-out;
    border-radius: 2px;
}

.animar-titulo-nota:hover::after {
    width: 100%;
}


/* ============================================================
   TEMAS DE FONDO (EFT - claro / sepia / oscuro)
   ============================================================ */

/* CLARO (es el default, lo dejo explícito por si se aplica con JS) */
body.tema-claro {
    background-color: #f4f6fb;
    color: #2b2b2b;
}

/* SEPIA */
body.tema-sepia {
    background-color: #f4ecd8;
    color: #5b4636;
}
body.tema-sepia .card {
    background-color: #fbf5e6;
    color: #5b4636;
}

/* OSCURO (modo noche) */
body.tema-oscuro {
    background-color: #121212;
    color: #e0e0e0;
}
body.tema-oscuro .card {
    background-color: #1e1e2e;
    color: #e0e0e0;
}
body.tema-oscuro .text-primary,
body.tema-oscuro .text-secondary {
    color: #82b1ff !important;
}
body.tema-oscuro .text-muted {
    color: #aaaaaa !important;
}
body.tema-oscuro .destacado {
    background-color: #4a3c00;
    color: #ffe680;
    border-left-color: #ffd54f;
}
body.tema-oscuro footer {
    background-color: #1a1a1a !important;
    color: #ccc;
}
body.tema-oscuro .form-control {
    background-color: #2a2a3a;
    color: #e0e0e0;
    border-color: #444;
}


/* ============================================================
   COMENTARIOS
   ============================================================ */

#listaComentarios .nuevo-comentario {
    /* Pequeño fade-in al aparecer un comentario nuevo */
    animation: entradaTitulo 0.5s ease-out;
}

#textoComentario {
    resize: vertical;
    min-height: 80px;
}


/* ============================================================
   IMPRESIÓN: el EFT pide que la versión impresa sea DISTINTA.
   - Oculto barra de herramientas y botones interactivos.
   - Cambio fondo a blanco, texto a negro, quito sombras y colores.
   - Fuerzo el tema claro al imprimir aunque esté en modo noche.
   ============================================================ */

@media print {
    /* Forzar fondo blanco y texto negro pase lo que pase */
    body, body.tema-oscuro, body.tema-sepia {
        background: #ffffff !important;
        color: #000000 !important;
        font-family: "Times New Roman", Georgia, serif !important;
        font-size: 12pt !important;
    }

    /* Ocultar todo lo que no sirve en papel */
    .no-imprimir,
    .barra-herramientas,
    nav,
    .btn,
    button,
    figure,
    .imagen-principal {
        display: none !important;
    }

    /* Sin sombras, sin bordes redondeados, sin colores de cards */
    .card, .card-body {
        background: #ffffff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: 1px solid #999 !important;
        border-radius: 0 !important;
        page-break-inside: avoid;
    }

    /* Encabezado simple (sin gradientes que gastan tinta) */
    .encabezado {
        background: #ffffff !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
        padding: 0.5rem 0 !important;
    }

    .encabezado h1 {
        color: #000 !important;
        font-size: 18pt !important;
    }

    /* Listas: sin fondos amarillos del .destacado en la impresión */
    .destacado {
        background: transparent !important;
        color: #000 !important;
        border-left: 2px solid #000 !important;
        font-weight: bold;
    }

    .agrandado { font-size: 13pt !important; }

    /* Mostrar la URL después de cada enlace al imprimir */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555;
    }

    /* Pie de página visible y simple */
    footer {
        border-top: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
}


/* -------------------- RESPONSIVE -------------------- */

@media (max-width: 576px) {
    .encabezado h1 { font-size: 1.6rem; }
    .imagen-principal { min-height: 140px; }
    .agrandado { font-size: 1.25rem; }
    .barra-herramientas .btn { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
}