/* Mis Crías — hoja de estilos única, mobile-first.

   Identidad: cuero y suela. Barra superior color cuero con una costura
   punteada (como la de un bozal o una cabezada), nombres de caballos en una
   slab robusta (Bitter) como en los papeles del registro, y el cuerpo en
   Source Sans 3. Cada caballo sin foto se muestra con el color de su pelaje. */

:root {
  --cuero: #3b2415;
  --cuero-2: #52331d;
  --suela: #9a5b2e;
  --suela-claro: #c9894f;
  --oro: #b9862a;
  --oro-claro: #e2b659;
  --oro-bg: #f8edd3;

  --marca-800: var(--cuero);
  --marca-700: var(--suela);
  --marca-500: var(--suela-claro);
  --marca-100: #f1e4d6;

  --macho: #2f6ea8;
  --hembra: #b0476f;

  --ok: #3b7d4a;
  --atencion: #c98a12;
  --critico: #c0433d;

  --texto: #231a13;
  --texto-suave: #75685d;
  --linea: #e6ddd3;
  --fondo: #f5f1eb;
  --panel: #fffdf9;
  --fondo-suave: #ede6dd;

  --critico-bg: #fbe9e7;
  --critico-texto: #93302b;
  --atencion-bg: #fbf1dc;
  --atencion-texto: #7a560c;
  --ok-bg: #e5f0e6;
  --ok-texto: #275c34;
  --info-bg: #f1e4d6;
  --info-texto: #6b3d1c;

  --f-display: "Bitter", "Rockwell", "Georgia", serif;
  --f-texto: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --sombra: 0 1px 2px rgba(59, 36, 21, .06), 0 4px 14px rgba(59, 36, 21, .06);
  --sombra-alta: 0 8px 28px rgba(59, 36, 21, .16);
  --alto-tabbar: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca-100: #3a2819;
    --suela: #d39460;
    --oro: #e2b659;
    --oro-bg: rgba(226, 182, 89, .14);
    --macho: #74aee6;
    --hembra: #ea8fb4;
    --texto: #f3ece4;
    --texto-suave: #b3a597;
    --linea: #3a3028;
    --fondo: #17120e;
    --panel: #221b15;
    --fondo-suave: #2e251d;
    --critico-bg: rgba(224, 96, 90, .16);
    --critico-texto: #ffa29c;
    --atencion-bg: rgba(226, 182, 89, .15);
    --atencion-texto: #f0cf80;
    --ok-bg: rgba(90, 170, 110, .16);
    --ok-texto: #9fd8ac;
    --info-bg: rgba(201, 137, 79, .16);
    --info-texto: #eec39a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .25);
    --sombra-alta: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --marca-100: #3a2819;
  --suela: #d39460;
  --oro: #e2b659;
  --oro-bg: rgba(226, 182, 89, .14);
  --macho: #74aee6;
  --hembra: #ea8fb4;
  --texto: #f3ece4;
  --texto-suave: #b3a597;
  --linea: #3a3028;
  --fondo: #17120e;
  --panel: #221b15;
  --fondo-suave: #2e251d;
  --critico-bg: rgba(224, 96, 90, .16);
  --critico-texto: #ffa29c;
  --atencion-bg: rgba(226, 182, 89, .15);
  --atencion-texto: #f0cf80;
  --ok-bg: rgba(90, 170, 110, .16);
  --ok-texto: #9fd8ac;
  --info-bg: rgba(201, 137, 79, .16);
  --info-texto: #eec39a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .25);
  --sombra-alta: 0 8px 28px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { overscroll-behavior-y: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--suela); }
:focus-visible { outline: 2px solid var(--suela-claro); outline-offset: 2px; }

.ico { width: 22px; height: 22px; flex: none; display: block; }

.app {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* ---------- Barra superior: cuero con costura ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--cuero);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .08));
  color: #fbf3ea;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  border-top: 1.5px dashed rgba(226, 182, 89, .55);
  pointer-events: none;
}

.topbar__btn {
  background: rgba(255, 255, 255, .1);
  border: 0;
  color: #fbf3ea;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar__btn:hover { background: rgba(255, 255, 255, .18); }
.topbar__btn .ico { width: 20px; height: 20px; }
.topbar__titles { flex: 1; min-width: 0; }
.topbar__title { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__sub { font-size: 12.5px; color: rgba(251, 243, 234, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.banda-ejemplo {
  background: var(--atencion-bg);
  color: var(--atencion-texto);
  font-size: 13px;
  padding: 7px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.banda-ejemplo button {
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  flex: none;
}

/* ---------- Vista ---------- */

.view {
  padding: 18px 16px calc(var(--alto-tabbar) + 96px + env(safe-area-inset-bottom, 0px));
  outline: none;
}

/* ---------- Barra inferior ---------- */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 720px;
  display: flex;
  gap: 2px;
  background: var(--panel);
  border-top: 1px solid var(--linea);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  box-shadow: 0 -4px 18px rgba(59, 36, 21, .06);
}

.tabbar__item {
  flex: 1;
  border: 0;
  background: none;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  border-radius: 12px;
}

.tabbar__item .ico { width: 24px; height: 24px; }
.tabbar__item.is-activo { color: var(--suela); }
.tabbar__item.is-activo .ico-caja { background: var(--marca-100); }
.ico-caja { display: flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 999px; transition: background .15s; }

.fab {
  position: fixed;
  right: max(16px, calc(50% - 360px + 16px));
  bottom: calc(var(--alto-tabbar) + 18px + env(safe-area-inset-bottom, 0px));
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 0;
  background: var(--suela);
  color: #fff;
  box-shadow: var(--sombra-alta);
  cursor: pointer;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root[data-theme="dark"] .fab { color: var(--cuero); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fab { color: var(--cuero); } }
.fab .ico { width: 28px; height: 28px; stroke-width: 2.2; }

/* ---------- Portada del inicio ---------- */

.hero {
  background: var(--cuero);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(201, 137, 79, .35), transparent 60%);
  color: #fbf3ea;
  border-radius: var(--r-lg);
  padding: 20px 18px 16px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sombra);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(226, 182, 89, .45);
  border-radius: 16px;
  pointer-events: none;
}

.hero__marca { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-claro); font-weight: 700; }
.hero__nombre { font-size: 27px; line-height: 1.15; margin: 4px 0 2px; }
.hero__fecha { font-size: 13.5px; color: rgba(251, 243, 234, .7); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 16px;
  background: rgba(255, 255, 255, .12);
  border-radius: 12px;
  overflow: hidden;
}

.hero__stat {
  background: var(--cuero-2);
  border: 0;
  color: inherit;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.hero__stat:hover { background: #5e3c23; }
.hero__stat b { display: block; font-family: var(--f-display); font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero__stat span { font-size: 12px; color: rgba(251, 243, 234, .72); }

/* ---------- Bloques ---------- */

.bloque { margin-bottom: 24px; }

.bloque__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.bloque__titulo { font-family: var(--f-texto); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); }
.bloque__accion { font-size: 14px; color: var(--suela); background: none; border: 0; cursor: pointer; font-weight: 700; padding: 0; }

.card {
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  border: 1px solid var(--linea);
  padding: 14px 16px;
}

.card + .card { margin-top: 10px; }

/* ---------- Números ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 11px 13px;
  text-align: left;
}

.stat__num { font-family: var(--f-display); font-size: 23px; font-weight: 600; line-height: 1.15; display: block; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12.5px; color: var(--texto-suave); display: block; }

/* ---------- Avisos ---------- */

.alerta {
  display: flex;
  gap: 11px;
  align-items: center;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14.5px;
  border: 0;
  background: var(--info-bg);
  color: var(--info-texto);
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
}

.alerta + .alerta { margin-top: 6px; }
.alerta__ico { flex: none; display: flex; }
.alerta__ico .ico { width: 20px; height: 20px; }
.alerta b { font-weight: 700; }
.alerta--critico { background: var(--critico-bg); color: var(--critico-texto); }
.alerta--atencion { background: var(--atencion-bg); color: var(--atencion-texto); }
.alerta--ok { background: var(--ok-bg); color: var(--ok-texto); cursor: default; }

/* "Para hacer" de Inicio: lo pendiente contado por tipo. */
.hoy__titulo { font-family: var(--f-texto); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); margin: 20px 0 8px; }
.hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.hoy__item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px; border: 0; border-radius: var(--r-md, 12px); text-align: left; cursor: pointer; font: inherit; }
.hoy__item b { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hoy__item span { font-size: 13px; line-height: 1.3; }
.hoy__item--critico { background: var(--critico-bg); color: var(--critico-texto); }
.hoy__item--atencion { background: var(--atencion-bg); color: var(--atencion-texto); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- Listas ---------- */

.lista {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.lista__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  min-height: 60px;
}

.lista__item + .lista__item { border-top: 1px solid var(--linea); }
.lista__item:hover { background: var(--fondo-suave); }
.lista__cuerpo { flex: 1; min-width: 0; }
.lista__titulo { font-weight: 600; font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.lista__sub { font-size: 13px; color: var(--texto-suave); display: block; overflow: hidden; text-overflow: ellipsis; }
.lista__extra { font-size: 13px; color: var(--texto-suave); text-align: right; flex: none; }
.lista__monto { font-weight: 700; font-size: 14.5px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--ok); }
.neg { color: var(--critico); }

/* Avatar: foto, o el color del pelaje con las iniciales. */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--marca-100);
  color: var(--suela);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

/* Las fotos se ven siempre enteras (el caballo completo), nunca recortadas. */
.avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--fondo-suave); }
.avatar::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  background: transparent;
}
.avatar--M::after { background: var(--macho); }
.avatar--H::after { background: var(--hembra); }

.sexo { font-weight: 700; font-family: var(--f-texto); }
.sexo--M { color: var(--macho); }
.sexo--H { color: var(--hembra); }

.vacio {
  text-align: center;
  color: var(--texto-suave);
  font-size: 14.5px;
  padding: 24px 16px;
  background: var(--panel);
  border-radius: var(--r-md);
  border: 1.5px dashed var(--linea);
}

/* ---------- Chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--info-bg);
  color: var(--info-texto);
  white-space: nowrap;
  line-height: 1.6;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip--gris { background: var(--fondo-suave); color: var(--texto-suave); }
.chip--atencion { background: var(--atencion-bg); color: var(--atencion-texto); }
.chip--critico { background: var(--critico-bg); color: var(--critico-texto); }
.chip--ok { background: var(--ok-bg); color: var(--ok-texto); }
.chip--oro { background: var(--oro-bg); color: var(--oro); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- Filtros ---------- */

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

.filtros::-webkit-scrollbar { display: none; }
/* Pestañas de la ficha: en dos renglones si no entran, así se ven todas sin deslizar. */
.filtros--ficha { flex-wrap: wrap; overflow-x: visible; }

.filtro {
  flex: none;
  border: 1px solid var(--linea);
  background: var(--panel);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--texto-suave);
}

