/* ============================================================================
   Moderniva — base: tokens, tipografía redondeada, componentes compartidos.
   Claro = papel cálido. Oscuro = negro sólido #000 (sin azul, sin glow).
   El acento del tenant vive en --acento; --acento-ui cae a tinta clara en
   oscuro para asegurar legibilidad. Animaciones: solo transform/opacity.
   ========================================================================== */

/* Nunito variable (400–800), local — sin dependencias de red */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Switzer (Fontshare, gratis para uso comercial), local — sin red.
   Es la tipografía de la app del asesor (decisión de Mateo, 2026-07-23). */
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/switzer-400.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/switzer-500.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/switzer-600.woff2') format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/switzer-700.woff2') format('woff2'); }

:root {
  /* Acento del tenant: LO ÚNICO que cambia por cliente */
  --acento: #800e13;
  --acento-ui: var(--acento);
  --acento-suave: color-mix(in srgb, var(--acento) 12%, transparent);

  /* Claro — papel cálido Moderniva */
  --fondo: #F7F6F3;
  --superficie: #FFFFFF;
  --superficie-2: #F1EFEA;
  --tinta: #26251F;
  --tinta-suave: #8A8880;
  --tinta-terciaria: #B4B2AA;
  --tinta-media: #6E6C64;   /* texto secundario que SÍ pasa 4.5:1 (badges de estado; 5.2:1 sobre blanco) */
  --linea: rgba(55, 53, 47, .10);
  --linea-fuerte: rgba(55, 53, 47, .16);

  /* Chat */
  --chat-fondo: #EFEDE7;
  --burbuja-suya: #FFFFFF;
  --burbuja-mia: color-mix(in srgb, var(--acento) 14%, #FFFFFF);
  --tick-leido: #3BA6DC;

  /* Semáforos */
  --ok: #2E7D32;
  --ambar: #B45309;
  --rojo: #C2372E;

  /* Agenda: cita = celeste pastel · llamada = verde pastel (legible claro/oscuro) */
  --cal-cita: #3BA6DC;
  --cal-cita-suave: color-mix(in srgb, #3BA6DC 15%, transparent);
  --cal-llamada: #2FA36B;
  --cal-llamada-suave: color-mix(in srgb, #2FA36B 16%, transparent);

  --sombra-pagina: -12px 0 32px rgba(0, 0, 0, .16);
  --radio: 14px;
  --radio-burbuja: 16px;

  --safe-arriba: env(safe-area-inset-top, 0px);
  --safe-abajo: env(safe-area-inset-bottom, 0px);
}

[data-tema="oscuro"] {
  /* En oscuro el acento del tenant NO se descarta por gris (§11 marca): se
     conserva el tono y se sube la luminosidad para que pase 4.5:1 sobre #000. */
  --acento-ui: color-mix(in oklab, var(--acento) 55%, #fff);
  --acento-suave: color-mix(in srgb, var(--acento) 24%, transparent);

  --fondo: #000000;                   /* negro sólido, regla de la casa */
  --superficie: #101010;
  --superficie-2: #1A1A1A;
  --tinta: #EDEDED;
  --tinta-suave: #8E8E8E;
  --tinta-terciaria: #5C5C5C;
  --tinta-media: #9A978F;   /* texto secundario que SÍ pasa 4.5:1 en oscuro (badges de estado) */
  --linea: rgba(255, 255, 255, .09);
  --linea-fuerte: rgba(255, 255, 255, .16);

  --chat-fondo: #000000;
  --burbuja-suya: #161616;
  --burbuja-mia: color-mix(in srgb, var(--acento) 26%, #101010);
  --tick-leido: #53BDEB;

  --ok: #66BB6A;
  --ambar: #E3A008;
  --rojo: #EF6A5F;

  --cal-cita: #53BDEB;
  --cal-cita-suave: color-mix(in srgb, #53BDEB 20%, transparent);
  --cal-llamada: #4FD293;
  --cal-llamada-suave: color-mix(in srgb, #4FD293 20%, transparent);

  --sombra-pagina: -12px 0 32px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* `hidden` SIEMPRE gana, aunque el elemento tenga display propio */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: 'Switzer', 'Nunito', 'Segoe UI', system-ui, sans-serif;   /* Switzer, respaldo Nunito */
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: pan-y;
  transition: background-color .28s, color .28s;
}

input, textarea, select, button { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, video { max-width: 100%; display: block; }
p, span, strong, small { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--acento-ui); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- componentes -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: transform .12s ease, background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; }
.btn--primario { background: var(--acento-ui); color: var(--fondo); }
[data-tema="oscuro"] .btn--primario { color: #000; }
.btn--secundario { background: transparent; border-color: var(--linea-fuerte); color: var(--tinta); }
.btn--peligro { background: transparent; border-color: color-mix(in srgb, var(--rojo) 45%, transparent); color: var(--rojo); }
.btn--bloque { width: 100%; }
.btn--chico { padding: 8px 14px; font-size: 13.5px; }
.btn--llamada { background: var(--cal-llamada); color: #fff; gap: 6px; }
.btn--llamada svg { width: 15px; height: 15px; }
[data-tema="oscuro"] .btn--llamada { background: #1E7E52; }  /* verde más apagado: no contrasta tanto sobre negro */

.boton-icono {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--tinta-suave);
  transition: transform .12s ease, background-color .2s, color .2s;
  flex: none;
}
.boton-icono:active { transform: scale(.88); background: var(--superficie-2); }
.boton-icono.activo { color: var(--acento-ui); }
.boton-icono svg { width: 23px; height: 23px; }

.campo { display: block; margin-bottom: 14px; text-align: left; }
.campo__rotulo {
  display: block; font-size: 12.5px; font-weight: 700;
  color: var(--tinta-suave); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.campo__input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--linea-fuerte);
  background: var(--superficie);
  color: var(--tinta);
  transition: border-color .2s, background-color .2s;
  user-select: text;
}
.campo__input:focus { outline: none; border-color: var(--acento-ui); }
.campo__input::placeholder { color: var(--tinta-terciaria); }
textarea.campo__input { resize: none; }
.campo__nota {
  margin: -6px 0 14px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--tinta-suave);
}
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.avatar {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--avatar-color, #9B9A97);
  color: #fff; font-weight: 800; font-size: 17px;
  overflow: hidden;
}
.avatar__img { width: 100%; height: 100%; object-fit: cover; }

.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

.switch {
  width: 48px; height: 28px; flex: none;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1.5px solid var(--linea-fuerte);
  position: relative;
  transition: background-color .22s, border-color .22s;
}
.switch__bola {
  position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--tinta-suave);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), background-color .22s;
}
.switch.activo { background: var(--acento-suave); border-color: var(--acento-ui); }
.switch.activo .switch__bola { transform: translateX(19px); background: var(--acento-ui); }

.conmutador {
  display: inline-flex; gap: 2px;
  background: var(--superficie-2);
  border-radius: 999px; padding: 3px;
}
.conmutador__op {
  padding: 6px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--tinta-suave);
  transition: background-color .2s, color .2s, transform .12s;
}
.conmutador__op:active { transform: scale(.95); }
.conmutador__op.activo { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
[data-tema="oscuro"] .conmutador__op.activo { box-shadow: none; background: #262626; }
/* Conmutador a ancho completo: 3 opciones parejas, la etiqueta ya no se aprieta */
.conmutador--bloque { display: flex; width: 100%; }
.conmutador--bloque .conmutador__op { flex: 1; text-align: center; padding: 9px 0; }

/* toasts */
.toasts {
  position: fixed; left: 0; right: 0;
  bottom: calc(96px + var(--safe-abajo));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; z-index: 90;
}
.toast {
  max-width: 86%;
  background: var(--tinta); color: var(--fondo);
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  opacity: 0; transform: translateY(14px) scale(.95);
  transition: opacity .24s, transform .24s cubic-bezier(.34,1.3,.64,1);
}
[data-tema="oscuro"] .toast { background: #EDEDED; color: #000; }
.toast--visible { opacity: 1; transform: none; }
.toast--error { background: var(--rojo); color: #fff; }

/* skeletons */
.esqueletos { padding: 4px 16px; }
.esq {
  background: var(--superficie-2);
  border-radius: 8px; position: relative; overflow: hidden;
}
.esq::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: esq-brillo 1.3s infinite;
}
[data-tema="oscuro"] .esq::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes esq-brillo { to { transform: translateX(100%); } }
.esq-fila { display: flex; gap: 12px; align-items: center; padding: 11px 0; }
.esq--avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.esq-fila__lineas { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.esq--linea { height: 13px; }
.esq--fina { height: 10px; opacity: .7; }

/* vacíos */
.vacio { text-align: center; padding: 68px 32px; }
.vacio__icono { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--tinta-terciaria); }
.vacio__icono svg { width: 100%; height: 100%; }
.vacio__titulo { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.vacio__texto { color: var(--tinta-suave); font-size: 14px; max-width: 300px; margin: 0 auto; }

/* menú contextual */
.menu-ctx {
  position: fixed; z-index: 95;
  min-width: 216px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  opacity: 0; transform: scale(.82);
  transform-origin: center bottom;
  transition: opacity .16s, transform .18s cubic-bezier(.34,1.4,.64,1);
}
[data-tema="oscuro"] .menu-ctx { box-shadow: none; border-color: var(--linea-fuerte); }
.menu-ctx.visible { opacity: 1; transform: scale(1); }
.menu-ctx__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px;
  border-radius: 10px; font-weight: 600; font-size: 14.5px;
  transition: background-color .15s;
}
.menu-ctx__item:active { background: var(--superficie-2); }
.menu-ctx__item.peligro { color: var(--rojo); }
.menu-ctx__icono { width: 20px; height: 20px; color: var(--tinta-suave); }
.menu-ctx__item.peligro .menu-ctx__icono { color: var(--rojo); }
.menu-ctx__icono svg { width: 20px; height: 20px; }
.menu-ctx__emojis { display: flex; gap: 2px; padding: 4px 2px 8px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.menu-ctx__emoji {
  font-size: 22px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s cubic-bezier(.34,1.8,.64,1), background-color .15s;
}
.menu-ctx__emoji:active { transform: scale(1.35); }
/* Emojis Twemoji (X/Twitter) — se ven igual en cualquier equipo, no el nativo.
   inline-block es OBLIGATORIO: arriba hay un `img { display:block }` global, y
   sin esto cada emoji dentro de un mensaje se va a su propio renglón. */
.emoji {
  display: inline-block; height: 1.15em; width: 1.15em;
  vertical-align: -.15em; object-fit: contain; margin: 0 .05em;
}
.menu-ctx__emoji .emoji { height: 25px; width: 25px; vertical-align: 0; }

/* sheets */
#capa-sheets { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
#capa-sheets > * { pointer-events: auto; }
.sheet-fondo {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .42);
  opacity: 0; transition: opacity .28s;
}
.sheet-fondo.visible { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--superficie);
  border-radius: 22px 22px 0 0;
  max-height: 62vh;
  display: flex; flex-direction: column;
  transform: translateY(103%);
  transition: transform .34s cubic-bezier(.22, 1.1, .36, 1);
  padding-bottom: var(--safe-abajo);
}
.sheet--alta { max-height: 88vh; }
.sheet.visible { transform: translateY(0); }
.sheet__asa {
  width: 40px; height: 4.5px; border-radius: 999px;
  background: var(--linea-fuerte);
  margin: 10px auto 4px; flex: none;
}
.sheet__cuerpo { overflow-y: auto; padding: 10px 18px 22px; overscroll-behavior: contain; }
.sheet__titulo { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.sheet__sub { color: var(--tinta-suave); font-size: 13.5px; margin: -6px 0 14px; }

.confirmar { text-align: center; padding-top: 6px; }
.confirmar__titulo { font-size: 17px; font-weight: 800; }
.confirmar__detalle { color: var(--tinta-suave); font-size: 14px; margin-top: 6px; }
.confirmar__botones { display: flex; gap: 10px; margin-top: 18px; }
.confirmar__botones .btn { flex: 1; }

.acciones-verticales { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }