/* --- Reset mínimo y tokens --- */
:root {
  --bg-1: #0f0d14;
  --bg-2: #1a1424;
  --card: #ffffff;
  --muted: #8a8a99;
  --text: #19191c;
  --brand-1: #6327e2;          /* morado */
  --brand-2: #ff3bb0;          /* fucsia */
  --radius: 18px;
  --shadow: 0 8px 24px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color: #222; background: #f7f7fb; }
a { text-decoration: none; color: inherit; }




/* --- Botón gradiente --- */
.btn-gradient {
  background: linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color: #fff; border: none; border-radius: 12px; padding: .9rem 1rem; font-weight: 700;
}
.btn-pill { border-radius: 999px; }

/* --- Tarjetas --- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 0; }
.card .title { font-weight: 700; }

/* --- Layout de apps móviles --- */
.container-narrow { max-width: 960px; margin: 0 auto; padding: 16px; }

/* --- Top hero con imagen y buscador --- */
.hero {
  border-radius: 24px; overflow: hidden; position: relative; height: 220px; margin-bottom: 16px;
  background: #000 url('../img/hero.jpg') center/cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; 
  background: linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.5) 60%,rgba(0,0,0,.75));
}
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: #fff; }
.hero h1 { font-size: 1.15rem; margin: 0 0 .6rem; }
.search {
  display: flex; gap: 8px; align-items: center;
}
.search input {
  width: 100%; border: 0; border-radius: 12px; padding: .85rem .95rem; font-size: .95rem;
}

