/* ==========================================
   HORIA - ESTILOS GENERALES
   ========================================== */


/* ---------- CONFIGURACIÓN GENERAL ---------- */

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background-color: #f4f7fb;

    color: #1f2937;

}


/* ---------- BARRA SUPERIOR ---------- */

.navbar {

    width: 100%;

    height: 64px;

    background-color: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

    position: sticky;

    top: 0;

    z-index: 1000;

}


/* ---------- LOGOTIPO / NOMBRE ---------- */

.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 22px;

    font-weight: bold;

    color: #2563eb;

    text-decoration: none;

}


.logo-icon {

    font-size: 28px;

}


/* ---------- MENÚ ---------- */

.nav-menu {

    display: flex;

    align-items: center;

    gap: 20px;

}


.nav-menu a {

    text-decoration: none;

    color: #4b5563;

    font-size: 15px;

    font-weight: 500;

    transition: 0.2s;

}


.nav-menu a:hover {

    color: #2563eb;

}


/* ---------- CONTENEDOR PRINCIPAL ---------- */

.container {

    width: 90%;

    max-width: 1200px;

    margin: 40px auto;

}


/* ---------- TÍTULOS ---------- */

.page-title {

    font-size: 30px;

    margin-bottom: 10px;

}


.page-subtitle {

    color: #6b7280;

    margin-bottom: 30px;

}


/* ---------- TARJETAS ---------- */

.card-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 20px;

}


.card {

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    padding: 25px;

    transition:
        transform 0.2s,
        box-shadow 0.2s;

}


.card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.card-icon {

    font-size: 35px;

    margin-bottom: 10px;

}


.card h3 {

    margin-top: 0;

    margin-bottom: 8px;

}


.card p {

    color: #6b7280;

    font-size: 14px;

}


/* ---------- BOTONES ---------- */

.btn {

    display: inline-block;

    padding: 10px 18px;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.2s;

}


.btn-primary {

    background-color: #2563eb;

    color: white;

}


.btn-primary:hover {

    background-color: #1d4ed8;

}


.btn-danger {

    background-color: #dc2626;

    color: white;

}


.btn-danger:hover {

    background-color: #b91c1c;

}


/* ---------- FORMULARIOS ---------- */

.form-group {

    margin-bottom: 18px;

}


.form-group label {

    display: block;

    margin-bottom: 6px;

    font-weight: 600;

}


.form-control {

    width: 100%;

    padding: 11px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 14px;

}


.form-control:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.15
        );

}


/* ---------- TABLAS ---------- */

.table-container {

    background-color: white;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

    overflow: hidden;

}


table {

    width: 100%;

    border-collapse: collapse;

}


th,
td {

    padding: 14px;

    text-align: left;

    border-bottom:
        1px solid #e5e7eb;

}


th {

    background-color: #f9fafb;

    font-weight: 600;

}


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

@media (
    max-width: 700px
) {

    .navbar {

        padding: 0 15px;

    }


    .nav-menu {

        gap: 10px;

    }


    .nav-menu a {

        font-size: 13px;

    }


    .container {

        width: 94%;

    }

}


/* ==========================================
   PÁGINA DE BIENVENIDA
   ========================================== */


