/* FinanzApp CR — Estilos principales */

:root{
  /* ── Acento (igual en ambos modos) ── */
  --gold:       #d4af37;
  --gold-soft:  #f5d76e;
  --gold-dim:   rgba(212,175,55,0.12);
  --green:      #30d158;
  --green-deep: #25a244;
  --green-dim:  rgba(48,209,88,0.10);
  --blue:       #0a84ff;
  --blue-dim:   rgba(10,132,255,0.10);
  --amber:      #ffd60a;
  --amber-dim:  rgba(255,214,10,0.10);
  --red:        #ff453a;
  --red-dim:    rgba(255,69,58,0.10);
  --purple:     #a78bfa;
  --purple-dim: rgba(167,139,250,0.10);
  --orange:     #f97316;

  /* ── MODO OSCURO (default) ── */
  --bg:           #000000;
  --bg-2:         #080808;
  --bg-card:      #0d0d0d;
  --bg-card-h:    #111111;
  --bg-input:     #0a0a0a;
  --bg-hover:     #161616;
  --bg-overlay:   rgba(0,0,0,0.85);
  --bg-modal:     rgba(0,0,0,0.97);
  --bg-header:    rgba(0,0,0,0.80);
  --border:       rgba(255,255,255,0.07);
  --border-h:     rgba(255,255,255,0.13);
  --border-input: rgba(255,255,255,0.10);
  --text:         #e2e2e8;
  --text-2:       #ddd;
  --text-3:       #ccc;
  --text-4:       #aaa;
  --text-dim:     #888;
  --text-muted:   #666;
  --text-faint:   #555;
  --text-ghost:   #444;
  --shadow:       rgba(0,0,0,0.6);
  --shadow-card:  0 6px 32px rgba(0,0,0,0.6);
  --chart-grid:   #161616;
  --chart-text:   #333;
  --stripe-even:  rgba(255,255,255,0.025);
  --stripe-odd:   rgba(255,255,255,0.025);
  /* ── Glass overlays (para hero card y chips) ── */
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-bg-2:   rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-2:rgba(255,255,255,0.12);
  --glass-text:   rgba(255,255,255,0.35);
  --glass-text-2: rgba(255,255,255,0.25);
  --glass-text-3: rgba(255,255,255,0.5);
  --glass-line:   rgba(255,255,255,0.08);
  --glass-footer:  rgba(0,0,0,0.2);
}

/* ── MODO CLARO ── */
[data-theme="light"]{
  --gold:       #a88510;
  --gold-soft:  #c9a021;
  --gold-dim:   rgba(168,133,16,0.10);
  --green:      #16a34a;
  --green-deep: #15803d;
  --green-dim:  rgba(22,163,74,0.08);
  --blue:       #0284c7;
  --blue-dim:   rgba(2,132,199,0.08);
  --amber:      #b45309;
  --amber-dim:  rgba(180,83,9,0.08);
  --red:        #dc2626;
  --red-dim:    rgba(220,38,38,0.08);
  --purple:     #7c3aed;
  --purple-dim: rgba(124,58,237,0.08);
  --orange:     #c2410c;

  --bg:           #f2f1f6;
  --bg-2:         #eae9f0;
  --bg-card:      #ffffff;
  --bg-card-h:    #faf9fe;
  --bg-input:     #eeedf4;
  --bg-hover:     #e4e3ec;
  --bg-overlay:   rgba(0,0,0,0.35);
  --bg-modal:     rgba(255,255,255,0.98);
  --bg-header:    rgba(242,241,246,0.90);
  --border:       rgba(0,0,0,0.07);
  --border-h:     rgba(0,0,0,0.13);
  --border-input: rgba(0,0,0,0.09);
  --text:         #1a1a2e;
  --text-2:       #2a2a3e;
  --text-3:       #3a3a50;
  --text-4:       #555568;
  --text-dim:     #6e6e82;
  --text-muted:   #8e8ea0;
  --text-faint:   #a0a0b2;
  --text-ghost:   #b8b8c8;
  --shadow:       rgba(80,60,120,0.06);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(80,60,120,0.07);
  --chart-grid:   #dddce4;
  --chart-text:   #a0a0b2;
  --stripe-even:  rgba(80,60,120,0.025);
  --stripe-odd:   rgba(80,60,120,0.025);
  /* ── Glass overlays (para hero card y chips) ── */
  --glass-bg:     rgba(80,60,120,0.04);
  --glass-bg-2:   rgba(80,60,120,0.06);
  --glass-border: rgba(80,60,120,0.10);
  --glass-border-2:rgba(80,60,120,0.14);
  --glass-text:   rgba(30,30,60,0.50);
  --glass-text-2: rgba(30,30,60,0.35);
  --glass-text-3: rgba(30,30,60,0.65);
  --glass-line:   rgba(80,60,120,0.08);
  --glass-footer:  rgba(80,60,120,0.04);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;}
