/*!
 * Mode.css — Microdom Mode
 * MIT License
 * Copyright (c) 2025 Silvio Corigliano
 * https://github.com/microdom/mode.css
 * https://microdom.dev/mode
 */
/* ==========================================================================
   FASE 0: TOKENS DE DISEÑO (Variables CSS reescribibles por el usuario)
   ========================================================================== */
:root {
  /* Tipografía */
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --line-height: 1.6;
  
  /* Escala Tipográfica Armónica */
  --size-h1: 2.5rem;
  --size-h2: 2rem;
  --size-h3: 1.5rem;
  --size-body: 1rem;
  --size-small: 0.85rem;
  
  /* Colores Neutros de Base */
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-muted: #4b5563;
  --color-border: #e5e7eb;
  --color-accent: #111827;
  --color-accent-text: #ffffff;

  /* Espaciados y Sistema de Caja */
  --spacing: 1.5rem;
  --radius: 6px;
  
  /* Layout Maestro Homologado */
  --max-width: 1200px;         /* Límite para el contenido real */
  --screen-padding: 1.5rem;    /* Margen lateral homologado para toda la web */
}

/* ==========================================================================
   FASE 1: ELEMENTOS NATIVOS POR DEFAULT (Cero clases, Cero atributos)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-main);
  font-size: var(--size-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  padding: 0;
}

/* Jerarquía Tipográfica de Textos Nativos */
h1, h2, h3 { 
  color: var(--color-accent); 
  font-weight: 700; 
  line-height: 1.2; 
  margin-bottom: calc(var(--spacing) * 0.75); 
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p, ul, ol { 
  margin-bottom: var(--spacing); 
  color: var(--color-text); 
}

small { font-size: var(--size-small); color: var(--color-muted); }
a { color: inherit; text-decoration: none; transition: opacity 0.2s; &:hover { opacity: 0.8; } }

/* Formulario Nativo Armónico (Recuperado y Consolidado) */
form {
  display: grid;
  gap: calc(var(--spacing) * 0.75);
}

label {
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

input, textarea, select {
  font-family: inherit;
  font-size: var(--size-body);
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  background-color: var(--color-bg);
  width: 100%;
  transition: border-color 0.2s;
  
  &:focus {
    outline: none;
    border-color: var(--color-accent);
  }
}

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

button, input[type="submit"],[role="button"] {
  font-family: inherit;
  font-size: var(--size-body);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.2s;
  width: fit-content;
  
  &:hover { opacity: 0.9; }
}

/* ==========================================================================
   FASE 2: LAYOUT MAESTRO (Header, Main, Footer homologados)
   ========================================================================== */
/* Los tres pilares heredan la misma sangría lateral de pantalla */
body > header,
body > main,
body > footer {
  padding-inline: var(--screen-padding);
}

/* El contenido real se alinea en el centro del eje de la pantalla */
body > header > div,
body > main,
body > footer > div {
  max-width: var(--max-width);
  margin-inline: auto;
}

/* Secciones 100% libres de ancho (Ancladas a tu petición) */
section {
  width: 100%;
  padding-block: calc(var(--spacing) * 2);
  display: flow-root; /* Evita el colapso de márgenes viejo */
}

/* ==========================================================================
   FASE 3: COMPONENTE NAV & MENU MOBILE (Ultra-Micro sin JS)
   ========================================================================== */
body > header {
  border-bottom: 1px solid var(--color-border);
  position: relative;
  
  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 1rem;
  }

  & b { font-size: 1.25rem; font-weight: 800; }

  & nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background-color: var(--color-bg);
    padding: var(--screen-padding);
    border-bottom: 1px solid var(--color-border);
    z-index: 10;
    
    & ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin: 0; }
  }

  & label {
    cursor: pointer; padding: 0.5rem; display: block;
    & span, & span::before, & span::after {
      display: block; width: 22px; height: 2px; background: var(--color-accent); position: relative; transition: 0.2s;
    }
    & span::before { content: ""; top: -6px; position: absolute; }
    & span::after { content: ""; bottom: -6px; position: absolute; }
  }
}

/* Hack CSS para activar menú hamburguesa nativo */
#menu-toggle:checked ~ header {
  & nav { display: flex; }
  & label span { background: transparent; }
  & label span::before { transform: rotate(45deg); top: 0; }
  & label span::after { transform: rotate(-45deg); bottom: 0; }
}

/* ==========================================================================
   FASE 4: COMPONENTE FOOTER
   ========================================================================== */
