/* =========================================================
   BASE
   FRAGMENTO NUEVO: no existe en WordPress.
   Reúne las pocas reglas que hoy aportan el tema StarterPro y
   KingComposer y que la app usa sin declararlas en sus snippets.
   Al salir de WordPress, este archivo las reemplaza.
   Es un punto de partida: verificar visualmente contra el sitio actual.
   ========================================================= */

/* ---------- Tipografía: Inter, única fuente de la app (ARQUITECTURA.md, punto 9) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Escala de tipos de texto ----------
   Se define solo acá. Para cambiar un tamaño en toda la app, se cambia la variable. */
:root {
  /* Tamaños */
  --texto-display: 28px;          /* Display: números KPI (valores destacados en tarjetas de métricas) */
  --texto-titulo-pagina: 32px;    /* Título de página: título del subheader */
  --texto-titulo-seccion: 24px;   /* Título de sección: bloques dentro de la página */
  --texto-subtitulo: 18px;        /* Subtítulo: título de tarjeta, de modal, de tabla */
  --texto-destacado: 16px;        /* Texto destacado: texto importante, valores en tarjetas */
  --texto-base: 15px;             /* Texto: texto normal, párrafos */
  --texto-chico: 14px;            /* Texto chico: celdas de tabla, descripciones */
  --texto-etiqueta: 13px;         /* Etiqueta: labels de formularios, encabezados de tabla */
  --texto-subtexto: 12px;         /* Subtexto: aclaraciones, fechas, ayudas */
  --texto-micro: 11px;            /* Micro: badges, estados, contadores */
  --texto-boton: 14px;            /* Botón: texto de botones */
  --texto-menu: 14px;             /* Menú: ítems del menú lateral */

  /* Pesos */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-negrita: 700;
}

/* ---------- Reset mínimo ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Como en WordPress (Bootstrap 3 del tema): 1rem = 10px. Los snippets usan rem en algunos
   espacios (ej. padding: 2rem) calculados con esta base. El texto no depende de esto:
   usa las variables de la escala, en px. */
html {
  font-size: 10px;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--texto-base);
  font-weight: var(--peso-normal);
  color: #000000;                         /* tema: body_font_color */
  background-color: #ffffff;              /* tema: body_bg_color */
  line-height: 1.5;
}

/* Los controles de formulario heredan la tipografía (el navegador no lo hace solo). */
button,
input,
select,
textarea {
  font: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Títulos ---------- */
h1 { font-size: var(--texto-titulo-pagina); line-height: 1.2; font-weight: var(--peso-negrita); }
h2 { font-size: var(--texto-titulo-seccion); line-height: 1.2; font-weight: var(--peso-semi); color: #000000; }
h3 { font-size: var(--texto-subtitulo); line-height: 1.2; font-weight: var(--peso-semi); color: #000000; }
h4 { font-size: var(--texto-subtitulo); line-height: 1.2; font-weight: var(--peso-semi); color: #3b0068; }

/* ---------- Layout de la app: menú + contenido ----------
   Hoy lo arma KingComposer: una fila .app-layout con dos columnas
   (.menu y .content), fondo #f2f2f2 y 15px de padding lateral
   en las columnas (el menú sin padding izquierdo).
   Los anchos reales ya los definen los snippets propios:
   "Estilo del menu" (.app-layout flex, .menu 25%) y
   "Estilo Aplicación" (.content flex: 1, menú sticky).
   Acá solo va lo que ponía KingComposer.

   Estructura en el código nuevo:
   <div class="app-layout">
     <aside class="menu">…</aside>
     <main class="content" id="contenido">…</main>
   </div>
   --------------------------------------------------------- */
.app-layout {
  width: 100%;
  background: #f2f2f2;
}

.app-layout > .menu {
  padding: 0 15px 0 0;
  min-height: 1px;
}

.app-layout > .content {
  padding: 0 15px;
  min-width: 0;
}

/* Móvil: KingComposer apila las columnas por debajo de 768px */
@media (max-width: 767px) {
  .app-layout {
    display: block;
  }
  .app-layout > .menu,
  .app-layout > .content {
    width: 100%;
  }
}

/* ---------- Páginas sin menú (login, responder) ---------- */
.page-simple {
  width: 100%;
}