*,*::before,*::after{transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,'SF Pro Display','Syne','Trebuchet MS',sans-serif;
  overscroll-behavior:none;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212,175,55,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(48,209,88,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 10% 80%, rgba(10,132,255,0.03) 0%, transparent 50%);
  background-attachment:fixed;
  transition: background-color 0.3s, color 0.3s;
}
input,select,button{font-family:inherit;}

/* Light mode body background */
[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(168,133,16,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(124,58,237,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 10% 80%, rgba(2,132,199,0.04) 0%, transparent 50%);
}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(80,60,120,0.18);}
[data-theme="light"] input:focus,[data-theme="light"] select:focus{border-color:rgba(168,133,16,0.5)!important;box-shadow:0 0 0 3px rgba(168,133,16,0.10);}
[data-theme="light"] .gold-text{background:linear-gradient(135deg,#8b6f0a,#b8960e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
[data-theme="light"] .green-text{background:linear-gradient(135deg,#15803d,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Title gradient */
.title-gradient{background:linear-gradient(135deg,#fff,#bbb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
[data-theme="light"] .title-gradient{background:linear-gradient(135deg,#1a1a2e,#4a4a6e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Light mode: focus-visible */
[data-theme="light"] button:focus-visible,[data-theme="light"] [role="checkbox"]:focus-visible,
[data-theme="light"] [role="tab"]:focus-visible,[data-theme="light"] a:focus-visible,
[data-theme="light"] [tabindex]:focus-visible,[data-theme="light"] select:focus-visible{
  outline:2px solid rgba(168,133,16,0.55);outline-offset:2px;
}
[data-theme="light"] input:focus-visible{outline:2px solid rgba(168,133,16,0.45);outline-offset:1px;}

/* Header responsive */
@media(max-width:480px){
  .header-tools-label{display:none!important;}
}
@media(min-width:481px){
  .header-name{display:inline!important;}
}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(212,175,55,0.25);border-radius:2px;}

/* Touch feedback — bottom nav */
#bottom-nav-wrap button:active{opacity:0.6;transform:scale(0.92);}
#bottom-nav-wrap button{transition:opacity 0.1s,transform 0.1s;}

/* iOS press feedback for cards and buttons */
button:active:not(#bottom-nav-wrap button){transform:scale(0.97);transition:transform 0.1s ease;}
.ios-press:active{transform:scale(0.97);transition:transform 0.1s ease;}

/* Animaciones */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-12px) scale(0.95)}}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0.3)}50%{box-shadow:0 0 0 6px rgba(212,175,55,0)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes glow-in{from{opacity:0;transform:scale(0.97)}to{opacity:1;transform:scale(1)}}

/* ── Micro-animaciones de check ── */
@keyframes check-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(0.9)}100%{transform:scale(1)}}
@keyframes check-ring{0%{box-shadow:0 0 0 0 rgba(48,209,88,0.6)}100%{box-shadow:0 0 0 10px rgba(48,209,88,0)}}
@keyframes row-done{from{opacity:1;transform:translateX(0)}to{opacity:0.55;transform:translateX(3px)}}
@keyframes row-undone{from{opacity:0.55;transform:translateX(3px)}to{opacity:1;transform:translateX(0)}}
@keyframes strike-in{from{width:0}to{width:100%}}
@keyframes confetti-fall{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}40%{opacity:1}100%{transform:translate(var(--cx,0),calc(var(--cy,40px) + 30px)) rotate(540deg) scale(0.4);opacity:0}}
@keyframes monto-pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes row-flash{0%{background-color:transparent}30%{background-color:rgba(48,209,88,0.18)}100%{background-color:transparent}}
@keyframes back-to-today-in{from{opacity:0;transform:translate(-50%,16px) scale(0.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes toast-progress{from{width:100%}to{width:0%}}
@keyframes section-done{0%{background:var(--bg-card)}50%{background:rgba(48,209,88,0.12)}100%{background:var(--bg-card)}}

.check-animate{animation:check-pop .3s cubic-bezier(.36,.07,.19,.97) forwards;}
.check-ring{animation:check-ring .4s ease-out forwards;}
.row-done{animation:row-done .25s ease forwards;}
.row-undone{animation:row-undone .2s ease forwards;}
.section-flash{animation:section-done .6s ease forwards;}

.fade-up{animation:fadeUp .25s ease forwards;}
.glow-in{animation:glow-in .2s ease forwards;}

/* iOS input focus glow */
input,select{font-size:max(16px,inherit);}
input:focus,select:focus{outline:none;border-color:rgba(212,175,55,0.55)!important;box-shadow:0 0 0 3px rgba(212,175,55,0.12);}

/* iOS-style 0.5px list separators */
.ios-list-item+.ios-list-item{border-top:0.5px solid rgba(255,255,255,0.07);}
[data-theme="light"] .ios-list-item+.ios-list-item{border-top:0.5px solid rgba(0,0,0,0.07);}

/* Focus visible */
button:focus-visible,[role="checkbox"]:focus-visible,[role="tab"]:focus-visible,
a:focus-visible,[tabindex]:focus-visible,select:focus-visible{
  outline:2px solid rgba(212,175,55,0.6);outline-offset:2px;border-radius:8px;
}
input:focus-visible{outline:2px solid rgba(212,175,55,0.5);outline-offset:1px;border-radius:8px;}

/* ── Safe area / Status bar (iOS notch + Android) ── */
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}
#status-bar-fill{
  position:fixed;
  top:0;left:0;right:0;
  height:env(safe-area-inset-top, 0px);
  background:#000000;
  z-index:9000;
  pointer-events:none;
  will-change:transform;
}
[data-theme="light"] #status-bar-fill{
  background:rgba(242,241,246,0.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
#header-sticky-wrap{
  top: 0 !important;
  background: rgba(0,0,0,0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
[data-theme="light"] #header-sticky-wrap{
  background: rgba(242,241,246,0.97);
  border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
#header-sticky-wrap [role="banner"]{ pointer-events: none; }
#header-sticky-wrap [role="banner"] > *{ pointer-events: auto; }
#app-content-wrap{
  padding-top: 0;
}
/* Bottom nav con safe area - iOS style */
#bottom-nav-wrap{
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border-top: 0.5px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] #bottom-nav-wrap{
  background: rgba(242,241,246,0.80) !important;
  border-top: 0.5px solid rgba(0,0,0,0.08) !important;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Gradientes de texto */
.gold-text{
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.green-text{
  background:linear-gradient(135deg,var(--green),#34d159);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* ── Animaciones dashboard cards ── */
@keyframes cardIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.dash-wrap>*{
  animation:cardIn .35s cubic-bezier(.25,.46,.45,.94) both;
}
.dash-wrap>*:nth-child(1){animation-delay:0s}
.dash-wrap>*:nth-child(2){animation-delay:.07s}
.dash-wrap>*:nth-child(3){animation-delay:.14s}
.dash-wrap>*:nth-child(4){animation-delay:.21s}
.dash-wrap>*:nth-child(5){animation-delay:.28s}
.dash-wrap>*:nth-child(6){animation-delay:.35s}
.dash-wrap>*:nth-child(7){animation-delay:.42s}
.dash-wrap>*:nth-child(8){animation-delay:.49s}
.dash-wrap>*:nth-child(9){animation-delay:.56s}
.dash-wrap>*:nth-child(10){animation-delay:.63s}
.dash-wrap>*:nth-child(11){animation-delay:.7s}
.dash-wrap>*:nth-child(12){animation-delay:.77s}
@media(prefers-reduced-motion:reduce){
  .dash-wrap>*{animation:none;opacity:1;transform:none}
}

/* ── Gauge glow para salud financiera ── */
.gauge-arc{
  filter:drop-shadow(0 0 6px var(--gauge-color,#30d158));
  transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}

/* ── Formularios de gastos ── */
.gasto-form-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.gasto-form-header .gfh-icon{
  font-size:18px;line-height:1;
}
.gasto-form-header .gfh-title{
  font-size:13px;font-weight:700;letter-spacing:0.3px;
  text-transform:uppercase;
}
.gasto-form-section{
  margin-top:14px;
}
.gasto-form-section .gfs-label{
  font-size:11px;font-weight:600;color:var(--text-dim);
  margin-bottom:6px;display:flex;align-items:center;gap:4px;
  letter-spacing:0.2px;
}
.gasto-form-actions{
  display:flex;gap:8px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--border);
}
.gasto-form-actions .gfa-btn-primary{
  flex:1;padding:12px 16px;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--gold),#b8941f);
  color:#000;font-weight:700;font-size:14px;
  cursor:pointer;font-family:inherit;
  transition:opacity 0.15s,transform 0.1s;
}
.gasto-form-actions .gfa-btn-primary:active{opacity:0.85;transform:scale(0.98);}
.gasto-form-actions .gfa-btn-cancel{
  padding:12px 16px;border-radius:10px;
  border:1px solid var(--border);background:transparent;
  color:var(--text-muted);cursor:pointer;font-family:inherit;
  font-size:13px;
}
@keyframes gasto-added{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,0.4)}
  70%{box-shadow:0 0 0 8px rgba(212,175,55,0)}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}
}
.gasto-added{animation:gasto-added .5s ease;}

/* Backdrop-filter fallback */
@supports not (backdrop-filter:blur(1px)){#status-bar-fill{background:var(--bg)!important;}#bottom-nav-wrap{background:var(--bg-card)!important;}}


/* ── iOS Premium: Bottom nav label hide on scroll ── */
#bottom-nav-wrap .nav-label{
  font-size:10px;
  transition:opacity 0.25s ease, max-height 0.25s ease, transform 0.25s ease;
  opacity:1;
  max-height:14px;
  transform:translateY(0);
  overflow:hidden;
}
body.is-scrolling #bottom-nav-wrap .nav-label{
  opacity:0;
  max-height:0;
  transform:translateY(4px);
}

/* ── iOS Premium: Floating pill press feedback ── */
#header-sticky-wrap button:active{
  transform:scale(0.92);
  transition:transform .1s ease;
}
#header-sticky-wrap [role="banner"] > div{
  transition:transform .2s ease;
}
body.scrolled-down #header-sticky-wrap [role="banner"] > div{
  transform:translateY(-2px) scale(0.96);
}

