/* Renewals: hoja de estilos propia, escrita a mano (sin CDN, sin compilar).
   Sistema de la marca de José Alejandro (versión 3): gris claro de fondo,
   paneles blancos grandes y redondeados, tinta negra, un solo azul, Inter Tight.
   Se diseña para 375 px primero; desde 1024 px aparece el menú lateral. */

@font-face {
  font-family: "Inter Tight Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fuentes/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fuentes/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --letra: "Inter Tight Variable", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --papel: #ffffff;
  /* Color principal y de acento: cada instancia puede cambiarlos desde la
     agencia (base.html los vuelve a declarar). El resto se deriva de ellos. */
  --tinta: #111318;
  --azul: #2447f5;
  --tinta-2: color-mix(in srgb, var(--tinta) 88%, #fff);
  --azul-oscuro: color-mix(in srgb, var(--azul) 86%, #000);
  --azul-claro: color-mix(in srgb, var(--azul) 72%, #fff);
  --azul-velo: color-mix(in srgb, var(--azul) 8%, #fff);
  --negro-panel: color-mix(in srgb, var(--tinta) 94%, #fff);
  --gris-texto: #555d6d;
  --gris-suave: #8a909c;
  --linea: #e3e5ea;
  --borde: #d6d9e0;
  --fondo-suave: #f3f4f6;
  --fondo-pagina: #eceef2;
  --rojo: #b42318;
  --rojo-velo: #fef3f2;
  --ambar: #a15c07;
  --ambar-velo: #fef6e7;
  --verde: #067647;
  --verde-velo: #ecfdf3;
  --radio: 24px;
  --radio-chico: 16px;
  --radio-boton: 14px;
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --rapido: 160ms;
  --menu-alto: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo-pagina);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Sin alternativas contextuales: Inter cambia «3x4» por «3×4» y eso
     estropea los enlaces y los códigos que se copian. */
  font-feature-settings: "calt" 0;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(30px, 6vw, 44px); }
h2 { font-size: clamp(22px, 3.6vw, 28px); }
h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

::selection { background: var(--azul); color: #fff; }

[hidden] { display: none !important; }

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Marca ----------------------------------------------------------------- */

.marca {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.045em;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

.marca::after {
  content: "";
  width: 0.26em;
  height: 0.26em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--azul);
}

.marca--grande { font-size: clamp(56px, 16vw, 112px); }

/* Con logo de la agencia: el logo y el nombre, sin el punto */
.marca--logo { align-items: center; gap: 10px; }
.marca--logo::after { display: none; }
.marca--logo img { height: 1.35em; width: auto; max-width: 3.5em; border-radius: 8px; object-fit: contain; }

/* --- Esqueleto de la aplicación --------------------------------------------- */

.app {
  display: grid;
  min-height: 100vh;
}

.lateral { display: none; }

.cabeza {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(236, 238, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cabeza__agencia {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texto);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contenido {
  min-width: 0;
  padding: 4px 8px calc(var(--menu-alto) + 28px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  align-content: start;
}

.inferior {
  position: fixed;
  z-index: 30;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--menu-alto);
  padding: 6px;
  border-radius: 22px;
  background: var(--tinta);
  color: #fff;
}

.inferior a,
.inferior summary {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 48px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  list-style: none;
}

.inferior summary::-webkit-details-marker { display: none; }

.inferior .icono { width: 24px; height: 24px; }

.inferior a[aria-current="page"],
.inferior details[open] summary {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.inferior a[aria-current="page"]::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--azul-claro);
  margin-top: 1px;
}

.inferior details { position: relative; display: grid; }

.inferior__mas {
  position: absolute;
  right: -2px;
  bottom: calc(100% + 14px);
  width: min(260px, calc(100vw - 32px));
  padding: 8px;
  border-radius: 20px;
  background: var(--tinta);
  display: grid;
  gap: 2px;
}

.inferior__mas a {
  display: flex;
  justify-items: start;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 15px;
  color: #fff;
}

.inferior__mas a::after { display: none; }

@media (min-width: 1024px) {
  .app {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .cabeza, .inferior { display: none; }

  .lateral {
    position: sticky;
    top: 12px;
    height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px 16px 20px;
    border-radius: var(--radio);
    background: var(--tinta);
    color: #fff;
  }

  .lateral .marca { padding-left: 12px; font-size: 26px; }

  .lateral nav { display: grid; gap: 2px; }

  .lateral__grupo {
    margin: 18px 12px 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
  }

  .lateral nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 550;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72);
    transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
  }

  .lateral nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

  .lateral nav a[aria-current="page"] { background: #fff; color: var(--tinta); }

  .lateral nav a[aria-current="page"] .icono { color: var(--azul); }

  .lateral__pie {
    margin-top: auto;
    padding: 14px 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    display: grid;
    gap: 2px;
  }

  .lateral__pie b { color: #fff; font-weight: 600; }

  .contenido { padding: 0; gap: 12px; }
}

/* --- Paneles ---------------------------------------------------------------- */

.panel {
  min-width: 0;
  border-radius: var(--radio);
  background: var(--papel);
  padding: 20px 16px;
}

.panel--suave { background: var(--fondo-suave); }

.panel--negro { background: var(--negro-panel); color: #fff; }

.panel--degradado {
  color: #fff;
  background:
    radial-gradient(70% 70% at 100% 115%, color-mix(in srgb, var(--azul) 95%, transparent) 0%, color-mix(in srgb, var(--azul) 0%, transparent) 70%),
    radial-gradient(45% 40% at 90% 0%, color-mix(in srgb, var(--azul-claro) 18%, transparent) 0%, color-mix(in srgb, var(--azul-claro) 0%, transparent) 70%),
    linear-gradient(160deg, var(--tinta) 0%, color-mix(in srgb, var(--tinta) 78%, var(--azul)) 60%, color-mix(in srgb, var(--azul) 72%, var(--tinta)) 100%);
}

.panel--negro .secundario,
.panel--degradado .secundario { color: rgba(255, 255, 255, 0.7); }

@media (min-width: 640px) {
  .panel { padding: 28px; }
}

@media (min-width: 1024px) {
  .panel { padding: 32px 36px; }
}

.pila { display: grid; gap: 12px; min-width: 0; }
.pila--ancha { gap: 20px; }
.pila--estrecha { gap: 6px; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.entre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.secundario { color: var(--gris-texto); }
.chico { font-size: 14px; }
.diminuto { font-size: 12px; }
.fuerte { font-weight: 650; }
.derecha { margin-left: auto; }
.centrado { text-align: center; }
.cortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Etiquetita con punto azul sobre los títulos */
.micro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texto);
}

.micro::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
}

.panel--negro .micro,
.panel--degradado .micro { color: rgba(255, 255, 255, 0.75); }

.panel--negro .micro::before,
.panel--degradado .micro::before { background: var(--azul-claro); }

.encabezado { display: grid; gap: 10px; }

/* --- Cifras ----------------------------------------------------------------- */

.cifra {
  font-size: clamp(64px, 20vw, 120px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
}

.cifra--media {
  font-size: clamp(36px, 9vw, 52px);
  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 900px) {
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

.cifras .panel { display: grid; gap: 8px; align-content: space-between; min-height: 112px; }
.cifras .micro { align-items: flex-start; }
.cifras .micro::before { margin-top: 6px; flex: none; }

.cifras a.panel { text-decoration: none; transition: transform var(--rapido) var(--curva); }
.cifras a.panel:active { transform: scale(0.98); }

/* Barras por etapa: número grande, nada de gráficos decorativos */
.etapas-lista { display: grid; gap: 2px; }

.etapas-lista a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  font-weight: 550;
}

.etapas-lista a:last-child { border-bottom: 0; }
.etapas-lista b { font-size: 20px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.etapas-lista .cero { color: var(--gris-suave); }

/* --- Botones ---------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--papel);
  color: var(--tinta);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.boton:hover { border-color: var(--tinta); }
.boton:active { transform: scale(0.97); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.boton--principal { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton--principal:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.boton--tinta { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.boton--tinta:hover { background: var(--tinta-2); }
.boton--blanco { background: #fff; border-color: #fff; color: var(--tinta); }
.boton--velo { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.boton--velo:hover { border-color: #fff; }
.boton--suave { background: var(--fondo-suave); border-color: var(--fondo-suave); }
.boton--peligro { color: var(--rojo); border-color: #f1c4bf; }
.boton--peligro:hover { border-color: var(--rojo); }
.boton--ancho { width: 100%; }
.boton--icono { padding: 10px; min-width: 48px; }

.acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.acciones > .boton,
.acciones > form > .boton,
.acciones > details > summary { width: 100%; }

.acciones > form { display: grid; }

.acciones--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .acciones { display: flex; flex-wrap: wrap; }
  .acciones > .boton, .acciones > form > .boton, .acciones > details > summary { width: auto; }
}

/* En el teléfono, un botón por fila: etiquetas largas sin recortar. */
.acciones--pila { grid-template-columns: minmax(0, 1fr); }
.acciones--pila .boton { white-space: normal; text-align: left; justify-content: flex-start; }

@media (min-width: 640px) {
  .acciones--pila .boton { justify-content: center; text-align: center; }
}

.enlace {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.enlace:hover { color: var(--azul); }

/* Menú que se abre con un toque (Posponer, cambiar etapa) */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }

.menu__lista {
  position: absolute;
  z-index: 15;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 220px;
  padding: 6px;
  border-radius: 18px;
  background: var(--tinta);
  color: #fff;
  display: grid;
  gap: 2px;
}

.menu--abajo .menu__lista { bottom: auto; top: calc(100% + 8px); }

.menu__lista button,
.menu__lista a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 550;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu__lista button:hover,
.menu__lista a:hover { background: rgba(255, 255, 255, 0.1); }

/* --- Etiquetas de riesgo ----------------------------------------------------- */

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.etiqueta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--azul);
  flex: none;
}

.etiqueta--urgente { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.etiqueta--urgente::before { background: #ff7a6b; }
.etiqueta--alerta::before { background: var(--rojo); }
.etiqueta--aviso::before { background: #e09a22; }
.etiqueta--info::before { background: var(--azul); }
.etiqueta--bien::before { background: var(--verde); }
.etiqueta--neutro::before { background: var(--gris-suave); }

.panel--negro .etiqueta:not(.etiqueta--urgente),
.panel--degradado .etiqueta:not(.etiqueta--urgente) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.panel--negro .etiqueta--urgente,
.panel--degradado .etiqueta--urgente { background: #fff; color: var(--tinta); border-color: #fff; }

/* Explicación de cada riesgo: qué hacer */
.riesgos { display: grid; gap: 8px; }

.riesgo {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radio-chico);
  background: var(--fondo-suave);
}

.riesgo p { font-size: 14px; color: var(--gris-texto); }

/* --- Riel de avance por etapas ----------------------------------------------- */

.rail {
  display: grid;
  /* Un segmento por etapa de su ruta (13 en Marketplace, 9 en privados). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 280px;
}

.rail__paso {
  height: 6px;
  border-radius: 3px;
  background: var(--linea);
}

.rail__paso.hecho { background: var(--tinta); }
.rail__paso.actual { background: var(--azul); }
.rail--cerrado .rail__paso { background: repeating-linear-gradient(90deg, var(--linea) 0 3px, transparent 3px 5px); }

.panel--negro .rail__paso,
.panel--degradado .rail__paso { background: rgba(255, 255, 255, 0.16); }
.panel--negro .rail__paso.hecho,
.panel--degradado .rail__paso.hecho { background: #fff; }
.panel--negro .rail__paso.actual,
.panel--degradado .rail__paso.actual { background: var(--azul-claro); }

/* --- «Hoy» -------------------------------------------------------------------- */

.hoy-rejilla {
  display: grid;
  gap: 8px;
  grid-template-areas: "cifras" "lista" "lado";
  align-items: start;
}

.area-cifras { grid-area: cifras; min-width: 0; }
.area-lista { grid-area: lista; }
.area-lado { grid-area: lado; }

@media (min-width: 900px) {
  .cifras--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .hoy-rejilla {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "lista cifras" "lista lado";
    grid-template-rows: auto 1fr;
  }
  .area-cifras, .area-lado { position: relative; }
}

.hoy-portada { display: grid; gap: 20px; }

.hoy-portada__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 16px;
}

.hoy-portada__fila p { font-size: 17px; line-height: 1.35; padding-bottom: 6px; }

.temporada {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
}

.temporada b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -0.03em; }

.filtros {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}

.filtros::-webkit-scrollbar { display: none; }

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.filtro b { font-weight: 700; color: var(--gris-texto); font-variant-numeric: tabular-nums; }
.filtro[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtro[aria-current="true"] b { color: rgba(255, 255, 255, 0.7); }

/* Pestañas de ruta: Marketplace · Privados */
.rutas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: #fff;
}

.rutas a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  color: var(--gris-texto);
}

.rutas a b { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--gris-suave); }
.rutas a[aria-current="page"] { background: var(--tinta); color: #fff; }
.rutas a[aria-current="page"] b { color: rgba(255, 255, 255, 0.7); }
.panel .rutas { background: var(--fondo-suave); }

.chip-ruta {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--azul-velo);
  color: var(--tinta);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.panel--negro .chip-ruta { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Los cuatro botones del estatus */
.estatus-toque { display: grid; gap: 8px; }
.estatus-toque__titulo { font-size: 14px; font-weight: 650; }

.estatus-toque__botones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.estatus-toque__botones .boton { white-space: normal; text-align: center; padding: 8px 10px; }

@media (min-width: 640px) {
  .estatus-toque__botones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tarjeta {
  display: grid;
  gap: 14px;
  min-width: 0;
  border-radius: var(--radio);
  background: var(--papel);
  padding: 18px 16px 16px;
}

@media (min-width: 640px) {
  .tarjeta { padding: 24px; }
}

.tarjeta--ahora {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
}

.tarjeta__cabeza {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--fondo-suave);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.avatar--riesgo { background: var(--tinta); color: #fff; }

.tarjeta__nombre {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: block;
}

.tarjeta__dato { font-size: 13px; color: var(--gris-texto); }

.aviso-cita {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: var(--azul);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.aviso-cita--tranquila { background: var(--azul-velo); color: var(--tinta); }

.mensaje {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px 18px 18px 6px;
  background: var(--fondo-suave);
}

.mensaje__texto {
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mensaje[open] .mensaje__texto,
.mensaje--completo .mensaje__texto { -webkit-line-clamp: unset; display: block; }

.mensaje__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--gris-texto); }

.punto-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.punto-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.punto-estado--pendiente::before { background: #e09a22; }

.otros-mensajes summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-texto);
  list-style: none;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.otros-mensajes summary::-webkit-details-marker { display: none; }

/* --- Listas de clientes -------------------------------------------------------- */

.buscador {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--radio-chico);
  background: #fff;
  border: 1px solid var(--borde);
}

.buscador input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  min-height: 48px;
}

.buscador:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); }

.renglones { display: grid; }

.renglon {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
}

.renglon:last-child { border-bottom: 0; }
.renglon__nombre { font-weight: 650; letter-spacing: -0.01em; }
.renglon__lado { display: grid; justify-items: end; gap: 6px; font-size: 13px; color: var(--gris-texto); }

/* --- Tablero por etapas -------------------------------------------------------- */

.tablero { display: grid; gap: 8px; }

.columna { display: none; }

.tablero--movil .columna[data-activa="true"] { display: grid; }

@media (min-width: 1024px) {
  .tablero {
    grid-auto-flow: column;
    grid-auto-columns: 272px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: start;
    scroll-snap-type: x proximity;
  }

  .tablero .columna { display: grid; scroll-snap-align: start; }
  .solo-telefono { display: none !important; }
}

@media (max-width: 1023px) {
  .solo-computadora { display: none !important; }
}

.columna {
  gap: 8px;
  align-content: start;
  padding: 14px;
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.55);
}

.columna__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 6px;
}

.columna__cabeza h3 { font-size: 15px; }
.columna__cabeza b { font-size: 22px; font-weight: 750; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

.ficha-mini {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
}

.ficha-mini__nombre { font-weight: 650; text-decoration: none; letter-spacing: -0.01em; }

.ficha-mini form { display: grid; }

.ficha-mini .boton { min-height: 44px; font-size: 14px; padding: 8px 12px; white-space: normal; text-align: center; }

/* --- Ficha del cliente ---------------------------------------------------------- */

.ficha-cabeza { display: grid; gap: 16px; }

.ficha-cabeza__nombre {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.ficha-cabeza .avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 19px;
}

.pestanas {
  position: sticky;
  top: 64px;
  z-index: 10;
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 18px;
  background: #fff;
}

.pestanas::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .pestanas { top: 12px; }
}

.pestanas a {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--gris-texto);
  white-space: nowrap;
}

.pestanas a[aria-current="page"] { background: var(--tinta); color: #fff; }

.datos { display: grid; gap: 0; }

.dato {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 15px;
}

.dato:last-child { border-bottom: 0; }
.dato dt { color: var(--gris-texto); }
.dato dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; min-width: 0; }
.dato dd .boton { white-space: normal; text-align: left; min-height: 44px; padding: 8px 12px; font-size: 14px; }

@media (min-width: 900px) {
  .dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
}

.historial { display: grid; }

.historial li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
}

.historial li:last-child { border-bottom: 0; }

.historial .avatar { width: 36px; height: 36px; border-radius: 12px; }

.estado-consentimiento {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: var(--radio-chico);
  background: var(--fondo-suave);
}

.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radio-chico);
  background: var(--ambar-velo);
  color: #5c3404;
  font-size: 15px;
}