.filtro.is-activo { background: var(--cuero); border-color: var(--cuero); color: #fbf3ea; }
:root[data-theme="dark"] .filtro.is-activo { background: var(--suela); border-color: var(--suela); color: var(--cuero); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .filtro.is-activo { background: var(--suela); border-color: var(--suela); color: var(--cuero); } }
.filtro small { opacity: .7; margin-left: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.buscador {
  width: 100%;
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--texto);
  border-radius: 14px;
  padding: 12px 16px 12px 44px;
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23998877' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M21 21l-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 19px;
  background-position: 15px center;
}

/* Filtro de listas (UI.filtroLista): lo que no coincide se esconde; lo plegado se muestra mientras se busca. */
.no-coincide { display: none !important; }
[data-filtrable]:not(.filtrando) .is-plegado { display: none; }
.filtrando .stats { display: none; }

/* ---------- Ficha ---------- */

.ficha-head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.ficha-foto {
  width: 128px;
  height: 96px;
  border-radius: 22px;
  background: var(--marca-100);
  color: var(--suela);
  flex: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  padding: 0;
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.ficha-foto img { width: 100%; height: 100%; object-fit: contain; background: var(--fondo-suave); }
.ficha-head > div { flex: 1; min-width: 0; }
.ficha-nombre { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.ficha-sub { color: var(--texto-suave); font-size: 14.5px; margin: 3px 0 7px; }
.ficha-linea { font-size: 13.5px; margin: -3px 0 8px; color: var(--texto-suave); line-height: 1.35; }
.ficha-linea .enlace { font-size: inherit; text-align: left; }

.dato-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
}

.dato-fila + .dato-fila { border-top: 1px solid var(--linea); }
.dato-fila__label { color: var(--texto-suave); flex: none; }
.dato-fila__valor { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.nota { font-size: 14.5px; color: var(--texto-suave); white-space: pre-wrap; }
.enlace { color: var(--suela); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; font-size: inherit; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: var(--cuero);
  color: #fbf3ea;
  font-weight: 700;
  font-size: 15.5px;
  padding: 13px 18px;
  cursor: pointer;
  transition: transform .08s, filter .15s;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.985); }
.btn .ico { width: 18px; height: 18px; }
:root[data-theme="dark"] .btn:not(.btn--suave):not(.btn--gris):not(.btn--peligro) { background: var(--suela); color: var(--cuero); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.btn--suave):not(.btn--gris):not(.btn--peligro) { background: var(--suela); color: var(--cuero); } }
.btn--suave { background: var(--marca-100); color: var(--info-texto); }
.btn--gris { background: var(--fondo-suave); color: var(--texto); }
.btn--peligro { background: var(--critico-bg); color: var(--critico-texto); }
.btn--chico { width: auto; padding: 9px 14px; font-size: 14px; border-radius: 12px; }
.btn-fila { display: flex; gap: 8px; }
.btn-fila .btn { flex: 1; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }

.opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1px solid var(--linea);
  background: var(--panel);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-md);
}

.opcion:hover { background: var(--fondo-suave); }
.opcion + .opcion { margin-top: 8px; }
.opcion__ico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--marca-100);
  color: var(--suela);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opcion__titulo { font-weight: 700; }
.opcion__sub { font-size: 13px; color: var(--texto-suave); }
.opcion__cuerpo { flex: 1; min-width: 0; }
.opcion > .ico { color: var(--texto-suave); width: 18px; height: 18px; }

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

.campo { margin-bottom: 14px; }
.campo__label { display: block; font-size: 13.5px; font-weight: 700; color: var(--texto-suave); margin-bottom: 6px; }

.campo__input, .campo__select, .campo__textarea {
  width: 100%;
  border: 1px solid var(--linea);
  background: var(--panel);
  color: var(--texto);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 16px;
  font-family: inherit;
}

.campo__input:focus, .campo__select:focus, .campo__textarea:focus {
  outline: 2px solid var(--suela-claro);
  outline-offset: -1px;
  border-color: transparent;
}

.campo__textarea { min-height: 80px; resize: vertical; }

/* Asistente para subir una planilla: la planilla al lado de las columnas.
   En el celular la tabla va arriba y queda fija mientras se bajan las tarjetas. */
.sheet.is-ancho .sheet__panel { max-width: 1240px; }
.asistente-cols__vista { position: sticky; top: -8px; z-index: 2; background: var(--fondo); padding: 4px 0 10px; margin-bottom: 6px; }
.vista-excel { overflow: auto; max-height: 34vh; border: 1px solid var(--linea); border-radius: 12px; background: var(--panel); }
.vista-excel table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.vista-excel th, .vista-excel td { padding: 5px 9px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; text-align: left; cursor: pointer; }
.vista-excel thead th { position: sticky; top: 0; z-index: 1; background: var(--fondo-suave); vertical-align: top; font-weight: 600; }
.vista-excel__num { position: sticky; left: 0; background: var(--fondo-suave); color: var(--texto-suave); text-align: right; font-size: 11px; cursor: default; z-index: 1; }
.vista-excel thead .vista-excel__num { z-index: 3; }
.vista-excel__letra { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 6px; background: var(--fondo); color: var(--texto-suave); font-size: 11px; font-weight: 700; text-align: center; }
.vista-excel__titulo { display: block; margin-top: 3px; }
.vista-excel__destino { display: block; font-size: 11px; font-weight: 700; color: var(--ok-texto); }
.vista-excel .is-apagada { opacity: .45; }
.vista-excel .is-apagada .vista-excel__destino { color: var(--texto-suave); }
.vista-excel .is-marcada { box-shadow: inset 0 0 0 2px var(--suela-claro); opacity: 1; }
.card.is-marcada { box-shadow: 0 0 0 2px var(--suela-claro); }
@media (min-width: 900px) {
  .asistente-cols { display: grid; grid-template-columns: minmax(330px, 400px) 1fr; gap: 18px; align-items: start; }
  .asistente-cols__lista { grid-column: 1; grid-row: 1; }
  .asistente-cols__vista { grid-column: 2; grid-row: 1; top: 0; margin: 0; padding: 0; }
  .vista-excel { max-height: calc(92vh - 110px); }
}

/* Clave con ojito para ver lo que se escribe (UI.ojitos). */
.clave-ojo { position: relative; display: block; }
.clave-ojo > input { padding-right: 46px; }
.clave-ojo__btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: transparent; color: var(--texto-suave);
  display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer;
}
.clave-ojo__btn:hover { color: var(--texto); }
.clave-ojo__btn svg { width: 20px; height: 20px; }
.campo__ayuda { font-size: 13px; color: var(--texto-suave); margin-top: 5px; }
.campo--par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo--par > .campo { margin-bottom: 14px; min-width: 0; }

.check { display: flex; gap: 10px; align-items: center; font-size: 15px; padding: 6px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--suela); flex: none; }

.segmentado { display: flex; background: var(--fondo-suave); border-radius: 12px; padding: 3px; gap: 3px; }
.segmentado button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px 6px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--texto-suave); }
.segmentado button.is-activo { background: var(--panel); color: var(--texto); box-shadow: var(--sombra); }

.picker { position: relative; }
.picker__lista {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  max-height: 260px;
  overflow-y: auto;
  z-index: 5;
}

.picker__op { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 13px; font-size: 15px; cursor: pointer; color: var(--texto); }
.picker__op + .picker__op { border-top: 1px solid var(--linea); }
.picker__op:hover, .picker__op:focus { background: var(--fondo-suave); outline: none; }
.picker__op small { color: var(--texto-suave); display: block; font-size: 12.5px; }
.picker__op--nuevo { color: var(--suela); font-weight: 700; }
.picker__elegido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--linea);
  background: var(--panel);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 15.5px;
  font-weight: 600;
}

.picker__elegido button { border: 0; background: var(--fondo-suave); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; flex: none; }

.foto-campo { display: flex; align-items: center; gap: 12px; }
.foto-campo__prev { width: 120px; height: 90px; border-radius: 14px; background: var(--fondo-suave); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); font-size: 22px; }
.foto-campo__prev img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Panel inferior ---------- */

.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(28, 16, 8, .5); backdrop-filter: blur(2px); }

.sheet__panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--fondo);
  border-radius: 24px 24px 0 0;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: subir .2s ease-out;
}

@keyframes subir { from { transform: translate(-50%, 30px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet__panel { animation: none; } }

.sheet__grip { width: 42px; height: 5px; border-radius: 5px; background: var(--linea); margin: 2px auto 10px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.sheet__title { font-size: 19px; }
.sheet__close { border: 0; background: var(--fondo-suave); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; flex: none; }

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--alto-tabbar) + 90px + env(safe-area-inset-bottom, 0px));
  background: var(--cuero);
  color: #fbf3ea;
  padding: 11px 18px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 600;
  z-index: 60;
  max-width: calc(100% - 32px);
  box-shadow: var(--sombra-alta);
}

/* ---------- Pedigree ---------- */

.pedigree-scroll { overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; }
.pedigree { display: grid; gap: 5px 7px; }

.ped-celda {
  border: 1px solid var(--linea);
  text-align: left;
  background: var(--panel);
  border-radius: 11px;
  padding: 6px 9px 6px 11px;
  font-size: 12.5px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 38px;
  cursor: pointer;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.ped-celda::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--linea); }
.ped-celda--M::before { background: var(--macho); }
.ped-celda--H::before { background: var(--hembra); }
.ped-celda:hover { background: var(--fondo-suave); }
.ped-celda--raiz { background: var(--marca-100); cursor: default; }
.ped-celda--vacia { background: none; border-style: dashed; color: var(--texto-suave); }
.ped-celda--vacia::before { display: none; }
.ped-celda b { font-family: var(--f-display); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ped-celda small { color: var(--texto-suave); font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.ped-celda .logro { color: var(--oro); font-weight: 700; }
.ped-rep { position: absolute; top: 5px; right: 6px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel); }
.pelaje-punto { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

.nivel { display: inline-block; font-weight: 700; padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.nivel--bajo { background: var(--ok-bg); color: var(--ok-texto); }
.nivel--moderado { background: var(--atencion-bg); color: var(--atencion-texto); }
.nivel--alto, .nivel--muy-alto { background: var(--critico-bg); color: var(--critico-texto); }

.grande { font-family: var(--f-display); font-size: 30px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---------- Barras ---------- */

.barra { margin: 10px 0; }
.barra__fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.barra__fila b { font-variant-numeric: tabular-nums; }
.barra__pista { height: 8px; background: var(--fondo-suave); border-radius: 6px; margin-top: 5px; overflow: hidden; }
.barra__relleno { height: 100%; background: var(--suela-claro); border-radius: 6px; }

.linea-tiempo { position: relative; padding-left: 20px; }
.linea-tiempo::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.hito { position: relative; padding: 5px 0 11px; font-size: 14.5px; }
.hito::before { content: ""; position: absolute; left: -19px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--suela-claro); box-shadow: 0 0 0 3px var(--panel); }
.hito--parto::before { background: var(--ok); }
.hito--malo::before { background: var(--critico); }
.hito small { color: var(--texto-suave); display: block; font-size: 13px; }

/* ---------- Ingreso ---------- */

.login { max-width: 380px; margin: 0 auto; padding: 60px 4px; }
.login__nombre { text-align: center; font-size: 28px; margin: 8px 0 4px; }
.login__bajada { text-align: center; color: var(--texto-suave); margin-bottom: 28px; }

.bienvenida { text-align: center; padding: 30px 20px; }
.bienvenida .ico { width: 64px; height: 64px; margin: 0 auto; color: var(--suela); stroke-width: 1.3; }

/* ---------- Escritorio: barra lateral ---------- */

@media (min-width: 900px) {
  .app { max-width: 980px; }
  .tabbar {
    left: 0;
    transform: none;
    top: 0;
    bottom: 0;
    width: 210px;
    flex-direction: column;
    justify-content: flex-start;
    border-top: 0;
    border-right: 1px solid var(--linea);
    padding: 90px 12px 20px;
    gap: 3px;
    box-shadow: none;
  }
  .tabbar__item { flex: none; flex-direction: row; gap: 10px; padding: 9px 12px; font-size: 15px; justify-content: flex-start; }
  .tabbar__item.is-activo { background: var(--marca-100); }
  .tabbar__item.is-activo .ico-caja { background: none; }
  .ico-caja { width: 26px; height: 26px; }
  .app { margin-left: 210px; }
  .view { padding: 24px 28px 100px; }
  .fab { bottom: 28px; right: 28px; }
  .toast { bottom: 100px; }
  .columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
}

@media (min-width: 1400px) {
  .app { margin-left: auto; }
}

@media print {
  .topbar, .tabbar, .fab, .banda-ejemplo, .no-imprimir, .toast { display: none !important; }
  .app { max-width: none; margin: 0; }
  html, body { background: #fff; color: #000; }
  .view { padding: 0; }
  .card, .lista { box-shadow: none; border: 1px solid #ddd; }
}

/* ---------- Semáforo de parición ---------- */

.semaforo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px 3px 7px;
  white-space: nowrap;
  flex: none;
}

.semaforo i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.semaforo--verde { background: var(--ok-bg); color: var(--ok-texto); }
.semaforo--verde i { background: var(--ok); }
.semaforo--amarillo { background: var(--atencion-bg); color: var(--atencion-texto); }
.semaforo--amarillo i { background: var(--atencion); }
.semaforo--rojo { background: var(--critico-bg); color: var(--critico-texto); }
.semaforo--rojo i { background: var(--critico); box-shadow: 0 0 0 3px rgba(192, 67, 61, .25); }
.semaforo--pasada { background: var(--critico); color: #fff; }
.semaforo--pasada i { background: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .semaforo--rojo i, .semaforo--pasada i { animation: latido 1.6s ease-in-out infinite; }
}
@keyframes latido { 50% { transform: scale(1.35); } }

.gestacion { margin: 12px 0 4px; }
.gestacion__pista { position: relative; height: 12px; border-radius: 8px; overflow: visible; background: var(--fondo-suave); }
.gestacion__tramo { position: absolute; top: 0; bottom: 0; }
.gestacion__tramo--verde { background: var(--ok); opacity: .55; border-radius: 8px 0 0 8px; }
.gestacion__tramo--amarillo { background: var(--atencion); opacity: .7; }
.gestacion__tramo--rojo { background: var(--critico); opacity: .7; }
.gestacion__tramo--pasada { background: var(--critico); border-radius: 0 8px 8px 0; }
.gestacion__hoy {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 22px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--texto);
  box-shadow: 0 0 0 2px var(--panel);
}
.gestacion__marcas { position: relative; height: 18px; margin-top: 5px; font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.gestacion__marcas span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.gestacion__marcas span:first-child { left: 0; transform: none; }
.gestacion__marcas span:last-child { transform: translateX(-70%); }

/* ---------- Selección de varios caballos ---------- */

.marca {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid var(--linea);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--panel);
}

.marca .ico { width: 16px; height: 16px; stroke-width: 3; }
.lista__item--sel.is-sel { background: var(--marca-100); }
.lista__item--sel.is-sel .marca { background: var(--suela); border-color: var(--suela); color: #fff; }

.barra-grupo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -4px 2px 10px; }

.barra-sel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--alto-tabbar) + 12px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 24px);
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  border-radius: 18px;
  background: var(--cuero);
  color: #fbf3ea;
  box-shadow: var(--sombra-alta);
  z-index: 30;
}

.barra-sel__n { flex: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-sel__btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  background: var(--oro-claro);
  color: var(--cuero);
}
.barra-sel__btn .ico { width: 18px; height: 18px; }
.barra-sel__btn--suave { background: rgba(255, 255, 255, .12); color: #fbf3ea; }

@media (min-width: 900px) {
  .barra-sel { left: calc(210px + (100% - 210px) / 2); bottom: 24px; }
}

/* ---------- Campos ---------- */

.campo-lugar__head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; flex-wrap: wrap; }
.campo-lugar__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  flex: 1 1 220px;
}
.campo-lugar__titulo b { font-family: var(--f-display); font-size: 17px; font-weight: 600; display: block; }
.campo-lugar__titulo small { color: var(--texto-suave); font-size: 13px; display: block; }
.campo-lugar__ico { width: 38px; height: 38px; border-radius: 12px; background: var(--marca-100); color: var(--suela); display: flex; align-items: center; justify-content: center; flex: none; }
.campo-lugar__flecha { color: var(--texto-suave); transition: transform .15s; flex: none; }
.campo-lugar__flecha .ico { width: 18px; height: 18px; }
.campo-lugar__flecha.is-abierto { transform: rotate(90deg); }

