/* =========================
   PALETA & BASE GLOBAL
========================= */
:root{
  --ft-green:#023732;
  --ft-green-dark:#012824;
  --ft-gold:#C9A76A;
  --ft-ink:#0f172a;
  --ft-ink-soft:#6b7280;
  --ft-ink-soft2:#94a3b8;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ft-ink);
  background:#f1f5f9;
}

/* =========================
   LOGIN
========================= */

#login-screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:
    url('../img/textura.svg') repeat,
    radial-gradient(circle at top,var(--ft-green-dark),#000);
  background-size:260px,auto;
}

.btn-primary{
  background:var(--ft-green);
  color:#fff;
  font-weight:700;
  border-radius:0.75rem;
  transition:background .2s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.btn-primary:hover{
  background:var(--ft-green-dark);
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}

/* selector usuario / conductor (lo dejamos por si luego lo ocupas) */
.switch-wrap{
  background:rgba(0,0,0,.18);
}

.switch-dot{
  height:100%;
  width:50%;
  border-radius:9999px;
  background:rgba(255,255,255,.22);
  transform:translateX(0);
  transition:transform .25s ease;
}

.switch-overlay{
  pointer-events:none;
}

#role-switcher.user-on .lbl-user{
  color:#fff;
  font-weight:700;
}

#role-switcher.user-on .lbl-driver{
  color:#cbd5e1;
}

#role-switcher.driver-on .lbl-user{
  color:#cbd5e1;
}

#role-switcher.driver-on .lbl-driver{
  color:#fff;
  font-weight:700;
}

#role-switcher.driver-on .switch-dot{
  transform:translateX(100%);
}

/* =========================
   BOTÓN SOS FLOTANTE
========================= */


  /* Estilo para la tab activa del mapa */
  .map-tab.active-tab {
    color: #059669; /* emerald-600 */
    border-bottom: 2px solid #059669;
    background-color: #f0fdf4;
  }


#panic-button{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1000;
  width:72px;
  height:72px;
  border-radius:9999px;
  background:#fff;
  border:2px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  touch-action:manipulation;
  transition:transform .15s ease, box-shadow .2s ease;
}

#panic-button:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}

#panic-button img{
  width:42px;
  height:42px;
  display:block;
  pointer-events:none;
}

/* pulsito */
#panic-button::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:9999px;
  box-shadow:0 0 0 0 rgba(239,68,68,.28);
  animation:sos-pulse 2.2s ease-out infinite;
  pointer-events:none;
}

@keyframes sos-pulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.28);}
  70%{box-shadow:0 0 0 18px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}

@media (max-width:420px){
  #panic-button{
    width:64px;
    height:64px;
    right:14px;
    bottom:14px;
  }
  #panic-button img{
    width:36px;
    height:36px;
  }
}

/* =========================
   ESTRELLAS / PULGARES / TILES
========================= */

.star-rating label{
  font-size:2.1rem;
  color:#d1d5db;
  cursor:pointer;
  transition:color .2s;
}

.star-rating input{
  display:none;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{
  color:#f59e0b;
}

.thumb{
  border-radius:14px;
  padding:10px 14px;
  border:1px solid #e5e7eb;
  cursor:pointer;
  transition:all .15s ease;
  background:#fff;
}

.thumb.active{
  border-color:var(--ft-green);
  color:var(--ft-green);
  background:#ecfdf5;
}

.tile{
  border:1px solid #e5e7eb;
  border-radius:16px;
  transition:transform .06s ease;
  cursor:pointer;
  background:#fff;
}

.tile:active{
  transform:scale(.98);
}

/* =========================
   MODALES & TOAST
========================= */

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.modal.open{
  display:flex;
}

#qr-reader{
  width:100%;
  max-width:520px;
  border:2px solid var(--ft-green);
  border-radius:12px;
  overflow:hidden;
}

#toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.85);
  color:#fff;
  padding:.75rem 1rem;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  z-index:1100;
  display:none;
}

#toast.show{
  display:block;
  animation:fadein .25s ease, fadeout .25s ease 2.2s forwards;
}

