/*---------------Colores/Formato-----------------------*/
:root {
    --color-naranjo: #F05032; 
    --color-morado-eco: #6D3A7A; 
    --color-amarillo-adm: #E8B135; 
    --color-verde-opt: #98B946; 
    --color-gris-pc: #5A5A5A; 
    
    --font-titulos: 'Acta Display', 'Times New Roman', Times, serif;
    --font-textos: 'Replica Pro', Arial, sans-serif;

    --bg-principal: #FFFFFF;
    --texto-principal: #000000;
    --bg-tarjeta: #FFFFFF;
    --borde-tarjeta: rgba(0,0,0,0.1);
    
    --bg-bloqueado: #F5F5F5;
    --texto-bloqueado: #A0A0A0;
    --borde-bloqueado: #CCCCCC;
    --bg-creditos-bloqueado: rgba(0,0,0,0.05);
}

body.dark-mode {
    --bg-principal: #121212; 
    --texto-principal: #E0E0E0; 
    --bg-tarjeta: #1E1E1E; 
    --borde-tarjeta: rgba(255,255,255,0.1);
    
    --bg-bloqueado: #1a1a1a;
    --texto-bloqueado: #555555;
    --borde-bloqueado: #333333;
    --bg-creditos-bloqueado: rgba(255,255,255,0.05);
    
    --color-gris-pc: #7a7a7a; 
}

/*---------------Base y cabecera -----------------------*/
body {
    font-family: var(--font-textos);
    background-color: var(--bg-principal);
    color: var(--texto-principal);
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header-uah {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 50px;
    border-bottom: 4px solid var(--color-naranjo);
}

.logo-uah { display: flex; align-items: center; gap: 5px; }
.logo-uah .sigla { font-family: var(--font-titulos); font-size: 3.5em; font-weight: bold; line-height: 1; }
.logo-uah .slash { font-family: var(--font-textos); font-size: 3.5em; font-weight: 300; line-height: 1; color: var(--color-naranjo); margin: 0 5px; }
.logo-uah .texto { font-family: var(--font-textos); font-size: 1.1em; line-height: 1.2; font-weight: bold; }

.header-title h1 {
    font-family: var(--font-titulos);
    font-size: 2em;
    font-weight: normal;
    margin: 0;
    text-align: right;
    color: var(--texto-principal);
}

.header-title h1 strong {
    color: var(--color-naranjo);
    font-weight: bold; /* Aseguramos que mantenga el peso */
}

.acciones-container {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: flex-end; 
}

.btn-accion {
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 15px;
    font-family: inherit;
    font-weight: bold;
    border: 1px solid var(--texto-principal);
    background: transparent;
    color: var(--texto-principal);
    transition: all 0.3s ease;
}

.btn-accion:hover { background-color: var(--texto-principal); color: var(--bg-principal); }

.selector-mencion {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding: 0 20px;
}

.btn-mencion {
    padding: 10px 25px;
    font-family: var(--font-textos);
    font-size: 1em;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: transparent; 
    border: 2px solid var(--color-naranjo); 
    color: var(--texto-principal); 
    opacity: 0.7;
}

body.dark-mode .btn-mencion { color: #E0E0E0; }
.btn-mencion:hover { background-color: rgba(240, 80, 50, 0.1); opacity: 1; }

.btn-mencion.activo {
    color: var(--color-naranjo); 
    opacity: 1;
    box-shadow: 0 2px 8px rgba(240, 80, 50, 0.2); 
}

body.dark-mode .btn-mencion.activo {
    background-color: var(--color-naranjo);
    color: #121212; 
}

.seccion-titulo-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;    
    text-align: center;     
    padding: 30px 20px 0 20px;
    box-sizing: border-box;
}

.seccion-titulo {
    font-family: var(--font-titulos);
    color: var(--color-naranjo);
    font-size: 2.5em;
    margin: 0;
    line-height: 1.1;
}

.seccion-subtitulo {
    font-size: 0.95em;
    color: var(--texto-bloqueado);
    margin-top: 5px;
    max-width: 600px;
}

@media (max-width: 768px) {
    .seccion-titulo-container {
        padding: 20px 20px 0 20px; /* Alineado con el padding de móvil */
        text-align: center;
    }
    .seccion-titulo { font-size: 1.8em; }
}

/* --- CREDITOS DESARROLLO --- */

.creditos-desarrollo {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-naranjo);
    font-size: 0.8em;
    font-family: var(--font-textos);
    opacity: 0.8;
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .creditos-desarrollo {
        font-size: 0.75em;
        padding: 30px 15px;
    }
}

