/* Aviarium — Pixel UI + Pixel colors (v12)
   - Tema selector: Automático / Oscuro / Claro / Alto contraste
   - Sin mezclas: tokens únicos por tema
   - UI tipo Pixel: filas grandes, botones pill, outline suave
*/

:root{
  --fs:18px;
  --btnh:56px;
  --r:18px;
  --r2:26px;
  --shadow: 0 1px 2px rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.10);
  /* Layout: wide desktop + fluid grids (no hard max columns) */
  --contentMax: 980px;
  /* Minimum card width for auto-fill grids. Increase a bit to avoid over-squeezed cards.
     Cards per row scale naturally with available width ("infinite" / no explicit max). */
  --gridCardMin: 320px;
  --topbarH: 0px;
  --topbarPad: var(--topbarH);
  --bottomPad: calc(92px + env(safe-area-inset-bottom));
}

@media (min-width: 1100px){
  :root{ --contentMax: 1360px; }
}
@media (min-width: 1400px){
  :root{ --contentMax: calc(100vw - 28px); }
}

[data-large="0"]{ --fs:16px; --btnh:52px; }

*{ box-sizing:border-box; }
html, body{ height:100%; overflow-x:hidden; }
/* Let the browser know which scheme we're using to avoid "stuck" dark UI on some devices. */
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"],
html[data-theme="contrast"]{ color-scheme: dark; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
a{ color: inherit; }
button, input, select, textarea{ font: inherit; }
select.input{ min-width:0; }
img{ max-width:100%; }
input[type="checkbox"]{ accent-color: var(--accent); }

/* =========================
   THEME TOKENS (Pixel-like)
   ========================= */

body[data-theme="light"]{
  --bg:#f7f9ff;
  --surface:#ffffff;
  --surface2:#eef2ff;
  --text:#1f1f1f;
  --muted:#4b5563;
  --outline:#d8dde7;

  --accent:#1b6ef3;
  --accentSoft: rgba(27,110,243,.12);

  --ok:#12b76a;
  --warn:#fdb022;
  --bad:#f04438;

  --overlay: rgba(0,0,0,.35);
  --shadow: 0 1px 2px rgba(31,31,31,.10), 0 10px 26px rgba(31,31,31,.10);
}

body[data-theme="dark"]{
  --bg:#101214;
  --surface:#1a1c1e;
  --surface2:#22262c;
  --text:#e6e6e6;
  --muted:#b7bcc6;
  --outline:#2a2f36;

  --accent:#1b6ef3;
  --accentSoft: rgba(27,110,243,.18);

  --ok:#12b76a;
  --warn:#fdb022;
  --bad:#f04438;

  --overlay: rgba(0,0,0,.55);
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.30);
}

body[data-theme="contrast"]{
  --bg:#000000;
  --surface:#0a0a0a;
  --surface2:#101010;
  --text:#ffffff;
  --muted:#e2e2e2;
  --outline:#2b2b2b;

  --accent:#00a3ff;
  --accentSoft: rgba(0,163,255,.18);

  --ok:#00ff88;
  --warn:#ffd000;
  --bad:#ff3355;

  --overlay: rgba(0,0,0,.70);
  --shadow: none;
}

/* =========================
   LAYOUT
   ========================= */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
  transform: translateY(0);
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform;
}
.topbar-inner{
  max-width: var(--contentMax);
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  display:flex;
  align-items:center;
  gap:10px;
}

/* Logged-in email pill in the top bar */
.top-email{
  width: 260px;
  max-width: 45vw;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.top-email:focus{ outline: none; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.logo{
  width: var(--btnh); height: var(--btnh);
  border-radius: var(--r2);
  display:grid; place-items:center;
  background: var(--accentSoft);
  border: 1px solid var(--outline);
  flex:0 0 auto;
}
.brand h1{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
}
.brand p{
  margin:3px 0 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spacer{ flex:1; }

.search{
  max-width: var(--contentMax);
  margin: 0 auto;
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  padding-top: 0;
  padding-bottom: 0;
}
.search-inner{
  padding: 0 0 10px;
  max-height: 90px;
  opacity: 1;
  transition: max-height .22s ease, opacity .18s ease, padding .22s ease;
}
.search.collapsed .search-inner{
  max-height: 0;
  opacity: 0;
  padding: 0;
  overflow: hidden;
}

.wrap{
  max-width: var(--contentMax);
  margin: 0 auto;
  padding-top: calc(10px + var(--topbarPad, 0px));
  padding-bottom: var(--bottomPad, 92px);
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  transition: padding .22s ease;
}

.bottomnav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--outline);
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  padding-left: calc(10px + env(safe-area-inset-left));
  padding-right: calc(10px + env(safe-area-inset-right));
  transform: translateY(0);
  transition: transform .22s ease;
  will-change: transform;
}
.bottomnav-inner{
  max-width: var(--contentMax);
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
}
.tabbtn{
  height:64px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  color: var(--muted);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-weight: 900;
  /* Emoji icon size */
  font-size: 22px;
}
.tabbtn > div{ font-size:12px; line-height:1; color: inherit; }
.tabbtn.active{
  background: var(--accentSoft);
  border-color: rgba(27,110,243,.30);
  color: var(--text);
}
body[data-theme="dark"] .tabbtn.active{
  border-color: rgba(27,110,243,.45);
}
body[data-theme="contrast"] .tabbtn.active{
  border-color: var(--accent);
}

.installbar{
  position: fixed;
  left:0; right:0;
  bottom: 88px;
  z-index: 35;
  padding: 10px 10px;
}
.installbar .inner{
  max-width: var(--contentMax);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--shadow);
}


/* Install bar: avoid overflow on small screens */
.installbar .inner > *{ min-width:0; }
.installbar .inner .muted{ line-height:1.25; }

@media (max-width: 420px){
  .installbar{ padding: 8px 8px; bottom: 86px; }
  .installbar .inner{ flex-wrap: wrap; gap: 8px; }
  .installbar .inner .chip{ flex: 0 0 auto; }
  .installbar .inner .muted{ flex: 1 1 100%; }
  .installbar .inner .btn{ flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* =========================
   COMMON UI
   ========================= */

.muted{ color: var(--muted); }
.label{ font-size: 12px; color: var(--muted); font-weight: 900; margin-bottom: 6px; }
.field{ margin-top: 12px; }
.divider{ height:1px; background: var(--outline); margin: 12px 0; }

.note{
  padding: 12px 12px;
  border-radius: 18px;
  background: var(--surface2);
  border: 1px solid var(--outline);
}

.section-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin: 8px 0 12px;
}
.section-title h2{
  margin:0;
  font-size: 18px;
  font-weight: 900;
}

.btn{
  height: var(--btnh);
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  color: var(--text);
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}

.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.6);
}
.btn.small{ height: 40px; padding: 0 12px; }
.btn.avatar{ width: var(--btnh); padding: 0; border-radius: 999px; font-size: 18px; line-height: 1; }
.btn.square{ width: var(--btnh); padding: 0; border-radius: 999px; font-size: 18px; line-height: 1; }
.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(27,110,243,.25);
}
.btn.danger{
  background: var(--bad);
  border-color: var(--bad);
  color: #fff;
}
.iconbtn{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  color: var(--text);
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height: 1;
}
.iconbtn:active{ transform: translateY(1px); }
.favstar.iconbtn{
  width: 28px;
  height: 28px;
  font-size: 16px;
}
.full{ width: 100%; }

/* Hoy: Acciones rápidas (responsive, puede ponerse en 1–4 columnas según ancho) */
.qa-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.qa-actions .btn{ flex: 1 1 170px; }
@media (max-width: 420px){
  .qa-actions .btn{ flex-basis: 100%; }
}

