/* =====================================================
   GASTOS.CSS · CAJA COMÚN PREMIUM
===================================================== */

#view-expenses{
  padding-top:4px;
  padding-bottom:110px;
}

/* CABECERA */
#view-expenses .section-title{
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  align-items:center !important;
  gap:16px !important;
  margin:4px 0 18px !important;
}

#view-expenses .section-title > span{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 12px 28px rgba(22,55,69,.12) !important;
}

#view-expenses .section-title h2{
  font-family:"Caveat",cursive !important;
  font-size:clamp(3rem,5vw,4.4rem) !important;
  line-height:.9 !important;
  font-weight:700 !important;
  color:#123949 !important;
}

#view-expenses .section-title p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
}

/* BLOQUE PIN */
.expense-lock{
  display:flex !important;
  justify-content:center !important;
  padding:18px 0 !important;
}

.lock-card{
  width:min(460px,100%) !important;
  padding:30px 28px !important;
  border-radius:32px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 18px 42px rgba(22,55,69,.14) !important;
  backdrop-filter:blur(10px) !important;
  text-align:center !important;
}

.lock-icon{
  width:62px !important;
  height:62px !important;
  margin:0 auto 12px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 10px 22px rgba(22,55,69,.10) !important;
  font-size:1.8rem !important;
}

.lock-card h3{
  font-family:"Caveat",cursive !important;
  font-size:2.35rem !important;
  line-height:.95 !important;
  color:#123949 !important;
  font-weight:700 !important;
}

.lock-card p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
  margin-top:8px !important;
}

/* RESUMEN */
.expense-summary{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:14px !important;
  margin-bottom:16px !important;
}

.expense-summary article,
.family-balance-grid article{
  position:relative !important;
  overflow:hidden !important;
  min-height:92px !important;
  padding:16px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 14px 30px rgba(22,55,69,.11) !important;
  backdrop-filter:blur(10px) !important;
}

.expense-summary article::before,
.family-balance-grid article::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:4px;
  border-radius:0 0 20px 20px;
  background:linear-gradient(90deg,#0f5b73,#d9c47a);
}

.expense-summary p,
.family-balance-grid p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#5d6f76 !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
}

.expense-summary strong,
.family-balance-grid strong{
  display:block !important;
  margin-top:6px !important;
  font-family:"Caveat",cursive !important;
  font-size:2rem !important;
  line-height:1 !important;
  color:#123949 !important;
  font-weight:700 !important;
}

.family-balance-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:14px !important;
  margin-bottom:18px !important;
}

.family-balance-grid h3{
  font-family:"Caveat",cursive !important;
  font-size:1.85rem !important;
  color:#123949 !important;
}

/* FORMULARIOS */
#view-expenses .comic-form{
  display:grid !important;
  grid-template-columns:1.3fr .7fr 1fr auto !important;
  gap:10px !important;
  margin-bottom:18px !important;
  padding:16px !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 12px 28px rgba(22,55,69,.10) !important;
}

#view-expenses input,
#view-expenses select{
  height:42px !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#fffefb,#fff7e9) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  color:#123949 !important;
  font-family:"Inter",system-ui,sans-serif !important;
}

#view-expenses .comic-form button{
  height:42px !important;
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
  border:none !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.84rem !important;
  font-weight:900 !important;
}

/* LISTA GASTOS */
#expenseList{
  display:grid !important;
  gap:16px !important;
}

#view-expenses .info-card{
  position:relative !important;
  overflow:hidden !important;
  padding:20px 22px !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 16px 36px rgba(22,55,69,.12) !important;
  backdrop-filter:blur(10px) !important;
}

#view-expenses .info-card::before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  bottom:20px;
  width:7px;
  border-radius:0 20px 20px 0;
  background:linear-gradient(180deg,#0f5b73,#d9c47a);
}

#view-expenses .info-card h3{
  font-family:"Caveat",cursive !important;
  font-size:2.1rem !important;
  line-height:.95 !important;
  color:#123949 !important;
  font-weight:700 !important;
}

#view-expenses .info-card p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
}

#view-expenses .meta-line{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:12px !important;
}

#view-expenses .pill{
  min-height:28px !important;
  padding:0 11px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  color:#0f5b73 !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.76rem !important;
  font-weight:900 !important;
}

#view-expenses .booking-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:16px !important;
}

#view-expenses .booking-actions button{
  height:38px !important;
  min-height:38px !important;
  border-radius:14px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.8rem !important;
  font-weight:900 !important;
}

#view-expenses [data-expense-edit]{
  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
  border:none !important;
}

#view-expenses [data-expense-delete]{
  background:rgba(255,255,255,.76) !important;
  color:#b94747 !important;
  border:1px solid rgba(185,71,71,.18) !important;
}

/* RESPONSIVE */
@media(max-width:900px){
  #view-expenses .comic-form{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:760px){
  #view-expenses .section-title{
    grid-template-columns:52px 1fr !important;
  }

  #view-expenses .section-title h2{
    font-size:2.6rem !important;
  }

  .expense-summary,
  .family-balance-grid,
  #view-expenses .comic-form{
    grid-template-columns:1fr !important;
  }

  .lock-card{
    padding:24px 20px !important;
    border-radius:28px !important;
  }

  #view-expenses .booking-actions{
    grid-template-columns:1fr !important;
  }
}