/* ── iOS Premium: Spending bar pill container ── */
.spending-bar-pill{
  height:8px;
  border-radius:100px;
  overflow:hidden;
  background:var(--glass-bg);
  display:flex;
  gap:2px;
}
[data-theme="light"] .spending-bar-pill{
  background:rgba(0,0,0,0.06);
}

/* ── iOS Premium: Greeting large title ── */
.greeting-title{
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1.1;
  background:linear-gradient(135deg,#fff 60%,rgba(255,255,255,0.6));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
[data-theme="light"] .greeting-title{
  background:linear-gradient(135deg,#1a1a2e 60%,rgba(26,26,46,0.55));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ========================================================
   iOS-style Settings Sheet  (Turno 1 del rediseño)
   Transforma el popover anclado en un bottom-sheet pulido.
   ======================================================== */

.ios-settings-modal {
  animation: ios-pop-in 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  -webkit-overflow-scrolling: touch;
  z-index: 9999 !important;
  touch-action: pan-y;
  transform: translateZ(0);
  will-change: transform;
}
@keyframes ios-pop-in {
  from { transform: translateY(-12px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* (Drag handle removido: usamos popover anclado, no sheet) */

/* Padding lateral como iOS Settings */
.ios-settings-modal > div:not(:first-child) {
  padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
  padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
}

/* Header interno (título + botones) con espaciado iOS */
.ios-settings-modal > div:nth-child(2) {
  padding-top: 6px !important;
  padding-bottom: 14px !important;
  border-bottom: 0.5px solid var(--border) !important;
  margin-bottom: 8px;
}

/* Las "Cards" dentro del modal toman forma iOS Settings (grouped list) */
.ios-settings-modal [style*="background:var(--bg-hover)"],
.ios-settings-modal [style*="background: var(--bg-hover)"] {
  border-radius: 12px !important;
}

/* Cards principales estilo "grouped list" */
.ios-settings-modal > div:nth-child(3) > div {
  background: var(--bg-card) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  margin-bottom: 14px !important;
}
[data-theme="light"] .ios-settings-modal > div:nth-child(3) > div {
  background: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Títulos de sección estilo iOS (uppercase gris) */
.ios-settings-modal [style*="letterSpacing:1"][style*="fontWeight:700"] {
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  padding-left: 4px !important;
}

/* Botones primarios del modal (JSON/Excel/Panel Admin) con tacto iOS */
.ios-settings-modal button {
  border-radius: 11px !important;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.ios-settings-modal button:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* Título "Configuración" si aparece */
.ios-settings-modal h1,
.ios-settings-modal h2,
.ios-settings-modal [style*="fontSize:18"][style*="fontWeight:8"],
.ios-settings-modal [style*="fontSize:17"][style*="fontWeight:7"] {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
}

/* Light mode: popover blanco estilo iOS */
[data-theme="light"] .ios-settings-modal {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
}

/* Scroll suave y safe area bottom */
.ios-settings-modal {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ios-settings-modal::-webkit-scrollbar {
  display: none;
}

/* Lock background scroll while Settings modal is open (uses :has(), supported on iOS 15.4+) */
body:has(.ios-settings-modal) {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.ios-settings-modal {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* iOS Quincena bottom sheet picker */
.ios-quincena-sheet {
  animation: ios-sheet-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: pan-y;
  overscroll-behavior: contain;
}
@keyframes ios-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
html:has(.ios-quincena-sheet),
body:has(.ios-quincena-sheet) {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.ios-quincena-sheet button:active {
  background: var(--bg-hover) !important;
}
[data-theme="light"] .ios-quincena-sheet {
  background: rgba(255,255,255,0.98) !important;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* iOS full-screen Search sheet (slide up from bottom) */
.ios-search-sheet {
  animation: ios-sheet-up 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: pan-y;
  overscroll-behavior: contain;
}
html:has(.ios-search-sheet),
body:has(.ios-search-sheet) {
  overflow: hidden !important;
  overscroll-behavior: none;
}
[data-theme="light"] .ios-search-sheet {
  background: rgba(255,255,255,0.98) !important;
}

/* === Pill scroll row: horizontal scroll de botones/pills === */
.pill-scroll-row {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
  padding-bottom: 2px;
}
.pill-scroll-row::-webkit-scrollbar { display: none; }
.pill-scroll-row > * {
  flex-shrink: 0 !important;
  white-space: nowrap;
}