.input{
  width:100%;
  height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  color: var(--text);
  outline: none;
}

/* Inline small input (e.g., year filter next to title) */
.input.inline{
  width: auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  min-width: 132px;
}

/* Species picker (modal) */
.pickfield{
  width:100%;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  color: var(--text);
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.pickfield .pickmain{ flex:1; min-width:0; }
.pickfield .pickval{ font-weight: 900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pickfield .picksub{ font-size:12px; color: var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pickfield .pickchev{ opacity:.7; font-weight:900; }
.pickfield:active{ transform: scale(.99); }

button.item{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  border: 1px solid var(--outline);
  background: var(--surface);
}

/* Breeder checklist done state */
.rowbtn.breeder-done .item{ border-color: rgba(18,183,106,.38); background: rgba(18,183,106,.06); }
.rowbtn.breeder-done .avatar{ background: rgba(18,183,106,.14); border-color: rgba(18,183,106,.28); }

.item.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accentSoft);
}


.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.right{ margin-left:auto; }

/* =========================
   GRID + LISTS
   ========================= */

.grid{ display:grid; gap:12px; }
/* Lists/cards: responsive 2–5 columns on large screens */
.grid.cols2{ grid-template-columns: repeat(auto-fill, minmax(var(--gridCardMin), 1fr)); }
.grid.cols3{ grid-template-columns: 1fr 1fr 1fr; }
.grid.add-actions{ grid-template-columns: 1fr; }

/* Datos: Top especies (responsive, sin overflow horizontal) */
.topspecGrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width: 640px){
  .topspecGrid{ grid-template-columns: 1fr; }
}

/* Aves > Datos: harden against horizontal clipping on mobiles (charts, nested cards, long content)
   Some mobile browsers + safe areas can clip right-side content if any child overflows even slightly.
   We keep global overflow-x hidden, but allow horizontal scroll inside the chart when needed. */
