/* =========================================================
   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;
}

/* ---------- Paleta (tema 77) ----------
   Antes el azul de la marca estaba escrito a mano 351 veces en 40 archivos CSS: cambiar el
   color de la app eran 351 ediciones. Acá se define una vez y los CSS apuntan a estas
   variables. Un color nuevo se agrega acá, no se escribe suelto en un componente.

   Los nombres dicen PARA QUÉ sirve cada uno, no de qué color es: el día que la marca deje
   de ser azul, --color-marca cambia de valor y el nombre sigue teniendo sentido.

   Qué NO está acá: los colores de un solo artefacto (los seis de los ejes del diagnóstico,
   los de las series de los gráficos), que son parte de ese artefacto y no de la marca. */
:root {
  /* Marca */
  --color-marca: #0B1F3A;          /* azul de la marca: títulos, botones, texto principal */
  --color-marca-texto: #5a6e85;    /* texto secundario de la familia de marca */
  --color-marca-suave: #7a8fa6;    /* texto terciario: aclaraciones, etiquetas */

  /* Bordes */
  --color-borde: #e8edf5;          /* borde habitual de tarjetas y tablas */
  --color-borde-marcado: #c5d4ec;  /* borde de campos de formulario y bordes que resaltan */
  --color-borde-suave: #dde3ef;    /* separadores finos */
  --color-borde-azul: #dce6f5;     /* borde de bloques con fondo azul claro */

  /* Fondos */
  --color-fondo-pagina: #f7f8fa;   /* fondo gris de la página */
  --color-fondo-suave: #e5ecf9;    /* relleno de cápsulas, chips y filas resaltadas */
  --color-fondo-claro: #f4f7fc;    /* fondo azul muy claro: cajas de lectura */
  --color-fondo-azul: #f0f4fb;     /* fondo azul claro: encabezados de tabla */

  /* Estados */
  --color-peligro: #b91c1c;        /* eliminar, errores */
}

/* ---------- Escala de íconos (tema 57) ----------
   Antes había 11 tamaños distintos para seis usos: 13, 17, 19, 20, 22, 24, 32, 36, 44, 48.
   Seis escalones alcanzan, y cada uno dice en qué situación se usa.

   Esto vale para los íconos de Font Awesome, que son texto y se miden con font-size. Los
   SVG escritos a mano llevan su tamaño como atributo (`width="20"`), y un atributo no
   entiende var(): esos quedan afuera hasta que tengan clase propia (temas 55 y 56). */
:root {
  --icono-chico: 14px;      /* al lado de texto chico: ítems de lista, etiquetas */
  --icono-base: 16px;       /* al lado de texto normal */
  --icono-medio: 20px;      /* botones y menú: se toca, tiene que verse */
  --icono-grande: 24px;     /* títulos y encabezados */
  --icono-destacado: 32px;  /* pantallas vacías: el ícono es lo que se mira */
  --icono-enorme: 48px;     /* confirmaciones a pantalla completa */
}

/* ---------- 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%;
}