/* =================================================================
   SEEM - SISTEMA DE DISENO
   Espaciado, bordes, sombras, transiciones y layout.
   ================================================================= */

:root {
    /* === ESPACIADO (base 4px) === */
    --seem-espacio-1: 0.25rem;    /* 4px */
    --seem-espacio-2: 0.5rem;     /* 8px */
    --seem-espacio-3: 0.75rem;    /* 12px */
    --seem-espacio-4: 1rem;       /* 16px */
    --seem-espacio-5: 1.25rem;    /* 20px */
    --seem-espacio-6: 1.5rem;     /* 24px */
    --seem-espacio-8: 2rem;       /* 32px */
    --seem-espacio-10: 2.5rem;    /* 40px */
    --seem-espacio-12: 3rem;      /* 48px */

    /* === BORDES === */
    --seem-radio-sm: 0.25rem;     /* 4px */
    --seem-radio-md: 0.5rem;      /* 8px */
    --seem-radio-lg: 0.75rem;     /* 12px */
    --seem-radio-full: 9999px;

    /* === SOMBRAS === */
    --seem-sombra-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --seem-sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
    --seem-sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);

    /* === TRANSICIONES === */
    --seem-transicion-duracion-rapida: 150ms;
    --seem-transicion-duracion-normal: 300ms;
    --seem-transicion-duracion-lenta: 500ms;
    --seem-transicion-ease-default: ease-in-out;
    --seem-transicion-ease-empuje: cubic-bezier(0.4, 0, 0.2, 1);

    --seem-transicion-rapida: var(--seem-transicion-duracion-rapida) var(--seem-transicion-ease-default);
    --seem-transicion-normal: var(--seem-transicion-duracion-normal) var(--seem-transicion-ease-default);
    --seem-transicion-lenta: var(--seem-transicion-duracion-lenta) var(--seem-transicion-ease-default);

    /* === Z-INDEX === */
    --seem-z-base: 0;
    --seem-z-contenido: 1;
    --seem-z-dropdown: 50;
    --seem-z-sticky: 100;
    --seem-z-header: 200;
    --seem-z-modal: 300;
    --seem-z-overlay: 400;
    --seem-z-tooltip: 500;

    /* === LAYOUT SEEM === */
    --seem-sidebar-ancho: 220px;
    --seem-tamano-avatar: 36px;
    --seem-header-movil-altura: 56px;
}

/* =================================================================
   RESET BASICO
   ================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

/* =================================================================
   LAYOUT SIDEBAR LATERAL (Escritorio)
   El header funciona como sidebar fija a la izquierda
   ================================================================= */
body {
    display: grid;
    grid-template-columns: var(--seem-sidebar-ancho) 1fr;
    min-height: 100vh;
    background: var(--seem-color-fondo);
    color: var(--seem-color-tinta);
}

/* === SIDEBAR (HEADER) === */
#cabecera-principal {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--seem-sidebar-ancho);
    height: 100vh;
    background: var(--seem-color-tinta);
    color: var(--seem-color-papel);
    display: flex;
    flex-direction: column;
    z-index: var(--seem-z-header);
    overflow-y: auto;
    overflow-x: hidden;
}

.cabecera__contenedor {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cabecera__logo {
    padding: var(--seem-espacio-6) var(--seem-espacio-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cabecera__logo-animado{
    font-family: var(--seem-fuente-mono);
    letter-spacing: -0.05em;
    font-size: 2.25rem;
    animation: seem-pulso-iki 2s ease-in-out infinite;
    color: var(--seem-color-fondo);
}

.cabecera__logo-img {
    height: 28px;
    width: auto;
}

.cabecera__nav {
    display: flex;
    flex-direction: column;
    padding: var(--seem-espacio-4) 0;
    flex: 1;
    gap: 0;
}

.cabecera__nav-link {
    display: flex;
    align-items: center;
    gap: var(--seem-espacio-3);
    padding: var(--seem-espacio-3) var(--seem-espacio-4);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: var(--seem-texto-sm);
    transition: all var(--seem-transicion-rapida);
    border-left: 3px solid transparent;
}
.cabecera__nav-link > span{
    color: var(--seem-color-fondo);
}
.cabecera__nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--seem-color-papel);
}

.cabecera__nav-link.activo {
    background: rgba(255, 255, 255, 0.08);
    color: var(--seem-color-papel);
    border-left-color: var(--seem-acento);
}

.cabecera__acciones {
    padding: var(--seem-espacio-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.cabecera__boton-tema {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: var(--seem-espacio-2);
    cursor: pointer;
    border-radius: var(--seem-radio-sm);
    transition: all var(--seem-transicion-rapida);
    width: 100%;
}

.cabecera__boton-tema:hover {
    border-color: var(--seem-acento);
    color: var(--seem-acento);
}

.cabecera__hamburguesa {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--seem-espacio-2);
}

.cabecera__hamburguesa-linea {
    width: 24px;
    height: 2px;
    background: var(--seem-color-papel);
    transition: transform var(--seem-transicion-normal);
}

/* === CONTENIDO PRINCIPAL === */
#contenido_principal {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: radial-gradient(var(--seem-color-gris-300) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: var(--seem-color-fondo);
}

/* === FOOTER EN SIDEBAR === */
#pie-principal {
    position: fixed;
    left: 0;
    bottom: 0;
    width: var(--seem-sidebar-ancho);
    background: var(--seem-color-tinta);
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: calc(var(--seem-z-header) + 1);
}

