/* Valores medidos sobre las capturas de referencia (CSS px = px de la captura / 2). No redondear. */
:root {
  --bg: #16181d;
  --sidebar: #202228;
  --sidebar-border: #292b31;
  --sep: #25272c;
  --card: #262930;
  --divider: #2b2e34;
  --border: #2f3137;
  --dash: #3b3e45;
  --meter: #25272d;
  --fg: #f1f2f3;
  --muted: #8a909d;
  --nav: #acb0b9;
  --hover: #24262d;
  --day: #c9cacc;
  --primary: #7a78e5;
  --primary-fill: #7a78e5;      /* relleno de botones; en el lado modelo se oscurece, ver body.role-model */
  --nav-active: #7a78e5;
  --on-primary: #ffffff;
  --today-ring: rgba(122, 120, 229, .4);
  --shadow-sidebar: 0 25px 30px rgba(0, 0, 0, .3);
  --shadow-button: 0 3px 6px -2px rgba(0, 0, 0, .1);

  /* Estados: no existen en la referencia. Contraste calculado sobre #262930. */
  --amber: #e8b84a;   /* 7.89:1 falta */
  --green: #4cc38a;   /* 6.57:1 aprobado */
  --red: #f0787f;     /* 5.34:1 corregir, vencido */
  --sent: #9d9bf0;    /* 5.81:1 enviado, por revisar */

  --r-card: 16px;
  --r-nav: 12px;
  --r-pill: 9999px;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* El lado modelo se usa afuera, en el teléfono: más contraste que el violeta medido (blanco sobre #7a78e5 da 3.72:1). */
body.role-model {
  --primary-fill: #6462d6;  /* blanco encima: 4.93:1 */
  --nav-active: #9d9bf0;    /* 5.81:1 sobre la tarjeta */
}

*, *::before, *::after { box-sizing: border-box; }
/* Sin -webkit-font-smoothing a propósito: antialiased rompe el parecido medido. letter-spacing 0 salvo en H1. */
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 20px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.icon { display: block; flex: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[hidden] { display: none !important; }