.welcome-container {

    min-height: calc(100vh - 64px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

}


.welcome-card {

    width: 100%;

    max-width: 650px;

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    padding: 50px;

    text-align: center;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


/* ---------- AVATAR ---------- */


.avatar-placeholder {

    width: 120px;

    height: 120px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background-color: #eff6ff;

    border: 4px solid #2563eb;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 60px;

}


/* ---------- TÍTULO ---------- */


.welcome-card h1 {

    margin-bottom: 15px;

    font-size: 36px;

    color: #1f2937;

}


/* ---------- TEXTO ---------- */


.welcome-card p {

    color: #6b7280;

    line-height: 1.6;

    margin-bottom: 15px;

}


/* ---------- BOTÓN LOGIN ---------- */


.login-button {

    display: inline-block;

    margin-top: 20px;

    padding: 13px 30px;

    background-color: #2563eb;

    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 600;

    transition:
        background-color 0.2s,
        transform 0.2s;

}


.login-button:hover {

    background-color: #1d4ed8;

    transform: translateY(-2px);

}


/* ==========================================
   HORIA - INTERFAZ DEL CHAT
   ========================================== */


/* ---------- ESTRUCTURA GENERAL ---------- */

.chat-layout {

    display: flex;

    height: 100vh;

    background-color: #f4f7fb;

}


/* ---------- BARRA LATERAL ---------- */

.sidebar {

    width: 280px;

    background-color: #ffffff;

    border-right: 1px solid #e5e7eb;

    display: flex;

    flex-direction: column;

    padding: 25px 20px;

}


/* ---------- ENCABEZADO SIDEBAR ---------- */

.sidebar-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

}


.brand-avatar {

    width: 45px;

    height: 45px;

    border-radius: 12px;

    background-color: #eff6ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

}


.sidebar-header h2 {

    margin: 0;

    color: #1f2937;

}


.sidebar-header span {

    font-size: 13px;

    color: #6b7280;

}


/* ---------- NUEVA CONVERSACIÓN ---------- */

.new-chat-button {

    width: 100%;

    padding: 12px;

    background-color: #2563eb;

    color: white;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 25px;

}


.new-chat-button:hover {

    background-color: #1d4ed8;

}


/* ---------- HISTORIAL ---------- */

.history-section h3 {

    font-size: 14px;

    color: #6b7280;

    margin-bottom: 12px;

}


.history-item {

    padding: 11px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;

    margin-bottom: 5px;

}


.history-item:hover {

    background-color: #f3f4f6;

}


/* ---------- USUARIO ---------- */

.sidebar-user {

    margin-top: auto;

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 20px;

    border-top: 1px solid #e5e7eb;

}


.user-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: #eff6ff;

    display: flex;

    align-items: center;

    justify-content: center;

}


.user-info {

    display: flex;

    flex-direction: column;

}


.user-info strong {

    font-size: 14px;

}


.user-info span {

    font-size: 12px;

    color: #6b7280;

}


/* ==========================================
   ÁREA PRINCIPAL DEL CHAT
   ========================================== */


.chat-main {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-width: 0;

}


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

.chat-header {

    height: 75px;

    background-color: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 30px;

}


.chat-title {

    display: flex;

    align-items: center;

    gap: 12px;

}


.chat-avatar {

    width: 45px;

    height: 45px;

    border-radius: 12px;

    background-color: #eff6ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

}


.chat-title h1 {

    margin: 0;

    font-size: 20px;

}


.status {

    font-size: 13px;

    color: #16a34a;

}


/* ---------- BOTÓN DE CONFIGURACIÓN ---------- */

.header-actions button {

    width: 40px;

    height: 40px;

    border: none;

    background-color: #f3f4f6;

    border-radius: 8px;

    cursor: pointer;

}


.header-actions button:hover {

    background-color: #e5e7eb;

}


/* ==========================================
   ÁREA DE MENSAJES
   ========================================== */


.messages-area {

    flex: 1;

    overflow-y: auto;

    padding: 30px;

}


/* ---------- FILA DE MENSAJE ---------- */

.message-row {

    display: flex;

    gap: 12px;

    margin-bottom: 25px;

    max-width: 800px;

}


/* ---------- MENSAJE HORIA ---------- */

.horia-message {

    align-self: flex-start;

}


/* ---------- MENSAJE USUARIO ---------- */

.user-message {

    margin-left: auto;

    flex-direction: row-reverse;

}


/* ---------- AVATAR MENSAJE ---------- */

.message-avatar {

    width: 38px;

    height: 38px;

    min-width: 38px;

    border-radius: 50%;

    background-color: #eff6ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

}


/* ---------- CONTENIDO ---------- */