/* ---------- Contador de doma ---------- */

.doma-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px 2px 7px;
  background: var(--oro-bg);
  color: var(--oro);
  white-space: nowrap;
  line-height: 1.6;
}
.doma-chip .ico { width: 14px; height: 14px; }

.doma-dias { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1; }
.doma-dias b { font-family: var(--f-display); font-size: 24px; font-weight: 600; color: var(--oro); font-variant-numeric: tabular-nums; }
.doma-dias small { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }

.contador-doma { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.contador-doma__num {
  font-family: var(--f-display);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.contador-doma__num small { font-family: var(--f-texto); font-size: 15px; color: var(--texto-suave); font-weight: 600; }
.contador-doma__txt { flex: 1; min-width: 150px; }
.contador-doma__txt span { display: block; font-size: 13.5px; color: var(--texto-suave); }
.contador-doma__acc { flex: none; }

/* ---------- Ficha de venta ---------- */

.ficha-venta__img { border-radius: 14px; overflow: hidden; background: var(--fondo-suave); box-shadow: var(--sombra); }
.ficha-venta__img img { width: 100%; height: auto; display: block; }
.ficha-venta__img .vacio { border: 0; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; }

/* ---------- Marcas: la de la cabaña y la cabeza de la Asociación ---------- */

.marca-cabana { display: block; width: 100%; height: 100%; }
.topbar__marca { width: 30px; height: 36px; flex: none; color: var(--oro-claro); }

.tabbar__marca {
  position: absolute;
  top: 22px;
  left: 20px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--suela);
}
.tabbar__marca .marca-cabana { width: 30px; height: 36px; flex: none; }
.tabbar__marca span:not(.marca-cabana) { font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--texto); }

.hero__fila { display: flex; align-items: center; gap: 14px; position: relative; }
.hero__logo { width: 58px; height: 68px; flex: none; color: var(--oro-claro); }
/* La marca de Mis Crías de fondo, al costado (siempre, también si la cabaña tiene la suya). */
.hero .hero__app {
  position: absolute;
  right: -18px;
  top: -14px;
  width: 190px;
  height: 230px;
  color: #fbf3ea;
  opacity: .13;
  pointer-events: none;
}
.marcas-duo { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 8px; }
.marcas-duo .marca-cabana { width: 78px; height: 92px; color: var(--suela); }
.marcas-duo__sep { width: 1px; height: 64px; background: var(--linea); }

/* Código del mail: grande y espaciado, como en el mail. */
.codigo {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .35em;
  text-align: center;
  padding: 14px 10px;
}
.login__nota { font-size: 13px; color: var(--texto-suave); text-align: center; margin-top: 18px; }

