/* Estilos del planificador.

   Los colores se definen una sola vez como variables (custom properties)
   en :root. El resto del archivo usa var(--nombre), así el modo oscuro solo
   tiene que redefinir las variables, sin repetir reglas. */

:root {
    --fondo: #f4f6f9;
    --superficie: #ffffff;
    --superficie-suave: #eef1f5;
    --borde: #d5dbe3;
    --texto: #1b2430;
    --texto-suave: #556070;
    --texto-tenue: #5f6b7a;
    --acento: #4c5fd5;

    --cursable: #237a35;
    --cursable-fondo: #e6f4ea;
    --rendible: #1a5fb4;
    --rendible-fondo: #e3eefb;
    --bloqueada: #b5400b;
    --bloqueada-fondo: #fdebe1;
    --aprobada: #5f6b7a;
    --aprobada-fondo: #eceff3;
    --error: #b42318;

    /* Los colores de texto tienen contraste de al menos 4.5:1 sobre su
       fondo, el mínimo que pide la norma de accesibilidad WCAG (nivel AA). */

    --radio: 10px;
    --sombra: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);

    color-scheme: light dark;
}

/* Si el sistema operativo está en modo oscuro, se cambian las variables. */
@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #12161c;
        --superficie: #1b2129;
        --superficie-suave: #232a34;
        --borde: #313a46;
        --texto: #e6e9ee;
        --texto-suave: #aab3c0;
        --texto-tenue: #8590a0;
        --acento: #8c9bff;

        --cursable: #51cf66;
        --cursable-fondo: #1d3324;
        --rendible: #5ea8ff;
        --rendible-fondo: #19293d;
        --bloqueada: #ff8c4a;
        --bloqueada-fondo: #3a2418;
        --aprobada: #8590a0;
        --aprobada-fondo: #20262e;
        --error: #ff8a80;

        --sombra: none;
    }
}

/* --- Base ------------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

/* El atributo hidden esconde un elemento, pero cualquier regla con display
   (por ejemplo display: block) le gana. Esto hace que hidden gane siempre. */
[hidden] {
    display: none !important;
}

body {
    margin: 0 auto;
    max-width: 1040px;
    padding: 24px 16px 48px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
    color: var(--texto);
    background: var(--fondo);
}

/* Contorno visible al navegar con teclado (Tab), no al hacer clic. */
:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}

/* --- Encabezado ------------------------------------------------------------ */

header h1 {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    letter-spacing: -0.02em;
}

header .carrera {
    margin: 4px 0 0;
    font-weight: 600;
    color: var(--acento);
}

header .ayuda {
    margin: 8px 0 0;
    color: var(--texto-suave);
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.acciones button,
dialog button {
    padding: 8px 14px;
    font: inherit;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}

.acciones button:hover,
dialog button:hover {
    filter: brightness(1.1);
}

/* "Compartir progreso" es secundario: borde y texto con el acento. */
#compartir,
dialog button.secundario {
    color: var(--acento);
    background: transparent;
    border: 2px solid var(--acento);
}

/* "Publicar progreso" usa el azul de LinkedIn para que se reconozca.
   Blanco sobre #0a66c2 da 5,9:1, así que sirve en los dos modos. */
#publicar,
#publicar-linkedin {
    color: #ffffff;
    background: #0a66c2;
    border: 2px solid #0a66c2;
}

/* --- Diálogo de publicación ------------------------------------------------ */

dialog {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    padding: 20px;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

dialog::backdrop {
    background: rgb(0 0 0 / 55%);
}

dialog h2 {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

#vista-imagen {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 12px;
    border-radius: 8px;
}

#texto-publicacion {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--texto);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 6px;
    resize: vertical;
}

dialog label {
    font-size: 0.875rem;
    font-weight: 600;
}

.opcion {
    display: block;
    margin-top: 10px;
}

.consejo,
.estado {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.estado:empty {
    display: none;
}

.estado {
    color: var(--texto);
    font-weight: 600;
}

dialog .botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* Aviso del modo compartido (solo lectura). */
.aviso {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--rendible-fondo);
    border: 1px solid var(--rendible);
    border-radius: var(--radio);
}

.aviso a {
    margin-left: 4px;
    font-weight: 600;
    color: var(--rendible);
}

/* --- Resumen --------------------------------------------------------------- */

#resumen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 24px 0 12px;
}

#resumen:empty {
    display: none;
}

.dato {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-top: 4px solid var(--color-dato, var(--borde));
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 12px 16px;
}

.dato strong {
    display: block;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--color-dato, var(--texto));
}

.dato span {
    font-size: 0.875rem;
    color: var(--texto-suave);
}

.dato.cursable { --color-dato: var(--cursable); }
.dato.rendible { --color-dato: var(--rendible); }
.dato.aprobada { --color-dato: var(--acento); }
.dato.promedio { --color-dato: var(--texto); }

.progreso {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 999px;
    background: var(--superficie-suave);
    overflow: hidden;
}

.progreso div {
    height: 100%;
    background: var(--acento);
    transition: width 0.3s ease;
}

#resumen .mensaje {
    grid-column: 1 / -1;
}

/* Mensaje de feedback: ocupa todo el ancho, arriba de las tarjetas. */
.feedback {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 16px;
    font-weight: 600;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 5px solid var(--acento);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

/* --- Leyenda --------------------------------------------------------------- */

.leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--texto-suave);
}

.leyenda li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-leyenda);
}

.leyenda .cursable { --color-leyenda: var(--cursable); }
.leyenda .rendible { --color-leyenda: var(--rendible); }
.leyenda .bloqueada { --color-leyenda: var(--bloqueada); }
.leyenda .aprobada { --color-leyenda: var(--aprobada); }

/* --- Plan ------------------------------------------------------------------ */

.nivel h2 {
    margin: 32px 0 12px;
    padding-bottom: 6px;
    font-size: 1.25rem;
    border-bottom: 2px solid var(--borde);
}

.materias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.materia {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 5px solid var(--color-materia, var(--borde));
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 14px 16px;
}

/* Cada situación define su color una vez; borde y etiqueta lo reutilizan. */
.materia.cursable { --color-materia: var(--cursable); --fondo-materia: var(--cursable-fondo); }
.materia.rendible { --color-materia: var(--rendible); --fondo-materia: var(--rendible-fondo); }
.materia.bloqueada { --color-materia: var(--bloqueada); --fondo-materia: var(--bloqueada-fondo); }
.materia.aprobada { --color-materia: var(--aprobada); --fondo-materia: var(--aprobada-fondo); }

.materia.aprobada {
    background: var(--superficie-suave);
}

.materia h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.materia .numero {
    margin-right: 4px;
    color: var(--texto-tenue);
    font-weight: 500;
}

.controles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.materia select {
    padding: 4px 8px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 6px;
    cursor: pointer;
}

.requisitos {
    margin: 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.llave {
    margin: 0;
    font-size: 0.8rem;
    color: var(--texto-tenue);
}

.llave::before {
    content: "🔑 ";
}

.llave.ninguna::before {
    content: none;
}

/* El resultado se muestra como una etiqueta con el color de la situación. */
.resultado {
    margin: 4px 0 0;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-materia, var(--texto));
    background: var(--fondo-materia, transparent);
    border-radius: 6px;
}

.resultado:empty {
    display: none;
}

.mensaje.error {
    color: var(--error);
    font-weight: 600;
}

/* --- Celular --------------------------------------------------------------- */

@media (max-width: 720px) {
    #resumen {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dato {
        padding: 10px;
    }

    .dato strong {
        font-size: 1.5rem;
    }
}