.aviso--azul { background: var(--azul-velo); color: var(--tinta); }
.aviso--verde { background: var(--verde-velo); color: #054f31; }
.aviso--rojo { background: var(--rojo-velo); color: #7a1a12; }
.aviso .icono { margin-top: 1px; }

/* Etapas de la renovación en la ficha */
.pasos-renovacion { display: grid; }

.pasos-renovacion li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--gris-suave);
}

.pasos-renovacion li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border-radius: 50%;
  border: 2px solid var(--borde);
}

.pasos-renovacion li.hecho { color: var(--tinta); }
.pasos-renovacion li.hecho::before { background: var(--tinta); border-color: var(--tinta); }
.pasos-renovacion li.actual { color: var(--tinta); font-weight: 650; }
.pasos-renovacion li.actual::before { background: var(--azul); border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-velo); }
.pasos-renovacion time { font-size: 12px; color: var(--gris-texto); font-weight: 500; }

/* --- Formularios ---------------------------------------------------------------- */

.formulario { display: grid; gap: 18px; }

.campo { display: grid; gap: 7px; align-content: start; border: 0; margin: 0; padding: 0; min-width: 0; }

.campo label,
.campo legend { font-size: 14px; font-weight: 600; padding: 0; }

.campo .ayuda { font-size: 13px; color: var(--gris-texto); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="datetime-local"],
.campo input[type="time"],
.campo input[type="url"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--papel);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.4;
  transition: box-shadow var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.campo select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.campo textarea { resize: vertical; min-height: 110px; }