@keyframes fadein{
  from{opacity:0;transform:translateX(-50%) translateY(6px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

@keyframes fadeout{
  to{opacity:0;}
}

/* =========================
   BOTTOM NAV + FAB QR
========================= */

.user-bottomnav .bottom-nav-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:-10px;
  z-index:999;
  padding-bottom:max(10px, env(safe-area-inset-bottom));
}

.bottom-nav{
  margin:0 auto;
  max-width:820px;
  position:relative;
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  box-shadow:0 -10px 28px rgba(0,0,0,.10);
  border-radius:18px 18px 0 0;
  padding:14px 14px 12px;
  display:grid;
  grid-template-columns:1fr 1fr 108px 1fr 1fr;
  align-items:center;
  gap:6px;
}

/* notch */
.bottom-nav::before{
  
  position:absolute;
  left:50%;
  top:-30px;
  transform:translateX(-50%);
  width:160px;
  height:74px;
  background:transparent;
  -webkit-mask:radial-gradient(74px 74px at 50% 74px,#0000 74px,#000 75px);
          mask:radial-gradient(74px 74px at 50% 74px,#0000 74px,#000 75px);
  box-shadow:0 -18px 0 0 #ffffff,0 -26px 38px rgba(0,0,0,.14);
  border-top-left-radius:36px;
  border-top-right-radius:36px;
  pointer-events:none;
}

.bottom-nav .center-gap{
  width:108px;
  height:1px;
}

.bottom-nav a,
.bottom-nav button{
  appearance:none;
  background:transparent;
  border:0;
  outline:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  padding:6px 0;
  color:#334155;
  font-size:.78rem;
  font-weight:600;
}

.bottom-nav i{
  font-size:20px;
  transition:transform .12s ease;
}

.bottom-nav .nav-item.active{
  color:var(--ft-green);
}

.bottom-nav .nav-item.active i{
  transform:translateY(-1px);
}

/* FAB central escáner */
.scan-fab{
  position:fixed;
  left:50%;
  bottom:calc(50px + max(10px, env(safe-area-inset-bottom)));
  transform:translateX(-50%);
  width:70px;
  height:70px;
  border-radius:9999px;
  background:var(--ft-green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 28px rgba(0,0,0,.28),0 0 0 5px #ffffff;
  border:2px solid #0b3a33;
  z-index:1000;
  pointer-events:auto;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.scan-fab i{
  font-size:42px;
}

.scan-fab:hover{
  filter:brightness(1.03);
  transform:translateX(-50%) translateY(-2px);
}

.scan-fab.active{
  box-shadow:0 0 0 8px #ffffff,0 0 0 14px rgba(201,167,106,.20),0 22px 42px rgba(0,0,0,.34);
  filter:saturate(1.1) brightness(1.05);
}

/* etiqueta bajo FAB */
.scan-label{
  position:fixed;
  left:50%;
  bottom:calc(20px + max(10px, env(safe-area-inset-bottom)));
  transform:translateX(-50%);
  font-size:.80rem;
  font-weight:800;
  color:#111827;
  z-index:1000;
  text-shadow:0 1px 0 #fff;
  pointer-events:none;
  user-select:none;
}

.scan-label.active{
  color:var(--ft-gold);
}

@media (max-width:380px){
  .bottom-nav{
    grid-template-columns:1fr 1fr 100px 1fr 1fr;
  }
  .bottom-nav .center-gap{
    width:100px;
  }
  .scan-fab{
    width:50px;
    height:50px;
    bottom:calc(56px + max(0px, env(safe-area-inset-bottom)));
  }
  .scan-fab i{
    font-size:30px;
  }
}

/* que el contenido no quede tapado por la barra */
.user-bottomnav main,
.user-bottomnav section:last-of-type,
.user-bottomnav #user-screen{
  padding-bottom:0px;
}

/* ocultar SOS flotante cuando hay bottom nav */
.user-bottomnav #panic-button{
  display:none !important;
}

/* =========================
   FOREVER TULUM – HOME
========================= */

#user-screen{
  background: linear-gradient(to bottom, #ffffff 80%, #023433 20%);
}


/* contenedor general tipo móvil */
.ft-main{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding-bottom:6rem;
}

/* fondo superior con curva */
.ft-top-bg{
  min-height:190px;
  background:
    url('../img/curva_arriba.webp') no-repeat center top / cover,
    #fff;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:32px 16px 52px;
}

.ft-logo-main{
  max-width:300px;
  width:100%;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.55));
}

/* card de miembro */
.ft-member-wrapper{
  padding:0 1.25rem;
  margin-top:-44px;
  position:relative;
  z-index:10;
}

.ft-member-card{
  background:#ffffff;
  border-radius:26px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  padding:14px 16px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(201,167,106,.45);
}

.ft-member-left{
  display:flex;
  align-items:center;
  justify-content:center;
}

.ft-member-avatar{
  width:64px;
  height:64px;
  border-radius:18px;
  object-fit:cover;
  border:2px solid var(--ft-gold);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  cursor:pointer;
}

.ft-member-center{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.ft-member-name{
  font-family:'Cinzel','Trajan Pro',serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ft-ink);
}

.ft-member-tier{
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ft-ink-soft2);
}

/* lado derecho: editar + salir + botón membresía */
.ft-member-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.ft-member-edit{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.72rem;
  color:var(--ft-ink-soft);
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}

.ft-member-edit i{
  font-size:.75rem;
}

.ft-member-logout{
  background:transparent;
  border:0;
  color:#64748b;
  font-size:.9rem;
  cursor:pointer;
}

.ft-member-logout i{
  font-size:1rem;
}

/* pill acceso membresía */
.ft-btn-membership{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px 20px;
  border-radius:9999px;
  background:linear-gradient(135deg,#02463f,#012824);
  color:#fefce8;
  text-decoration:none;
  text-transform:uppercase;
  font-family:'Cinzel','Trajan Pro',serif;
  font-size:.72rem;
  letter-spacing:.16em;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  border:1px solid rgba(201,167,106,.85);
}

.ft-btn-membership span{
  line-height:1.05;
}

/* métricas ocultas para JS (ID y créditos, botón de card-edit y mis viajes) */
.ft-hidden-metrics{
  position:absolute;
  inset:auto auto 0 0;
  opacity:0;
  pointer-events:none;
  font-size:0;
}

/* =========================
   MAPA + TABS
========================= */

.ft-map-block{
  margin-top:18px;
}

.map-card{
  background:#ffffff;
  border-radius:26px;
  border:1px solid rgba(201,167,106,.4);
  padding:14px 14px 10px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

.ft-map-header{
  margin-bottom:10px;
}

.ft-map-tabs{
  display:flex;
  gap:4px;
  background:#0f2f2b;
  border-radius:9999px;
  padding:3px;
  position:relative;
}

.ft-map-tab{
  flex:1;
  border-radius:9999px;
  border:0;
  padding:6px 10px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-family:'Cinzel','Trajan Pro',serif;
  background:transparent;
  color:#e5e7eb;
  cursor:pointer;
  white-space:nowrap;
}

.ft-map-tab.active{
  background:#0f3f38;
  color:#ffffff;
  box-shadow:0 0 0 1px rgba(201,167,106,.9);
}

.ft-map-frame{
  border-radius:22px;
  overflow:hidden;
  margin-top:10px;
}

#map{
  width:100%;
  height:230px;
}

.ft-map-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px 10px;
  margin-top:8px;
  font-size:.72rem;
}

.ft-map-distance{
  margin-right:auto;
  font-weight:600;
  color:var(--ft-ink-soft);
}

.ft-map-status{
  color:#0a7bdc;
}

.ft-map-gps-btn{
  border-radius:9999px;
  border:0;
  padding:6px 10px;
  font-size:.72rem;
  font-weight:600;
  background:#0ea5e9;
  color:#f9fafb;
  cursor:pointer;
}

/* =========================
   SECCIONES GENERALES
========================= */

.ft-section{
  padding:0 1.25rem;
}

.ft-section-title{
  margin:1.2rem 0 1.2rem;
  text-align:center;
  font-family:'Cinzel','Trajan Pro',serif;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:1.2rem;
  color:#014039;
  position:relative;
  font-weight:700;
}

.ft-section-title::before,
.ft-section-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:26%;
  max-width:120px;
  height:1px;
  background:rgba(201,167,106,.7);
}