.message-content {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.message-name {

    font-size: 12px;

    color: #6b7280;

    font-weight: 600;

}


/* ---------- BURBUJA ---------- */

.message-bubble {

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    padding: 14px 18px;

    line-height: 1.6;

    box-shadow:
        0 2px 6px
        rgba(
            0,
            0,
            0,
            0.04
        );

}


/* ---------- BURBUJA USUARIO ---------- */

.user-message .message-bubble {

    background-color: #2563eb;

    color: white;

    border: none;

}


/* ==========================================
   INDICADOR DE ESCRITURA
   ========================================== */


.typing-bubble {

    display: flex;

    gap: 5px;

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    padding: 14px 18px;

}


.typing-bubble span {

    width: 7px;

    height: 7px;

    background-color: #9ca3af;

    border-radius: 50%;

    animation: typing 1.2s infinite;

}


.typing-bubble span:nth-child(2) {

    animation-delay: 0.2s;

}


.typing-bubble span:nth-child(3) {

    animation-delay: 0.4s;

}


@keyframes typing {

    0%,
    60%,
    100% {

        opacity: 0.3;

        transform: translateY(0);

    }

    30% {

        opacity: 1;

        transform: translateY(-4px);

    }

}


/* ==========================================
   ÁREA DE ESCRITURA
   ========================================== */


.message-input-area {

    background-color: #ffffff;

    border-top: 1px solid #e5e7eb;

    padding: 18px 30px;

}


.message-input-container {

    display: flex;

    align-items: flex-end;

    gap: 10px;

    max-width: 900px;

    margin: 0 auto;

}


#messageInput {

    flex: 1;

    min-height: 45px;

    max-height: 150px;

    resize: vertical;

    padding: 12px 15px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    font-family: inherit;

    font-size: 14px;

}


#messageInput:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.15
        );

}


.send-button {

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 10px;

    background-color: #2563eb;

    color: white;

    font-size: 20px;

    cursor: pointer;

}


.send-button:hover {

    background-color: #1d4ed8;

}


.input-info {

    display: block;

    max-width: 900px;

    margin: 8px auto 0;

    font-size: 12px;

    color: #9ca3af;

    text-align: center;

}


/* ==========================================
   RESPONSIVE
   ========================================== */


@media (max-width: 800px) {

    .sidebar {

        width: 220px;

    }

    .messages-area {

        padding: 20px;

    }

    .message-input-area {

        padding: 15px;

    }

}


@media (max-width: 600px) {

    .sidebar {

        display: none;

    }

}


/* ==========================================
   PÁGINA DE LOGIN
   ========================================== */