/* Resumen de plata por año */
.tabla-plata { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabla-plata th { text-align: right; font-weight: 600; font-size: 12px; color: var(--texto-suave); padding: 6px 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla-plata td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla-plata th:first-child, .tabla-plata td:first-child { text-align: left; }

/* Orden del plantel */
.orden-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.orden-fila .enlace { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; margin-top: 8px; }
.orden-fila .enlace .ico { width: 17px; height: 17px; }
.orden { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 13px; color: var(--texto-suave); }
.orden .campo__select { width: auto; flex: 0 1 auto; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }

/* Grupos del plantel: pestañas con subrayado, las subdivisiones van en chips debajo */
.grupos { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--linea); margin: 12px 0 12px; scrollbar-width: none; }
.grupos::-webkit-scrollbar { display: none; }
.grupo { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 10px 12px 9px; font: inherit; font-size: 15px; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.grupo small { margin-left: 5px; font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.grupo.is-activo { color: var(--texto); border-bottom-color: var(--oro); }
.grupo:hover { color: var(--texto); }

/* Selector de origen de la manada (todos / nacidos acá / comprados) */
.segmentado.origen { margin: 12px 0 0; }

/* ---------- Datos: gráficos ---------- */
.filtros--chicos { margin-bottom: 10px; }
.filtros--chicos .filtro { padding: 5px 12px; font-size: 13px; }

.viz-barras { padding-top: 6px; padding-bottom: 6px; }
.viz-barra { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 0; font: inherit; color: inherit; border-bottom: 1px solid var(--linea); }
.viz-barra:last-child { border-bottom: 0; }
.viz-barra--link { cursor: pointer; }
.viz-barra--link:hover .viz-barra__nombre { text-decoration: underline; text-underline-offset: 3px; }
.viz-barra__fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.viz-barra__nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.viz-barra__fila b { flex: none; font-variant-numeric: tabular-nums; }
.viz-barra__pista { display: block; height: 8px; background: var(--fondo-suave); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.viz-barra__relleno { display: block; height: 100%; background: var(--suela); border-radius: 0 4px 4px 0; }
.viz-barra__sub { display: block; font-size: 12.5px; color: var(--texto-suave); margin-top: 5px; line-height: 1.35; }

.viz-multiples { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
@media (min-width: 700px) { .viz-multiples { grid-template-columns: 1fr 1fr; } }
.viz-multiple__cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.viz-multiple__cab b { font-size: 15px; }
.viz-multiple__cab span { font-size: 12.5px; color: var(--texto-suave); }
.viz-col { display: block; width: 100%; height: auto; overflow: visible; }
.viz-col__barra { fill: var(--suela); }
.viz-grilla { stroke: var(--linea); stroke-width: 1; }
.viz-eje { fill: var(--texto-suave); font-size: 9px; font-family: inherit; font-variant-numeric: tabular-nums; }
.viz-zona { fill: transparent; cursor: pointer; }
.viz-zona.is-activa { fill: var(--texto); fill-opacity: .06; }
.viz-nota { font-size: 12px; color: var(--texto-suave); margin: 6px 0 0; }
.viz-tabla { margin: 4px 0 16px; }
.viz-tabla summary { cursor: pointer; font-size: 13.5px; color: var(--texto-suave); padding: 6px 0; }
.viz-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--cuero); color: #fbf3ea; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); white-space: nowrap; }
:root[data-theme="dark"] .viz-tip { background: var(--suela); color: var(--cuero); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .viz-tip { background: var(--suela); color: var(--cuero); } }
.viz-multiples > .viz-multiple { margin: 0; }
.stat--link { font: inherit; color: inherit; width: 100%; cursor: pointer; transition: border-color .15s; }
.stat--link:hover { border-color: var(--suela); }
.stat--link .stat__label::after { content: ' ›'; }

/* Sección en proceso */
.en-proceso { text-align: center; padding: 56px 20px; margin: 24px auto; max-width: 520px; background: var(--panel); border: 2px dashed var(--suela); border-radius: var(--r-lg); }
.en-proceso__ico { display: inline-flex; width: 56px; height: 56px; color: var(--suela); margin-bottom: 10px; }
.en-proceso__ico .ico, .en-proceso__ico svg { width: 56px; height: 56px; }
.en-proceso h2 { font-family: var(--f-display); font-size: clamp(34px, 9vw, 52px); letter-spacing: .06em; margin: 0 0 12px; color: var(--texto); }
.en-proceso p { color: var(--texto-suave); font-size: 15px; margin: 0; }

/* Curiosidades */
.viz-oculto { display: none !important; }
.viz-meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; padding: 14px 10px 10px; }
.viz-mes { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.viz-mes:disabled { cursor: default; }
.viz-mes__n { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 15px; }
.viz-mes__col { display: flex; align-items: flex-end; width: 100%; max-width: 26px; height: 110px; background: var(--fondo-suave); border-radius: 4px 4px 0 0; overflow: hidden; }
.viz-mes__col span { display: block; width: 100%; background: var(--suela); border-radius: 4px 4px 0 0; }
.viz-mes__l { font-size: 11px; color: var(--texto-suave); }
.viz-mes.is-actual .viz-mes__l { color: var(--texto); font-weight: 700; }
.viz-mes:not(:disabled):hover .viz-mes__col span { opacity: .8; }

/* ¿Sabías que…? en Inicio */
.sabias { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--oro-bg, var(--panel)); border: 1px solid var(--linea); border-left: 4px solid var(--oro); border-radius: var(--r-md); padding: 12px 14px; margin: -8px 0 20px; }
.sabias__ico { flex: none; width: 22px; height: 22px; color: var(--oro); margin-top: 2px; }
.sabias__ico svg, .sabias__ico .ico { width: 22px; height: 22px; }
.sabias b { display: block; font-size: 13px; letter-spacing: .02em; color: var(--texto-suave); margin-bottom: 2px; }
.sabias__txt { display: block; font-size: 15px; line-height: 1.4; }

/* Buscador de Sanidad: cada resultado con su vencimiento y botón para cargar */
.san-res { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; padding-bottom: 10px; }
.san-res + .san-res { border-top: 1px solid var(--linea); }
.san-res > .lista__item { flex: 1 1 100%; }
.san-res__chip { margin-right: auto; padding-left: 14px; }
.san-res__btn { margin-right: 14px; }

/* Elegir varios caballos (sanidad) */
.elegir__n { font-weight: 500; color: var(--texto-suave); }
.elegir__buscar { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }

/* Documentos */
.doc-ico { flex: none; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: var(--fondo-suave); color: var(--suela); }
.doc-ico svg, .doc-ico .ico { width: 22px; height: 22px; }
.doc-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-md); border: 1px solid var(--linea); background: var(--fondo-suave); }
.doc-pdf { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; border: 2px dashed var(--linea); border-radius: var(--r-md); color: var(--suela); font-weight: 700; }
.doc-pdf svg, .doc-pdf .ico { width: 48px; height: 48px; }

/* Recorrida */
.recorrida__btn { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linea); background: var(--panel); font-size: 20px; font-weight: 700; cursor: pointer; color: var(--texto-suave); }
.recorrida__btn--ok.is-activo { background: var(--ok); border-color: var(--ok); color: #fff; }
.recorrida__btn--aviso.is-activo { background: var(--atencion); border-color: var(--atencion); color: #fff; }
.recorrida__fila.is-bien { background: var(--ok-bg); }
.recorrida__fila.is-atencion { background: var(--atencion-bg); }
.campo-lugar__acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.campo-lugar__acciones .enlace { display: inline-flex; align-items: center; gap: 4px; }
.campo-lugar__acciones svg, .campo-lugar__acciones .ico { width: 16px; height: 16px; }
.novedad { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.novedad img { width: 64px; height: 64px; object-fit: contain; background: var(--fondo-suave); border-radius: 8px; flex: none; }
.novedad b { display: block; }
.novedad small { color: var(--texto-suave); }

/* Agenda */
.evento { align-items: flex-start; }
.evento__fecha { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 52px; border-radius: 10px; background: var(--fondo-suave); line-height: 1.05; }
.evento__fecha b { font-family: var(--f-display); font-size: 21px; }
.evento__fecha small { font-size: 11.5px; text-transform: uppercase; color: var(--texto-suave); letter-spacing: .04em; }

/* Fotos de a muchas */
.fotos-lote { display: grid; gap: 10px; margin: 14px 0; }
.fotos-lote__item { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); padding: 8px; }
.fotos-lote__item img { width: 96px; height: 72px; object-fit: contain; background: var(--fondo-suave); border-radius: 8px; }
.fotos-lote__item small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Miembros de la cabaña */
.miembros { display: grid; gap: 0; }
.miembro { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.miembro:last-child { border-bottom: 0; }
.miembro__datos { flex: 1 1 180px; min-width: 0; }
.miembro__datos b { display: block; overflow-wrap: anywhere; }
.miembro__datos small { color: var(--texto-suave); font-size: 12.5px; overflow-wrap: anywhere; }
.miembro__rol { width: auto; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.invitar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); }
.invitar .campo__input { flex: 1 1 200px; }
.invitar .campo__select { width: auto; }

/* Permiso "Solo mirar": sin botones para agregar o editar (la base igual lo rechazaría). */
.solo-mirar [data-nuevo], .solo-mirar [data-mas], .solo-mirar [data-editar], .solo-mirar [data-servir], .solo-mirar [data-serv-nuevo],
.solo-mirar [data-eco], .solo-mirar [data-venta], .solo-mirar [data-compra], .solo-mirar [data-compra-serv], .solo-mirar [data-cargar-padre],
.solo-mirar [data-tram-hecho], .solo-mirar [data-tram-editar], .solo-mirar [data-todos-bien], .solo-mirar [data-terminar],
.solo-mirar [data-san-nuevo], .solo-mirar [data-parto-nuevo], .solo-mirar [data-nov-resuelta], .solo-mirar [data-nov-nueva],
.solo-mirar [data-nov-editar], .solo-mirar [data-muerte], .solo-mirar [data-mover-uno], .solo-mirar [data-sel-mover],
.solo-mirar [data-medir-varios], .solo-mirar [data-medir], .solo-mirar [data-fotos-guardar], .solo-mirar [data-evento-nuevo],
.solo-mirar [data-empezar-doma], .solo-mirar [data-editar-traslado], .solo-mirar [data-editar-parto], .solo-mirar [data-doc-nuevo],
.solo-mirar [data-doc-editar], .solo-mirar [data-doc-borrar], .solo-mirar [data-interesado], .solo-mirar [data-gasto], .solo-mirar [data-pago],
.solo-mirar [data-bien], .solo-mirar [data-atencion], .solo-mirar [data-serv=""], .solo-mirar [data-parto=""], .solo-mirar [data-sel-grupo],
.solo-mirar [data-modo-sel], .solo-mirar [data-agregar-accc], .solo-mirar [data-intereses], .solo-mirar [data-subir-fotos] { display: none !important; }

/* Marca propia de la cabaña (imagen subida en Ajustes o al crearla). */
/* Se ve solo el dibujo, pintado con el color del texto (igual que el caballo de trazos). */
.marca-cabana--tinta { background: currentColor;
  -webkit-mask: var(--marca-img) center / contain no-repeat; mask: var(--marca-img) center / contain no-repeat; }
.marca-elegir { display: flex; gap: 14px; align-items: flex-start; }
.marca-elegir__prev { width: 128px; height: 68px; flex: none; border-radius: 12px; border: 1.5px dashed var(--linea);
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--fondo-suave); }
.marca-elegir__prev:empty { width: 72px; height: 72px; }
.marca-elegir__oscuro, .marca-elegir__claro { flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 10px; }
.marca-elegir__oscuro { background: var(--cuero); color: var(--oro-claro); }
.marca-elegir__claro { background: #fbf6ef; color: var(--suela); }
.marca-elegir__prev .marca-cabana { width: 100%; height: 100%; }
.marca-elegir__cargando { color: var(--texto-suave); }
.marca-elegir__prev:empty::after { content: '🐎'; font-size: 28px; opacity: .45; }

/* Pegar pedigree de la SRA: vista previa. */
.ped-datos { display: grid; gap: 6px; }
.ped-datos small, .ped-fila small { color: var(--texto-suave); font-weight: 400; }
.ped-lista { display: grid; gap: 8px; }
.ped-fila { display: grid; grid-template-columns: 1fr minmax(150px, 42%); gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--panel); }
.ped-fila--sin { opacity: .6; }
.ped-fila__nombre { min-width: 0; }
.ped-fila__nombre b { display: block; overflow-wrap: anywhere; }
.ped-fila .campo__select { margin: 0; font-size: 14px; }
.ped-choca { color: var(--atencion-texto); }
.solo-mirar [data-pegar-ped] { display: none !important; }
@media (max-width: 480px) { .ped-fila { grid-template-columns: 1fr; } }
.ped-fila__input { margin: 0 0 3px; padding: 6px 8px; font-weight: 700; font-size: 14px; }

/* Pedidos de acceso (dueño de la app). */
.pedido { margin-bottom: 10px; }
.pedido__cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Historial de cambios (vistas-historial.js) ---------- */
.hist-dia { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); margin: 18px 0 8px; }
.hist { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; }
.hist + .hist { border-top: 1px solid var(--linea); }
.hist__ico { width: 32px; height: 32px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.hist__ico .ico { width: 18px; height: 18px; }
.hist__ico--alta { background: var(--ok-bg); color: var(--ok-texto); }
.hist__ico--cambio { background: var(--marca-100); color: var(--info-texto); }
.hist__ico--baja { background: var(--critico-bg); color: var(--critico-texto); }
.hist__ico--deshacer { background: var(--atencion-bg); color: var(--atencion-texto); }
.hist__cuerpo { flex: 1; min-width: 0; }
.hist__titulo { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.hist__cuando { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.hist--deshecho .hist__titulo { text-decoration: line-through; opacity: .65; }
.hist__det { margin-top: 6px; font-size: 13.5px; }
.hist__det summary { cursor: pointer; color: var(--suela); font-weight: 600; padding: 2px 0; }
.hist__parte { margin-top: 8px; }
.hist__parte-tit { font-weight: 600; }
.hist__difs { margin: 4px 0 0; padding-left: 18px; color: var(--texto-suave); }
.hist__difs li { margin: 2px 0; overflow-wrap: anywhere; }
.hist__difs b { color: var(--texto); }
.hist__campo { color: var(--texto); }
.hist__botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hist__botones .ico { width: 15px; height: 15px; vertical-align: -2px; }

/* ---------- Cargar escribiendo (cargar-texto.js) ---------- */
.texto-carga { margin-bottom: 18px; }
.texto-carga__area { min-height: 84px; font-size: 16px; line-height: 1.4; resize: vertical; }
.texto-carga__ejemplos { margin: 4px 0 12px; }
.texto-carga__ejemplos .filtro { font-size: 12.5px; padding: 5px 10px; white-space: normal; text-align: left; }
.texto-carga__o { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); margin: 4px 0 10px; }
.texto-pasos { display: flex; flex-direction: column; gap: 8px; }
.texto-paso { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--panel); }
.texto-paso__ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--marca-100); color: var(--info-texto); font-weight: 700; }
.texto-paso__ico .ico { width: 19px; height: 19px; }
.texto-paso__cuerpo { flex: 1; min-width: 0; }
.texto-paso__det { font-size: 14px; color: var(--texto-suave); margin-top: 2px; overflow-wrap: anywhere; }
.texto-paso__falta { font-size: 13px; color: var(--atencion-texto); margin-top: 4px; }
.texto-paso__botones { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.texto-paso--hecho { opacity: .7; }
.texto-paso--hecho .texto-paso__ico { background: var(--ok-bg); color: var(--ok-texto); }
.texto-paso--nada .texto-paso__ico { background: var(--atencion-bg); color: var(--atencion-texto); }

/* Ajustes → Miembros: qué puede cada permiso. */
.permisos-ayuda { margin-top: 14px; font-size: 13px; color: var(--texto-suave); }
.permisos-ayuda p { margin: 4px 0; }
.permisos-ayuda b { color: var(--texto); }

/* Titularidad: un renglón por dueño con su porcentaje. */
.titulares { display: flex; flex-direction: column; gap: 6px; }
.titulares__fila { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; }
.titulares__fila span:first-child { overflow-wrap: anywhere; }
.titulares__fila .campo__input { padding: 8px 10px; text-align: right; }
.titulares__pie { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--texto-suave); }
.titulares__mal { color: var(--critico-texto); font-weight: 700; }
.duenos-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.duenos-lista__fila { display: flex; gap: 6px; align-items: center; }
.duenos-lista__fila .campo__input { flex: 1; }

/* Personal: se esconde lo mismo que en "solo mirar", menos los botones marcados con data-personal (sanidad, partos y muertes). */
.solo-personal [data-nuevo]:not([data-personal]), .solo-personal [data-mas]:not([data-personal]), .solo-personal [data-editar]:not([data-personal]), .solo-personal [data-servir]:not([data-personal]), .solo-personal [data-serv-nuevo]:not([data-personal]),
.solo-personal [data-eco]:not([data-personal]), .solo-personal [data-venta]:not([data-personal]), .solo-personal [data-compra]:not([data-personal]), .solo-personal [data-compra-serv]:not([data-personal]), .solo-personal [data-cargar-padre]:not([data-personal]),
.solo-personal [data-tram-hecho]:not([data-personal]), .solo-personal [data-tram-editar]:not([data-personal]), .solo-personal [data-todos-bien]:not([data-personal]), .solo-personal [data-terminar]:not([data-personal]),
.solo-personal [data-san-nuevo]:not([data-personal]), .solo-personal [data-parto-nuevo]:not([data-personal]), .solo-personal [data-nov-resuelta]:not([data-personal]), .solo-personal [data-nov-nueva]:not([data-personal]),
.solo-personal [data-nov-editar]:not([data-personal]), .solo-personal [data-muerte]:not([data-personal]), .solo-personal [data-mover-uno]:not([data-personal]), .solo-personal [data-sel-mover]:not([data-personal]),
.solo-personal [data-medir-varios]:not([data-personal]), .solo-personal [data-medir]:not([data-personal]), .solo-personal [data-fotos-guardar]:not([data-personal]), .solo-personal [data-evento-nuevo]:not([data-personal]),
.solo-personal [data-empezar-doma]:not([data-personal]), .solo-personal [data-editar-traslado]:not([data-personal]), .solo-personal [data-editar-parto]:not([data-personal]), .solo-personal [data-doc-nuevo]:not([data-personal]),
.solo-personal [data-doc-editar]:not([data-personal]), .solo-personal [data-doc-borrar]:not([data-personal]), .solo-personal [data-interesado]:not([data-personal]), .solo-personal [data-gasto]:not([data-personal]), .solo-personal [data-pago]:not([data-personal]),
.solo-personal [data-bien]:not([data-personal]), .solo-personal [data-atencion]:not([data-personal]), .solo-personal [data-serv=""]:not([data-personal]), .solo-personal [data-parto=""]:not([data-personal]), .solo-personal [data-sel-grupo]:not([data-personal]),
.solo-personal [data-modo-sel]:not([data-personal]), .solo-personal [data-agregar-accc]:not([data-personal]), .solo-personal [data-intereses]:not([data-personal]) { display: none !important; }
.solo-personal [data-pegar-ped]:not([data-personal]) { display: none !important; }