.pie__contenedor {
    padding: var(--seem-espacio-4);
}

.pie__marca {
    display: none;
}

.pie__columnas {
    display: flex;
    flex-direction: column;
    gap: var(--seem-espacio-4);
}

.pie__columna {
    display: flex;
    flex-direction: column;
    gap: var(--seem-espacio-2);
}

.pie__titulo {
    font-size: 0.625rem;
    font-weight: var(--seem-peso-negrita);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: var(--seem-espacio-1);
}

.pie__texto {
    font-size: var(--seem-texto-xs);
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.pie__inferior {
    display: flex;
    flex-direction: column;
    gap: var(--seem-espacio-2);
    padding-top: var(--seem-espacio-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--seem-espacio-3);
}

.pie__copyright {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.3);
}

.pie__chaska img {
    height: 6.25rem;
    filter: brightness(10);
    opacity: 0.4;
    transition: opacity var(--seem-transicion-rapida);
}

.pie__chaska:hover img {
    opacity: 0.8;
}

/* =================================================================
   COMPONENTES COMUNES
   ================================================================= */

/* Contenedor generico */
.contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--seem-espacio-4);
}

.contenedor--estrecho {
    max-width: 800px;
}

.contenedor--ancho {
    max-width: 1400px;
}

/* Botones base */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--seem-espacio-2);
    padding: var(--seem-espacio-2) var(--seem-espacio-4);
    font-weight: var(--seem-peso-medio);
    font-size: var(--seem-texto-sm);
    cursor: pointer;
    transition: all var(--seem-transicion-rapida);
    border: 1px solid transparent;
    border-radius: var(--seem-radio-sm);
}

.boton--primario {
    background-color: var(--seem-color-tinta);
    color: var(--seem-color-papel);
    box-shadow: var(--seem-sombra-sm);
}

.boton--primario:hover {
    transform: translateY(-1px);
    box-shadow: var(--seem-sombra-md);
}

.boton--secundario {
    background-color: var(--seem-color-papel);
    border-color: var(--seem-color-gris-300);
    color: var(--seem-color-tinta);
}

.boton--secundario:hover {
    border-color: var(--seem-color-tinta);
    background-color: var(--seem-color-gris-100);
}

.boton--fantasma {
    background: transparent;
    color: var(--seem-color-gris-600);
}

.boton--fantasma:hover {
    background: var(--seem-color-gris-100);
    color: var(--seem-color-tinta);
}

/* Campos de entrada */
.campo-entrada {
    width: 100%;
    padding: var(--seem-espacio-2) var(--seem-espacio-3);
    border: 1px solid var(--seem-color-gris-300);
    border-radius: var(--seem-radio-sm);
    background: var(--seem-color-papel);
    font-family: inherit;
    font-size: var(--seem-texto-sm);
    transition: border-color var(--seem-transicion-rapida), box-shadow var(--seem-transicion-rapida);
}

.campo-entrada:focus {
    outline: none;
    border-color: var(--seem-color-tinta);
    box-shadow: 0 0 0 3px var(--seem-color-gris-100);
}

.campo-entrada:disabled {
    background-color: var(--seem-color-fondo);
    cursor: not-allowed;
    opacity: 0.6;
}

select.campo-entrada {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Tarjetas */
.tarjeta {
    background: var(--seem-color-papel);
    border: 1px solid var(--seem-color-gris-200);
    border-radius: var(--seem-radio-md);
    overflow: hidden;
}

.tarjeta__cabecera {
    padding: var(--seem-espacio-3) var(--seem-espacio-4);
    background: var(--seem-color-gris-100);
    border-bottom: 1px solid var(--seem-color-gris-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tarjeta__titulo {
    font-size: var(--seem-texto-xs);
    font-weight: var(--seem-peso-negrita);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--seem-color-gris-600);
}

.tarjeta__cuerpo {
    padding: var(--seem-espacio-4);
}

/* Formularios especiales (corrección y excepción) */
.formulario-correccion,
.formulario-excepcion {
    border: 1px solid var(--seem-color-gris-300);
    border-radius: var(--seem-radio-md);
    overflow: hidden;
    box-shadow: var(--seem-sombra-sm);
    background: var(--seem-color-papel);
}

.formulario-excepcion {
    border-color: var(--seem-color-alerta);
}

.correccion-encabezado,
.excepcion-encabezado {
    padding: var(--seem-espacio-2) var(--seem-espacio-4);
    display: flex;
    align-items: center;
    gap: var(--seem-espacio-2);
    font-weight: var(--seem-peso-negrita);
    font-size: var(--seem-texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--seem-color-gris-200);
}

.excepcion-encabezado {
    background: var(--seem-color-alerta-fondo);
    color: var(--seem-color-alerta-texto);
}

.correccion-cuerpo,
.excepcion-cuerpo {
    padding: var(--seem-espacio-4);
}

.form-campo {
    margin-bottom: var(--seem-espacio-4);
}

.form-campo:last-child {
    margin-bottom: 0;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--seem-espacio-3);
}

@media (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.medallas-caja {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seem-espacio-2);
    padding: var(--seem-espacio-3);
    border: 1px dashed var(--seem-color-gris-300);
    border-radius: var(--seem-radio-sm);
    background: var(--seem-color-gris-100);
    min-height: 60px;
}

.medalla-seleccionable {
    display: inline-flex;
    align-items: center;
    gap: var(--seem-espacio-1);
    padding: var(--seem-espacio-1) var(--seem-espacio-2);
    border-radius: var(--seem-radio-sm);
    font-size: var(--seem-texto-xs);
    font-family: var(--seem-fuente-mono);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--seem-color-gris-300);
    background: var(--seem-color-papel);
    color: var(--seem-color-gris-600);
    user-select: none;
}