.campo input[type="color"] {
  width: 100%;
  height: 52px;
  padding: 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: #fff;
  cursor: pointer;
}

.historial .entre { flex-wrap: nowrap; }

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}

.campo .errorlist,
.errores {
  color: var(--rojo);
  font-size: 14px;
  font-weight: 550;
}

.campos-dobles { display: grid; gap: 18px; }

@media (min-width: 640px) {
  .campos-dobles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.opcion span {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  font-weight: 550;
}

.opcion input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.opcion input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 3px; }

.casilla {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15px;
  cursor: pointer;
}

.casilla input { width: 24px; height: 24px; margin: 0; accent-color: var(--azul); }

/* Formulario por pasos: con JS se ve un paso a la vez */
.pasos-indicador {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}

.pasos-indicador span { height: 6px; border-radius: 3px; background: var(--linea); }
.pasos-indicador span.hecho { background: var(--tinta); }
.pasos-indicador span.actual { background: var(--azul); }

.js .paso:not([data-visible="true"]) { display: none; }

.barra-pie {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

/* Mapeo de la importación */
.mapeo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.mapeo__fila {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radio-chico);
  background: var(--fondo-suave);
}

.mapeo__fila--ignorada { opacity: 0.62; }

.mapeo__ejemplo {
  font-size: 13px;
  color: var(--gris-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .mapeo__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; align-items: center; }
}