/* ---------- Galería de fotos de cada caballo (js/fotos.js) ---------- */
/* Siempre el caballo entero: object-fit contain, nunca recortar. */

.galeria { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.galeria__item { position: relative; flex: none; width: 128px; height: 96px; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--fondo-suave); box-shadow: inset 0 0 0 1px var(--linea); cursor: pointer; }
.galeria__item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.galeria__item--sin::after { content: "sin señal"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--texto-suave); }
.galeria__marca { position: absolute; left: 6px; top: 6px; z-index: 1; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff; }
.galeria__agregar { flex: none; width: 128px; height: 96px; border-radius: 12px; border: 1.5px dashed var(--linea); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; color: var(--texto-suave); font-size: 13px; cursor: pointer; }
.galeria__agregar .ico { width: 22px; height: 22px; }
.galeria-ver img { display: block; width: 100%; max-height: 68vh; object-fit: contain; background: var(--fondo-suave); border-radius: var(--r-md); }
.galeria-ver .nota { margin-top: 6px; }
.galeria-ver__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }

/* Cambiar fotos: solo el dueño y el asesor (el personal y "solo mirar" no pueden tocar la ficha). */
.solo-mirar [data-fotos-agregar], .solo-mirar [data-foto-principal], .solo-mirar [data-foto-borrar], .solo-mirar [data-sel-servicio], .solo-personal [data-sel-servicio],
.solo-personal [data-fotos-agregar], .solo-personal [data-foto-principal], .solo-personal [data-foto-borrar], .solo-personal [data-subir-fotos] { display: none !important; }

/* ---------- Gráficos (js/graficos.js) ---------- */

:root { --graf-vacio: var(--fondo-suave); --graf-neutro: #b8aa9b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --graf-neutro: #6f6358; } }
:root[data-theme="dark"] { --graf-neutro: #6f6358; }
.graf--link { cursor: pointer; }
button.graf--link { font: inherit; color: inherit; }

.graf-dona { position: relative; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); flex: none; }
.graf-dona__svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.graf-dona__fondo { fill: none; stroke: var(--graf-vacio); stroke-width: 11; }
.graf-dona__seg { fill: none; stroke-width: 11; stroke-linecap: butt; stroke-dasharray: var(--largo) var(--circ); animation: graf-dona .9s cubic-bezier(.2, .8, .2, 1) both; transition: stroke-width .15s; }
.graf-dona__seg.graf--link:hover { stroke-width: 14; }
@keyframes graf-dona { from { stroke-dasharray: 0 var(--circ); } }
.graf-dona__centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; pointer-events: none; }
.graf-dona__centro b { font-family: var(--f-display); font-size: calc(var(--tam) * .22); font-weight: 700; font-variant-numeric: tabular-nums; }
.graf-dona__centro small { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.graf-dona-caja { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.graf-leyenda { display: grid; gap: 4px; flex: 1; min-width: 150px; margin-top: 6px; }
.graf-leyenda__item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm); background: none; border: 0; text-align: left; font-size: 14px; }
.graf-leyenda__item i { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.graf-leyenda__item span { flex: 1; color: var(--texto-suave); }
.graf-leyenda__item b { font-variant-numeric: tabular-nums; }
.graf-leyenda__item small { color: var(--texto-suave); font-weight: 500; margin-left: 3px; }
.graf-leyenda__item.graf--link:hover { background: var(--fondo-suave); }
.graf-leyenda__item.graf--link span::after { content: ' ›'; }

.graf-anillos { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin: 14px 0; }
.graf-anillo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-lg); text-align: center; box-shadow: var(--sombra); }
.graf-anillo.graf--link:hover { border-color: var(--suela); }
.graf-anillo__txt { font-weight: 600; font-size: 14px; line-height: 1.2; }
.graf-anillo__sub { font-size: 12px; color: var(--texto-suave); margin-top: -4px; }