body[data-tab="aves"][data-aves-subtab="data"] .avesData,
body[data-tab="aves"][data-aves-subtab="data"] .avesData .card,
body[data-tab="aves"][data-aves-subtab="data"] .avesData .pad{
  max-width: 100%;
  min-width: 0;
}
body[data-tab="aves"][data-aves-subtab="data"] .avesData .hrow,
body[data-tab="aves"][data-aves-subtab="data"] .avesData .hrow > *{
  min-width: 0;
}
body[data-tab="aves"][data-aves-subtab="data"] .avesData .monthChart{
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
body[data-tab="aves"][data-aves-subtab="data"] .avesData .monthChart::-webkit-scrollbar{ display:none; }

@media (max-width: 420px){
  /* KPIs: 2 columns on small screens to avoid any potential clipping */
  body[data-tab="aves"][data-aves-subtab="data"] .avesData .bbkpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px){
  /* Ultra small: 1 column */
  body[data-tab="aves"][data-aves-subtab="data"] .avesData .bbkpis{ grid-template-columns: 1fr; }
}

.add-actions .btn{ height: calc(var(--btnh) + 12px); display:flex; align-items:center; justify-content:center; gap:10px; font-size: 16px; }
@media (max-width: 640px){
  .grid.cols2, .grid.cols3{ grid-template-columns: 1fr; }
}
/*
  Forms: two/three-column blocks
  Use minmax(0, 1fr) so inputs with intrinsic min-width (notably iOS date inputs)
  can shrink without overflowing/overlapping.
*/
.two{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.three{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.two > *, .three > *{ min-width:0; }

/* iOS Safari: <input type=date> has intrinsic min-width that can overflow grid cols.
   Force it to behave like a normal block input and allow shrinking. */
@supports (-webkit-touch-callout: none){
  input[type="date"].input{
    -webkit-appearance: none;
    appearance: none;
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    font-size: 16px; /* also avoids iOS zoom on focus */
    line-height: 52px; /* match .input height to vertically center text */
  }
  /* Some iOS versions give the internal value an intrinsic min-width */
  input[type="date"].input::-webkit-date-and-time-value{
    min-width:0;
    width:100%;
    text-align:left;
    line-height: 52px;
    padding: 0;
    margin: 0;
  }
}

  /* Some iOS versions give the internal value an intrinsic min-width */
  input[type="date"].input::-webkit-date-and-time-value{
    min-width:0;
    width:100%;
    text-align:left;
  }
}

/* Safety: don't let any field overflow its grid cell */
.two > *, .three > *{ overflow:hidden; }
@media (max-width: 640px){
  .two, .three{ grid-template-columns: 1fr; }
}

/* =========================
   AGENDA (CALENDARIO)
   ========================= */
.cal{
  border: 1px solid var(--outline);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cal-week{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--surface2);
  border-bottom: 1px solid var(--outline);
}
.cal-weekday{
  text-align:center;
  padding: 10px 0;
  font-weight: 950;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* Month title clickable (opens month picker) */
.cal-title-btn{
  cursor: pointer;
  user-select: none;
}
.cal-title-btn:active{ transform: translateY(1px); }
.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-day{
  appearance:none;
  -webkit-appearance:none;
  border: 0;
  border-right: 1px solid var(--outline);
  border-bottom: 1px solid var(--outline);
  background: transparent;
  padding: 10px 8px;
  min-height: 74px;
  text-align:left;
  color: var(--text);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 6px;
  cursor:pointer;
}
.cal-day:nth-child(7n){ border-right: 0; }
/* last row: remove bottom border for cleaner edge */
.cal-day:nth-last-child(-n+7){ border-bottom: 0; }

.cal-day:active{ transform: scale(.99); }
.cal-day.off{
  background: rgba(0,0,0,.02);
  opacity: .75;
}
body[data-theme="dark"] .cal-day.off{ background: rgba(255,255,255,.035); }
.cal-day.off .num{ color: var(--muted); }
.cal-day.off .badges span{ opacity: .7; }

.cal-day .num{
  width: 100%;
  font-weight: 950;
  font-size: 13px;
  line-height: 1;
}
.cal-day.weekend .num{ color: var(--bad); }
.cal-weekday.weekend{ color: var(--bad); }
.cal-day .badges{
  display:flex;
  flex-wrap:wrap;
  gap: 4px;
}
.cal-day .badges span{
  display:inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface2);
}
.cal-day.has{
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}
body[data-theme="dark"] .cal-day.has{
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}
.cal-day.today{
  box-shadow: inset 0 0 0 2px rgba(27,110,243,.28);
  background: var(--accentSoft);
}
.cal-day.bad{
  box-shadow: inset 0 0 0 2px rgba(240,68,56,.28);
}

@media (max-width: 420px){
  .cal-day{ min-height: 64px; padding: 8px 6px; }
  .cal-day .badges span{ padding: 2px 6px; }
}

/* Bird/Nest rows */
.rowbtn{ width:100%; display:block; border:0; padding:0; background:transparent; text-align:left; color: var(--text); }
.item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: var(--surface);
}

/* Favoritos: marca visual (esquina naranja) en listados */
.rowbtn.isFav .item{
  position: relative;
  overflow: hidden;
}
.rowbtn.isFav .item::after{
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 22px solid #ff9800;
  border-left: 22px solid transparent;
  pointer-events: none;
}

/* Desktop hover (make rows feel like links) */
@media (hover:hover) and (pointer:fine){
  .rowbtn{ cursor:pointer; }
  .rowbtn .item{
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
  }
  .rowbtn:hover .item{
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: rgba(26,115,232,.35);
  }
  body[data-theme="dark"] .rowbtn:hover .item{ border-color: rgba(138,180,248,.30); }
  .rowbtn:focus-visible .item{ outline: 3px solid var(--accentSoft); outline-offset: 2px; }

  .mosaic-tile{ transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; }
  .mosaic-tile:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
}
.avatar{
  width:44px; height:44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: var(--accentSoft);
  border: 1px solid var(--outline);
  overflow:hidden;
  flex:0 0 auto;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Bird profile header title (avatar + ring) */
#birdTitle.birdHeadTitle{ display:flex; align-items:center; gap:10px; min-width:0; }
#birdTitle.birdHeadTitle .birdHeadText{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#birdTitle.birdHeadTitle .birdHeadAvatar{ width:44px; height:44px; border-radius:16px; }


.meta{ min-width:0; flex:1; }
.name{ font-weight: 900; color: var(--text); }
.nowrap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sub{ font-size: 12px; color: var(--muted); margin-top:3px; line-height:1.25; }

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.chip.ok{ border-color: rgba(18,183,106,.45); }
.chip.warn{ border-color: rgba(253,176,34,.55); }
.chip.bad{ border-color: rgba(240,68,56,.55); }

/* =========================
   STATS CHARTS (v110l)
   ========================= */

.chartBars{ display:flex; flex-direction:column; gap:10px; }
.barRow{ display:flex; align-items:center; gap:10px; min-width:0; }
.barLbl{
  width: 110px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barTrack{
  flex: 1;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  overflow: hidden;
}
.barFill{ height: 100%; border-radius: 999px; background: var(--accent); }
.barFill.classicBlue{ background:#4f81bd; }
.barFill.classicRed{ background:#c0504d; }
.barFill.classicGreen{ background:#9bbb59; }
.barVal{ width: 34px; text-align: right; font-weight: 900; font-size: 12px; }

.pieChartWrap{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pieChartDonut{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border:1px solid #bdbdbd;
  position:relative;
  flex:0 0 auto;
}
.pieChartDonut::after{
  content:"";
  position:absolute;
  inset:24px;
  border-radius:50%;
  background: var(--surface);
  border:1px solid #d0d0d0;
}
.pieChartLegend{ display:flex; flex-direction:column; gap:8px; min-width:180px; flex:1 1 220px; }
.pieChartLegendItem{ display:grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items:center; gap:8px; font-size:12px; color:#444; }
.pieChartSwatch{ width:12px; height:12px; border-radius:3px; display:block; }
.pieChartLegendLabel{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pieChartLegendVal{ font-weight:900; }

.donutWrap{ display:flex; align-items:center; gap:12px; }
.donut{
  --p: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface2) 0);
  position: relative;
  flex: 0 0 auto;
}
.donut::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: var(--surface);
}

/* 12-month bar chart */
.monthChart{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  padding: 4px 2px;
  height: 160px;
}
.mCol{ flex: 1 1 0; min-width: 0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.mBar{
  width: 100%;
  height: 120px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.mFill{
  width:100%;
  height:0%;
  background: var(--accent);
  border-radius: 14px;
}
.mLbl{ font-size: 11px; color: var(--muted); line-height:1; }



/* Month chart (multi series: classic grouped bars) */
.chartLegend{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:12px; color: var(--muted); }
.legItem{ display:flex; align-items:center; gap:8px; }
.legSwatch{ width:12px; height:12px; border-radius:4px; border:1px solid var(--outline); display:inline-block; }
.legEgg{ background: var(--warn); }
.legHat{ background: var(--ok); }
.legDie{ background: var(--bad); }
.legSta{ background: var(--accent); }
.legFin{ background: var(--ok); }

.classicChartPanel{
  background:transparent;
  border:1px solid #bdbdbd;
  border-radius:16px;
  padding:12px;
  overflow:hidden;
}
.classicChartScroll{ overflow-x:auto; overflow-y:hidden; }
.classicChartScroll::-webkit-scrollbar{ height:8px; }
.classicChartMain{
  min-width:720px;
  display:grid;
  grid-template-columns: 42px minmax(0,1fr) 112px;
  gap:12px;
  align-items:start;
}
.classicCenter{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.classicYAxis{
  position:relative;
  height:240px;
  color:#666;
  font-size:12px;
  border-right:1px solid #9e9e9e;
}
.classicYTick{
  position:absolute;
  left:0;
  right:8px;
  transform:translateY(50%);
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
.classicPlotArea{
  position:relative;
  height:240px;
  border-left:1px solid #9e9e9e;
  border-bottom:1px solid #9e9e9e;
  background:transparent;
}
.classicGridLine{
  position:absolute;
  left:0;
  right:0;
  border-top:1px solid #d1d1d1;
}
.classicGroups{
  position:absolute;
  left:8px;
  right:8px;
  bottom:0;
  top:0;
  display:grid;
  grid-template-columns:repeat(12, minmax(34px,1fr));
  gap:8px;
  align-items:end;
}
.classicGroup{
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.classicBarCluster{
  height:100%;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
}
.classicBar{
  width:10px;
  min-height:0;
  border-radius:8px 8px 0 0;
}
.classicBar.classicBlue, .classicLegendSwatch.classicBlue{ background:#4f81bd; }
.classicBar.classicRed, .classicLegendSwatch.classicRed{ background:#c0504d; }
.classicBar.classicGreen, .classicLegendSwatch.classicGreen{ background:#9bbb59; }
.classicMonthRow{
  display:grid;
  grid-template-columns:repeat(12, minmax(34px,1fr));
  gap:8px;
  margin:8px 8px 0;
}
.classicMonthCell{
  color:#444;
  font-size:12px;
  line-height:1;
  text-align:center;
}
.classicLegend{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  color:#444;
  font-size:12px;
}
.classicLegendItem{
  display:flex;
  align-items:center;
  gap:8px;
}
.classicLegendSwatch{
  width:12px;
  height:12px;
  display:inline-block;
}

.bbkpi-delta{ margin-top:8px; font-size:11px; line-height:1.2; color: var(--muted); display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; }
.avesDataStatRow{ gap:10px; }
body[data-tab="aves"][data-aves-subtab="data"] .avesData .card{ background: var(--surface); }
body[data-tab="aves"][data-aves-subtab="data"] .avesData .item{ background: var(--surface2); }
.avesDataReportBtns .btn{ flex:1 1 140px; }
.avesDataCompareList .item{ align-items:center; }

@media (max-width: 640px){
  .avesDataControls{ grid-template-columns: 1fr; }
  .avesDataReportBtns .btn{ width:100%; }
}

@media (max-width: 900px){
  .classicChartMain{
    min-width:680px;
    grid-template-columns: 38px minmax(0,1fr) 96px;
    gap:10px;
  }
  .classicGroups{ gap:6px; }
  .classicMonthRow{ gap:6px; }
  .classicBar{ width:8px; }
}

@media (max-width: 480px){
  .classicChartPanel{ padding:10px; border-radius:14px; }
  .classicChartMain{ min-width:640px; }
  .classicYAxis{ font-size:11px; }
  .classicMonthCell{ font-size:11px; }
  .classicLegend{ font-size:11px; gap:8px; }
  .classicLegendSwatch{ width:10px; height:10px; }
}
/* Alert quick actions */
button.chip.chipbtn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  line-height: 28px;
}
button.chip.chipbtn:active{ transform: scale(.98); }
button.chip.chipbtn:disabled{ opacity:.55; cursor:default; }
.alertrow{ cursor:pointer; }
@media (hover:hover) and (pointer:fine){
  .alertrow{ transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
  .alertrow:hover{ transform: translateY(-1px); box-shadow: var(--shadow); border-color: rgba(26,115,232,.35); }
}
.alActs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }


.card{
  border-radius: var(--r2);
  border: 1px solid var(--outline);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.pad{ padding: 14px; }
.title{ font-weight: 900; font-size: 16px; }

/* Photos */
.photo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 640px){
  .photo-grid{ grid-template-columns: repeat(2, 1fr); }
}
.photo{
  position:relative;
  width:100%;
  aspect-ratio: 1/1;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  overflow:hidden;
}

.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bird profile: compact mosaic */
.photo-mosaic{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.photo-mosaic.one{ grid-template-columns: 1fr; }

.mosaic-tile{
  position:relative;
  width:100%;
  aspect-ratio: 1/1;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  overflow:hidden;
  padding:0;
  cursor:pointer;
}
.mosaic-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mosaic-more{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.38);
  color:#fff;
  font-weight: 900;
  font-size: 18px;
}

/* Gallery (carousel) */
.gallery{
  position:relative;
  border-radius: 22px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  overflow:hidden;
}
.gallery img{
  width:100%;
  max-height: 60vh;
  height:auto;
  object-fit: contain;
  display:block;
  background: rgba(0,0,0,.12);
}
.gbtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: rgba(0,0,0,.18);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  cursor:pointer;
}
.gbtn[disabled]{ opacity: .35; cursor: default; }
.gbtn.prev{ left: 10px; }
.gbtn.next{ right: 10px; }
.gallery-actions{ margin-top: 12px; }

/* Toggle rows in settings (Pixel switch without extra markup) */
.toggle{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: var(--surface);
}
.toggle input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width:54px; height:32px;
  border-radius:999px;
  border: 1px solid var(--outline);
  background: var(--surface2);
  position: relative;
  flex: 0 0 auto;
}
.toggle input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:26px; height:26px;
  border-radius:999px;
  background: var(--text);
  transition: transform .15s ease;
}
.toggle input[type="checkbox"]:checked{
  background: var(--accentSoft);
  border-color: rgba(27,110,243,.45);
}
.toggle input[type="checkbox"]:checked::after{
  transform: translateX(22px);
  background: #fff;
}

/* =========================
   MODALS (Ajustes, etc)
   ========================= */

.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.modal.is-open{ opacity: 1; pointer-events: auto; }
.modal.is-closing{ pointer-events: none; }

#dlgGallery.modal{ z-index: 80; }
.modal[hidden]{ display:none; }
.backdrop{
  position:absolute;
  inset:0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 160ms ease;
}
.modal.is-open .backdrop{ opacity: 1; }
.panel{
  position:relative;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  margin: 14px auto;
  border-radius: var(--r2);
  background: var(--surface);
  border: 1px solid var(--outline);
  box-shadow: var(--shadow);
  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
}
.modal.is-open .panel{ transform: translateY(0) scale(1); opacity: 1; }
.dlg-head{
  padding: 14px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom: 1px solid var(--outline);
}
.dlg-head h3{ margin:0; font-size: 16px; font-weight: 900; }
.dlg-body{ padding: 14px 14px; flex:1; overflow:auto; min-height:0; }
.dlg-foot{
  padding: 12px 14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  border-top: 1px solid var(--outline);
}


/* Helpers */
.hrow{ display:flex; align-items:center; gap:10px; }
.hrow > *{ min-width:0; }
.list{ display:flex; flex-direction:column; gap:10px; }
body.noscroll{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .modal, .modal .backdrop, .modal .panel{ transition: none !important; }
}


/* Toast */
.toast{
  position: fixed;
  left: 0; right: 0;
  top: auto;
  z-index: 80;
  bottom: calc(12px + 76px + env(safe-area-inset-bottom));
  padding: 0 12px;
  pointer-events: none;
}
.toast-inner{
  pointer-events: auto;
  max-width: var(--contentMax);
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  box-shadow: var(--shadow);
  font-weight: 900;
}
.toast.ok .toast-inner{ background: rgba(18,183,106,.16); border-color: rgba(18,183,106,.45); color: var(--text); }
.toast.bad .toast-inner{ background: rgba(240,68,56,.16); border-color: rgba(240,68,56,.45); color: var(--text); }
.toast.warn .toast-inner{ background: rgba(253,176,34,.16); border-color: rgba(253,176,34,.55); color: var(--text); }
.toast.info .toast-inner{ background: rgba(27,110,243,.14); border-color: rgba(27,110,243,.35); color: var(--text); }


/* Modal tone */
.panel[data-tone="ok"] .dlg-head{ background: rgba(18,183,106,.10); }
.panel[data-tone="bad"] .dlg-head{ background: rgba(240,68,56,.10); }
.panel[data-tone="warn"] .dlg-head{ background: rgba(253,176,34,.12); }
.panel[data-tone="info"] .dlg-head{ background: rgba(27,110,243,.10); }


.panel[data-tone="ok"] .note{ background: rgba(18,183,106,.10); border-color: rgba(18,183,106,.30); }
.panel[data-tone="bad"] .note{ background: rgba(240,68,56,.10); border-color: rgba(240,68,56,.30); }
.panel[data-tone="warn"] .note{ background: rgba(253,176,34,.12); border-color: rgba(253,176,34,.35); }
.panel[data-tone="info"] .note{ background: rgba(27,110,243,.10); border-color: rgba(27,110,243,.25); }


/* (photos: actions overlay) */
.photo-actions{
  position:absolute;
  right:8px;
  bottom:8px;
  display:flex;
  gap:8px;
}
.photo-actions .btn.small{
  padding:8px 10px;
  border-radius:14px;
}


@media (max-width: 720px){
  .grid.cols2{ grid-template-columns: 1fr; }
  .grid.cols3{ grid-template-columns: 1fr; }
  .two{ grid-template-columns: 1fr; }
  .three{ grid-template-columns: 1fr; }
  .tabbar{ grid-template-columns: repeat(4, 1fr); }
  .rowbtn .item{ padding: 14px 12px; }
  .kpi{ gap: 8px; }

/* Nest cards (v2 facelift) */
.nestcard .nestitem{ align-items:flex-start; }
.nestavaStack{ position:relative; width:48px; height:48px; flex:0 0 auto; margin-top:2px; }
.nestavaStack .nestava{
  position:absolute; width:34px; height:34px; border-radius:14px;
  overflow:hidden; border:2px solid var(--card);
  background: var(--surface2);
  display:grid; place-items:center;
}
.nestavaStack .nestava.a{ left:0; top:0; }
.nestavaStack .nestava.b{ right:0; bottom:0; }
.nestavaStack img{ width:100%; height:100%; object-fit:cover; display:block; }
.nestph{ font-weight:900; opacity:.9; }
.nestvline{ margin-top:8px; font-size:12px; }
/* Nest list facelift */
.nestkpis{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.nestprog{ position:relative; height:10px; flex:1; min-width:120px; border-radius:999px; border:1px solid var(--outline); background: var(--surface2); overflow:hidden; }
.nestprogbar{ height:100%; width:0%; background: var(--accent); }
.nestprog.near{ border-color: var(--bad); }
.nestprog.near .nestprogbar{ background: var(--bad); }
.nestprogtxt{ font-size:12px; color: var(--muted); font-weight:900; white-space:nowrap; }
.nestprogtxt.bad{ color: var(--bad); }

/* Nest profile: parents summary */
.bbp-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.bbp-parent{ width:100%; text-align:left; border-radius: 18px; border:1px solid var(--outline); background: var(--surface2); padding:12px; }
.bbp-parent:hover{ filter: brightness(1.02); }
.bbp-role{ font-size:12px; color: var(--muted); font-weight:900; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.bbp-row{ display:flex; align-items:center; gap:10px; }
.bbp-ava{ width:44px; height:44px; border-radius: 16px; overflow:hidden; border: 1px solid var(--outline); background: var(--accentSoft); display:grid; place-items:center; flex:0 0 auto; }
.bbp-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.bbp-ph{ font-size:18px; line-height:1; }
.bbp-meta{ min-width:0; flex:1; }
.bbp-ring{ font-weight:900; }
.bbp-sub{ font-size:12px; color: var(--muted); margin-top:2px; line-height:1.25; }
.bbp-missing{ cursor:default; opacity:.85; }

@media (max-width: 700px){
  .bbp-grid{ grid-template-columns: 1fr; }
}

}


/* Subtabs (Aves: Aves / Parejas) */
.seg{
  display:flex;
  gap:10px;
  background: var(--surface2);
  border:1px solid var(--outline);
  border-radius: 18px;
  padding: 8px;
}
.seg .btn{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 900;
}
.seg .btn.active{
  background: var(--primary);
  color: var(--onPrimary);
  border-color: transparent;
}

.pair-actions{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-top: 10px;
}



/* Floating Add Button (FAB) + menú vertical */
.fab-wrap{
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 35;
  width: 56px;
  height: 56px;
  transform: translateY(0);
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform;
}

/* Save FAB inside modal add/edit forms */
.save-fab-wrap{
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
}
.save-fab{
  width: 56px;
  height: 56px;
  border-radius: 20px;
  border: 1px solid var(--outline);
  background: var(--accent);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  user-select:none;
  transition: transform .18s ease;
  padding: 0;
}
.save-fab:active{ transform: scale(.98); }
.save-fab svg{ width: 24px; height: 24px; fill: currentColor; }
.fab{
  width: 56px;
  height: 56px;
  border-radius: 20px;
  border: 1px solid var(--outline);
  background: var(--accent);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  user-select:none;
  transition: transform .18s ease;
}
.fab-wrap.open .fab{
  transform: rotate(45deg);
}
.fab-menu{
  position: absolute;
  right: 0;
  bottom: 66px; /* encima del FAB */
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  pointer-events: none;
}
.fab-wrap.open .fab-menu{ pointer-events: auto; }

/* FAB: botón "volver a hoy" (solo en Agenda cuando no estás en el mes actual) */
.fab-today{
  position: absolute;
  right: 0;
  bottom: 66px; /* justo encima del FAB principal */
  width: 46px;
  height: 46px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: var(--accent);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  user-select:none;
  transition: transform .18s ease;
}
.fab-today:active{ transform: scale(.98); }
.fab-today[hidden]{ display:none !important; }


.fab-item{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  opacity: 0;
  transform: translate(0,0) scale(.92);
  transition: transform .18s ease, opacity .18s ease;
  padding: 0;
}
.fab-item:active{ transform: translate(0,0) scale(.98); }
.fab-ico{ font-size: 20px; }
.fab-label{
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--surface);
  border: 1px solid var(--outline);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.fab-wrap.open .fab-item{
  opacity:1;
  transform: translateY(0) scale(1);
}
.fab-wrap.open .fab-item .fab-label{
  opacity:1;
  transform: translateY(-50%) translateX(0);
}


.yearHeader{
  margin: 12px 2px 6px;
  font-weight: 900;
  opacity: .75;
  font-size: 14px;
}

/* Aves: agrupación por año (grid por año)
   - El contenedor del grupo debe verse como un "grid" blanco.
   - Las cards dentro usan el mismo color que el fondo de la app (var(--bg)),
     para que el grupo se distinga claramente. */
.yearGrid,
.groupGrid{
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r2);
  padding: 12px;
  box-shadow: var(--shadow);
  margin-top: 12px;
}
.yearGridTitle,
.groupGridTitle{
  margin: 2px 4px 10px;
  font-weight: 900;
  font-size: 14px;
  opacity: .80;
}
.groupGridSub{
  margin: -6px 4px 10px;
  font-size: 12px;
  opacity: .72;
}
.yearGridInner,
.groupGridInner{ }
.yearGrid .rowbtn .item,
.groupGrid .rowbtn .item{
  background: var(--bg);
}

/* Cookie notice (EU info banner) */
.cookiebar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 98px);
  z-index: 34; /* above bottomnav (30), below installbar (35) */
  padding: 10px 12px;
}
.cookiebar-inner{
  max-width: var(--contentMax);
  margin: 0 auto;
  background: rgba(20, 20, 24, .92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
}
.cookiebar-text{
  font-size: 12.5px;
  line-height: 1.35;
}
.cookiebar a{ color: inherit; text-decoration: underline; }

/* Add chooser: bigger text without scaling emoji */
.add-actions .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.add-actions .btn .ico{
  font-size: 16px;
  line-height: 1;
}
.add-actions .btn .txt{
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2px;
}

/* Birds list: sex + status pills */
.sexpill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 27px; /* same on mobile/tablet/desktop */
  line-height: 1;
  font-variant-emoji: text;
  border: 1px solid var(--outline);
  background: var(--surface);
}
.sexpill.sex-m{ color:#1e66ff; }
.sexpill.sex-h{ color:#e91e63; }
/* Unknown sex: orange (same style as M/H) */
.sexpill.sex-u{ color:#ff9800; }

/* Sex icons (PNG) */
.sexicon{ width:26px; height:26px; display:block; object-fit:contain; }
.sexpill .sexicon{ width:26px; height:26px; }
.avatar .sexicon{ width:30px; height:30px; }

/* Sex picker (icons) inside Add/Edit Bird */
.sexpick{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sexpick-btn{
  width:44px; height:44px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--surface);
  display:grid;
  place-items:center;
  padding:0;
}
.sexpick-btn:focus-visible{ outline: 3px solid var(--accentSoft); outline-offset: 2px; }
.sexpick-btn.on{
  border-color: rgba(26,115,232,.45);
  box-shadow: 0 0 0 3px var(--accentSoft);
}
body[data-theme="dark"] .sexpick-btn.on{ border-color: rgba(138,180,248,.45); }

.statuspill{ margin-left:0; }

/* Birds list: name chip next to ring */
.namechip{
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Birds list: name chip aligned with ring */
.namechip{
  display:inline-flex;
  align-items:center;
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Birds list: subrow with right-aligned status */
.sub.subrow{
  /* Keep the right-side status aligned while allowing the left text to wrap.
     This avoids aggressive truncation when cards become narrow in dense grids. */
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
}
.sub.subrow .subleft{
  min-width:0;
  overflow:hidden;
  display:flex;
  gap:8px;
  align-items:center;
}
.sub.subrow .subtxt{
  min-width:0;
  overflow:hidden;
  /* multi-line ellipsis (up to 2 lines) */
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.sub.subrow .subright{
  justify-self:end;
  text-align:right;
}

/* Name chip: centered vertically */

/* Birds list layout fixes (prevent horizontal overflow + align chips) */
.grid > .rowbtn{ min-width: 0; }
.rowbtn, .rowbtn .item, .rowbtn .meta{ min-width: 0; }

.birdtop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.birdleft{
  min-width:0;
  overflow:hidden;
  display:flex;
  gap:8px;
  align-items:center;
}
.birdring{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Name chip: truly centered + can shrink (avoid pushing layout) */

/* Subrow: left text + right-aligned status */
.sub.subrow{
  /* duplicated block (kept in sync) */
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
}
.sub.subrow .subleft{
  min-width:0;
  overflow:hidden;
  display:flex;
  gap:8px;
  align-items:center;
}
.sub.subrow .subtxt{
  min-width:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.sub.subrow .subright{
  justify-self:end;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  text-align:right;
}

/* Tiny status LED (used in Tratamientos list) */
.led{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.08) inset;
}
.led.ok{ background: var(--ok); }
.led.bad{ background: var(--bad); }

/* Safety: never allow horizontal scroll due to long chips */
.wrap{ overflow-x:hidden; }

/* Busy overlay + spinner */
.busy{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 999;
}
.busy-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,20,24,.92);
  color: #fff;
  backdrop-filter: blur(10px);
}
.busy-text{ font-size: 14px; font-weight: 800; }
.busy-spin{
  width:18px; height:18px;
  border-radius:999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  animation: spin 0.8s linear infinite;
}
.busy-spin.sm{ width:16px; height:16px; border-width:2px; display:inline-block; vertical-align:middle; }
@keyframes spin{ to{ transform: rotate(360deg); } }


/* Picker headers inside lists */
.list-hdr{
  margin: 10px 0 6px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Button that looks like an input/select */
.pickbtn{
  text-align: left;
  cursor: pointer;
}




/* Picker buttons */
.input.picker{ text-align:left; cursor:pointer; }

/* FAB menu disabled (single-action FAB) */
.fab-menu{ display:none; }


/* iOS sex pill alignment */
.sexpill{ font-family: system-ui, -apple-system, "Segoe UI Symbol", "Noto Sans Symbols2", sans-serif; }
@supports (-webkit-touch-callout: none){
  .sexpill{ padding-top: 1px; }
}

/* Fallback: hide FAB in Hoy */
body[data-tab="hoy"] #fabWrap{ display:none; }



/* ===== Bird profile (Option B tabs) ===== */
.bbtabs{ margin-bottom: 10px; display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.bbtabs::-webkit-scrollbar{ display:none; }
.bbtabs .btn{ flex:0 0 auto; min-width:max-content; padding-inline:14px; }
.bbpanel[hidden]{ display:none !important; }
.bbchips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 12px; }
.bbkpis{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px; }
.bbkpi{ border:1px solid var(--line); border-radius:14px; padding:10px; text-align:center; background: var(--surface-2); }
.bbkpi-v{ font-weight:900; font-size:16px; }
.bbkpi-k{ opacity:.65; font-size:12px; margin-top:2px; }
.inventoryStack{ display:grid; gap:12px; align-content:start; }
@media (max-width: 360px){
  .bbkpis{ grid-template-columns: 1fr; }
}



/* Nest profile: parents summary v2 */
.bbparents2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.bbparent-title{ font-weight:900; opacity:.9; }
.bbinfo-grid-parent{ grid-template-columns: 1fr; margin-top:8px; gap:8px; }
.bbinfo-item-compact{ padding:8px; }
@media (max-width: 720px){
  .bbparents2{ grid-template-columns: 1fr; }
}

/* Nest cards (v3 facelift) */
.nestkpirow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center; }
.nestcard .nesticon{ width:34px; height:34px; border-radius:12px; font-size:16px; }
.nestcard .nestitem{ align-items:flex-start; }
.pairlist-card .item{ align-items:flex-start; gap:14px; padding:14px 16px; }
.pairlist-card .meta{ flex:1 1 auto; min-width:0; padding-top:2px; }
.pairlist-line1, .pairlist-line2, .pairlist-line3{ gap:10px; align-items:center; }
.pairlist-line1 .name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:1.15; font-weight:900; }
.pairlist-line2{ margin-top:10px; flex-wrap:wrap; }
.pairlist-line3{ margin-top:10px; }
.pairlist-state-chip{ flex:0 0 auto; }
.pairlist-chiprow .chip{ flex:0 0 auto; white-space:nowrap; }
.pairlist-metric-chip{ min-width:52px; justify-content:center; }
.pairlist-incub-chip{ margin-left:auto; flex:0 0 auto; white-space:nowrap; }
.pairlist-breed-chip{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatarStack2.pairlist-avatars{ width:44px; min-width:44px; height:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-start; justify-content:flex-start; }
.pairlist-avatars .pairmini{ position:static !important; top:auto !important; left:auto !important; width:44px; height:44px; border-radius:16px; box-shadow:0 0 0 2px var(--surface); overflow:hidden; }
.pairlist-avatars .pairmini:first-child{ z-index:1; }
.pairlist-avatars .pairmini:last-child{ z-index:2; }
.pairlist-avatars .pairmini .sexicon{ width:30px; height:30px; }
@media (max-width: 420px){
  .pairlist-card .item{ gap:12px; padding:13px 14px; }
  .pairlist-line1 .name{ font-size:15px; }
  .pairlist-chiprow{ gap:8px; }
  .pairlist-incub-chip{ margin-left:0; }
}

.bbinfo-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.bbinfo-item{ border:1px solid var(--line); border-radius:14px; padding:10px; background: var(--surface-2); display:flex; gap:10px; align-items:flex-start; }
.bbinfo-ico{ width:28px; height:28px; display:grid; place-items:center; font-size:18px; flex:0 0 auto; }
.bbinfo-txt{ min-width:0; }
.bbinfo-k{ opacity:.65; font-size:12px; }
.bbinfo-v{ font-weight:900; font-size:14px; margin-top:2px; overflow-wrap:anywhere; }
.bbinfo-wide{ grid-column: 1 / -1; }
.bbinfo-notes .bbinfo-v{ white-space: pre-wrap; font-weight:700; }
@media (max-width: 360px){
  .bbinfo-grid{ grid-template-columns: 1fr; }
  .bbinfo-wide{ grid-column: auto; }
}


/* Bird form: Variety input bigger */
#ab_variety{ font-size:16px; }


/* Nest cards: small pair avatar inside .nesticon */
.nesticon{ position:relative; overflow:hidden; }
.nestpairava{ position:relative; width:100%; height:100%; }
.nestpairava .p{ position:absolute; width:20px; height:20px; border-radius:10px; overflow:hidden; background: var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; }
.nestpairava .p.a{ top:1px; left:6px; }
.nestpairava .p.b{ bottom:1px; left:6px; }
.nestpairava img{ width:100%; height:100%; object-fit:cover; display:block; }
.nestpairava .nestph{ font-weight:900; font-size:12px; opacity:.9; }


/* Two avatars stacked (father/mother) */
.avatarStack2{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
}
.avatarStack2 .avatar{ margin:0; }

/* Name chip: auto width, wrap if needed */
.chip.namechip{
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.15;
  padding: 6px 10px;
  white-space: normal;
  word-break: break-word;
  height: auto;
}


/* =========================
   Header compact popover menu
   ========================= */
.hpop{
  position: fixed;
  z-index: 90;
  min-width: 210px;
  max-width: min(260px, calc(100vw - 16px));
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.hpop-item{
  width: 100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}
.hpop-item:hover{ background: var(--surface2); }
.hpop-item:active{ transform: translateY(1px); }
.hpop-item.danger{ color: var(--bad); }
.hpop-ico{ width: 1.4em; display:inline-flex; justify-content:center; }
.hpop-sub{
  margin: -6px 12px 6px calc(12px + 1.4em + 10px);
  font-size: 12px;
  line-height: 1.25;
  color: var(--muted);
}

/* =========================================================
   Material Design (M3-inspired) — global visual overhaul
   - Keeps existing DOM/classes but swaps Pixel-like styling
   - Buttons, tabs, subtabs, cards, typography, colors
   ========================================================= */

:root{
  --btnh: 52px;
  --r: 12px;
  --r2: 24px;
  --shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  --shadow2: 0 2px 6px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.10);
}

body[data-theme="light"]{
  /* Material-ish (Google) */
  --bg:#f8f9fa;
  --surface:#ffffff;
  --surface2:#f1f3f4;           /* surfaceContainer */
  --surface3:#e8eaed;           /* surfaceContainerHigh */
  --text:#1f1f1f;
  --muted:#5f6368;
  --outline:#c4c7c5;

  --accent:#1a73e8;             /* primary */
  --onAccent:#ffffff;
  --accentSoft: rgba(26,115,232,.14);

  --ok:#0f9d58;
  --warn:#f9ab00;
  --bad:#d93025;

  --overlay: rgba(0,0,0,.40);
  --shadow: 0 1px 2px rgba(0,0,0,.16), 0 2px 10px rgba(0,0,0,.10);
  --shadow2: 0 2px 6px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.12);

  --snackBg:#1f1f1f;
  --snackText:#ffffff;
}

body[data-theme="dark"]{
  --bg:#0f1113;
  --surface:#131416;
  --surface2:#1a1c1e;
  --surface3:#202124;
  --text:#e8eaed;
  --muted:#9aa0a6;
  --outline:#3c4043;

  --accent:#8ab4f8;
  --onAccent:#0b1320;
  --accentSoft: rgba(138,180,248,.20);

  --ok:#34a853;
  --warn:#fbbc04;
  --bad:#ea4335;

  --overlay: rgba(0,0,0,.60);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.28);
  --shadow2: 0 2px 6px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.30);

  --snackBg:#e8eaed;
  --snackText:#0f1113;
}

body[data-theme="contrast"]{
  --bg:#000;
  --surface:#0b0b0b;
  --surface2:#101010;
  --surface3:#151515;
  --text:#fff;
  --muted:#e5e5e5;
  --outline:#2b2b2b;

  --accent:#00a3ff;
  --onAccent:#001018;
  --accentSoft: rgba(0,163,255,.22);

  --ok:#00ff88;
  --warn:#ffd000;
  --bad:#ff3355;

  --overlay: rgba(0,0,0,.75);
  --shadow:none;
  --shadow2:none;

  --snackBg:#fff;
  --snackText:#000;
}

/* Typography */
body{ letter-spacing: .1px; }
.brand h1{ font-weight: 700; font-size: 16px; }
.section-title h2{ font-weight: 700; }
.title{ font-weight: 700; }
.name{ font-weight: 650; }
.label{ font-weight: 600; }

/* Top / Bottom bars */
.topbar{ border-bottom: 0; box-shadow: var(--shadow); }
.topbar-inner{ padding: 12px 16px; }
.logo{ border-radius: 16px; border: 0; background: var(--accentSoft); }
.top-email{
  border-radius: 999px;
  border: 0;
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
body[data-theme="dark"] .top-email{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

.bottomnav{ border-top: 0; box-shadow: 0 -1px 0 rgba(0,0,0,.06), var(--shadow); }
body[data-theme="dark"] .bottomnav{ box-shadow: 0 -1px 0 rgba(255,255,255,.06), var(--shadow); }
.bottomnav-inner{ gap: 6px; }

/* Navigation tabs (Material navigation bar feel) */
.tabbtn{
  height: 64px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 18px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
.tabbtn::before{
  /* Removed: it was perceived as a shadow over the icons */
  display:none;
}
.tabbtn.active{ color: var(--accent); background: var(--accentSoft); }
.tabbtn > div{ font-weight: 600; }

/* Ripple-ish press feedback */
.btn, .tabbtn, .rowbtn .item, .hpop-item, .bbp-parent{
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .tabbtn:active, .rowbtn .item:active, .hpop-item:active, .bbp-parent:active{
  filter: brightness(.98);
}

/* Buttons */
.btn{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: transparent;
  font-weight: 650;
}
body[data-theme="dark"] .btn{ border-color: rgba(255,255,255,.14); }
.btn:hover{ filter: brightness(1.02); }
.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--onAccent);
  box-shadow: var(--shadow);
}
.btn.danger{ background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.square, .btn.avatar{ border-radius: 999px; }

/* Inputs (filled, Material-ish) */
.input{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: var(--surface2);
}
body[data-theme="dark"] .input{ border-color: rgba(255,255,255,.14); background: var(--surface2); }
.input:focus{
  border-color: rgba(26,115,232,.65);
  box-shadow: 0 0 0 3px var(--accentSoft);
}

/* Pickfield to match inputs */
.pickfield{ border-radius: 12px; border: 1px solid rgba(0,0,0,.10); background: var(--surface2); }
body[data-theme="dark"] .pickfield{ border-color: rgba(255,255,255,.14); }

/* Rows / cards */
.item{
  border-radius: 16px;
  border: 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
body[data-theme="dark"] .item{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

.card{
  border-radius: 20px;
  border: 0;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.avatar{ border-radius: 16px; border: 0; background: var(--accentSoft); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
body[data-theme="dark"] .avatar{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }

/* Chips */
.chip{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: transparent;
  font-weight: 600;
}
body[data-theme="dark"] .chip{ border-color: rgba(255,255,255,.16); }
.chip.ok{ border-color: rgba(15,157,88,.55); color: var(--text); }
.chip.warn{ border-color: rgba(249,171,0,.60); color: var(--text); }
.chip.bad{ border-color: rgba(217,48,37,.60); color: var(--text); }

/* Segmented (subtabs) */
.seg{
  border-radius: 999px;
  padding: 6px;
  gap: 6px;
  border: 0;
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
body[data-theme="dark"] .seg{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.seg .btn{
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.seg .btn.active{
  background: var(--accentSoft);
  color: var(--accent);
}

/* Modals (Material dialog) */
.panel{
  border-radius: 28px;
  border: 0;
  box-shadow: var(--shadow2);
}
.dlg-head{
  border-bottom: 0;
  padding: 16px 16px 12px;
}
.dlg-head h3{ font-weight: 700; }
.dlg-foot{ border-top: 0; padding: 12px 16px 16px; }

/* Toast -> Snackbar */
.toast-inner{
  border-radius: 12px;
  border: 0;
  background: var(--snackBg);
  color: var(--snackText);
  box-shadow: var(--shadow2);
  font-weight: 650;
}
.toast.ok .toast-inner{ background: var(--snackBg); color: var(--snackText); }
.toast.bad .toast-inner{ background: var(--snackBg); color: var(--snackText); }
.toast.warn .toast-inner{ background: var(--snackBg); color: var(--snackText); }
.toast.info .toast-inner{ background: var(--snackBg); color: var(--snackText); }

/* Popover menu */
.hpop{
  border-radius: 16px;
  border: 0;
  background: var(--surface);
  box-shadow: var(--shadow2);
}
.hpop-item{ border-radius: 12px; font-weight: 650; }
.hpop-item:hover{ background: var(--surface2); }

/* FAB */
.fab{
  border: 0;
  box-shadow: var(--shadow2);
  background: var(--accent);
  color: var(--onAccent);
}
.fab:active{ transform: translateY(1px); }

/* Switch (toggle) touch + colors */
.toggle input[type="checkbox"]{
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.20);
}
body[data-theme="dark"] .toggle input[type="checkbox"]{ background: rgba(255,255,255,.22); }
.toggle input[type="checkbox"]::after{
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.toggle input[type="checkbox"]:checked{ background: rgba(26,115,232,.55); }
body[data-theme="dark"] .toggle input[type="checkbox"]:checked{ background: rgba(138,180,248,.55); }

/* =========================================================
   Fichaje-like theme tweaks
   - Compact Material look
   - Colored top app bar
   - Tabs/subtabs closer to the Fichaje app styling
   ========================================================= */

:root{
  --btnh: 48px;
  --r: 12px;
  --r2: 18px;
}

body[data-theme="light"],
body[data-theme="dark"],
body[data-theme="contrast"]{
  --primary: var(--accent);
  --onPrimary: var(--onAccent);
}

/* Top app bar */
.topbar{
  background: var(--primary);
  color: var(--onPrimary);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), var(--shadow2);
}
body[data-theme="dark"] .topbar{ box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--shadow2); }
.topbar-inner{ padding: 10px 12px; }
.topbar .brand h1{ color: inherit; font-weight: 800; letter-spacing: .2px; }
.topbar .brand p{ color: currentColor; opacity: .80; }

.topbar .logo{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  color: inherit;
}
body[data-theme="dark"] .topbar .logo,
body[data-theme="contrast"] .topbar .logo{ background: rgba(0,0,0,.10); }

.topbar .btn{
  border: 0 !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.16);
  color: inherit;
}
body[data-theme="dark"] .topbar .btn,
body[data-theme="contrast"] .topbar .btn{ background: rgba(0,0,0,.10); }
.topbar .btn:active{ background: rgba(255,255,255,.26); }
body[data-theme="dark"] .topbar .btn:active,
body[data-theme="contrast"] .topbar .btn:active{ background: rgba(0,0,0,.18); }

/* Search inside app bar */
.search{ padding: 0 12px; }
.search-inner{ padding: 0 0 12px; }
.search .input{
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--onPrimary);
}
.search .input::placeholder{ color: var(--onPrimary); opacity: .72; }
body[data-theme="dark"] .search .input,
body[data-theme="contrast"] .search .input{
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.12);
  color: var(--onPrimary);
}
body[data-theme="dark"] .search .input::placeholder,
body[data-theme="contrast"] .search .input::placeholder{ color: var(--onPrimary); opacity: .65; }

/* Bottom navigation */
.bottomnav{ padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
.bottomnav-inner{ gap: 4px; }
.tabbtn{ height: 60px; border-radius: 16px; }
.tabbtn::before{ top: 10px; width: 72px; height: 34px; }
.tabbtn > div{ font-size: 12px; font-weight: 650; }

/* Subtabs (segmented) */
.seg{ padding: 4px; gap: 4px; }

/* Segmented: avoid overflow on small screens */
.seg .btn{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seg .btn{ height: 40px; }

/* General inputs/buttons to be closer to Fichaje spacing */
.btn{ height: var(--btnh); border-radius: 12px; }
.input{ height: var(--btnh); border-radius: 12px; }
.pickfield{ min-height: var(--btnh); border-radius: 12px; }

/* Keep iOS date alignment in sync with new --btnh */
@supports (-webkit-touch-callout: none){
  input[type="date"].input{ line-height: var(--btnh); }
  input[type="date"].input::-webkit-date-and-time-value{ line-height: var(--btnh); }
}

/* ===== Ajustes: tabs por sección ===== */
#dlgSettings .dlg-body{
  padding-top: 0;
  overscroll-behavior: contain;
}

#dlgSettings .settingsTabs{
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 -14px 12px;
  padding: 10px 14px 12px;
  border-radius: 0;
  border-bottom: 1px solid var(--outline);
  background: var(--surface);
  box-shadow: 0 10px 18px -18px rgba(0,0,0,.45);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body[data-theme="dark"] #dlgSettings .settingsTabs,
body[data-theme="contrast"] #dlgSettings .settingsTabs{
  background: var(--surface);
  box-shadow: 0 10px 18px -18px rgba(0,0,0,.72);
}

#dlgSettings .settingsTabs .btn{
  flex: 1;
  min-width: 96px;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
#dlgSettings .settingsTabs .btn.active,
#dlgSettings .settingsTabs .btn[aria-selected="true"]{
  background: var(--accentSoft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(27,110,243,.10);
}
body[data-theme="dark"] #dlgSettings .settingsTabs .btn.active,
body[data-theme="dark"] #dlgSettings .settingsTabs .btn[aria-selected="true"],
body[data-theme="contrast"] #dlgSettings .settingsTabs .btn.active,
body[data-theme="contrast"] #dlgSettings .settingsTabs .btn[aria-selected="true"]{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

#dlgSettings [data-stab-pane]{
  position: relative;
  z-index: 0;
  margin-top: 0;
}


@media (max-width: 640px){
  #dlgSettings .settingsTabs{
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 10px;
  }
  #dlgSettings .settingsTabs .btn{
    min-width: calc(50% - 3px);
    flex: 1 1 calc(50% - 3px);
  }
}

/* Auto-hide chrome (top bar / bottom nav / FAB) when scrolling down */
html.chrome-hidden{
  --topbarPad: 0px;
  --bottomPad: calc(14px + env(safe-area-inset-bottom));
}
html.chrome-hidden .topbar{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
html.chrome-hidden .bottomnav{
  transform: translateY(110%);
  pointer-events: none;
}
html.chrome-hidden .fab-wrap{
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}



/* =========================
   Multi-select (cards/lists)
   ========================= */
.selbar{
  position: sticky;
  top: calc(var(--topbarPad) + 10px);
  z-index: 30;
  padding: 0 14px 10px;
  max-width: var(--contentMax);
  margin: 0 auto;
}

/* Mobile: float the multi-select menu so it stays reachable while scrolling */
@media (max-width: 820px){
  .selbar{
    position: fixed;
    top: auto;
    bottom: calc(var(--bottomPad) + 10px);
    left: 0;
    right: 0;
    padding: 0 14px;
    margin: 0 auto;
    z-index: 60;
    pointer-events: none;
  }
  .selbar-inner{ pointer-events: auto; }
}
.selbar-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
}
body[data-theme="dark"] .selbar-inner{
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.selbar-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.selbar-kind{ font-weight: 900; font-size: 13px; line-height: 1.15; }
.selbar-count{ font-size: 12px; opacity: .82; line-height: 1.15; }
.selbar-actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

.selitem{ position:relative; }

/* Clickable select hotspot (JS adds a transparent button). */
.selcheckbtn{
  position:absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  z-index: 4;
  display:none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .selitem:hover .selcheckbtn{ display:block; }
}
.selitem.sel-mode .selcheckbtn{ display:block; }

/* Visual indicator (circle/check) */
.selitem::after{
  content:"";
  position:absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.16);
  opacity: 0;
  transition: opacity .12s ease;
}
@media (hover:hover){
  .selitem:hover::after{ opacity: 1; }
}
.selitem.sel-mode::after{ opacity: 1; }

body[data-theme="dark"] .selitem::after{
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.selitem.selected::after{
  content:"✓";
  display:grid;
  place-items:center;
  font-weight: 950;
  color: var(--accent);
  background: var(--accentSoft);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.10);
  opacity: 1;
}
.selitem.selected .item{
  box-shadow: inset 0 0 0 2px rgba(26,115,232,.35), var(--shadow);
}

/* Toast action button (Undo) */
.toast-inner{ display:flex; align-items:center; gap:12px; }
.toast-text{ flex:1; text-align:center; }
.toast-act{
  border:0;
  background: transparent;
  font-weight: 900;
  color: var(--accent);
  padding: 8px 10px;
  border-radius: 999px;
}
.toast-act:active{ background: var(--accentSoft); }



/* =========================
   ICON PICKER (Modo criador)
   ========================= */
.iconpick-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap:10px;
}
.btn.iconpick-btn{
  height:56px;
  padding:0;
  border-radius:16px;
  font-size:22px;
}
.btn.iconpick-btn.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accentSoft);
}


/* Floating selection bar (mounted to body) */
#selbarFloating{ pointer-events:none; }
#selbarFloating .selbar-inner{ pointer-events:auto; }



.nest-pair-card{ position:relative; overflow:visible; }
.nest-pair-card .pad{ padding-bottom:92px; }
.nest-pair-add-wrap{ position:absolute; right:14px; bottom:14px; z-index:3; }
.nest-pair-add-btn{ font-size:30px; line-height:1; }
.nest-pair-seq{ display:flex; gap:8px; flex-wrap:wrap; }