/* Colores, variables de Pico y estilos base. Reglas en DISENO.md (R5, R14). */

:root {
  --azul: #1f6feb;
  --azul-oscuro: #1858c4;
  --azul-suave: #e8f0fd;
  --petroleo: #133a56;
  --verde: #198754;
  --verde-oscuro: #146c43;
  --verde-suave: #e6f4ec;
  --rojo: #c93c3c;
  --rojo-suave: #fbeaea;
  --ambar: #b26b00;
  --ambar-suave: #fdf3e1;
  --fondo: #f2f4f7;
  --tarjeta: #ffffff;
  --borde: #e2e6ec;
  --texto: #1f2933;
  --texto-suave: #66727f;
  --radio: 10px;
  --sombra: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
  --ancho-lateral: 236px;
}

/* Pico toma estos valores para botones, links, formularios y tarjetas. */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-font-size: 100%;
  --pico-line-height: 1.45;
  --pico-color: var(--texto);
  --pico-muted-color: var(--texto-suave);
  --pico-background-color: var(--fondo);
  --pico-card-background-color: var(--tarjeta);
  --pico-card-sectioning-background-color: #f8f9fb;
  --pico-card-box-shadow: var(--sombra);
  --pico-border-radius: 8px;
  --pico-muted-border-color: var(--borde);
  --pico-form-element-border-color: #cfd6df;
  --pico-primary: var(--azul);
  --pico-primary-background: var(--azul);
  --pico-primary-border: var(--azul);
  --pico-primary-underline: rgb(31 111 235 / 50%);
  --pico-primary-hover: var(--azul-oscuro);
  --pico-primary-hover-background: var(--azul-oscuro);
  --pico-primary-hover-border: var(--azul-oscuro);
  --pico-primary-focus: rgb(31 111 235 / 25%);
  --pico-primary-inverse: #fff;
}

body {
  background: var(--fondo);
}

.icono {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.2em;
}