.ft-section-title::before{
  left:0;
}

.ft-section-title::after{
  right:0;
}

/* =========================
   SERVICIOS (círculos)
========================= */

.ft-services-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ft-service-circle{
  flex:1;
  max-width:100px;
  aspect-ratio:1/1;
  border-radius:9999px;
  border:3px solid var(--ft-gold);
  background:
    url('../img/textura.svg') repeat,
    #023732;
  background-size:200px,auto;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 12px;
  text-decoration:none;
  color:var(--ft-gold);
  font-family:'Cinzel','Trajan Pro',serif;
  font-size:.70rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.ft-service-circle span{
  display:block;
  line-height:1.1;
}

/* =========================
   PROMOCIONES
========================= */

.ft-promos{
  margin-top:2px;
}

.ft-promos-bg{
  border-radius:32px 32px 0 0;
 background:
    url('../img/curva_abajo.webp') no-repeat center bottom / cover,
    transparent;
  color:#ffffff;
  padding:54px 16px 0px;
  margin:0 -1.25rem;
}

.ft-promos-bg .ft-section-title{
  color:#fefce8;
}

.ft-promos-bg .ft-section-title::before,
.ft-promos-bg .ft-section-title::after{
  background:rgba(255,255,255,.4);
}

/* cards */
.ft-promos-row{
  margin-top:0.4rem;
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:6px 0 4px;
}

.ft-promo-card{
  min-width:150px;
  max-width:160px;
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(0,0,0,.4),rgba(0,0,0,.1)),
    url('../img/textura.svg') repeat;
  background-size:cover;
  padding:8px 8px 10px;
  text-decoration:none;
  color:#f9fafb;
  box-shadow:0 14px 32px rgba(0,0,0,.45);
  border:1px solid rgba(201,167,106,.6);
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.ft-promo-img{
  border-radius:12px;
  overflow:hidden;
  background: transparent;
}


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

.ft-promo-label{
  margin-top:8px;
  text-align:center;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}

/* redes sociales */
.ft-social-row{
  margin-top:0.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.ft-social-btn{
  width:40px;
  height:40px;
  border-radius:9999px;
  border:1px solid rgba(201,167,106,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fefce8;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  background:rgba(0,0,0,.15);
}

/* =========================
   RESPONSIVE PEQUEÑO
========================= */

@media (max-width:360px){
  .ft-member-card{
    grid-template-columns:1fr;
  }
  .ft-member-right{
    align-items:flex-start;
  }
  .ft-btn-membership{
    align-self:stretch;
    width:100%;
    text-align:center;
  }
  .ft-services-grid{
    gap:8px;
  }
}