/*--------------- Barra de progreso de créditos -----------------------*/
.progreso-creditos-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 50px 0 50px;
    margin-top: 20px;
}

.progreso-creditos-barra {
    flex: 1;
    height: 6px;
    background-color: var(--bg-bloqueado);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--borde-bloqueado);
}

.progreso-creditos-fill {
    height: 100%;
    width: 0%;
    background-color: var(--color-naranjo);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.progreso-creditos-label {
    font-size: 0.85em;
    font-weight: bold;
    color: var(--texto-bloqueado);
    white-space: nowrap;
    display: flex;
    gap: 8px;
    align-items: center;
}

.creditos-pct {
    color: var(--color-naranjo);
    font-size: 1.1em;
}

/*---------------Malla y Ramos -----------------------*/
.leyenda { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin: 30px 0; padding: 0 20px; }
.leyenda-item { display: flex; align-items: center; font-size: 0.9em; font-weight: bold; }
.leyenda-color { width: 18px; height: 18px; margin-right: 8px; border-radius: 3px; }

.malla-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 0 50px 50px 50px;
    min-height: 600px;
    scroll-behavior: smooth;
}

.malla-container::-webkit-scrollbar { height: 10px; }
.malla-container::-webkit-scrollbar-track { background: var(--bg-bloqueado); border-radius: 5px; }
.malla-container::-webkit-scrollbar-thumb { background: var(--borde-bloqueado); border-radius: 5px; }
.malla-container::-webkit-scrollbar-thumb:hover { background: var(--color-naranjo); }

.semestre-col { display: flex; flex-direction: column; gap: 12px; min-width: 160px; flex: 1; }
.semestre-titulo { text-align: left; font-family: var(--font-titulos); font-weight: bold; font-size: 1.2em; padding-bottom: 10px; border-bottom: 2px solid var(--texto-principal); margin-bottom: 10px; }

.ramo {
    padding: 12px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 80px;
    border-radius: 4px;
    border: 1px solid var(--borde-tarjeta);
}

.ramo-nombre { font-weight: bold; line-height: 1.2; padding-right: 35px; margin-bottom: 15px; }
.ramo-creditos { position: absolute; top: 8px; right: 8px; font-size: 0.75em; font-weight: bold; padding: 3px 6px; border-radius: 4px; }
.ramo-codigo { font-size: 0.8em; opacity: 0.8; text-align: left; font-family: monospace; }

.estado-bloqueado { background-color: var(--bg-bloqueado) !important; color: var(--texto-bloqueado) !important; border: 1px dashed var(--borde-bloqueado) !important; cursor: not-allowed; }
.estado-bloqueado .ramo-creditos { background-color: var(--bg-creditos-bloqueado) !important; }
.estado-disponible { opacity: 1; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.estado-disponible:hover { transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
.estado-aprobado { background-color: var(--bg-tarjeta) !important; color: var(--texto-principal) !important; border: 2px solid var(--color-naranjo) !important; box-shadow: none; }
.estado-aprobado .ramo-creditos { background-color: rgba(240, 80, 50, 0.1) !important; color: var(--color-naranjo); }
.estado-aprobado::after { content: '✓'; position: absolute; bottom: 8px; right: 10px; color: var(--color-naranjo); font-weight: bold; font-size: 1.4em; }

/*--------------- Caen -----------------------*/
.placeholder-vista {
    max-width: 460px;
    margin: 0 auto;
    padding: 60px 40px;
    border: 2px dashed var(--borde-bloqueado);
    border-radius: 16px;
    color: var(--texto-bloqueado);
}

.placeholder-icono {
    font-size: 4em;
    margin-bottom: 20px;
}

.placeholder-vista h2 {
    font-family: var(--font-titulos);
    font-size: 2em;
    color: var(--color-naranjo);
    margin: 0 0 15px 0;
}

.placeholder-vista p {
    font-size: 1em;
    line-height: 1.6;
    margin: 0;
}

/*---------------TOAST-----------------------*/
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); 
    background-color: var(--color-naranjo);
    color: #FFFFFF;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    white-space: pre-line; 
}