.medalla-seleccionable:hover {
    border-color: var(--seem-color-acento);
    color: var(--seem-color-tinta);
}

.medalla-seleccionable.seleccionada {
    background: var(--seem-color-acento);
    border-color: var(--seem-color-acento);
    color: var(--seem-color-papel);
}

.medalla-seleccionable[data-tipo="archivo"].seleccionada {
    background: var(--seem-color-exito);
    border-color: var(--seem-color-exito);
}

.medalla-seleccionable[data-tipo="hecho"] {
    border-color: var(--seem-color-condicionado);
    border-style: dashed;
}

.medalla-seleccionable[data-tipo="hecho"].seleccionada {
    background: var(--seem-color-condicionado);
    border-color: var(--seem-color-condicionado);
    border-style: solid;
}

.form-pie {
    padding: var(--seem-espacio-3) var(--seem-espacio-4);
    background: var(--seem-color-gris-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--seem-espacio-2);
    border-top: 1px solid var(--seem-color-gris-200);
}

/* Etiquetas de formulario */
.etiqueta {
    display: block;
    font-size: var(--seem-texto-xs);
    font-weight: var(--seem-peso-negrita);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--seem-color-gris-600);
    margin-bottom: var(--seem-espacio-1);
}

/* =================================================================
   UTILIDADES DE LAYOUT
   ================================================================= */

/* Flexbox */
.flex { display: flex; }
.flex--centro { justify-content: center; align-items: center; }
.flex--entre { justify-content: space-between; }
.flex--columna { flex-direction: column; }

/* Grid */
.grilla { display: grid; gap: var(--seem-espacio-4); }
.grilla--2 { grid-template-columns: repeat(2, 1fr); }
.grilla--3 { grid-template-columns: repeat(3, 1fr); }
.grilla--4 { grid-template-columns: repeat(4, 1fr); }
.grilla--auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* Espaciado */
.mt-1 { margin-top: var(--seem-espacio-1); }
.mt-2 { margin-top: var(--seem-espacio-2); }
.mt-4 { margin-top: var(--seem-espacio-4); }
.mt-6 { margin-top: var(--seem-espacio-6); }
.mt-8 { margin-top: var(--seem-espacio-8); }

.mb-1 { margin-bottom: var(--seem-espacio-1); }
.mb-2 { margin-bottom: var(--seem-espacio-2); }
.mb-4 { margin-bottom: var(--seem-espacio-4); }
.mb-6 { margin-bottom: var(--seem-espacio-6); }
.mb-8 { margin-bottom: var(--seem-espacio-8); }

.p-1 { padding: var(--seem-espacio-1); }
.p-2 { padding: var(--seem-espacio-2); }
.p-4 { padding: var(--seem-espacio-4); }
.p-6 { padding: var(--seem-espacio-6); }
.p-8 { padding: var(--seem-espacio-8); }

/* Scrollbar sutil */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--seem-color-gris-300) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--seem-color-gris-300);
    border-radius: var(--seem-radio-full);
}

/* =================================================================
   RESPONSIVE MOVIL
   ================================================================= */
@media (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }

    #cabecera-principal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: var(--seem-header-movil-altura);
        flex-direction: row;
        align-items: center;
        padding: 0 var(--seem-espacio-4);
    }

    .cabecera__contenedor {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .cabecera__logo {
        padding: 0;
        border: none;
    }

    .cabecera__nav,
    .cabecera__acciones {
        display: none;
    }

    .cabecera__hamburguesa {
        display: flex;
    }

    #contenido_principal {
        margin-top: var(--seem-header-movil-altura);
        grid-column: auto;
    }

    #pie-principal {
        position: relative;
        width: 100%;
        background: var(--seem-color-tinta);
    }

    .pie__columnas {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pie__inferior {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .grilla--2,
    .grilla--3,
    .grilla--4 {
        grid-template-columns: 1fr;
    }
}