/**
 * ============================================
 * ID: CSS-MAIN-001 | Estilos principales y utilidades
 * Descripcion: Clases globales y utilidades reutilizables
 * Archivo: main.css
 * ============================================
 */

/* ============================================
   ID: MAIN-001 | Contenedor de la aplicacion
   ============================================ */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================
   ID: MAIN-002 | Contenido principal
   Descripcion: Flex-grow para que el footer quede abajo
   ============================================ */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================
   ID: MAIN-003 | Contenedor generico
   Descripcion: Wrapper para centrar contenido
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ============================================
   ID: UTIL-001 | Clase para ocultar visualmente
   Descripcion: Oculta elementos visualmente pero los mantiene
   accesibles para lectores de pantalla
   ============================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   ID: UTIL-002 | Clase para focus visible
   Descripcion: Estilos de foco accesibles
   ============================================ */
.focus-visible:focus-visible,
:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* ============================================
   ID: UTIL-003 | Truncar texto
   ============================================ */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   ID: UTIL-004 | Centrar contenido con flexbox
   ============================================ */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}