/*
 * Hoja de estilos propia de Metodología IA.
 * Sin recursos externos: la CSP de includes/security_headers.php no permite
 * cargar estilos de cualquier origen (etapa 10 del plan de desarrollo).
 */

:root {
    --color-fondo: #f4f6f9;
    --color-superficie: #ffffff;
    --color-borde: #d7dee6;
    --color-texto: #1f2933;
    --color-texto-suave: #52606d;
    --color-primario: #1d4ed8;
    --color-primario-oscuro: #1739a6;
    --color-exito: #157a4a;
    --color-exito-fondo: #e6f6ee;
    --color-error: #b3261e;
    --color-error-fondo: #fbeae9;
    --color-advertencia: #92600a;
    --color-advertencia-fondo: #fdf1da;
    --color-info: #2a5a8c;
    --color-info-fondo: #e7f0fa;
    --radio: 8px;
    --sombra: 0 1px 3px rgba(20, 30, 45, 0.08), 0 1px 2px rgba(20, 30, 45, 0.06);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: var(--color-primario);
}

.enlace-sutil {
    color: inherit;
    text-decoration: none;
}

/* ------------------------------- Layout -------------------------------- */

.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    flex-wrap: wrap;
}

.cabecera h1 {
    font-size: 1.25rem;
    margin: 0;
}

.cabecera-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.contenedor {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

.panel {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 20px;
}

.panel h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

/* ------------------------------ Formularios ----------------------------- */

.formulario {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.formulario-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.formulario-inline .campo {
    flex: 1 1 200px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campo label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-texto-suave);
}

.etiqueta-justificacion {
    margin-top: 6px;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    font: inherit;
    padding: 9px 10px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    background: var(--color-superficie);
    color: var(--color-texto);
    width: 100%;
}

textarea {
    resize: vertical;
    min-height: 44px;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--color-fondo);
    color: var(--color-texto-suave);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-primario);
    outline-offset: 1px;
}

.contador-caracteres {
    font-size: 0.78rem;
    color: var(--color-texto-suave);
    text-align: right;
}

/* -------------------------------- Botones -------------------------------- */