.graf-barra { display: flex; height: 30px; border-radius: 10px; overflow: hidden; gap: 2px; background: var(--graf-vacio); }
.graf-barra__seg { display: grid; place-items: center; min-width: 4px; color: #fff; font-size: 13px; animation: graf-crecer-x .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; transition: filter .15s; }
.graf-barra__seg b { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.graf-barra__seg.graf--link:hover { filter: brightness(1.12); }
.graf-barra + .graf-leyenda { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@keyframes graf-crecer-x { from { transform: scaleX(0); } }

.graf-cols { display: flex; align-items: flex-end; gap: 4px; height: calc(var(--alto) + 40px); padding: 4px 2px 0; overflow-x: auto; }
.graf-cols__col { flex: 1 1 0; min-width: 0; max-width: 64px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; background: none; border: 0; padding: 0; border-radius: 8px; }
.graf-cols__col.graf--link:hover .graf-cols__pila { filter: brightness(1.1); }
.graf-cols__arriba { font-size: 12.5px; font-weight: 700; text-align: center; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.graf-cols__pila { display: flex; flex-direction: column; min-height: 3px; max-height: var(--alto); border-radius: 8px 8px 3px 3px; overflow: hidden; gap: 1px; animation: graf-crecer-y .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom; }
.graf-cols__pila i { display: block; min-height: 2px; }
.graf-cols__etiqueta { font-size: 10.5px; color: var(--texto-suave); text-align: center; margin-top: 5px; white-space: nowrap; height: 16px; }
@keyframes graf-crecer-y { from { transform: scaleY(0); } }

.graf-linea { padding: 6px 4px 0; }
.graf-linea__pista { position: relative; height: calc(var(--filas) * 22px + 18px); border-bottom: 2px solid var(--linea); margin: 0 8px; }
.graf-linea--etiquetas .graf-linea__pista { height: calc(var(--filas) * 30px + 18px); }
.graf-linea__punto { position: absolute; bottom: calc(var(--fila) * 22px + 6px); transform: translateX(-7px); display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; animation: graf-aparecer .5s ease-out both; white-space: nowrap; }
.graf-linea--etiquetas .graf-linea__punto { bottom: calc(var(--fila) * 30px + 6px); }
.graf-linea__punto i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--c); flex: none; transition: transform .15s; }
.graf-linea__punto.graf--link:hover i { transform: scale(1.25); }
.graf-linea__punto span { font-size: 12px; font-weight: 600; background: var(--panel); padding: 1px 5px; border-radius: 6px; }
.graf-linea__hoy { position: absolute; top: 0; bottom: -2px; border-left: 2px dashed var(--oro); }
.graf-linea__hoy small { position: absolute; top: -2px; left: 4px; font-size: 11px; color: var(--oro); font-weight: 700; }
.graf-linea__eje { position: relative; height: 20px; margin: 0 8px; }
.graf-linea__marca { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
@keyframes graf-aparecer { from { opacity: 0; } }
.graf-linea__punto--izq { flex-direction: row-reverse; transform: translateX(calc(-100% + 7px)); }

.graf-avance { display: block; height: 5px; border-radius: 3px; background: var(--graf-vacio); overflow: hidden; margin-top: 5px; }
.graf-avance i { display: block; height: 100%; border-radius: 3px; animation: graf-crecer-x .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }

/* Tarjeta de gráfico: el contenedor de cada uno. */
.graf-card { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }
.graf-card__titulo { font-family: var(--f-display); font-weight: 600; font-size: 16px; margin: 0 0 10px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.graf-card__titulo small { font-family: var(--f-texto); font-weight: 500; font-size: 12.5px; color: var(--texto-suave); }
.graf-cabecera { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.graf-cabecera__datos { flex: 1; min-width: 180px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.graf-num { background: var(--fondo-suave); border-radius: var(--r-md); padding: 10px 12px; text-align: left; border: 0; font: inherit; color: inherit; }
.graf-num b { display: block; font-family: var(--f-display); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.graf-num span { font-size: 12.5px; color: var(--texto-suave); }
button.graf-num { cursor: pointer; }
button.graf-num:hover { background: var(--linea); }
button.graf-num span::after { content: ' ›'; }

/* Renglón compacto: nombre a la izquierda, resultado o potrillo a la derecha. */
.filas-cortas { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; }
.fila-corta { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; border-top: 1px solid var(--linea); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fila-corta:first-child { border-top: 0; }
.fila-corta:hover { background: var(--fondo-suave); }
.fila-corta__nombre { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-corta__punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fila-corta__der { flex: none; max-width: 55%; text-align: right; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.temporada-cerrada { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md); margin-bottom: 8px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.temporada-cerrada:hover { border-color: var(--suela); }
.temporada-cerrada b { font-family: var(--f-display); min-width: 64px; }
.temporada-cerrada span { flex: 1; font-size: 13.5px; color: var(--texto-suave); }
.temporada-cerrada .graf-barra { height: 8px; width: 70px; flex: none; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .graf-dona__seg, .graf-barra__seg, .graf-cols__pila, .graf-linea__punto, .graf-avance i { animation: none; }
}
.graf-quieto .graf-dona__seg, .graf-quieto .graf-barra__seg, .graf-quieto .graf-cols__pila, .graf-quieto .graf-linea__punto, .graf-quieto .graf-avance i { animation: none; }
.graf-leyenda--fila { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.graf-leyenda--fila .graf-leyenda__item { padding: 2px 0; font-size: 12.5px; }
.graf-leyenda--fila .graf-leyenda__item b:empty { display: none; }
.graf-card__titulo { flex-wrap: wrap; }
.graf-card__titulo small { flex-basis: 100%; }
.graf-card__titulo small:only-child, .graf-card__titulo > small:last-child:first-child { flex-basis: auto; }
.graf-barra + .graf-leyenda--fila { margin-top: 10px; gap: 4px 14px; }
.graf-barra + .graf-leyenda--fila .graf-leyenda__item { font-size: 13.5px; }
.graf-barra + .graf-leyenda--fila .graf-leyenda__item span { flex: none; }

/* ---------- Alta de cabañas nuevas (altas.js) ---------- */
.alta { margin-bottom: 12px; }
.alta p { margin: 0 0 8px; line-height: 1.45; }
.alta__titulo { font-family: var(--f-display); font-size: 22px; margin: 0 0 8px; }
.alta__subir { margin-bottom: 12px; }
.alta__subir .btn { display: inline-flex; align-items: center; gap: 6px; }
.alta__consejos { margin: 12px 0 0; padding-left: 18px; color: var(--texto-suave); font-size: 14px; line-height: 1.5; }
.alta__cola { margin-top: 12px; border-top: 1px solid var(--linea); padding-top: 8px; }
.alta__cola-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; }
.alta__cola-fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.alta__cola-fila small { color: var(--texto-suave); flex: none; }
.alta__listo { text-align: center; padding: 10px 0; }
.alta__listo .ico { width: 44px; height: 44px; color: var(--ok); }
.alta__listo h2 { font-family: var(--f-display); margin: 8px 0; }
.alta__listo p { color: var(--texto-suave); margin: 0 0 18px; }
.alta__errores, .alta__avisos { border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.alta__errores { background: var(--critico-bg); color: var(--critico-texto); }
.alta__avisos { background: var(--atencion-bg); color: var(--atencion-texto); }
.alta__errores ul, .alta__avisos ul { margin: 6px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; }
.alta__errores li, .alta__avisos li { margin: 2px 0; }
.revisiones-ficha { margin: 10px 0; border-left: 4px solid var(--atencion); }
.revisiones-ficha > b { display: block; margin-bottom: 4px; }
.revision .lista__sub { white-space: normal; }

/* Bloque plegable (nietos en Familia, grupos de vencimientos en Sanidad):
   el título se toca para abrir; adentro, la lista de siempre. */
.plegable { margin: 18px 0; }
.plegable > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-md, 12px); font-weight: 700; }
.plegable > summary::after { content: '›'; margin-left: auto; font-size: 20px; line-height: 1; color: var(--texto-suave); transition: transform .15s; }
.plegable[open] > summary::after { transform: rotate(90deg); }
.plegable > summary small { font-weight: 500; color: var(--texto-suave); }
.plegable > summary > span:first-child { flex: 1; min-width: 0; }
.plegable > .lista { margin-top: 8px; }

/* Pestañas de la Manada en el celular: más juntas, para que entren las cuatro. */
@media (max-width: 480px) {
  .grupo { padding: 10px 8px 9px; font-size: 14px; }
  .grupo small { margin-left: 3px; }
}

/* Opciones una debajo de la otra (Orden y origen de la Manada). */
.segmentado--lista { flex-direction: column; }
.segmentado--lista button { text-align: left; padding: 11px 12px; font-size: 15px; }
.orden-fila > .btn { margin-top: 10px; }

/* Rankings de Datos: después del puesto 15 quedan ocultas hasta «Ver…», salvo cuando se busca. */
.viz-barra--extra { display: none; }
.filtrando .viz-barra--extra { display: block; }

/* Tarjeta resumen de la ficha: datos clave, cuadros que llevan a su pestaña y tres renglones (por qué importa, abuelos, hoy). */
.resumen { margin: 0 0 14px; display: grid; gap: 10px; }
.resumen__datos { margin: 0; font-size: 14px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.resumen__cuadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.resumen__cuadro { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--fondo-suave); font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.resumen__cuadro b { font-family: var(--f-display); font-size: 19px; font-variant-numeric: tabular-nums; }
.resumen__cuadro span { font-size: 12.5px; color: var(--texto-suave); line-height: 1.3; }
.resumen__cuadro--ok { border-color: var(--ok); }
.resumen__cuadro--atencion { border-color: var(--atencion); }
.resumen__cuadro:hover { border-color: var(--suela); }
.resumen__linea { margin: 0; font-size: 14.5px; line-height: 1.4; }
.resumen__linea > span:first-child { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }

/* Historia (línea de vida) en la ficha: un título por año y un color por clase de cosa. */
.historia__anio { font-family: var(--f-display); font-size: 16px; margin: 14px 0 6px; color: var(--suela); }
.historia__anio:first-child { margin-top: 0; }
.historia__hito--cria::before { background: var(--hembra) !important; }
.historia__hito--sanidad::before { background: var(--ok) !important; }
.historia__hito--logros::before { background: var(--oro) !important; }
.historia__hito--papeles::before { background: var(--suela) !important; }

/* Árbol de pedigree: grilla en la compu, lista que se abre de a una generación en el celular. */
.arbol-celu { display: none; }
@media (max-width: 640px) {
  .arbol-ancho { display: none; }
  .arbol-celu { display: block; }
}
.arbol-lista { display: grid; gap: 6px; }
.arbol-nodo__cab { display: flex; align-items: center; gap: 10px; padding: 9px 6px 9px 0; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-sm); cursor: pointer; list-style: none; min-width: 0; }
.arbol-nodo--hoja .arbol-nodo__cab { cursor: default; }
.arbol-nodo__barra { flex: none; align-self: stretch; width: 4px; border-radius: 0 4px 4px 0; background: var(--linea); }
.arbol-nodo__barra--M { background: var(--macho); }
.arbol-nodo__barra--H { background: var(--hembra); }
.arbol-nodo__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arbol-nodo__txt b { font-family: var(--f-display); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.arbol-nodo__txt small { color: var(--texto-suave); font-size: 12.5px; }
details.arbol-nodo > summary .arbol-nodo__txt b::before { content: '▸ '; color: var(--texto-suave); }
details.arbol-nodo[open] > summary .arbol-nodo__txt b::before { content: '▾ '; }
.arbol-nodo__acc { flex: none; border: 0; background: var(--fondo-suave); color: var(--texto); border-radius: 8px; width: 34px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; }
.arbol-nodo__hijos { display: grid; gap: 6px; margin: 6px 0 2px 14px; padding-left: 10px; border-left: 2px solid var(--linea); }
.arbol-vacio { text-align: left; border: 1px dashed var(--linea); background: none; border-radius: var(--r-sm); padding: 8px 10px; color: var(--texto-suave); font: inherit; font-size: 13px; cursor: pointer; }

/* Manada: Orden, Filtros y Subir fotos en un renglón; los filtros puestos, como chips con ×. */
.orden-fila { justify-content: flex-start; }
.orden-fila [data-subir-fotos] { margin-left: auto; }
.filtros-puestos { margin: 10px 0 0; align-items: center; }
.chip--filtro { padding: 6px 11px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; background: var(--oro-bg); color: var(--texto); }

/* =====================================================================
   Capa moderna (2026-10-24). Pedido del dueño: que la app se sienta una
   plataforma moderna de genética y gestión equina, no una planilla.
   - Letra Geist para todo lo de la app (nítida, números parejos); Bitter
     queda solo para los nombres de los caballos y de la cabaña, como en los
     papeles del registro.
   - Neutros más limpios, bordes de un pelo, sombras suaves en capas,
     esquinas un poco más chicas: menos tarjeta pesada, más plataforma.
   - Todo lo que se toca responde: color al pasar, se hunde al apretar,
     transiciones cortas. Respeta «reducir movimiento» del teléfono.
   Va al final para pisar lo de arriba sin tocarlo.
   ===================================================================== */

:root {
  --f-texto: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ui: var(--f-texto);
  --texto: #1d1814;
  --texto-suave: #6f655c;
  --texto-tenue: #9a8f85;
  --linea: #e9e4de;
  --linea-fuerte: #dcd4cb;
  --fondo: #f7f5f2;
  --panel: #ffffff;
  --fondo-suave: #f0ece7;
  --marca-100: #f4e9dd;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --sombra: 0 1px 1px rgba(40, 26, 14, .04), 0 1px 3px rgba(40, 26, 14, .06);
  --sombra-media: 0 2px 4px rgba(40, 26, 14, .04), 0 8px 20px rgba(40, 26, 14, .08);
  --sombra-alta: 0 4px 10px rgba(40, 26, 14, .06), 0 18px 44px rgba(40, 26, 14, .16);
  --anillo: 0 0 0 3px rgba(201, 137, 79, .28);
  --rapido: .14s cubic-bezier(.2, .7, .3, 1);
  --suave-t: .24s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --texto: #f2ede7;
    --texto-suave: #aaa096;
    --texto-tenue: #7d746b;
    --linea: #2b2621;
    --linea-fuerte: #3a332c;
    --fondo: #131110;
    --panel: #1b1816;
    --fondo-suave: #24201c;
    --marca-100: #33251a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-media: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .35);
    --sombra-alta: 0 6px 16px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .55);
    --anillo: 0 0 0 3px rgba(211, 148, 96, .35);
  }
}
:root[data-theme="dark"] {
  --texto: #f2ede7;
  --texto-suave: #aaa096;
  --texto-tenue: #7d746b;
  --linea: #2b2621;
  --linea-fuerte: #3a332c;
  --fondo: #131110;
  --panel: #1b1816;
  --fondo-suave: #24201c;
  --marca-100: #33251a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-media: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .35);
  --sombra-alta: 0 6px 16px rgba(0, 0, 0, .45), 0 24px 56px rgba(0, 0, 0, .55);
  --anillo: 0 0 0 3px rgba(211, 148, 96, .35);
}

html, body { font-family: var(--f-texto); font-size: 15.5px; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--f-ui); font-weight: 600; letter-spacing: -.015em; }
:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 8px; }
::selection { background: rgba(201, 137, 79, .28); }

/* Nombres de caballos y de la cabaña: la slab del registro. */
.ficha-nombre, .hero__nombre, .ped-celda b, .arbol-nodo__txt b, .login__nombre { font-family: var(--f-display); letter-spacing: -.01em; }
/* Números grandes: Geist con cifras parejas (se leen mejor en columna). */
.stat__num, .hero__stat b, .hoy__item b, .resumen__cuadro b, .doma-dias b, .contador-doma__num, .grande, .graf-num b, .codigo {
  font-family: var(--f-ui); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ---------- Barra superior: vidrio claro con la marca ---------- */
.topbar {
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  background-image: none;
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  color: var(--texto);
  border-bottom: 1px solid var(--linea);
  padding: 10px 16px 10px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.topbar::after { display: none; }
.topbar__btn { background: transparent; color: var(--texto); border: 1px solid var(--linea); border-radius: 10px; width: 36px; height: 36px; transition: background var(--rapido), border-color var(--rapido), transform var(--rapido); }
.topbar__btn:hover { background: var(--fondo-suave); border-color: var(--linea-fuerte); }
.topbar__btn:active { transform: scale(.94); }
.topbar__title { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.topbar__sub { color: var(--texto-suave); font-size: 12.5px; }
.topbar__marca { color: var(--suela); }
.banda-ejemplo { border-bottom: 1px solid var(--linea); font-size: 12.5px; }

/* ---------- Barra de abajo (celular) y lateral (compu) ---------- */
.tabbar {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 -1px 0 var(--linea);
  border-top: 0;
}
.tabbar__item { font-size: 11px; font-weight: 500; transition: color var(--rapido); }
.tabbar__item:active .ico-caja { transform: scale(.92); }
.tabbar__item.is-activo { color: var(--texto); font-weight: 600; }
.tabbar__item.is-activo .ico-caja { background: var(--marca-100); color: var(--suela); }
.ico-caja { transition: background var(--rapido), transform var(--rapido); }
.tabbar__item:hover:not(.is-activo) { color: var(--texto); }
@media (min-width: 900px) {
  .tabbar { background: var(--fondo); box-shadow: 1px 0 0 var(--linea); -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 84px; }
  .tabbar__item { font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: 8px; color: var(--texto-suave); transition: background var(--rapido), color var(--rapido); }
  .tabbar__item:hover:not(.is-activo) { background: var(--fondo-suave); }
  .tabbar__item.is-activo { background: var(--panel); color: var(--texto); box-shadow: var(--sombra), inset 0 0 0 1px var(--linea); }
  .tabbar__item.is-activo .ico-caja { background: none; }
  .tabbar__item .ico { width: 19px; height: 19px; }
  .topbar { padding-left: 28px; padding-right: 28px; }
}

/* ---------- Botón + ---------- */
.fab { border-radius: 16px; background: var(--cuero); color: #fbf3ea; box-shadow: var(--sombra-alta); transition: transform var(--rapido), box-shadow var(--rapido), filter var(--rapido); }
.fab:hover { transform: translateY(-2px); filter: brightness(1.1); }
.fab:active { transform: scale(.94); }
:root[data-theme="dark"] .fab { background: var(--suela); color: #1b120b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fab { background: var(--suela); color: #1b120b; } }

/* ---------- Superficies ---------- */
.card, .lista { border-radius: var(--r-md); box-shadow: var(--sombra); border-color: var(--linea); }
.bloque { margin-bottom: 26px; }
.bloque__titulo, .hoy__titulo { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--texto-tenue); }
.bloque__accion { font-weight: 600; font-size: 13.5px; }

/* ---------- Listas: respuesta al pasar y al tocar ---------- */
.lista__item { min-height: 58px; padding: 10px 14px; transition: background var(--rapido); }
.lista__item:hover { background: color-mix(in srgb, var(--fondo-suave) 70%, transparent); }
.lista__item:active { background: var(--fondo-suave); }
.lista__titulo { font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.lista__sub { font-size: 12.5px; }
.avatar { border-radius: 10px; width: 42px; height: 42px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }

/* ---------- Botones ---------- */
.btn {
  border-radius: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 1px 2px rgba(40, 26, 14, .18);
  transition: transform var(--rapido), filter var(--rapido), background var(--rapido), box-shadow var(--rapido);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn--chico { border-radius: 9px; padding: 8px 13px; font-size: 13.5px; }
.btn--suave, .btn--gris { box-shadow: inset 0 0 0 1px var(--linea); }
.btn--suave { background: var(--panel); color: var(--texto); }
.btn--suave:hover, .btn--gris:hover { filter: none; background: var(--fondo-suave); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.btn--gris { background: var(--fondo-suave); color: var(--texto); }
.btn--peligro { box-shadow: none; }
.enlace { font-weight: 600; transition: opacity var(--rapido); }
.enlace:hover { opacity: .8; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Opciones de menú ---------- */
.opcion { border-radius: var(--r-md); box-shadow: var(--sombra); transition: background var(--rapido), border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido); }
.opcion:hover { border-color: var(--linea-fuerte); background: var(--panel); transform: translateY(-1px); box-shadow: var(--sombra-media); }
.opcion:active { transform: scale(.99); }
.opcion__ico { border-radius: 10px; width: 40px; height: 40px; }
.opcion__titulo { font-weight: 600; }

/* ---------- Chips y semáforo ---------- */
.chip { font-weight: 600; font-size: 11.5px; padding: 2px 8px; }
.semaforo { font-weight: 600; font-size: 12px; }

/* ---------- Filtros (píldoras) y pestañas ---------- */
.filtro { padding: 6px 12px; font-size: 13.5px; font-weight: 500; transition: background var(--rapido), color var(--rapido), border-color var(--rapido); }
.filtro:hover:not(.is-activo) { border-color: var(--linea-fuerte); color: var(--texto); }
.filtro.is-activo { font-weight: 600; }
.grupo { font-size: 14px; font-weight: 500; padding: 10px 11px 9px; border-bottom-width: 2px; transition: color var(--rapido), border-color var(--rapido); }
.grupo.is-activo { font-weight: 600; border-bottom-color: var(--suela); }
.segmentado { border-radius: 10px; }
.segmentado button { border-radius: 8px; font-weight: 500; transition: background var(--rapido), color var(--rapido); }
.segmentado button.is-activo { font-weight: 600; }

/* ---------- Buscador y formularios ---------- */
.buscador, .campo__input, .campo__select, .campo__textarea, .picker__elegido {
  border-radius: 10px; border-color: var(--linea-fuerte); box-shadow: 0 1px 1px rgba(40, 26, 14, .03);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.buscador { padding: 11px 14px 11px 42px; font-size: 15.5px; }
.buscador:hover, .campo__input:hover, .campo__select:hover, .campo__textarea:hover { border-color: var(--texto-tenue); }
.buscador:focus, .campo__input:focus, .campo__select:focus, .campo__textarea:focus { outline: none; border-color: var(--suela-claro); box-shadow: var(--anillo); }
.campo__label { font-size: 13px; font-weight: 500; color: var(--texto-suave); }
.picker__lista { border-radius: 10px; box-shadow: var(--sombra-alta); }

/* ---------- Números (stats), Para hacer y resumen ---------- */
.stat, .hoy__item, .resumen__cuadro { transition: transform var(--rapido), box-shadow var(--rapido), border-color var(--rapido); }
.stat { border-radius: var(--r-md); box-shadow: var(--sombra); }
.stat--link:hover, .hoy__item:hover, .resumen__cuadro:hover { transform: translateY(-1px); box-shadow: var(--sombra-media); }
.stat--link:active, .hoy__item:active, .resumen__cuadro:active { transform: scale(.98); }
.stat__label { font-size: 12px; }
.hoy__item { border-radius: var(--r-md); position: relative; overflow: hidden; }
.hoy__item b { font-size: 28px; }
.hoy__item::after { content: "\203A"; position: absolute; right: 12px; top: 8px; font-size: 18px; opacity: .45; }
.resumen__cuadro { background: var(--panel); border-radius: 10px; box-shadow: var(--sombra); }

/* ---------- Avisos: barrita de color a la izquierda ---------- */
.alerta { border-radius: 10px; padding: 11px 13px 11px 15px; transition: filter var(--rapido); overflow: hidden; }
.alerta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; opacity: .55; }
.alerta:hover { filter: brightness(.98) saturate(1.05); }

/* ---------- Portada de Inicio ---------- */
.hero { box-shadow: var(--sombra-media); background-image: radial-gradient(120% 90% at 100% 0%, rgba(201, 137, 79, .38), transparent 60%), linear-gradient(160deg, rgba(255, 255, 255, .04), transparent 40%); }
.hero::before { border: 1px solid rgba(226, 182, 89, .18); border-radius: 12px; inset: 6px; }
.hero__marca { font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.hero__stats { border-radius: 10px; }
.hero__stat { transition: background var(--rapido); }
.hero__stat b { font-size: 25px; }

/* ---------- Ficha ---------- */
.ficha-foto { border-radius: 16px; box-shadow: var(--sombra-media), inset 0 0 0 1px rgba(0, 0, 0, .06); transition: transform var(--rapido); }
.ficha-foto:hover { transform: scale(1.02); }
.ficha-nombre { font-size: 23px; }
.dato-fila { font-size: 14.5px; padding: 9px 0; }
.dato-fila__valor { font-weight: 500; }

/* ---------- Panel: entra y sale suave (en la compu, ventana centrada) ---------- */
.sheet__backdrop { background: rgba(20, 12, 6, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: velo var(--suave-t); }
.sheet__panel { border-radius: 20px 20px 0 0; box-shadow: var(--sombra-alta); animation: subir .28s cubic-bezier(.2, .8, .25, 1); }
.sheet__title { font-size: 18px; font-weight: 600; }
.sheet__close { width: 32px; height: 32px; font-size: 18px; color: var(--texto-suave); transition: background var(--rapido), color var(--rapido); }
.sheet__close:hover { background: var(--linea); color: var(--texto); }
.sheet.is-cerrando .sheet__panel { animation: bajar .18s ease-in forwards; }
.sheet.is-cerrando .sheet__backdrop { animation: velo-sale .18s ease-in forwards; }
@keyframes subir { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes bajar { to { transform: translate(-50%, 36px); opacity: 0; } }
@keyframes velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes velo-sale { to { opacity: 0; } }
@media (min-width: 900px) {
  .sheet__panel { bottom: auto; top: 50%; border-radius: 16px; transform: translate(-50%, -50%); max-height: 86vh; animation: aparecer-modal .22s cubic-bezier(.2, .8, .25, 1); }
  .sheet.is-cerrando .sheet__panel { animation: salir-modal .16s ease-in forwards; }
  .sheet__grip { display: none; }
}
@keyframes aparecer-modal { from { transform: translate(-50%, -48%) scale(.97); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes salir-modal { to { transform: translate(-50%, -49%) scale(.98); opacity: 0; } }

/* ---------- Aviso (toast): sube, con ícono ---------- */
.toast { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 10px 16px 10px 12px; font-size: 14px; font-weight: 500; background: #1d1814; color: #f7f2ec; box-shadow: var(--sombra-alta); animation: toast-entra .26s cubic-bezier(.2, .8, .25, 1); }
.toast.is-saliendo { animation: toast-sale .18s ease-in forwards; }
.toast__ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #3b7d4a; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.toast--error .toast__ico { background: #c0433d; }
.toast--info .toast__ico { background: #8a7c70; }
:root[data-theme="dark"] .toast { background: #f2ede7; color: #1d1814; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #f2ede7; color: #1d1814; } }
@keyframes toast-entra { from { transform: translate(-50%, 12px) scale(.97); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes toast-sale { to { transform: translate(-50%, 8px); opacity: 0; } }

/* ---------- Cambio de pantalla: aparece suave ---------- */
.view--entra > * { animation: entra-pantalla .26s cubic-bezier(.2, .7, .3, 1) both; }
.view--entra > *:nth-child(2) { animation-delay: .02s; }
.view--entra > *:nth-child(3) { animation-delay: .04s; }
.view--entra > *:nth-child(4) { animation-delay: .06s; }
.view--entra > *:nth-child(n+5) { animation-delay: .08s; }
@keyframes entra-pantalla { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Esqueletos de carga ---------- */
.esqueleto { position: relative; overflow: hidden; background: var(--fondo-suave); border-radius: 10px; }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 65%, transparent), transparent); animation: brillo 1.3s ease-in-out infinite; }
@keyframes brillo { to { transform: translateX(100%); } }
.esqueleto-pantalla { display: grid; gap: 12px; padding-top: 4px; }
.esqueleto--hero { height: 150px; border-radius: var(--r-lg); }
.esqueleto--fila { height: 58px; }
.esqueleto-cuadros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.esqueleto--cuadro { height: 84px; border-radius: var(--r-md); }
.esqueleto-texto { text-align: center; font-size: 13px; color: var(--texto-tenue); }
.galeria__item img:not([src]) { background: var(--fondo-suave); }

/* ---------- Vacío ---------- */
.vacio { border: 1px dashed var(--linea-fuerte); border-radius: var(--r-md); background: transparent; font-size: 14px; padding: 28px 18px; }

/* ---------- Historia ---------- */
.historia__anio { display: inline-block; font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--suela); background: var(--marca-100); padding: 2px 10px; border-radius: 999px; }

/* ---------- Agenda en Inicio: la fecha como hojita de calendario ---------- */
.fecha-hoja { flex: none; width: 42px; height: 44px; border-radius: 10px; border: 1px solid var(--linea); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: var(--sombra); overflow: hidden; }
.fecha-hoja small { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--critico); }
.fecha-hoja b { font-size: 17px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .view--entra > *, .sheet__panel, .sheet__backdrop, .toast, .esqueleto::after { animation: none !important; }
  * { transition-duration: 0s !important; }
}

/* Manada por partes: «Ver más» al pie (se carga solo al acercarse). */
.mas-filas { display: block; margin: 10px auto 0; }

/* Listas largas: el navegador no acomoda ni dibuja los renglones que están fuera
   de la pantalla hasta que se acercan (content-visibility). Ubicación o Sanidad
   con miles de renglones abren mucho más rápido; los renglones siguen ahí para
   el buscador. 58px es el alto aproximado de un renglón. */
.lista > .lista__item { content-visibility: auto; contain-intrinsic-size: auto 58px; }

/* =====================================================================
   Recorridos guiados (js/guia.js). Lo resaltado queda con luz y el resto
   oscuro; la tarjeta dice qué es y, a veces, qué tocar. En el celular la
   tarjeta va abajo (o arriba si lo resaltado está abajo).
   ===================================================================== */

.guia { position: fixed; inset: 0; z-index: 80; pointer-events: none; animation: guia-aparece .25s ease both; }
.guia.is-fuera { animation: guia-desaparece .2s ease both; }
.guia-luz {
  position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(14, 10, 7, .64), 0 0 0 2px rgba(255, 255, 255, .85), 0 0 24px 4px rgba(226, 182, 89, .35);
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), width .38s cubic-bezier(.2, .8, .2, 1), height .38s cubic-bezier(.2, .8, .2, 1);
}
.guia.is-accion .guia-luz::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--oro-claro);
  animation: guia-pulso-anillo 1.6s cubic-bezier(.2, .7, .3, 1) infinite;
}
.guia-tapa { position: fixed; pointer-events: auto; background: transparent; }
.guia.is-accion .guia-tapa--hueco { display: none; }

.guia-card {
  position: fixed; width: 340px; max-width: calc(100vw - 24px); pointer-events: auto;
  background: var(--panel); color: var(--texto); border: 1px solid var(--linea); border-radius: 16px;
  box-shadow: var(--sombra-alta); padding: 14px 16px 12px; font-family: var(--f-texto);
  transition: top .32s cubic-bezier(.2, .8, .2, 1), left .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
.guia-card--celu { left: 10px !important; right: 10px; width: auto; max-width: 520px; margin: 0 auto; }
.guia.is-buscando .guia-card { opacity: .55; }
.guia-card.is-entra > * { animation: guia-sube .3s cubic-bezier(.2, .8, .2, 1) both; }
.guia-card.is-entra > :nth-child(3) { animation-delay: .03s; }
.guia-card.is-entra > :nth-child(4) { animation-delay: .06s; }
.guia-card.is-entra > :nth-child(5), .guia-card.is-entra > :nth-child(6) { animation-delay: .09s; }
.guia-card.is-sacude { animation: guia-sacude .42s ease; }
.guia-card__barra { height: 3px; border-radius: 3px; background: var(--fondo-suave); overflow: hidden; margin-bottom: 10px; }
.guia-card__barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--suela), var(--oro-claro)); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.guia-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guia-card__paso { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.guia-card__cerrar {
  width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave);
  font-size: 20px; line-height: 1; cursor: pointer; transition: background var(--rapido), color var(--rapido);
}
.guia-card__cerrar:hover { background: var(--fondo-suave); color: var(--texto); }
.guia-card__titulo { margin: 4px 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.guia-card__texto { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--texto-suave); }
.guia-card__accion {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 8px 11px; border-radius: 10px;
  background: var(--marca-100); color: var(--info-texto); font-size: 13.5px; font-weight: 600;
}
.guia-pulso { position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--suela); }
.guia-pulso::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--suela); animation: guia-pulso 1.4s ease-out infinite; }
.guia-card__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guia-card__pie .btn { width: auto; }
.guia-saltar { font-size: 13.5px; }
.guia-puntos { display: flex; gap: 4px; align-items: center; }
.guia-puntos i { width: 6px; height: 6px; border-radius: 3px; background: var(--linea-fuerte); transition: width .3s ease, background .3s ease; }
.guia-puntos i.is-hecho { background: var(--suela-claro); }
.guia-puntos i.is-ahora { width: 16px; background: var(--suela); }

/* Bienvenida y felicitación */
.guia-modal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; }
.guia-modal__fondo { position: absolute; inset: 0; background: rgba(14, 10, 7, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: guia-aparece .25s ease both; }
.guia-modal__caja {
  position: relative; width: min(430px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--panel); color: var(--texto); border-radius: 20px; padding: 26px 22px 18px; text-align: center;
  box-shadow: var(--sombra-alta); animation: guia-pop .38s cubic-bezier(.2, .9, .25, 1.15) both;
}
.guia-modal.is-fuera .guia-modal__fondo, .guia-modal.is-fuera .guia-modal__caja { animation: guia-desaparece .2s ease both; }
.guia-modal__marca { display: flex; justify-content: center; margin-bottom: 6px; }
.guia-modal__marca .marca-cabana, .guia-modal__marca img, .guia-modal__marca svg { width: 64px; height: 64px; object-fit: contain; }
.guia-modal__titulo { margin: 4px 0 6px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.guia-modal__texto { margin: 0 auto 14px; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--texto-suave); }
.guia-modal__lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; text-align: left; }
.guia-modal__lista li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--fondo-suave);
  font-size: 14.5px; font-weight: 500; animation: guia-sube .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.12s + var(--k) * .06s);
}
.guia-modal__lista li span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--marca-100); color: var(--suela); }
.guia-modal__lista .ico { width: 18px; height: 18px; }
.guia-modal__botones { display: grid; gap: 8px; }
.guia-modal__nota { margin: 12px 0 0; font-size: 12.5px; color: var(--texto-tenue); }
.guia-modal__logro { position: relative; width: 76px; height: 76px; margin: 0 auto 8px; }
.guia-modal__logro .guia-check { width: 76px; height: 76px; }
.guia-modal__tours { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 18px; }
.guia-tourcito {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: var(--panel); color: var(--texto); font: 600 13.5px var(--f-texto);
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.guia-tourcito:hover { background: var(--fondo-suave); }
.guia-tourcito:active { transform: scale(.97); }
.guia-tourcito__ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--marca-100); color: var(--suela); }
.guia-tourcito__ico .ico { width: 15px; height: 15px; }
.guia-tourcito.is-hecho .guia-tourcito__ico { background: var(--ok-bg); color: var(--ok-texto); }

/* El tilde que se dibuja solo, con chispas que salen. */
.guia-check circle { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; animation: guia-trazo .6s cubic-bezier(.65, 0, .45, 1) .1s forwards; }
.guia-check path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: guia-trazo .35s cubic-bezier(.65, 0, .45, 1) .55s forwards; }
.guia-chispa {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--oro-claro);
  opacity: 0; animation: guia-chispa .7s ease-out .65s both;
}
.guia-chispa:nth-child(3) { background: var(--suela-claro); }
.guia-chispa:nth-child(4) { background: var(--ok); }

/* Avance (barra) */
.guia-avance { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; color: var(--texto-suave); text-align: left; }
.guia-avance__barra { flex: 1; height: 6px; border-radius: 6px; background: var(--fondo-suave); overflow: hidden; }
.guia-avance__barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--suela), var(--oro-claro)); animation: guia-crece .8s cubic-bezier(.2, .8, .2, 1) .2s both; transform-origin: left; }