body > footer {
  border-top: 1px solid var(--color-border);
  font-size: var(--size-small);
  color: var(--color-muted);
  
  & > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 2rem;
    align-items: center;
    
    & ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; }
  }
}

/* ==========================================================================
   FASE 5: ELEMENTOS DE LAYOUT MODULARES (Tus Grillas y Tarjetas Nativas)
   ========================================================================== */

/* Grilla Automática por Defecto (Auto-responsiva) */
[µ-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing);
}

/* Mutación explícita: Grilla de 2 Columnas */
[µ-grid*="-col"] {
  display: grid;
  grid-template-columns: 1fr; /* 1 columna en móvil */
}

/* Estructura para Tarjetas Nativa adentro de Grillas (Hereda todo en Cascada) */
[µ-grid] > article {
  display: flex;
  flex-direction: column;
  padding: var(--spacing);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  
  & header h3 { margin-bottom: 0.5rem; font-size: var(--size-h3); }
  & p { margin-bottom: var(--spacing); font-size: var(--size-body); }
  & footer button { width: 100%; } /* Fuerza al botón a ocupar el ancho de la tarjeta */
}
img {
  max-width: 100%;      /* Evita que la imagen se salga de su contenedor */
  height: auto;         /* Mantiene la proporción nativa */
  display: block;       /* Elimina el espacio fantasma inferior de las etiquetas en línea */
  border-radius: var(--radius); /* Aplica el radio sistémico por default */
}


/* ==========================================================================
   FASE 6: RESPONSIVE AUTOMÁTICO (Media Queries de Estructura)
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --spacing: 2rem;
    --screen-padding: 3rem; /* Los tres pilares se ensanchan en armonía */
  }

  /* El menú móvil muta a barra horizontal de escritorio limpia */
  body > header {
    & label { display: none; }
    & nav {
      display: flex; position: static; padding: 0; border: none;
      & ul { flex-direction: row; gap: 2rem; }
    }
  }

  /* El footer alinea el texto a la izquierda y los links a la derecha */
  body > footer > div {
    flex-direction: row;
    justify-content: space-between;
  }

  /* Activamos las grillas explícitas en pantallas grandes 
  [µ-grid~="2-col"] {
    grid-template-columns: repeat(2, 1fr);
  }
  
  [µ-grid~="3-col"] {
    grid-template-columns: repeat(3, 1fr);
  }*/
}
/* ==========================================================================
   FASE 6: RESPONSIVE COMPACTO (Tu lógica masiva optimizada)
   ========================================================================== */

/* --- TABLETS (Desde 640px) --- */
@media (min-width: 640px) {
  /* Todas las grillas pasan masivamente a 2 columnas de un solo golpe */
  [µ-grid*="-col"] { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  /* Excepción: La de 6 columnas se adapta mejor en 3 celdas en este espacio */
  [µ-grid~="6-col"] { 
    grid-template-columns: repeat(3, 1fr); 
  }
}

/* --- ESCRITORIO ESTÁNDAR (Desde 1024px) --- */
@media (min-width: 1024px) {
  :root { 
    --spacing: 2rem; 
    --screen-padding: 3rem; /* Ensanchamiento de los 3 pilares homologados */
  }

  /* Mutación del Menú Móvil a Barra Horizontal de Escritorio */
  body > header {
    & label { display: none; } /* Desaparece el botón hamburguesa */
    & nav {
      display: flex; position: static; padding: 0; border: none;
      & ul { flex-direction: row; gap: 2rem; }
    }
  }

  /* El footer alinea el texto a la izquierda y los enlaces a la derecha */
  body > footer > div { flex-direction: row; justify-content: space-between; }

  /* ACTIVACIÓN DEL ESPECTRO EXPLÍCITO DE COLUMNAS 
     (Aquí es donde se despliegan las grillas reales en pantallas grandes) */
  [µ-grid~="3-col"] { grid-template-columns: repeat(3, 1fr); }
  [µ-grid~="4-col"] { grid-template-columns: repeat(4, 1fr); }
  [µ-grid~="5-col"] { grid-template-columns: repeat(5, 1fr); }
  [µ-grid~="6-col"] { grid-template-columns: repeat(6, 1fr); gap: calc(var(--spacing) * 0.5);}

  /* Activación matemática para los Sidebars asimétricos */
  [µ-grid~="sidebar-left"]  { grid-template-columns: minmax(260px, 1fr) 3fr; }
  [µ-grid~="sidebar-right"] { grid-template-columns: 3fr minmax(260px, 1fr); }
}