.boton {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.boton-primario {
    background: var(--color-primario);
    color: #fff;
}

.boton-primario:hover {
    background: var(--color-primario-oscuro);
}

.boton-secundario {
    background: var(--color-superficie);
    color: var(--color-texto);
    border-color: var(--color-borde);
}

.boton-peligro {
    background: var(--color-error-fondo);
    color: var(--color-error);
    border-color: var(--color-error);
}

.boton-pequeno {
    padding: 5px 10px;
    font-size: 0.82rem;
}

.boton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ------------------------------- Mensajes -------------------------------- */

.mensaje {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.mensaje-error {
    background: var(--color-error-fondo);
    color: var(--color-error);
}

.mensaje-exito {
    background: var(--color-exito-fondo);
    color: var(--color-exito);
}

.mensaje-info {
    background: var(--color-info-fondo);
    color: var(--color-info);
}

.mensaje-advertencia {
    background: var(--color-advertencia-fondo);
    color: var(--color-advertencia);
}

.mensaje-campo {
    margin: 0;
}

/* -------------------------------- Etiquetas ------------------------------- */

.etiqueta {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    font-size: 0.78rem;
}

.etiqueta-docente {
    background: var(--color-info-fondo);
    color: var(--color-info);
    border-color: var(--color-info);
}

.etiqueta-nivel-propietario { background: var(--color-exito-fondo); color: var(--color-exito); border-color: var(--color-exito); }
.etiqueta-nivel-editor { background: var(--color-info-fondo); color: var(--color-info); border-color: var(--color-info); }
.etiqueta-nivel-lector { background: var(--color-fondo); color: var(--color-texto-suave); }
.etiqueta-nivel-docente { background: var(--color-advertencia-fondo); color: var(--color-advertencia); border-color: var(--color-advertencia); }

/* -------------------------- Tabla de proyectos ---------------------------- */

.tabla-proyectos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabla-proyectos th,
.tabla-proyectos td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}

.tabla-proyectos th {
    color: var(--color-texto-suave);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.texto-vacio {
    color: var(--color-texto-suave);
    font-style: italic;
}

/* ---------------------------- Indicador de avance -------------------------- */

.indicador-avance {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.item-avance {
    flex: 1 1 130px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-avance-numero {
    font-size: 0.75rem;
    color: var(--color-texto-suave);
}

.item-avance-nombre {
    font-weight: 600;
    font-size: 0.9rem;
}

.item-avance-estado {
    font-size: 0.78rem;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
}

.item-avance.estado-no_iniciada { background: var(--color-fondo); }
.item-avance.estado-no_iniciada .item-avance-estado { background: var(--color-borde); color: var(--color-texto-suave); }

.item-avance.estado-en_curso { border-color: var(--color-primario); }
.item-avance.estado-en_curso .item-avance-estado { background: var(--color-info-fondo); color: var(--color-info); }

.item-avance.estado-cerrada { border-color: var(--color-exito); }
.item-avance.estado-cerrada .item-avance-estado { background: var(--color-exito-fondo); color: var(--color-exito); }

/* ------------------------------ Etapa en curso ----------------------------- */

.acciones-etapa {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.indicador-guardado {
    font-size: 0.82rem;
    color: var(--color-texto-suave);
}

.texto-ayuda {
    color: var(--color-texto-suave);
    font-size: 0.88rem;
}

.texto-problema-inicial {
    white-space: pre-wrap;
}

/* --------------------------- Lista de decisiones --------------------------- */

.lista-decisiones-lectura {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 4px 14px;
    margin: 0;
}

.lista-decisiones-lectura dt {
    font-weight: 600;
    color: var(--color-texto-suave);
    grid-column: 1;
}

.lista-decisiones-lectura dd {
    margin: 0 0 8px;
    grid-column: 2;
}

.lista-decisiones-lectura .texto-justificacion {
    grid-column: 2;
    font-size: 0.85rem;
    color: var(--color-texto-suave);
    font-style: italic;
    margin-top: -4px;
}

.bloque-etapa-cerrada {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-borde);
}

.bloque-etapa-cerrada:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bloque-etapa-cerrada h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
}

/* ------------------------------ Problemas de cierre ------------------------ */

.lista-problemas {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.problema {
    border-radius: var(--radio);
    padding: 12px 14px;
    border: 1px solid;
}

.problema p {
    margin: 6px 0;
}

.problema-bloqueante {
    background: var(--color-error-fondo);
    border-color: var(--color-error);
    color: var(--color-error);
}

.problema-advertencia {
    background: var(--color-advertencia-fondo);
    border-color: var(--color-advertencia);
    color: var(--color-advertencia);
}

.chips-claves {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.chip {
    font: inherit;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
}

.chip-editable {
    cursor: pointer;
    font-weight: 600;
}

.chip-editable:hover {
    background: rgba(0, 0, 0, 0.06);
}

.chip-cerrada {
    opacity: 0.75;
}

/* ------------------------------- Colaboradores ------------------------------ */

.lista-colaboradores {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-colaborador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    flex-wrap: wrap;
}

/* -------------------------------- Asistencia IA ------------------------------ */

.respuesta-ia {
    margin-top: 12px;
    padding: 12px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    white-space: pre-wrap;
}

/* ---------------------------------- Login ------------------------------------ */

.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #1d4ed8 0%, #1739a6 45%, #0f2a73 100%);
}

.login-shell {
    display: flex;
    max-width: 760px;
    width: 100%;
    margin: 20px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(10, 20, 40, 0.35);
    flex-wrap: wrap;
}

.login-hero {
    flex: 1 1 260px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.login-marca {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #fff;
    color: var(--color-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.login-hero h1 {
    margin: 0;
    font-size: 1.4rem;
}

.login-hero p {
    margin: 0;
    opacity: 0.85;
}

.login-caja {
    flex: 1 1 300px;
    background: var(--color-superficie);
    padding: 36px 30px;
}

.login-caja h2 {
    margin-top: 0;
}

.login-registro {
    margin-top: 16px;
    font-size: 0.88rem;
    color: var(--color-texto-suave);
}

/* --------------------------------- Responsivo --------------------------------- */

@media (max-width: 640px) {
    .cabecera {
        flex-direction: column;
        align-items: flex-start;
    }

    .lista-decisiones-lectura {
        grid-template-columns: 1fr;
    }

    .lista-decisiones-lectura dt {
        margin-top: 8px;
    }

    .tabla-proyectos {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .item-colaborador {
        flex-direction: column;
        align-items: flex-start;
    }
}