/* Logro de un recorrido de sección */
.guia-logro {
  position: fixed; left: 50%; bottom: calc(var(--alto-tabbar) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 85;
  display: flex; align-items: center; gap: 10px; min-width: 250px; padding: 10px 16px 13px 12px; border-radius: 14px;
  background: var(--panel); color: var(--texto); border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
  transform: translateX(-50%); animation: guia-logro .4s cubic-bezier(.2, .9, .25, 1.1) both;
}
.guia-logro.is-fuera { animation: guia-desaparece .25s ease both; }
.guia-logro .guia-check { width: 34px; height: 34px; flex: none; }
.guia-logro b { display: block; font-size: 14.5px; }
.guia-logro small { color: var(--texto-suave); font-size: 12.5px; }
.guia-logro__barra { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--fondo-suave); overflow: hidden; }
.guia-logro__barra i { display: block; height: 100%; background: var(--ok); animation: guia-crece .7s ease .3s both; transform-origin: left; }
@media (min-width: 900px) { .guia-logro { bottom: 24px; } }

/* Invitación de sección: discreta, abajo; no tapa lo que se está mirando. */
.guia-invita {
  position: fixed; z-index: 45; right: 20px; bottom: 24px; width: 380px; max-width: calc(100vw - 20px);
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px;
  background: var(--panel); color: var(--texto); border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
  animation: guia-sube .35s cubic-bezier(.2, .8, .2, 1) both;
}
.guia-invita.is-fuera { animation: guia-desaparece .2s ease both; }
.guia-invita__ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--marca-100); color: var(--suela); }
.guia-invita__txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.guia-invita__txt b { display: block; }
.guia-invita__txt small { color: var(--texto-suave); font-size: 12.5px; }
.guia-invita__botones { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.guia-invita__botones .btn { width: auto; }
.guia-invita__botones .enlace { font-size: 12.5px; }
@media (max-width: 899px) {
  .guia-invita { left: 10px; right: 10px; width: auto; margin: 0 auto; bottom: calc(var(--alto-tabbar) + 12px + env(safe-area-inset-bottom, 0px)); }
}

/* Consejo chico dentro de una pantalla */
.guia-tip {
  display: flex; align-items: flex-start; gap: 9px; margin: 10px 0; padding: 9px 8px 9px 12px; border-radius: 10px;
  background: var(--oro-bg); color: var(--texto); font-size: 13.5px; line-height: 1.4; animation: guia-sube .3s ease both;
}
.guia-tip.is-fuera { animation: guia-desaparece .2s ease both; }
.guia-tip__ico { flex: none; }
.guia-tip > span:nth-child(2) { flex: 1; }
.guia-tip__x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave); font-size: 17px; line-height: 1; cursor: pointer; }
.guia-tip__x:hover { background: rgba(0, 0, 0, .06); }