.toast.mostrar { transform: translateX(-50%) translateY(0); opacity: 1; }

/*---------------Diseño teléfono-----------------------*/
@media (max-width: 768px) {
    .header-uah { flex-direction: column; text-align: center; padding: 20px 15px; gap: 15px; }
    .header-title h1 { text-align: center; font-size: 1.6em; }
    .logo-uah .sigla, .logo-uah .slash { font-size: 2.8em; }
    .logo-uah .texto { font-size: 0.9em; text-align: left; }
    
    .acciones-container { justify-content: center; width: 100%; }
    .btn-accion { flex: 1; font-size: 0.85em; padding: 10px; }

    .selector-mencion { flex-direction: column; padding: 0 20px; gap: 10px; }
    .btn-mencion { width: 100%; padding: 12px; }

    .leyenda { padding: 0 15px; gap: 10px; }
    .leyenda-item { font-size: 0.8em; }
    
    .progreso-creditos-wrap { padding: 15px 20px 0 20px; }

    .malla-container { 
        padding: 0 20px 30px 20px; 
        scroll-snap-type: x mandatory; 
        gap: 20px; 
    }
    
    .semestre-col { 
        min-width: 85vw; 
        scroll-snap-align: center; 
    }
    
    .ramo { min-height: 90px; padding: 15px; }
    .toast { width: 90%; bottom: 20px; font-size: 0.85em; padding: 12px 15px; }

    #vista-calculadora { padding: 20px 15px !important; }

    .calc-header-section { 
        padding: 20px 15px !important; 
        flex-direction: column; 
        gap: 15px;
    }
    .calc-botones-header {
        display: flex;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .calc-botones-header .btn-accion {
        flex: none !important; 
        width: auto !important;
        font-size: 0.8em;
        padding: 8px 12px;
    }

}

/*---------------Menú lateral -----------------------*/
.btn-menu {
    background: transparent; border: none; font-size: 2em; 
    color: var(--color-naranjo); cursor: pointer; margin-right: 15px;
    transition: transform 0.2s;
}
.btn-menu:hover { transform: scale(1.1); }

.menu-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); z-index: 2000; opacity: 0; 
    pointer-events: none; transition: opacity 0.3s ease; 
}
.menu-overlay.activo { opacity: 1; pointer-events: auto; backdrop-filter: blur(2px); }

.sidebar-izq { 
    position: fixed; top: 0; left: -320px; width: 280px; height: 100%; 
    background: var(--bg-principal); box-shadow: 4px 0 15px rgba(0,0,0,0.2); 
    z-index: 2001; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; flex-direction: column; 
}
.sidebar-izq.activo { left: 0; }

.sidebar-header { 
    padding: 25px 20px; border-bottom: 1px solid var(--borde-tarjeta); 
    display: flex; justify-content: space-between; align-items: center; 
}
.sidebar-header h2 { margin: 0; font-family: var(--font-titulos); font-size: 1.5em; }
.btn-cerrar-menu { background: transparent; border: none; font-size: 1.5em; cursor: pointer; color: var(--texto-principal); }

.btn-nav { 
    padding: 18px 20px; text-align: left; background: transparent; 
    border: none; font-size: 1.1em; color: var(--texto-principal); 
    cursor: pointer; border-bottom: 1px solid var(--borde-tarjeta); 
    font-weight: bold; transition: all 0.2s; border-left: 4px solid transparent;
}
.btn-nav:hover { background: rgba(240, 80, 50, 0.05); color: var(--color-naranjo); }
.btn-nav.activo { color: var(--color-naranjo); border-left-color: var(--color-naranjo); background: rgba(240, 80, 50, 0.05); }

/* ================================================================
   CALENDARIO Y PLANIFICADOR DE ESTUDIO
   ================================================================ */

.cal-header-mes {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--borde-tarjeta);
}

