/* ============================================================
   🧱 LAYOUT BASE DEL SIGv
   Este archivo controla estructura, spacing y helpers globales.
   No incluye estilos de componentes (cards, tablas, headers).
============================================================ */

/* ============================
   RESET Y NORMALIZACIÓN
============================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
    font-family: var(--font-general);
    background: var(--color-fondo);
    color: var(--text-color);
}

/* Mejora del scroll */
body {
    overscroll-behavior-y: none;
}

img {
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* ============================
   CONTENEDOR PRINCIPAL
============================ */
main {
    max-width: 1100px;
    margin: 20px auto 40px;
    padding: 0 16px;
    animation: fadeIn 0.4s ease-in-out;
}

/* Animación suave de entrada */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================
   SECCIONES GENERALES
============================ */
section {
    margin-bottom: 22px;
}

/* Títulos de sección */
section h2,
.section-title {
    font-size: 22px;
    font-weight: 700;
    border-left: 6px solid var(--color-primario);
    padding-left: 10px;
    margin-bottom: 12px;
    color: var(--color-primario);
}

/* Subtítulos opcionales */
.section-subtitle {
    font-size: 13px;
    color: #666;
    margin-top: -6px;
    margin-bottom: 14px;
}

/* ============================
   CONTENEDORES FLUIDOS
============================ */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ============================
   GRIDS GENÉRICOS
============================ */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* Responsive */
@media (max-width: 900px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ============================
   WRAPPERS
============================ */
.flex-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

/* ============================
   ESPACIADOS UTILES
============================ */
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 26px; }

.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; }
.mb-4 { margin-bottom: 26px; }

.p-1 { padding: 6px; }
.p-2 { padding: 12px; }
.p-3 { padding: 18px; }
.p-4 { padding: 26px; }

/* ============================
   COLOR HELPERS
============================ */
.text-primary   { color: var(--color-primario); }
.text-secondary { color: var(--color-secundario); }
.text-muted     { color: #777; }

.bg-primary     { background: var(--color-primario); color: white; }
.bg-secondary   { background: var(--color-secundario); color: white; }

/* ============================
   CARD PLACEHOLDER (sin estilos)
   Las tarjetas reales estarán en cards.css
============================ */
.card {
    background: white;
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra);
    padding: 18px;
}

/* ============================
   ÁREA DE CARGA / EMPTY STATE
============================ */
.empty-state {
    text-align: center;
    padding: 30px 10px;
    color: #777;
    font-size: 15px;
}

/* ============================
   UTILIDADES VARIAS
============================ */
.hidden { display: none !important; }

.center {
    text-align: center;
}

/* Limitar ancho de bloques */
.w-100 { width: 100%; }
.w-50  { width: 50%; }
.w-33  { width: 33%; }

/* ============================
   COMPORTAMIENTO RESPONSIVE GLOBAL
============================ */
@media (max-width: 768px) {
    main {
        padding: 0 12px;
        margin-top: 14px;
    }
}

/*message box containers*/
.msg-box{
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.msg-box.ok{ border-color: rgba(0,160,90,0.25); background: rgba(0,160,90,0.06); }
.msg-box.warn{ border-color: rgba(220,140,0,0.25); background: rgba(220,140,0,0.06); }
.msg-box .title{ font-weight:700; margin-bottom:6px; }
.msg-box ul{ margin: 6px 0 0 18px; }