/* «Nuevo» al lado de lo nuevo */
.guia-nuevo {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  background: linear-gradient(90deg, var(--suela), var(--oro)); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}

/* Ayuda y recorridos (#/ayuda) */
.guia-ayuda { margin-bottom: 14px; }
.guia-ayuda__cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.guia-ayuda__cab h2 { margin: 0 0 2px; font-size: 19px; }
.guia-ayuda__cab .nota { margin: 0; }
.guia-ayuda__aro {
  --p: 0; display: grid; place-items: center; width: 62px; height: 62px; flex: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--panel) 76%, transparent 78% 100%), conic-gradient(var(--suela) calc(var(--p) * 1%), var(--fondo-suave) 0);
}
.guia-ayuda__aro b { font-size: 15px; font-variant-numeric: tabular-nums; }
.guia-ayuda .guia-avance { margin: 0; }
.guia-ayuda__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--marca-100); color: var(--suela); font-size: 18px; }
.guia-ayuda__ico.is-hecho { background: var(--ok-bg); color: var(--ok-texto); }
.guia-ayuda__ir { flex: none; margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--suela); }
.guia-ayuda__lista .lista__item { align-items: center; }

@keyframes guia-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes guia-desaparece { to { opacity: 0; } }
@keyframes guia-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes guia-pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes guia-sacude { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes guia-pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@keyframes guia-pulso-anillo { from { transform: scale(1); opacity: .9; } to { transform: scale(1.12); opacity: 0; } }
@keyframes guia-trazo { to { stroke-dashoffset: 0; } }
@keyframes guia-chispa { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(54px) scale(.4); } }
@keyframes guia-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes guia-logro { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .guia, .guia *, .guia *::after, .guia-modal *, .guia-logro, .guia-logro *, .guia-invita, .guia-tip { animation: none !important; transition: none !important; }
  .guia-check circle, .guia-check path { stroke-dashoffset: 0; }
}

/* Revisión del pedigree pegado: lo que se controló, errores y avisos (pedigree-sra.js). */
.ped-revision { display: grid; gap: 10px; margin-top: 16px; }
.ped-revision .alerta { display: block; }
.ped-revision ul { margin: 6px 0 4px; padding-left: 18px; }
.ped-revision li { margin: 3px 0; }
.ped-ok { list-style: none; padding: 0 !important; margin: 0 !important; font-size: 13.5px; color: var(--texto-suave); }
.ped-ok li { position: relative; padding-left: 22px; }
.ped-ok li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.ped-confirmar { padding: 10px 12px; border-radius: 10px; background: var(--fondo-suave); }

/* «Qué dice su pedigree» (vistas-ficha.js, analisisPedigree). */
.ped-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.ped-stats > div { padding: 10px; border-radius: 10px; background: var(--fondo-suave); min-width: 0; }
.ped-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.ped-stats span { font-size: 12px; color: var(--texto-suave); line-height: 1.25; display: block; }
@media (max-width: 520px) { .ped-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ped-gens { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; color: var(--texto-suave); }
.ped-gens b { color: var(--texto); font-variant-numeric: tabular-nums; }
.ped-linea { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.ped-linea > span { display: block; font-size: 12px; color: var(--texto-suave); }
.ped-sub { font-size: 14px; margin: 16px 0 6px; }

/* Aceptar los términos y la privacidad (quien ya tenía cuenta, una vez). */
.terminos-aviso { position: fixed; inset: 0; z-index: 100; background: rgba(23, 18, 14, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.terminos-aviso__caja { background: var(--panel); color: var(--texto); border-radius: var(--r-lg); max-width: 420px; width: 100%; padding: 22px 20px 16px; box-shadow: var(--sombra-alta); }
.terminos-aviso__caja h2 { font-size: 21px; margin: 6px 0 8px; }
.terminos-aviso__caja .nota { white-space: normal; margin-bottom: 8px; }
.terminos-aviso__marca { width: 48px; height: 64px; color: var(--suela); }

a.opcion { text-decoration: none; color: inherit; }