/* --- Tabs (login) --- */
.tabs { display: flex; gap: 8px; margin: .6rem 0 1rem; }
.tab {
  flex: 1; text-align: center; padding: .4rem .6rem; border-radius: 8px; font-size: .8rem; font-weight: 700;
  background: #2a2139; color: #fff; opacity: .6; cursor: pointer; border: 0;
}
.tab.active { opacity: 1; outline: 2px solid #3a2b5b; }

/* --- Form de login --- */
.login-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; }
.login-card { border-radius: 28px; overflow: hidden; }
.login-banner { height: 220px; background: url('../img/login.jpg') center/cover no-repeat; }
.login-body { padding: 18px 16px 22px; background: linear-gradient(#fff,#efe9f7); }
.login-body h2 { margin: .2rem 0 1rem; font-size: 1.4rem; text-align: center; font-weight: 800; }
.login-body .muted { color: #6c6c78; font-size: .9rem; text-align: center; margin-bottom: 10px; }


/* ===== SECCIÓN CORREGIDA PARA SER RESPONSIVA ===== */
.cat-grid {
  display: grid;
  /* Esta línea hace que las columnas se ajusten solas al tamaño de la pantalla */
  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  gap: 12px;
}

.cat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 18px;
  background: linear-gradient(180deg,#f9f7ff,#efe9f7); border: 1px solid #eadffc;
}
.cat .icon {
  width: 64px; height: 64px; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.cat .icon img { width: 100%; height: 100%; object-fit: cover; }
.cat span { font-size: .8rem; font-weight: 800; }


/* --- Cards de lugares --- */
.place-card { display: flex; flex-direction: column; }
.place-img { height: 150px; border-radius: 16px; background: #ddd; overflow: hidden; }
.place-img img { width: 100%; height: 100%; object-fit: cover; }
.place-info { padding: 10px; }
.badge-soft { background: #f1ecff; color: #5a34d1; border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; font-weight: 700; }
.stars { color: #f7b500; font-size: .95rem; }

/* --- Barra inferior de navegación --- */
.bottom-nav {
  position: sticky; bottom: 0; inset-inline: 0; background: #fff; border-top: 1px solid #eee; z-index: 10;
}
.bottom-nav .row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 8px; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; color: #444; font-size: .8rem; font-weight: 700; }

/* --- Página de categoría --- */
.header-back { display: flex; align-items: center; gap: 10px; margin: .2rem 0 12px; }
.header-back a { font-weight: 700; }
.input-ghost { border: 1px solid #e4ddfa; background: #fff; border-radius: 12px; padding: .75rem; }

/* --- Detalle de lugar --- */
.place-hero { border-radius: 24px; overflow: hidden; height: 240px; background: #ddd; margin-bottom: 12px; }
.pills { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 10px 0; }
.pill { background: #2a1f3f; color: #fff; border-radius: 14px; padding: 10px; text-align: center; }
.metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.metric { background: linear-gradient(180deg,#f6f1ff,#efe9f7); border: 1px solid #eadffc; border-radius: 14px; padding: 10px; text-align: center; font-weight: 800; }

/* --- Reseñas --- */
.review { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 12px; margin-bottom: 10px; }
.rev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: #ddd; overflow: hidden; }
.rev-name { font-weight: 800; }
.rev-date { color: var(--muted); font-size: .8rem; }
.rev-img { border-radius: 14px; overflow: hidden; margin-top: 8px; }
.rev-img img { width: 100%; height: 180px; object-fit: cover; }


/* --- Hero con borde redondeado y banners --- */
.hero {
  border-radius: 28px; overflow: hidden; position: relative; height: 240px; margin-bottom: 14px;
  background: #000 url('../img/hero_home.jpg') center/cover no-repeat;
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.65)); }
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: #fff; }
.hero h1 { font-size: 1.25rem; margin: 0 0 .6rem; font-weight: 800; }
.search input { border-radius: 12px; border: 0; padding: .8rem 1rem; background: rgba(255,255,255,.9); }
.search .btn-gradient { padding: .7rem 1rem; }

/* --- Carrusel banners --- */
.banners { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.banner { border-radius: 12px; overflow: hidden; height: 72px; background: #ddd; }
.banner img { width: 100%; height: 100%; object-fit: cover; }

/* --- Pills selector --- */
.pill-tabs { display: flex; gap: 12px; margin: 6px 0 10px; }
.pill-tabs .pill { font-size: .8rem; background: #f1ecff; color: #5a34d1; border-radius: 999px; padding: .25rem .6rem; font-weight: 800; }


/* --- Tarjetas de lugares (grid tipo tarjeta con borde blanco) --- */
.places-grid {
    /* Por defecto (móvil), mostramos 2 columnas */
    display: grid;
    grid-template-columns: 1fr 1fr; /* ¡MODIFICADO! Antes era 1fr */
    gap: 12px;
}
@media (min-width: 680px) {
    /* Para pantallas más grandes, podrías mantener 2, 3 o 4 columnas.
       Si quieres que se vean 4 en desktop (o tablet grande), usa 4.
       Si quieres que se vean 4 en total (2x2) como en la imagen,
       la configuración de arriba (1fr 1fr) ya lo logra.
       
       Si en tablet/desktop quieres 4 por fila, usa esto:
       .places-grid{grid-template-columns: repeat(4, 1fr)} 
       
       Basado en tu imagen de referencia, 2x2 es lo que buscas,
       lo cual ya está cubierto con el cambio a '1fr 1fr' por defecto.
    */
    /* Si lo dejas como estaba, se verán 2 por fila a partir de 680px: */
    /* .places-grid{grid-template-columns: 1fr 1fr} */ 
}
.place-card { background: #fff; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.place-img { height: 160px; border-radius: 14px 14px 0 0; overflow: hidden; }
.place-img img { width: 100%; height: 100%; object-fit: cover; }
.place-info { padding: 10px; }
.place-meta { display: flex; justify-content: space-between; align-items: center; }
.stars { color: #f7b500; }

/* --- Cabecera negra (categorías / listado) --- */
.black-header { background: #111; color: #fff; border-radius: 20px 20px 0 0; padding: 16px 16px 10px; }
.black-header a { color: #fff; font-weight: 800; }
.section-ghost { background: linear-gradient(#fff,#efe9f7); border-radius: 0 0 20px 20px; padding: 16px; }

/* --- Bottom nav (igual) --- */
.bottom-nav { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #eee; }
.bottom-nav .row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 10px 8px; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; font-weight: 800; color: #444; font-size: .9rem; }

/* ===== Pantalla de Categorías (overview) ===== */
.screen-cat {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #111 0%, #1b1327 22%, #261a3b 55%, #2f1d48 100%);
}
.screen-cat .top {
  padding: 16px;
  color: #fff;
}
.screen-cat .top .back {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: #fff; text-decoration: none;
}
.screen-cat .top .hint {
  margin-top: 6px; color: #ddd; font-size: .9rem;
}
.screen-cat .search {
  margin-top: 10px;
}
.screen-cat .search input {
  width: 100%; border: 0; border-radius: 12px; padding: .8rem 1rem;
  background: #fff; color: #333;
}
.screen-cat .body {
  padding: 16px;
  background: linear-gradient(180deg, #f3eefc 0%, #efe9f7 30%, #2f1d48 100%);
}
.screen-cat h5 { color: #222; font-weight: 800; }
.screen-cat .cat-grid { margin-top: 8px; }



/* --- Topbar limpio --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem .5rem;
}
.topbar .brand { font-weight: 700; text-decoration: none; color: #222; }
.btn-login {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .9rem; border-radius: 999px;
  background: linear-gradient(90deg,#6f2dbd,#a663cc);
  color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.btn-login:hover { filter: brightness(1.05); color: #fff; }

/* --- Pills responsivas (se acomodan en grid, sin overflow horizontal) --- */
.pill-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* móvil: 2 por fila */
  gap: .6rem;
  margin: .75rem 0 1rem;
  white-space: normal;           /* ¡evita que se vayan a la derecha! */
  overflow-x: visible;
}
@media (min-width: 480px) {
  .pill-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); } /* +espacio */
}
.pill-tabs .pill, .pill-tabs a.pill {
  display: flex; align-items: center; justify-content: center;
  padding: .65rem .8rem; border-radius: 999px;
  background: #f2eaff; color: #5a2ca0; font-weight: 800; text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  text-align: center;
}

/* opcional: estrecha un poquito el wrapper en desktop para look de app */
.container-narrow { max-width: 980px; margin: 0 auto; padding: .5rem; }


/* ===== HERO unificado (con buscador abajo y clicks habilitados) ===== */
.hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  height: 240px;
  margin-bottom: 14px;
  background: #000 url('../img/hero_home.jpg') center/cover no-repeat;
}
/* Capa de oscurecido, pero SIN capturar eventos */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.65));
  pointer-events: none;
}
/* Texto del hero; deja espacio inferior para la barra */
.hero .hero-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px 16px 84px; /* ↑ espacio para el buscador abajo */
  color: #fff;
}
.hero h1 { font-size: 1.25rem; margin: 0 0 .6rem; font-weight: 800; }

/* Barra de búsqueda “flotante” en la parte baja del hero */
.hero .search {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: flex; gap: 10px; align-items: center;
  z-index: 5; /* por encima del overlay */
}
.hero .search .input-ghost {
  flex: 1; height: 48px; border: 0; border-radius: 14px;
  padding: .8rem 1rem; background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
}
.hero .search .btn-gradient.btn-pill {
  height: 48px; padding: 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Asegura que el header quede encima si se superpone */
.topbar { position: relative; z-index: 10; }


/* Estilo para el logo circular */
.logo-login {
  width: 150px; /* Asegura que el logo se vea grande */
  height: 150px; /* Fija la altura */
  border-radius: 50%; /* Hace que sea circular */
  object-fit: cover; /* Mantiene la relación de aspecto */
  margin-bottom: 20px; /* Separación con el contenido de abajo */
}



/* Estilo para el enlace activo en el nav inferior */
.bottom-nav a.active {
    color: var(--brand-1); /* o el color que uses para activo/resaltado */
}
.bottom-nav a.active span {
    color: #222; /* o el color de texto normal */
}


/* app.css */

/* --- Estilos de Perfil (cliente/profile.php) --- */
.profile-header {
    display: flex;
    align-items: center;
    padding: 16px 0;
}
.profile-header .back-link {
    font-size: 1.5rem;
    color: var(--text); /* Color de texto estándar */
    margin-right: 20px;
}
.profile-header .profile-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 0 0; /* Centra el título y mueve el back-link a la izquierda */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.profile-card {
    background: #fff;
    border-radius: 28px;
    padding: 20px 16px;
    margin-top: 10px;
    box-shadow: var(--shadow);
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid #f0f0f0;
}

.user-info .name {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
}
.user-info .email {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.section-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    margin: 20px 0 10px 0;
}

.profile-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid #f0f0f0;
}
.profile-item:last-child {
    border-bottom: none;
}
.profile-item i:first-child {
    width: 28px; /* Espacio para que los íconos estén alineados */
    text-align: center;
    margin-right: 15px;
    color: var(--brand-1);
    font-size: 1.1rem;
}
.profile-item .ml-auto {
    margin-left: auto;
    color: var(--muted);
}
.profile-item.editable i:first-child {
    color: #4CAF50; /* Color distintivo para Editar Perfil */
}


/* Estilos para el switch (Modo Oscuro/Claro) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--brand-1);
}

input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

.slider.round {
  border-radius: 26px;
}

.slider.round:before {
  border-radius: 50%;
}