.flecha-mapeo { display: none; }

/* --- Mensajes del sistema ------------------------------------------------------- */

.avisos-sistema { display: grid; gap: 8px; }

.avisos-sistema li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: #fff;
  font-size: 15px;
  font-weight: 550;
}

.avisos-sistema li.error { background: var(--rojo); }
.avisos-sistema li.warning { background: #7a4a06; }

/* --- Tabla sencilla -------------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-weight: 600; color: var(--gris-texto); padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 12px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-envoltura { overflow-x: auto; }

.vacio {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 16px;
  text-align: center;
  color: var(--gris-texto);
}

.vacio .icono { width: 40px; height: 40px; color: var(--tinta); }

/* --- Páginas públicas ------------------------------------------------------------ */

.publico {
  min-height: 100vh;
  display: grid;
  gap: 8px;
  padding: 8px;
  align-content: start;
}

@media (min-width: 640px) {
  .publico { padding: 12px; gap: 12px; }
}

.portada {
  min-height: calc(100vh - 16px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 24px;
  padding: 20px 20px 24px;
}

@media (min-width: 640px) {
  .portada { min-height: calc(100vh - 24px); padding: 32px 40px 40px; }
}

.portada__centro {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 18px;
}

.portada__linea {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: rgba(255, 255, 255, 0.82);
}

.estrecho {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.medio {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* Consentimiento público */
.texto-legal {
  display: grid;
  gap: 14px;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.texto-legal__titulo { font-size: 20px; line-height: 1.2; }
.texto-legal b { font-weight: 650; }

.lienzo {
  position: relative;
  border-radius: var(--radio-chico);
  background: #fff;
  border: 1.5px dashed var(--borde);
  touch-action: none;
}

.lienzo canvas { display: block; width: 100%; height: 180px; border-radius: var(--radio-chico); cursor: crosshair; }

.lienzo__guia {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 42px;
  border-bottom: 1px solid var(--linea);
  pointer-events: none;
}

.lienzo__texto {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-size: 13px;
  color: var(--gris-suave);
  pointer-events: none;
}

.lienzo.con-trazo .lienzo__texto { display: none; }

.confirmacion { display: grid; justify-items: start; gap: 14px; }

.sello {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: #fff;
  color: var(--azul);
}

.sello .icono { width: 40px; height: 40px; }

/* --- Agenda ----------------------------------------------------------------------- */

.dia { display: grid; gap: 8px; }

.dia__titulo { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; }
.dia__titulo b { font-size: 34px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }

/* En el teléfono la cita va en una columna: nombre completo, debajo hora y
   canal, y los resultados uno por fila. Desde 640 px, la hora a la izquierda. */
.cita {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
}

.cita__hora { display: none; font-size: 20px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.cita__hora small { display: block; font-size: 12px; font-weight: 600; color: var(--gris-texto); letter-spacing: 0; }
.cita__cuerpo { display: grid; gap: 10px; min-width: 0; }

.cita__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
}

.cita__nombre {
  flex: 1 1 12ch;
  min-width: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cita__cabeza .etiqueta { margin-left: auto; }
.cita__dato { font-size: 14px; color: var(--gris-texto); }
.cita__hora-linea { font-weight: 650; color: var(--tinta); }

@media (min-width: 640px) {
  .cita { grid-template-columns: 76px minmax(0, 1fr); }
  .cita__hora { display: block; }
  .cita__hora-linea { display: none; }
}

.cita--pasada { opacity: 0.7; }

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

/* --- Crédito de la marca ---------------------------------------------------------- */

.credito {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gris-texto);
}

.credito a { color: inherit; font-weight: 600; text-decoration: none; }

.credito a:hover, .credito a:focus-visible { text-decoration: underline; }

.lateral__pie .credito { margin-top: 10px; color: rgba(255, 255, 255, 0.5); }

.lateral__pie .credito a { color: rgba(255, 255, 255, 0.8); }

.inferior__mas .credito { padding: 10px 12px 4px; border-top: 1px solid rgba(0, 0, 0, 0.06); margin-top: 4px; }

.publico__pie { padding: 12px 8px 20px; text-align: center; }