.cal-dias-semana {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
    text-align: center; font-weight: bold; font-size: 0.85em;
    color: var(--texto-bloqueado); margin-bottom: 10px;
}

.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}

.cal-dia {
    background: var(--bg-principal); border: 1px solid var(--borde-bloqueado);
    border-radius: 6px; min-height: 80px; padding: 5px;
    font-size: 0.85em; display: flex; flex-direction: column; gap: 4px;
    transition: border-color 0.2s;
}

.cal-dia:hover { border-color: var(--color-naranjo); }
.cal-dia.hoy { border: 2px solid var(--color-naranjo); background: rgba(240, 80, 50, 0.05); }
.cal-dia.vacio { background: transparent; border: none; }

.cal-numero { font-weight: bold; text-align: right; color: var(--texto-bloqueado); margin-bottom: 5px; }

.cal-evento {
    font-size: 0.75em; padding: 3px 5px; border-radius: 4px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-evento.evaluacion { background-color: #d9534f; }
.cal-evento.estudio { background-color: #4a90e2; }
.cal-evento.receso { background-color: var(--color-verde-opt); }

/* Metas de estudio */
.cal-meta-item {
    background: var(--bg-principal); border: 1px solid var(--borde-tarjeta);
    border-radius: 8px; padding: 12px; margin-bottom: 10px;
    position: relative;
}
.cal-meta-horas {
    display: inline-block; background: var(--bg-bloqueado); padding: 4px 8px;
    border-radius: 4px; font-weight: bold; font-size: 0.8em; margin-bottom: 8px; color: var(--color-naranjo);
}
.cal-meta-desc { font-size: 0.9em; line-height: 1.3; }
.btn-eliminar-meta {
    position: absolute; top: 10px; right: 10px; background: transparent; border: none;
    color: var(--texto-bloqueado); cursor: pointer; font-size: 1.2em;
}
.btn-eliminar-meta:hover { color: #d9534f; }

#vista-calendario .calc-header-section {
    justify-content: center; 
    text-align: center;      
    padding-bottom: 40px;    
}

#vista-calendario .calc-titulo-wrap {
    align-items: center;     
}

#vista-calendario .calc-titulo {
    font-size: 2.5em;        
    margin-bottom: 5px;
}

.cal-header-mes .btn-accion {
    /* Forzamos dimensiones exactas */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    
    /* Quitamos cualquier factor de crecimiento */
    flex: none !important; 
    
    /* Centrado y forma */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
}

/* Estilo para metas cumplidas */
.cal-meta-item.completada {
    opacity: 0.6;
    border-color: var(--color-verde-opt);
    background: rgba(152, 185, 70, 0.05);
}

.cal-meta-item.completada .cal-meta-desc {
    text-decoration: line-through; 
    color: var(--texto-bloqueado);
}

.check-meta {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--color-verde-opt); 
}

#cal-mes-anio-texto {
    flex: 1; 
    text-align: center;
    margin: 0 10px !important;
}

