/*
 * Tipografía única de Smart Flow.
 *
 * Una sola escala para toda la app: el texto en Raleway Light, los títulos
 * del mismo tamaño en todas las pantallas y el mismo interlineado. Se carga
 * al final del <head>, después del estilo de cada pantalla, para que mande
 * sobre los tamaños y grosores sueltos que se fueron acumulando.
 *
 * Las pantallas del panel (ventas, cocina, finanzas...) llevan
 * <body data-panel>: ahí se ordenan también títulos, etiquetas y botones.
 * Las del cliente (carta, tienda, seguimiento) solo toman el texto, para no
 * desarmar su diseño.
 */
:root{
  --t-texto: 15px;
  --t-chico: 13px;
  --t-titulo: 18px;
  --t-sub: 15px;
  --t-etiqueta: 11.5px;
  --t-boton: 14px;
  --t-linea: 1.55;
  --t-linea-titulo: 1.3;
}

/* ---------- Texto (todas las pantallas) ---------- */
body{
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  line-height: var(--t-linea);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p, li, dd, td, blockquote{ font-weight: 300; line-height: var(--t-linea); }
b, strong{ font-weight: 700; }

/* ---------- Panel ---------- */
[data-panel]{ font-size: var(--t-texto); }

/* Títulos: el mismo tamaño en todas las pantallas. */
[data-panel] h2,
[data-panel] h3{
  font-size: var(--t-titulo) !important;
  font-weight: 700 !important;
  line-height: var(--t-linea-titulo) !important;
  letter-spacing: 0 !important;
  margin: 0 0 12px;
}
[data-panel] h4{
  font-size: var(--t-sub) !important;
  font-weight: 700 !important;
  line-height: var(--t-linea-titulo) !important;
  letter-spacing: 0 !important;
}
/* El título de la barra negra se queda en mayúsculas, pero con el mismo peso. */
[data-panel] header h1{ font-size: 16px !important; font-weight: 700 !important; letter-spacing: .06em !important; line-height: 1.2 !important; }
[data-panel] header .sub{ font-size: var(--t-etiqueta) !important; font-weight: 600 !important; }

/* Texto corrido y ayudas: Light, dos tamaños nada más. */
[data-panel] p,
[data-panel] li,
[data-panel] td{ font-weight: 300 !important; line-height: var(--t-linea) !important; }
[data-panel] small,
[data-panel] .aclara,
[data-panel] .nota,
[data-panel] .sub,
[data-panel] .ayuda,
[data-panel] p[style*="font-size"]{
  font-size: var(--t-chico) !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
}
[data-panel] .nota{ font-weight: 400 !important; }
/* Los mensajes de error o de "listo" se tienen que ver. */
[data-panel] .msg{ font-size: var(--t-chico) !important; font-weight: 600 !important; line-height: 1.45 !important; }
[data-panel] p b, [data-panel] small b, [data-panel] li b, [data-panel] td b,
[data-panel] .aclara b, [data-panel] .nota b{ font-weight: 700 !important; }

/* Etiquetas de los campos: pequeñas, en mayúsculas, todas iguales. */
[data-panel] label.l,
[data-panel] .l,
[data-panel] .lbl-p{
  font-size: var(--t-etiqueta) !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  line-height: 1.3 !important;
}

/* Campos: se escribe en tamaño de texto, sin negrita. */
[data-panel] input:not([type="checkbox"]):not([type="radio"]),
[data-panel] select,
[data-panel] textarea{
  font-family: 'Raleway', sans-serif !important;
  font-size: var(--t-texto) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}
[data-panel] ::placeholder{ font-weight: 300; }

/* Botones: un solo tamaño y peso. */
[data-panel] .btn,
[data-panel] button.btn{
  font-size: var(--t-boton) !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  line-height: 1.2 !important;
}