/* Cabaña al día — 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; }
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);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.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; }

.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;
}

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

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

.ficha-foto {
  width: 104px;
  height: 104px;
  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: cover; }
.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; }

.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; }
.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: 66px; height: 66px; 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: cover; }

/* ---------- 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; }

.saldo { text-align: center; padding: 20px 14px; }
.saldo__txt { font-size: 15px; color: var(--texto-suave); }
.saldo__monto { font-family: var(--f-display); font-size: 29px; font-weight: 600; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }

.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__logo { display: flex; justify-content: center; color: var(--suela); }
.login__logo .ico { width: 64px; height: 64px; stroke-width: 1.3; }
.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; }

/* ---------- Catálogo ---------- */

.cat-item { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.cat-item + .cat-item { margin-top: 14px; }
.cat-foto { width: 150px; height: 150px; border-radius: 16px; background: var(--marca-100); overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 42px; color: var(--suela); font-weight: 700; }
.cat-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-ped { font-size: 13.5px; color: var(--texto-suave); margin-top: 7px; line-height: 1.5; }
.cat-ped b { color: var(--texto); font-weight: 700; }
.cat-precio { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--suela); margin-top: 8px; }

@media (max-width: 480px) {
  .cat-item { grid-template-columns: 1fr; }
  .cat-foto { width: 100%; height: 210px; }
}

/* ---------- 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::before {
    content: "Cabaña al día";
    position: absolute;
    top: 30px;
    left: 24px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--texto);
  }
  .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; }
  .cat-item { break-inside: avoid; }
}