.login-container {

    min-height: calc(100vh - 64px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

}


.login-card {

    width: 100%;

    max-width: 450px;

    background-color: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 20px;

    padding: 40px;

    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


.login-card .avatar-placeholder {

    width: 90px;

    height: 90px;

    font-size: 45px;

    margin-bottom: 20px;

}


.login-card h1 {

    margin-top: 0;

    margin-bottom: 10px;

    font-size: 30px;

}


.login-card p {

    color: #6b7280;

    line-height: 1.5;

    margin-bottom: 25px;

}


.input-group {

    margin-bottom: 18px;

}


.input-group label {

    display: block;

    margin-bottom: 7px;

    font-size: 14px;

    font-weight: 600;

}


.input-group input {

    width: 100%;

    padding: 12px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    font-size: 14px;

}


.input-group input:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(
            37,
            99,
            235,
            0.15
        );

}


.login-card form button {

    width: 100%;

    padding: 12px;

    margin-top: 5px;

    background-color: #2563eb;

    color: white;

    border: none;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

}


.login-card form button:hover {

    background-color: #1d4ed8;

}


.back-link {

    display: block;

    margin-top: 20px;

    text-align: center;

    color: #2563eb;

    text-decoration: none;

    font-size: 14px;

}


.back-link:hover {

    text-decoration: underline;

}

/* ================================
   HORARIO ACADÉMICO
================================ */

.tabla-horario{

    width:100%;

    border-collapse:collapse;

    margin-top:30px;

}

.tabla-horario th{

    background:#2563eb;

    color:white;

    text-align:center;

    padding:15px;

}

.tabla-horario td{

    border:1px solid #dcdcdc;

    height:140px;

    vertical-align:top;

    padding:10px;

}

.tabla-horario td:first-child{

    width:130px;

    font-weight:bold;

    background:#f5f5f5;

    text-align:center;

}



/* =======================================
   TARJETAS DE MATERIAS
======================================= */

.tarjeta-materia{

    background:#f8fafc;

    border-left:5px solid #2563eb;

    border-radius:12px;

    padding:10px;

    margin-bottom:10px;

}

.tarjeta-materia strong{

    display:block;

    font-size:15px;

    margin-bottom:8px;

}

.tarjeta-materia p{

    margin:3px 0;

    font-size:13px;

    color:#444;

}



/* =======================================
   DISEÑO RESPONSIVE
======================================= */

@media (max-width: 1200px){

    .container{

        width:95%;

    }

}

@media (max-width: 900px){

    .card-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media (max-width:768px){

    .container{

        width:95%;

        padding:15px;

    }

    .page-title{

        font-size:28px;

        text-align:center;

    }

    .page-subtitle{

        text-align:center;

    }

    .card-grid{

        grid-template-columns:1fr;

    }

    .tabla-horario{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

    .tabla-horario th{

        min-width:180px;

    }

    .tabla-horario td{

        min-width:220px;

    }

}

@media (max-width:500px){

    .page-title{

        font-size:24px;

    }

    .btn{

        width:100%;

    }

}


/* =======================================
   ACCIONES DEL HORARIO
======================================= */

.acciones-horario{

    margin-top:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


/* =======================================
   MENÚ DESPLEGABLE
======================================= */

.exportar-dropdown{

    position:relative;

}


/* =======================================
   MENÚ OCULTO
======================================= */

.exportar-menu{

    display:none;

    position:absolute;

    top:55px;

    left:0;

    min-width:230px;

    background:#ffffff;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    overflow:hidden;

    z-index:999;

}


/* =======================================
   OPCIONES
======================================= */

.exportar-menu a{

    display:block;

    padding:14px 18px;

    color:#333;

    text-decoration:none;

    transition:.25s;

}


.exportar-menu a:hover{

    background:#f5f7fb;

}


/* =======================================
   MOSTRAR MENÚ
======================================= */

.exportar-dropdown:hover .exportar-menu{

    display:block;

}


/* ==============================
   ÁREA EXPORTABLE
============================== */

#horarioExportar{

    background: white;

    padding: 40px;

    border-radius: 20px;

}


/* ================================= */
/* ENCABEZADO DEL HORARIO */
/* ================================= */

.encabezado-horario{

    text-align: center;

    background: white;

    padding: 25px;

    border-radius: 15px;

    margin-bottom: 25px;

    border: 2px solid #d9d9d9;

    box-shadow: 0px 4px 10px rgba(0,0,0,.08);

}

.encabezado-horario h1{

    font-size: 38px;

    color: #1E88E5;

    margin-bottom: 5px;

}

.encabezado-horario h2{

    font-size: 18px;

    font-weight: normal;

    color: #555;

    margin-bottom: 15px;

}

.encabezado-horario p{

    margin: 4px;

    color: #444;

    font-size: 15px;

}

.encabezado-horario hr{

    margin: 20px 0;

    border: none;

    border-top: 2px solid #1E88E5;

}

.encabezado-horario h3{

    font-size: 28px;

    color: #222;

    margin-top: 10px;

}



/* ====================================== */
/* EVALUACIÓN DEL HORARIO */
/* ====================================== */

.evaluacion-horario{

    margin-top:40px;

    padding:30px;

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

}

.evaluacion-horario h2{

    text-align:center;

    margin-bottom:25px;

    color:#2d3436;

}

.evaluacion-puntuacion{

    text-align:center;

    margin-bottom:20px;

}

.puntuacion-numero{

    font-size:70px;

    font-weight:bold;

    color:#2ecc71;

}

.puntuacion-total{

    font-size:30px;

    color:#888;

}

.evaluacion-estado{

    text-align:center;

    font-size:20px;

    font-weight:bold;

    margin-bottom:30px;

}

.evaluacion-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.evaluacion-item{

    background:#f7f9fb;

    padding:15px;

    border-radius:10px;

    font-size:17px;

}

/* ====================================== */
/* ESTADÍSTICAS DEL HORARIO */
/* ====================================== */

.estadisticas-horario{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:15px;

    margin:30px 0;

}

.estadistica-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:120px;

    padding:18px;

    background:#f7f9fc;

    border:1px solid #e4e9f0;

    border-radius:14px;

    text-align:center;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.estadistica-item:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.estadistica-icono{

    margin-bottom:7px;

    font-size:28px;

}

.estadistica-numero{

    color:#2463eb;

    font-size:30px;

    font-weight:700;

    line-height:1;

}

.estadistica-texto{

    margin-top:8px;

    color:#596273;

    font-size:14px;

    font-weight:600;

}


/* ====================================== */
/* DISEÑO ADAPTABLE DE ESTADÍSTICAS */
/* ====================================== */

@media (max-width: 850px){

    .estadisticas-horario{

        grid-template-columns:repeat(2, 1fr);

    }

}

@media (max-width: 520px){

    .estadisticas-horario{

        grid-template-columns:1fr;

    }

    .estadistica-item{

        min-height:100px;

    }

}