:root {
  --u: 1;
  --pelo: 1px;
}
@media (min-resolution: 2dppx) { :root { --pelo: 0.5px; } }
@media (min-resolution: 3dppx) { :root { --pelo: 0.33px; } }
:root {
  --espacio-xs: calc(4px * var(--u));
  --espacio-s: calc(8px * var(--u));
  --espacio-m: calc(12px * var(--u));
  --espacio-l: calc(16px * var(--u));
  --espacio-xl: calc(24px * var(--u));
  --espacio-xxl: calc(32px * var(--u));
  --radio-chico: calc(10px * var(--u));
  --radio-medio: calc(14px * var(--u));
  --radio-grande: calc(20px * var(--u));
  --radio-capsula: 999px;
  --texto-titulo-grande: calc(32px * var(--u));
  --peso-titulo-grande: 700;
  --track-titulo-grande: calc(0.35px * var(--u));
  --texto-titulo: calc(22px * var(--u));
  --peso-titulo: 700;
  --texto-seccion: calc(17px * var(--u));
  --peso-seccion: 600;
  --texto-cuerpo: calc(17px * var(--u));
  --peso-cuerpo: 400;
  --texto-cuerpo-fuerte: calc(17px * var(--u));
  --peso-cuerpo-fuerte: 600;
  --texto-secundario: calc(15px * var(--u));
  --peso-secundario: 400;
  --texto-secundario-fuerte: calc(15px * var(--u));
  --peso-secundario-fuerte: 600;
  --texto-pie: calc(13px * var(--u));
  --peso-pie: 400;
  --texto-micro: calc(11px * var(--u));
  --peso-micro: 400;
  --alto-barra: calc(44px * var(--u));
  --verde-marca: #34C759;
}
:root, :root[data-tema="claro"] {
  --fondo: #F2F2F7;
  --superficie: #FFFFFF;
  --superficie-alta: #F2F2F7;
  --barra: rgba(249,249,251,0.94);
  --borde: rgba(60,60,67,0.13);
  --separador: rgba(60,60,67,0.2);
  --verde: #34C759;
  --verde-tinte: rgba(52,199,89,0.14);
  --sobre-verde: #FFFFFF;
  --texto: #000000;
  --texto-suave: rgba(60,60,67,0.6);
  --texto-tenue: rgba(60,60,67,0.3);
  --peligro: #FF3B30;
  --peligro-tinte: rgba(255,59,48,0.12);
  --velo: rgba(242,242,247,0.94);
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --fondo: #000000;
  --superficie: #1C1C1E;
  --superficie-alta: #2C2C2E;
  --barra: rgba(28,28,30,0.94);
  --borde: rgba(84,84,88,0.5);
  --separador: rgba(84,84,88,0.65);
  --verde: #30D158;
  --verde-tinte: rgba(48,209,88,0.2);
  --sobre-verde: #FFFFFF;
  --texto: #FFFFFF;
  --texto-suave: rgba(235,235,245,0.6);
  --texto-tenue: rgba(235,235,245,0.3);
  --peligro: #FF453A;
  --peligro-tinte: rgba(255,69,58,0.18);
  --velo: rgba(0,0,0,0.94);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #000000;
    --superficie: #1C1C1E;
    --superficie-alta: #2C2C2E;
    --barra: rgba(28,28,30,0.94);
    --borde: rgba(84,84,88,0.5);
    --separador: rgba(84,84,88,0.65);
    --verde: #30D158;
    --verde-tinte: rgba(48,209,88,0.2);
    --sobre-verde: #FFFFFF;
    --texto: #FFFFFF;
    --texto-suave: rgba(235,235,245,0.6);
    --texto-tenue: rgba(235,235,245,0.3);
    --peligro: #FF453A;
    --peligro-tinte: rgba(255,69,58,0.18);
    --velo: rgba(0,0,0,0.94);
    color-scheme: dark;
  }
}
:root {
  --u: 1;
  --ancho-columna: calc(430px * var(--u));
}
@media (min-width: 768px)  { :root { --u: 1.35; } }
@media (min-width: 1024px) { :root { --u: 1.6; } }
@media (min-width: 1440px) { :root { --u: 1.9; } }
@media (min-width: 1920px) { :root { --u: 2.15; } }
html, body, #raiz { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  line-height: 1.22;
}
button, [role='button'] { -webkit-tap-highlight-color: transparent; user-select: none; }
.t-titulo-grande { font-size: var(--texto-titulo-grande); font-weight: var(--peso-titulo-grande); letter-spacing: var(--track-titulo-grande); }
.t-titulo        { font-size: var(--texto-titulo); font-weight: var(--peso-titulo); }
.t-seccion       { font-size: var(--texto-seccion); font-weight: var(--peso-seccion); }
.t-cuerpo        { font-size: var(--texto-cuerpo); font-weight: var(--peso-cuerpo); }
.t-cuerpo-fuerte { font-size: var(--texto-cuerpo-fuerte); font-weight: var(--peso-cuerpo-fuerte); }
.t-secundario    { font-size: var(--texto-secundario); font-weight: var(--peso-secundario); }
.t-secundario-fuerte { font-size: var(--texto-secundario-fuerte); font-weight: var(--peso-secundario-fuerte); }
.t-pie           { font-size: var(--texto-pie); font-weight: var(--peso-pie); }
.t-micro         { font-size: var(--texto-micro); font-weight: var(--peso-micro); }
.una-linea { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dos-lineas {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.campo::placeholder { color: var(--texto-tenue); opacity: 1; }
.campo:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
button:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.entrada-chat { resize: none; overflow-y: auto; }