/* ===================================================================
   HealthyGo - estilos
   Paleta tomada del PDF de referencia:
   crema #fcf8f0 · verde oscuro #153d2c · verde #12672f
   salvia #bccdb3 / #e8ecdf · acento naranja #ff751f
   =================================================================== */
:root{
  --cream:#fcf8f0; --cream-2:#faf6f1; --card:#fffdf9;
  --ink:#153d2c; --ink-2:#1e4936; --muted:#6f7d70;
  --green:#12672f; --green-d:#115b20; --green-l:#e8ecdf;
  --sage:#bccdb3; --sage-d:#9cb594; --line:#e4e7d8;
  --orange:#ff751f; --orange-l:#fff1e6;
  --radius:16px; --radius-sm:11px;
  --shadow:0 6px 22px rgba(21,61,44,.08);
  --shadow-lg:0 14px 40px rgba(21,61,44,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.6; font-size:15px;
}
a{color:var(--green); text-decoration:none}
a:hover{color:var(--green-d)}
img{max-width:100%; display:block}
h1,h2,h3,h4{margin:0 0 .5rem; line-height:1.2; color:var(--ink); font-weight:800; letter-spacing:-.01em}
h1{font-size:1.7rem}
h2{font-size:1.28rem}
.muted{color:var(--muted); font-size:.88rem}
.container{width:100%; max-width:1120px; margin:0 auto; padding:0 18px}
.page{padding:26px 18px 70px; min-height:55vh}

/* ---------- Topbar ---------- */
.topbar{background:rgba(252,248,240,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1100}
.topbar-inner{display:flex; align-items:center; gap:14px; height:64px}
.brand{font-weight:800; font-size:1.2rem; color:var(--ink); display:flex; align-items:center; gap:9px; white-space:nowrap}
.brand-logo{height:38px; width:auto; display:block; border-radius:9px}
.brand-dot{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3fae5e,var(--green)); display:inline-block;
  box-shadow:0 0 0 4px var(--green-l)}
.loc-btn{background:var(--green-l); border:1px solid #cfe4d4; color:var(--green-d);
  padding:7px 13px; border-radius:999px; cursor:pointer; font-size:.82rem; max-width:560px;
  display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; font-weight:600}
.loc-btn:hover{border-color:var(--sage); background:#dcefe2}
.loc-icon{color:var(--orange); flex:none}
.locbar{background:#fff; border-bottom:1px solid var(--line)}
.locbar-inner{display:flex; align-items:center; gap:10px; padding:8px 18px; font-size:.85rem}
.locbar-label{color:var(--muted); font-weight:600; flex:none}
.topnav{margin-left:auto; display:flex; align-items:center; gap:16px; font-size:.9rem; flex-wrap:wrap}
.topnav a{color:var(--ink); font-weight:600}
.topnav a:hover{color:var(--green)}
.topnav a.btn{color:#fff}
.topnav a.btn:hover{color:#fff}

/* Boton hamburguesa (solo movil) */
.nav-toggle{display:none; margin-left:auto; background:transparent; border:none; cursor:pointer;
  padding:8px; flex-direction:column; gap:5px; border-radius:8px}
.nav-toggle:hover{background:var(--green-l)}
.nav-toggle span{display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.cart-link{position:relative}
.badge{background:var(--orange); color:#fff; border-radius:999px; font-size:.7rem;
  padding:1px 7px; margin-left:3px; vertical-align:top; font-weight:700}
.user-name{color:var(--muted); font-size:.85rem}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--green); color:#fff; border:none; padding:12px 20px; border-radius:var(--radius-sm);
  font-weight:700; cursor:pointer; font-size:.93rem; transition:.15s; font-family:inherit}
.btn:hover{background:var(--green-d); color:#fff; transform:translateY(-1px)}
.btn-sm{padding:8px 13px; font-size:.82rem}
.btn-lg{padding:14px 26px; font-size:1rem}
.btn-block{width:100%}
.btn-outline{background:transparent; color:var(--green); border:1.6px solid var(--green)}
.btn-outline:hover{background:var(--green-l); color:var(--green-d)}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--cream-2); color:var(--ink)}
.btn-orange{background:var(--orange)}
.btn-orange:hover{background:#e9660f}
.btn-danger{background:#c0392b}
.btn-danger:hover{background:#a5301f}

/* ---------- Formularios ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-weight:600; margin-bottom:6px; font-size:.88rem; color:var(--ink-2)}
input,select,textarea{width:100%; padding:12px 13px; border:1.5px solid var(--line);
  border-radius:var(--radius-sm); font:inherit; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-l)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.auth-wrap{max-width:430px; margin:24px auto}

/* ---------- Métodos de pago ---------- */
.pay-options{display:grid; gap:12px}
.pay-option{position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1.6px solid var(--line); border-radius:var(--radius); background:var(--card); cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease}
.pay-option:hover{border-color:var(--sage)}
.pay-option input{position:absolute; opacity:0; pointer-events:none}
.pay-option.selected{border-color:var(--green); background:var(--green-l);
  box-shadow:0 0 0 3px rgba(18,103,47,.12)}
.pay-ico{width:46px; height:46px; border-radius:12px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.45rem; flex:none}
.pay-info{flex:1; min-width:0}
.pay-info strong{display:block; font-size:.95rem; color:var(--ink)}
.pay-info small{color:var(--muted); font-size:.8rem}
.pay-check{width:22px; height:22px; border-radius:50%; border:2px solid var(--sage); flex:none;
  position:relative; transition:border-color .2s ease, background .2s ease}
.pay-option.selected .pay-check{border-color:var(--green); background:var(--green)}
.pay-option.selected .pay-check::after{content:""; position:absolute; left:6px; top:2px;
  width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.card-fields{margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);
  animation:labelIn .35s ease}
.pay-brand-row{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center}
.pay-brand{height:26px; width:auto; display:block; border-radius:5px;
  box-shadow:0 0 0 1px var(--line)}
.secure-note{font-size:.8rem; color:var(--green-d); background:var(--green-l);
  border-radius:9px; padding:9px 12px; margin:0; border:1px solid #cfe4d4}

/* ---------- Alertas ---------- */
.alert{padding:12px 15px; border-radius:var(--radius-sm); margin:0 0 14px; font-size:.9rem; border:1px solid}
.alert-info{background:#eef6ff; border-color:#cfe4ff; color:#1b4b7a}
.alert-success{background:var(--green-l); border-color:#c3dcc9; color:var(--green-d)}
.alert-warning{background:var(--orange-l); border-color:#ffd9bd; color:#8a4a00}
.alert-error{background:#fdecec; border-color:#f6c9c9; color:#a32626}

/* ---------- Landing ---------- */
.hero{background:linear-gradient(140deg,var(--ink) 0%,#1c5738 55%,var(--green) 100%);
  background-size:cover; background-position:center;
  color:#fff; border-radius:22px; padding:42px 30px; margin-bottom:26px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,117,31,.35),transparent 70%)}
.hero .eyebrow{display:inline-block; background:rgba(255,255,255,.16); color:#fff;
  padding:4px 12px; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px}
.hero h1{color:#fff; font-size:2.1rem; max-width:640px}
.hero p{color:rgba(255,255,255,.9); max-width:560px; font-size:1.02rem}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.hero .btn-ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.22)}

.section{padding:34px 0 10px}
.section-title{text-align:center; margin-bottom:26px}
.section-title .eyebrow{color:var(--orange); font-weight:800; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase}
.section-title h2{font-size:1.6rem; margin-top:6px}
.section-title p{color:var(--muted); max-width:560px; margin:6px auto 0}

.mission{background:var(--green-l); border:1px solid var(--sage); border-radius:var(--radius);
  padding:26px; display:flex; gap:20px; align-items:center}
.mission .emoji{font-size:2.6rem}
.mission blockquote{margin:0; font-size:1.08rem; font-weight:600; color:var(--ink-2)}

.how-grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:680px){.how-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.how-grid{grid-template-columns:repeat(5,1fr)}}
.how-step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; text-align:center; box-shadow:var(--shadow)}
.how-step .num{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 10px}
.how-step h3{font-size:.98rem}
.how-step p{font-size:.82rem;color:var(--muted);margin:0}

.features{display:grid; gap:16px; grid-template-columns:1fr 1fr}
@media(min-width:760px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow)}
.feature .fi{font-size:1.5rem; margin-bottom:8px}
.feature h3{font-size:1rem; margin-bottom:4px}
.feature p{margin:0; font-size:.85rem; color:var(--muted)}

.benefits{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:760px){.benefits{grid-template-columns:1fr 1fr}}
.benefit{border-radius:var(--radius); padding:22px; border:1px solid var(--line); background:var(--card)}
.benefit.alt{background:var(--ink); color:#fff; border-color:var(--ink)}
.benefit.alt h3{color:#fff}
.benefit ul{margin:10px 0 0; padding-left:20px}
.benefit li{margin-bottom:6px}
.benefit.alt li{color:rgba(255,255,255,.88)}

.cta-band{background:linear-gradient(120deg,var(--green),#2a8a4c); color:#fff;
  border-radius:20px; padding:34px 26px; text-align:center; margin-top:30px}
.cta-band h2{color:#fff; font-size:1.5rem}
.cta-band p{color:rgba(255,255,255,.9); max-width:520px; margin:6px auto 18px}

/* ---------- Grid generico ---------- */
.grid{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* Columna que se queda pegada (desktop) */
@media(min-width:760px){
  .col-sticky{position:sticky; top:84px; align-self:start}
}

/* ---------- Negocios ---------- */
.biz-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.18s}
.biz-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.biz-cover{height:120px; background:var(--green-l) center/cover no-repeat; display:flex;
  align-items:center; justify-content:center; font-size:2.4rem}
.biz-body{padding:15px; flex:1; display:flex; flex-direction:column}
.biz-body h3{font-size:1.05rem}
.biz-meta{display:flex; gap:12px; align-items:center; margin-top:auto; padding-top:10px;
  font-size:.82rem; color:var(--muted)}
.rating{color:var(--orange); font-weight:800}
.chip{display:inline-block; background:var(--green-l); color:var(--green-d);
  border-radius:999px; padding:3px 10px; font-size:.73rem; font-weight:700; margin:0 4px 4px 0; border:1px solid #d8e2cf}
a.chip:hover{background:var(--sage); color:var(--ink)}

/* ---------- Productos ---------- */
.prod{display:flex; gap:13px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:13px; box-shadow:var(--shadow)}
.prod-img{width:84px; height:84px; border-radius:12px; background:var(--green-l) center/cover;
  flex:none; display:flex; align-items:center; justify-content:center; font-size:1.8rem}
.prod-info{flex:1; min-width:0}
.prod-info h3{font-size:.98rem; margin-bottom:2px}
.prod-info p{margin:.2rem 0; font-size:.82rem; color:var(--muted)}
.prod-price{font-weight:800; color:var(--ink)}
.prod-actions{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; gap:8px}

/* ---------- Carrito ---------- */
.cart-row{display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:none}
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:10px; overflow:hidden}
.qty button{width:32px; height:32px; border:none; background:#fff; cursor:pointer; font-size:1rem; color:var(--ink)}
.qty button:hover{background:var(--green-l)}
.qty span{width:36px; text-align:center; font-weight:800}
.summary{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.summary .row{display:flex; justify-content:space-between; margin-bottom:9px}
.summary .total{font-weight:800; font-size:1.15rem; border-top:1px solid var(--line); padding-top:11px; color:var(--ink)}

/* ---------- Mapa ---------- */
#map{height:290px; border-radius:var(--radius); border:1px solid var(--line); margin-bottom:14px}
/* Contiene los controles de Leaflet en su propio contexto para que no tapen el header */
.leaflet-container{z-index:0}
.map-note{font-size:.82rem; color:var(--muted); margin-bottom:12px}

/* ---------- Tracking ---------- */
.track-head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.track-emoji{font-size:2.2rem}
.progress{height:11px; background:var(--green-l); border-radius:999px; overflow:hidden; margin:14px 0}
.progress > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--green),#2fa85c); transition:width .9s cubic-bezier(.22,.61,.36,1)}
.steps{list-style:none; padding:0; margin:18px 0 0}
.steps li{display:flex; gap:13px; padding:13px 12px; margin-bottom:2px; border-radius:12px;
  opacity:.4; transform:translateX(-6px);
  transition:opacity .7s ease, transform .7s ease, background-color .7s ease, box-shadow .7s ease}
.steps li.done,.steps li.active{opacity:1; transform:translateX(0)}
.steps li.active{background:linear-gradient(90deg,var(--green-l),transparent);
  box-shadow:inset 3px 0 0 var(--green)}
.steps li.active .step-dot{background:var(--orange); color:#fff; animation:pulse 1.6s infinite; transform:scale(1.06)}
.step-dot{width:36px; height:36px; border-radius:50%; background:var(--green-l); color:var(--green-d);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:.95rem; font-weight:800;
  transition:background-color .6s ease, color .6s ease, transform .6s ease}
.step-dot svg{width:18px; height:18px; display:block}
.steps li.done .step-dot{background:var(--green); color:#fff}
.step-body small{color:var(--muted)}
.label-in{animation:labelIn .5s ease}
.rider-in{animation:labelIn .5s ease}
@keyframes labelIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,117,31,.5)}70%{box-shadow:0 0 0 10px rgba(255,117,31,0)}100%{box-shadow:0 0 0 0 rgba(255,117,31,0)}}
.rider-box{display:flex; align-items:center; gap:14px; background:var(--green-l);
  border-radius:13px; padding:13px 15px; margin-top:14px}
.rider-photo{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(21,61,44,.18)}
.rider-avatar{width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.15rem; flex:none}
.rider-info{min-width:0}
.rider-info strong{display:block; font-size:.98rem}
.rider-rating{display:flex; align-items:center; gap:6px; margin:2px 0; font-size:.82rem}

/* Estrellas de calificacion */
.stars{position:relative; display:inline-block; font-size:.92rem; line-height:1; letter-spacing:1px;
  color:#d5d9cf; font-family:Arial,sans-serif}
.stars::before{content:"★★★★★"}
.stars-fill{position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--orange)}
.stars-fill::before{content:"★★★★★"}

/* Marcador animado del repartidor en el mapa */
.rider-marker{background:transparent; border:none}
.rider-pin{width:40px; height:40px; border-radius:50%; background:#fff; border:2.5px solid var(--green);
  display:flex; align-items:center; justify-content:center; font-size:19px;
  box-shadow:0 3px 12px rgba(0,0,0,.28); animation:riderPulse 1.5s infinite}
@keyframes riderPulse{
  0%{box-shadow:0 0 0 0 rgba(18,103,47,.55)}
  70%{box-shadow:0 0 0 14px rgba(18,103,47,0)}
  100%{box-shadow:0 0 0 0 rgba(18,103,47,0)}
}

/* ---------- Tablas admin ---------- */
.table{width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); font-size:.88rem}
.table th,.table td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--line)}
.table th{background:var(--green-l); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--green-d)}
.table tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto}

/* ---------- Stats ---------- */
.stats{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.stat .n{font-size:1.7rem; font-weight:800; color:var(--green)}
.stat .l{font-size:.8rem; color:var(--muted)}

.status-pill{display:inline-block; padding:4px 11px; border-radius:999px; font-size:.74rem; font-weight:800; white-space:nowrap}
.s-searching_rider{background:var(--orange-l);color:#8a4a00}
.s-received{background:#eef6ff;color:#1b4b7a}
.s-preparing{background:#f0e9ff;color:#5a2bb0}
.s-on_the_way{background:var(--green-l);color:var(--green-d)}
.s-delivered{background:#e9ecef;color:#495057}

/* ---------- Admin topbar ---------- */
.admin-topbar{background:var(--ink)}
.admin-topbar .brand,.admin-topbar .topnav a{color:#fff}
.admin-topbar .brand-logo{filter:brightness(0) invert(1)}
.admin-topbar .topnav a:hover{color:var(--sage)}
.admin-topbar .brand-dot{box-shadow:0 0 0 4px rgba(255,255,255,.12)}

.footer{background:var(--ink); color:rgba(255,255,255,.75); padding:34px 0; margin-top:44px; font-size:.86rem}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.footer-admin{margin-left:auto; text-align:right}
.footer-admin a{font-weight:700}
.footer strong{color:#fff}
.footer a{color:var(--sage)}
.footer .team{color:rgba(255,255,255,.6); font-size:.8rem; margin-top:6px}
.footer p{margin:3px 0}

.empty{text-align:center; padding:44px 16px; color:var(--muted)}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.flex{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.spacer{margin-left:auto}

@media(max-width:820px){
  .hero h1{font-size:1.6rem}
  .topbar-inner{height:62px; gap:10px}
  .nav-toggle{display:flex}
  .topnav{
    position:absolute; top:100%; left:0; right:0; margin-left:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 12px 26px rgba(21,61,44,.14);
    max-height:0; overflow:hidden; padding:0;
    transition:max-height .3s ease;
  }
  .topnav.open{max-height:460px; overflow-y:auto}
  .topnav > a{padding:13px 18px; border-bottom:1px solid var(--line); font-size:.95rem}
  .topnav > a:last-child{border-bottom:none}
  .topnav .user-name{display:block; padding:13px 18px; border-bottom:1px solid var(--line)}
  .topnav a.btn{margin:12px 18px; width:calc(100% - 36px); justify-content:center}
  .locbar-inner{flex-wrap:wrap; gap:6px}
  .loc-btn{max-width:100%}
}

/* ---------- Perfil ---------- */
.profile-head{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.profile-avatar{width:66px; height:66px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; font-weight:800; flex:none;
  box-shadow:0 6px 16px rgba(18,103,47,.28)}
.profile-head h1{margin:0; font-size:1.4rem}
.profile-layout{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:820px){.profile-layout{grid-template-columns:236px 1fr; align-items:start}}
.profile-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px}
@media(min-width:820px){.profile-tabs{flex-direction:column; overflow:visible; padding:0; position:sticky; top:84px}}
.profile-tabs a{padding:11px 14px; border-radius:10px; color:var(--ink); font-weight:600;
  white-space:nowrap; border:1px solid transparent; transition:.15s}
.profile-tabs a:hover{background:var(--green-l)}
.profile-tabs a.active{background:var(--green); color:#fff}
.profile-content{min-width:0}

/* Boton favorito */
.prod{position:relative}
.fav-btn{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.92); color:#c3cabf; cursor:pointer;
  font-size:1.05rem; line-height:1; display:flex; align-items:center; justify-content:center;
  padding:0; transition:transform .2s ease, color .2s ease, border-color .2s ease}
.fav-btn:hover{transform:scale(1.1); color:var(--orange)}
.fav-btn.active{color:#e8543f; border-color:#f2c6bd}

/* FAQ */
.faq{border-bottom:1px solid var(--line); padding:12px 0}
.faq:last-child{border-bottom:none}
.faq summary{cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center; gap:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--green); font-weight:800; font-size:1.1rem; width:16px; text-align:center}
.faq[open] summary::before{content:"–"}
.faq p{margin:8px 0 0; color:var(--muted)}

/* ---------- Barra de navegacion inferior (movil) ---------- */
.mobile-nav{display:none}
@media(max-width:820px){
  body{padding-bottom:70px}
  .mobile-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1050;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(21,61,44,.10);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .mobile-nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:6px 2px; color:var(--muted); font-size:.66rem; font-weight:700;
    position:relative; transition:color .15s ease;
  }
  .mobile-nav a.active{color:var(--green)}
  .mobile-nav a.active::before{
    content:""; position:absolute; top:-6px; width:26px; height:3px; border-radius:0 0 4px 4px;
    background:var(--green);
  }
  .mobile-nav svg{width:23px; height:23px; display:block}
  .mobile-nav a.active svg{stroke-width:2.4}
  .mobile-nav .mnav-badge{
    position:absolute; top:0; left:50%; margin-left:6px;
    background:var(--orange); color:#fff; font-size:.6rem; font-weight:800;
    border-radius:999px; padding:0 5px; line-height:1.55; min-width:16px; text-align:center;
  }
}

/* Menu movil del admin (tema oscuro) */
@media(max-width:820px){
  .admin-topbar .nav-toggle span{background:#fff}
  .admin-topbar .nav-toggle:hover{background:rgba(255,255,255,.14)}
  .admin-topbar .topnav{background:var(--ink-2); border-bottom-color:rgba(255,255,255,.12)}
  .admin-topbar .topnav > a{color:#fff; border-bottom-color:rgba(255,255,255,.12)}
  .admin-topbar .topnav > a:hover{color:var(--sage)}
}

/* ---------- Toasts (notificaciones) ---------- */
.toasts{position:fixed; z-index:2000; top:76px; left:14px; right:14px;
  display:flex; flex-direction:column; align-items:stretch; gap:10px; pointer-events:none}
@media(min-width:620px){.toasts{left:auto; width:360px; align-items:flex-end}}
.toast{display:flex; align-items:center; gap:11px; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-left:4px solid var(--green); border-radius:12px;
  padding:12px 15px; box-shadow:0 12px 30px rgba(21,61,44,.20); font-size:.9rem; font-weight:600;
  opacity:0; transform:translateY(-10px) scale(.98);
  transition:opacity .25s ease, transform .25s ease; pointer-events:auto}
.toast.show{opacity:1; transform:none}
.toast-ico{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--green); font-weight:800; font-size:.85rem; flex:none}
.toast-error{border-left-color:#c0392b}
.toast-error .toast-ico{background:#c0392b}
.toast-warning{border-left-color:var(--orange)}
.toast-warning .toast-ico{background:var(--orange)}
.toast-info{border-left-color:#3b7dd8}
.toast-info .toast-ico{background:#3b7dd8}

/* ---------- Avatar ---------- */
.profile-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.profile-avatar-sm{width:52px; height:52px; font-size:1.3rem}
.nav-avatar{width:26px; height:26px; border-radius:50%; object-fit:cover;
  vertical-align:middle; margin-right:5px; border:1.5px solid var(--line)}
input[type=file]{padding:8px; background:#fff; font-size:.85rem}

/* ---------- Calificacion con estrellas ---------- */
.star-input{display:flex; gap:6px; font-size:2rem; line-height:1}
.star-btn{background:none; border:none; cursor:pointer; color:#d5d9cf; padding:0;
  transition:transform .1s ease, color .1s ease}
.star-btn.active{color:var(--orange)}
.star-btn:hover{transform:scale(1.15)}
.review-form .field label{font-weight:600}

/* Tarjetas del equipo: mismo alto */
.team-grid{grid-auto-rows:1fr; align-items:stretch}
.team-grid .card{height:100%; display:flex; flex-direction:column; align-items:center}

/* Dentro de un grid, las tarjetas no deben heredar el margen entre cards apiladas */
.grid > .card + .card{margin-top:0}
.team-grid .card{margin-top:0}

/* Avatar pequeno (tabla admin) */
.profile-avatar-xs{width:38px; height:38px; font-size:1rem; box-shadow:none}