@media (max-width: 768px) {
    #vista-calendario {
        padding: 20px 10px !important; /* Menos espacio en los bordes para ganar pantalla */
    }

    #vista-calendario .calc-container {
        flex-direction: column; /* Apila el calendario y las metas */
        gap: 20px;
    }

    #vista-calendario .calc-panel-izq, 
    #vista-calendario .calc-panel-der {
        width: 100%;
        flex: none !important; /* Desactivamos el flex: 1.5 y flex: 1 de PC */
        padding: 15px;
    }

    /* Ajuste de la grilla del calendario para pantallas pequeñas */
    .cal-dia {
        min-height: 60px; /* Reducimos la altura para que no ocupe tanto scroll */
        padding: 3px;
    }

    .cal-numero {
        font-size: 0.8em;
    }

    .cal-evento {
        font-size: 0.65em; /* Texto más pequeño para que no se corte tanto */
        padding: 2px 3px;
    }

    /* Cabecera del calendario más compacta */
    .cal-header-mes h3 {
        font-size: 1.1em;
    }

    .cal-dias-semana span {
        font-size: 0.7em; /* Nombres de días (Lun, Mar...) más pequeños */
    }

    /* Botones de acción a ancho completo en móvil */
    .btn-agregar-eval {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ================================================================
   SOPORTE MÓVIL PARA CALENDARIO 
   ================================================================ */

/* Leyenda oculta en PC, visible en móvil */
.cal-leyenda { display: none; justify-content: center; gap: 15px; margin-top: 20px; font-size: 0.85em; color: var(--texto-bloqueado); }
.cal-leyenda .leyenda-item { display: flex; align-items: center; gap: 5px; font-weight: bold; }
.cal-leyenda .punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.punto.evaluacion { background-color: #d9534f; }
.punto.estudio { background-color: #4a90e2; }
.punto.receso { background-color: var(--color-verde-opt); }

/* Estilos de la lista dentro del Modal Móvil */
.modal-evento-item { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 12px 0; border-bottom: 1px solid var(--borde-tarjeta); 
}
.modal-evento-item:last-child { border-bottom: none; }
.modal-evento-color { width: 14px; height: 14px; border-radius: 50%; margin-right: 12px; flex-shrink: 0; }

@media (max-width: 768px) {
    
.cal-leyenda { display: flex; justify-content: center; gap: 15px; margin-top: 20px; font-size: 0.85em; color: var(--texto-bloqueado); }
.cal-leyenda .leyenda-item { display: flex; align-items: center; gap: 5px; font-weight: bold; }
.cal-leyenda .punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.punto.evaluacion { background-color: #d9534f; }
.punto.estudio { background-color: #4a90e2; }
.punto.receso { background-color: var(--color-verde-opt); }
.btn-borrar-metas {
    
}

.cal-evento {
    width: 100% !important;
    min-width: 0 !important; 
    height: 6px !important;
    min-height: 6px !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 3px;
    display: block;
    box-sizing: border-box;
}
}

/* =========================
   CALCULADORA DE NOTAS 
   ==========================*/

.calc-header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 1200px;              
    margin: 0 auto;              
    padding: 30px 20px 15px 20px;   
    box-sizing: border-box;
    width: 100%;
}

.calc-titulo-wrap { display: flex; flex-direction: column; gap: 4px; }
.calc-titulo { font-family: var(--font-titulos); color: var(--color-naranjo); font-size: 2em; margin: 0; }
.calc-subtitulo { font-size: 0.9em; color: var(--texto-bloqueado); }

.calc-btn-nuevo {
    white-space: nowrap; border-color: var(--color-naranjo) !important;
    color: var(--color-naranjo) !important; flex-shrink: 0;
}
.calc-btn-nuevo:hover { background: var(--color-naranjo) !important; color: #fff !important; }

/* --- Pestañas (Tabs) estilo carpeta --- */
.calc-tabs-wrap {
    padding: 20px 50px 0 50px;
    border-bottom: 2px solid var(--borde-bloqueado); /* Línea base sólida */
    margin-top: 15px;
    display: flex;
}

.calc-tabs { display: flex; gap: 5px; align-items: flex-end; }

.calc-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    background: var(--bg-bloqueado);
    border: 2px solid transparent;
    border-bottom: none;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--texto-bloqueado);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    position: relative;
    bottom: -2px;
    min-width: 100px;
}

.calc-tab span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calc-tab:hover { color: var(--texto-principal); background: rgba(0,0,0,0.05); }
body.dark-mode .calc-tab:hover { background: rgba(255,255,255,0.05); }

.calc-tab.activo {
    color: var(--color-naranjo);
    background: var(--bg-principal);
    border-color: var(--borde-bloqueado);
    border-bottom-color: var(--bg-principal); 
}

.calc-tab-acciones { 
    display: flex; gap: 2px; 
    opacity: 0; 
    pointer-events: none; /* Evita clics fantasmas */
    transition: opacity 0.15s; 
}
.calc-tab.activo .calc-tab-acciones { 
    opacity: 1; 
    pointer-events: auto; /* Reactiva el botón en la pestaña activa */
}

.calc-tab-btn {
    background: none; border: none; cursor: pointer; padding: 2px 5px;
    border-radius: 4px; font-size: 0.8em; color: var(--texto-bloqueado); transition: all 0.15s;
}
.calc-tab-btn:hover { background: var(--bg-bloqueado); color: var(--texto-principal); }
.calc-tab-btn.peligro:hover { background: rgba(217,83,79,0.12); color: #d9534f; }

/* --- Cuerpo Principal (Layout Compacto) --- */
.calc-body { padding: 30px 50px 50px 50px; }
.calc-container { display: flex; gap: 40px; align-items: flex-start; max-width: 1200px; margin: 0 auto; }

.calc-panel-izq { 
    flex: 1.2; 
    background: var(--bg-tarjeta);
    padding: 25px; 
    border-radius: 12px;
    border: 1px solid var(--borde-tarjeta);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.calc-panel-der { 
    flex: 0.8; position: sticky; top: 20px; 
    background: var(--bg-tarjeta);
    border: 2px solid rgba(240, 80, 50, 0.3); /* Borde destacado UAH */
    padding: 25px; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* --- Filas e Inputs Apretados --- */
.calc-header-filas { 
    display: flex; gap: 10px; font-weight: bold; font-size: 0.85em; 
    color: var(--texto-bloqueado); margin-bottom: 10px; padding-bottom: 8px; 
    border-bottom: 1px solid var(--borde-tarjeta); 
}

.calc-fila { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }

.input-calc {
    padding: 10px; border: 1px solid var(--borde-bloqueado);
    border-radius: 6px; font-family: inherit; background: var(--bg-principal);
    color: var(--texto-principal); transition: all 0.2s; box-sizing: border-box;
}
.input-calc:focus { outline: none; border-color: var(--color-naranjo); box-shadow: 0 0 0 3px rgba(240, 80, 50, 0.1); }

/* Control exacto del ancho de los inputs */
.calc-fila .input-calc:nth-child(2) { flex: 1; } /* Nombre de evaluación */
.calc-fila .val-nota { width: 90px; text-align: center; }
.calc-fila .val-peso { width: 90px; text-align: center; }

.btn-agregar-eval {
    display: inline-block; padding: 10px 20px; margin-top: 15px; background: transparent;
    border: 2px dashed var(--borde-bloqueado); color: var(--texto-bloqueado);
    border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s;
}
#vista-calendario .calc-panel-der .btn-accion {
        flex: none !important;
        width: auto !important;
    }
.btn-agregar-eval:hover { border-color: var(--color-naranjo); color: var(--color-naranjo); background: rgba(240, 80, 50, 0.05); }

.btn-eliminar-fila {
    background: transparent; color: var(--texto-bloqueado); border: none;
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s;
}
.btn-eliminar-fila:hover { background: rgba(217, 83, 79, 0.1); color: #d9534f; }

/* --- Resumen y Alertas --- */
.calc-stat { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1.1em; }
.calc-alerta-roja    { background: rgba(217, 83, 79, 0.1) !important; color: #d9534f; border: 1px solid rgba(217, 83, 79, 0.3); border-radius: 8px; padding: 15px; text-align: center; font-size: 0.9em; }
.calc-alerta-verde   { background: rgba(92, 184, 92, 0.1) !important; color: #5cb85c; border: 1px solid rgba(92, 184, 92, 0.3); border-radius: 8px; padding: 15px; text-align: center; font-size: 0.9em; }
.calc-alerta-naranja { background: rgba(240, 80, 50, 0.1) !important; color: var(--color-naranjo); border: 1px solid rgba(240, 80, 50, 0.3); border-radius: 8px; padding: 15px; text-align: center; font-size: 0.9em; }

/* --- Drag & Drop --- */
.drag-col-header { width: 20px; flex-shrink: 0; }
.drag-handle {
    width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    cursor: grab; color: var(--borde-bloqueado); font-size: 1.1em; transition: color 0.15s;
}
.drag-handle:hover { color: var(--texto-bloqueado); }
.calc-fila.dragging { opacity: 0.4; }
.calc-fila.drag-over { border-top: 2px solid var(--color-naranjo); }

/* --- Responsive Calculadora --- */
@media (max-width: 768px) {
    /* Cabecera y botón Nuevo Ramo */
    .calc-header-section { 
        padding: 20px 20px 0 20px; 
        flex-direction: column; /* Apila el título y el botón */
        align-items: stretch;
        gap: 15px;
    }
    .calc-btn-nuevo { width: 100%; text-align: center; padding: 12px; }
    }
    /* Pestañas scrolleables para que no se aprieten */
    .calc-tabs-wrap { 
        padding: 15px 20px 0 20px; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
    }
    .calc-tabs { min-width: max-content; padding-bottom: 2px; }

    /* Contenedores generales */
    .calc-body { padding: 20px 15px 40px 15px; }
    .calc-container { flex-direction: column; gap: 25px; }
    .calc-panel-der, .calc-panel-izq { width: 100%; box-sizing: border-box; padding: 15px; }

    .calc-header-filas { display: none; } 
    
    .calc-fila {
        display: grid;
        grid-template-columns: 20px 1fr 1fr 32px; 
        gap: 10px;
        padding: 12px 10px;
        background: rgba(0,0,0,0.03); 
        border-radius: 8px;
        border: 1px solid var(--borde-tarjeta);
        margin-bottom: 12px;
    }
    body.dark-mode .calc-fila { background: rgba(255,255,255,0.03); }
    
    /* Piso 1 */
    .drag-handle { grid-column: 1; grid-row: 1; }
    .calc-fila .input-calc:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; width: 100%; } 
    .btn-eliminar-fila { grid-column: 4; grid-row: 1; }
    
    /* Piso 2 */
    .calc-fila .val-nota { grid-column: 2; grid-row: 2; width: 100%; }
    .calc-fila .val-peso { grid-column: 3; grid-row: 2; width: 100%; }
    .calc-resumen > div > div { flex-wrap: wrap; gap: 5px; }


/* --- Modales de Calculadora --- */
.modal-fondo { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); z-index: 3000; 
    display: flex; justify-content: center; align-items: center; 
    backdrop-filter: blur(3px);
}
.modal-caja { 
    background: var(--bg-principal); padding: 25px; border-radius: 12px; 
    width: 90%; max-width: 400px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
    border: 1px solid var(--borde-tarjeta);
}

/* ====================
   SIMULADOR SEMESTRAL
   ====================*/
.sim-fases-wrap {
    display: flex; gap: 10px; margin-bottom: 20px;
    background: var(--bg-tarjeta); padding: 10px; border-radius: 12px;
    border: 1px solid var(--borde-tarjeta);
}

.sim-fase {
    flex: 1; text-align: center; padding: 10px; font-weight: bold;
    color: var(--texto-bloqueado); border-radius: 8px; transition: all 0.3s;
}

.sim-fase.activa { background: var(--color-naranjo); color: #fff; }

.sim-alerta { padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 0.9em; }
.sim-alerta.neutral { background: var(--bg-bloqueado); color: var(--texto-principal); }
.sim-alerta.peligro { background: rgba(217, 83, 79, 0.1); color: #d9534f; border: 1px solid rgba(217, 83, 79, 0.3); }
.sim-alerta.exito   { background: rgba(92, 184, 92, 0.1); color: #5cb85c; border: 1px solid rgba(92, 184, 92, 0.3); }


.estado-cursando {
    background-color: var(--bg-tarjeta) !important;
    color: var(--texto-principal) !important;
    border: 2px solid #4a90e2 !important; 
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
}
.estado-cursando .ramo-creditos { background-color: rgba(74, 144, 226, 0.1) !important; color: #4a90e2; }
.estado-cursando::after {
    content: '📚'; position: absolute; bottom: 8px; right: 10px; font-size: 1.2em;
}

@media (max-width: 768px) {
    #vista-simulador { padding: 20px 15px !important; }
    .sim-fases-wrap { flex-direction: column; }
    #sim-panel-creditos > div { flex-direction: column; gap: 15px; text-align: center; }
    #btn-exportar-malla {
        flex: none;
        width: auto;
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* COLOR PERSONALIZADO */
.custom-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tarjeta);
    padding: 5px 12px;
    border-radius: 15px;
    border: 1px solid var(--borde-tarjeta);
}

#colorPicker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#colorPicker::-webkit-color-swatch {
    border-radius: 50%;
    border: 2px solid #fff;
}