/* ======================================================
   STYLES.CSS (BASE GLOBAL)

   RESUMEN:
   - Reset general
   - Variables globales
   - Layout base
   - Tipografía base
   - Utilidades simples

   NOTA:
   - NO incluye módulos
   - Cada componente tiene su propio CSS
====================================================== */


/* ======================================================
   RESET
====================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/* ======================================================
   VARIABLES (THEME)
====================================================== */

:root{

  --bg:#f4f6f8;

  --text:#111827;

  --primary:#374151;

  --radius:12px;

  --transition:0.3s ease;

}


/* ======================================================
   BASE BODY
====================================================== */

body{

  font-family:Arial, sans-serif;

  background:var(--bg);
  color:var(--text);

  line-height:1.5;

  overflow-x:hidden;

  min-height:100vh;

  /* espacio para subfoot */
  padding-bottom:60px;

}


/* ======================================================
   TIPOGRAFÍA
====================================================== */

h1,h2,h3{
  font-weight:600;
}

p{
  font-size:14px;
}


/* ======================================================
   LAYOUT
====================================================== */

.container{
  max-width:1100px;
  margin:auto;
  padding:20px;
}


/* ======================================================
   LINKS
====================================================== */

a{
  text-decoration:none;
  color:inherit;
}


/* ======================================================
   BOTONES
====================================================== */

button{
  font-family:inherit;
}


/* ======================================================
   UTILIDADES
====================================================== */

.hidden{
  display:none;
}

.text-center{
  text-align:center;
}

.mt-20{
  margin-top:20px;
}

.mb-20{
  margin-bottom:20px;
}


/* ======================================================
   SCROLL GLOBAL
====================================================== */

html{
  scroll-behavior:smooth;
}


/* ======================================================
   SELECCIÓN TEXTO
====================================================== */

::selection{
  background:#3b82f6;
  color:white;
}


/* ======================================================
   APP ROOT
====================================================== */

#app{
  width:100%;
}

#subnav,
#subfoot{
  display:contents;
}