:root{--bg:#f7f7fb;--card:#fff;--border:#dcdde4;--accent:#3b82f6;--okbg:#ecfdf5;--okbd:#a7f3d0;--oktx:#065f46}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;
  padding:1rem;
  color:#222;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente */
  align-items: center;     /* centra horizontalmente */
  }
.card{max-width:330px;margin:0 auto;background:var(--card);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:1.25rem 1.5rem}
h1{margin:0 0 1rem;font-size:1.35rem}
.form-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
input,select,button{width:100%;padding:.7rem .8rem;border:1px solid var(--border);border-radius:10px;font-size:1rem;background:#fff}
button{background:var(--accent);color:#fff;border:none;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.05)}
.col-2{grid-column:span 2}
.err{color:#b91c1c;font-size:.85rem;margin-top:.25rem}
.msg{padding:1rem;border-radius:10px;background:var(--okbg);border:1px solid var(--okbd);color:var(--oktx);margin-top:1rem}
.actions{margin-top:.25rem}
@media (max-width: 680px){
  .form-grid{grid-template-columns:1fr}
  .col-2{grid-column:span 1}
}
.result-card{
  margin-top:1rem;padding:1.1rem 1.2rem;border-radius:14px;
  background:linear-gradient(180deg,#f8fbff, #f3f7ff);
  border:1px solid #dbe7ff; box-shadow:0 10px 24px rgba(30,64,175,.08), inset 0 1px 0 #fff;
  animation:pop .25s ease-out;
}
@keyframes pop{from{transform:scale(.98);opacity:.7} to{transform:scale(1);opacity:1}}

.dose-value{
  font-size:2.6rem; font-weight:800; letter-spacing:-.02em; color:#0f172a; line-height:1;
}
.dose-value span{font-size:1rem;font-weight:700;color:#475569;margin-left:.35rem}

.dose-meta{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .6rem;border-radius:999px;border:1px solid #c7d2fe;
  background:#eef2ff;color:#3730a3;font-weight:600;font-size:.9rem;
}
.chip.interval::before{content:"⏱️"}
.chip.doses::before{content:"🗓️"}
.chip.drug::before{content:"💊"}

.dose-sub{margin-top:.6rem;color:#475569;font-size:.95rem}
.result-actions{margin-top:.6rem}
.btn-ghost{
  background:#fff;border:1px solid #cbd5e1;border-radius:10px;
  padding:.55rem .8rem;font-weight:600;cursor:pointer
}
.btn-ghost:hover{background:#f8fafc}



/* Centrar contenido del resultado */
.result-card{
  text-align:center;            /* centra el texto por defecto */
}

.dose-value{
  margin: .2rem auto 0;         /* centra el bloque */
  display:inline-flex;          /* para alinear el número y "ml" */
  align-items:baseline;
  gap:.35rem;
}

.dose-meta{
  margin-top:.6rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;       /* centra las chips */
}

.dose-sub{
  text-align:center;            /* centra el texto auxiliar */
}

/* Si dejaste acciones/botones debajo, céntralos también */
.result-actions{
  display:flex;
  justify-content:center;
}

.card h1{
  text-align: center;
  margin: 0 auto 1.75rem;
}



.site-footer{margin:40px auto 8px;text-align:center;color:#64748b;font-size:.9rem}
.site-footer a{color:#2563eb;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

.modal{position:fixed;inset:0;display:none;background:rgba(0,0,0,.45);padding:20px;z-index:1000}
.modal.show{display:block}
.modal-content{position:relative;max-width:880px;margin:0 auto;background:#fff;border-radius:16px;
  padding:24px 28px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-height:85vh;overflow:auto}
.modal-close{border:0;background:transparent;font-size:28px;position:absolute;right:18px;top:12px;cursor:pointer}
.modal h2{margin-bottom:.25rem}
.modal h3{margin:1rem 0 .25rem}
.modal p,.modal li{line-height:1.6}
.modal .muted{color:#94a3b8;font-size:.9rem}

.app-header {
    display: flex;
    align-items: center;
    justify-content: center; /* centra todo el bloque en el contenedor */
    gap: 10px; /* espacio entre icono y texto */
    margin-bottom: 20px;
    text-align: center;
}

.app-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.app-header h1 {
    margin: 0;
    font-size: 1.5rem;
}
.center {
  text-align:center;
}

.detectando {
  display: flex;
  align-items: center;
  justify-content: center; /* centra horizontalmente */
  gap: 8px;
  width: 89%; /* importante para que pueda centrarse bien */
  text-align: center;
}

.cargando {
  display: none;
  align-items: center;
  justify-content: center; /* centra horizontalmente */
  gap: 8px;
  width: 100%; /* importante para que pueda centrarse bien */
  text-align: center;
}




/* MAIN */





/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  padding-top: 120px; /* espacio para la barra fija */
}

.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  /*padding-left:20px;*/
  height: var(--nav-h);
  background: #333;
  color: #fff;
  z-index: 1000;
  overflow: visible; /* permite que el logo sobresalga por ABAJO */
}

.navbar-inner{
  max-width: none;
  /*padding-left: calc(var(--side-padding) + 15px);*/ /* 15px = padding interno de .cardsite */
  /*padding-right: calc(var(--side-padding) + 15px);*/
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* el contenido se pega ARRIBA */
}



.logo img{
  height: 90px;           /* ej.: más alto que 70px */
  object-fit: contain;
  display: block;  
}

.navbar .logo {
  font-size: 1.2rem;
  margin-top:10px;
  margin-left:0px;
}

.navbar .login-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.navbar .login-link:hover {
  text-decoration: underline;
}
.cardsite{
  width: 100%;
  max-width: var(--content-max);  /* 👈 mismo ancho que header */
  margin: 0 auto;
}

.cardsites-container{
  margin: 45px auto 0;    
  padding: 20px 0px 0px;
  max-width: calc(var(--content-max, 800px) + 40px);
  display: flex; flex-direction: column;
}

.cardsite + .cardsite {       /* toda card que sigue a otra card */
  margin-top: 20px;
}


/* Cada cardsite */
.cardsite {
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.cardsite-title {
  font-size: 1.3rem;
  margin-bottom: 10px;
    text-align: left;
}

.cardsite-body {
  display: flex;
  align-items: top;
  gap: 15px;
}

.restaurant-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

.cardsite-info {
  flex: 1;
}

.cardsite-info p {
  margin-bottom: 10px;
}

.cardsite-info a {
  color: #007BFF;
  text-decoration: none;
}

.cardsite-info a:hover {
  text-decoration: underline;
}

.cardsite-info button {
  padding: 8px 12px;
  background: #28a745;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  max-width: 260px;
  float:right;
  font-size:0.7em;
}

.cardsite-info button:hover {
  background: #218838;
}

@media (min-width: 1024px){
  :root{ --content-max: 800px; }  /* cambia aquí si necesitas otro ancho */
}

:root{
  /* Un solo sitio para cambiar el ancho de la columna central */
  --content-max: 800px;     /* mismo ancho que .cardsite en escritorio */
  --side-padding: 20px;     /* respiro lateral en móvil/tablet */
}




/* ==== MAIN: hacer la columna más ancha y ocuparla completa ==== */

/* Quita el flex global del body en esta página */
body{
  display: block;             /* deja de centrar el body */
  justify-content: initial;
  align-items: initial;
  padding-top: 120px;         /* sigues teniendo la barra fija */
  background: #f5f5f5;
}

/* Ancho de la columna central (ajusta a tu gusto) */
:root{
  --content-max: 1100px;      /* antes 800px */
  --side-padding: 20px;
}

/* El contenedor puede limitarse, pero las cards deben ocupar todo su ancho */


/* Las cards deben estirarse a todo el ancho del contenedor */
.cardsite{
  width: 100%;
  max-width: none;            /* anula el tope de 800px */
}

:root{
  --nav-h: 70px;     /* altura de la barra */
  --logo-h: 120px;    /* altura del logo (ajústala a tu imagen) */
  --side-padding: 20px;
}
/* El header ocupa todo el ancho y usa el mismo padding que las cards */
.navbar-inner{
  max-width: none;                  /* no limites a 800/1100 */
  /*padding-left: var(--side-padding);
  padding-right: var(--side-padding);*/
  align-items: center;              /* centra verticalmente el login */
}

/* Quita desplazamientos del logo */
.navbar .logo{ 
  /*margin: 0;*/                        /* fuera margin-left:10px y margin-top */
}

/* El logo tal cual */
.logo img{
  height: 90px;
  display: block;
  object-fit: contain;  
}

.logo-link img{
  height: var(--logo-h);
  display: block;
  object-fit: contain;
  transform: translateY(calc((var(--logo-h) - var(--nav-h)) / 2));
  /* si el logo <= barra, el desplazamiento será 0 o negativo (no pasa nada) */
}

body{
  display: block; /* por si heredaba el flex del otro layout */
  padding-top: calc(var(--nav-h) + (var(--logo-h) - var(--nav-h)) / 2 + 10px);
  /* +10px de holgura; súbelo/bájalo si ves el logo muy pegado */
}




/* Alinear cabecera con las cards: mismo padding lateral + padding interno de la card (15px) */
.navbar-inner{
  max-width: none;
  /*padding-left: calc(var(--side-padding, 20px) + 15px);
  padding-right: calc(var(--side-padding, 20px) + 15px);*/
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;   /* centra verticalmente los botones */
}

/* Botones de acción (relocalizar + login) */
.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right:20px;
  margin-top:2px;
}

/* Estilo del botón con icono */
.icon-btn{
  --btn-bd: rgba(255,255,255,.65);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--btn-bd);
  border-radius: 10px;
  color: #fff;                 /* fuerza blanco (no azul de <a>) */
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: .15s ease-in-out;
}

.icon-btn svg{
  width: 20px; height: 20px;
  fill: currentColor;          /* el SVG hereda el color del link */
  display: block;
}

.icon-btn .label{ color:inherit; }

/* Hover: invertimos */
.icon-btn:hover{
  background: #fff;
  color: #333;
  border-color: #fff;
}

.icon-btn-active{
  --btn-bd: rgba(255,255,255,.65);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--btn-bd);
  border-radius: 10px;
  color: #fff;                 /* fuerza blanco (no azul de <a>) */
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: .15s ease-in-out;
  background: var(--accent);   /* azul */  
  color: #fff;
}

.icon-btn-active svg{
  width: 20px; height: 20px;
  fill: currentColor;          /* el SVG hereda el color del link */
  display: block;
}

.icon-btn-active .label{ color:inherit; }

/* Hover: invertimos */
.icon-btn-active:hover{
  background: #fff;
  color: #333;
  border-color: #fff;
  filter: brightness(0.95);
}

/* Accesibilidad: texto solo para lectores de pantalla */
.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;
}

/* (Opcional) Ocultar el texto "Login" en pantallas muy pequeñas */
@media (max-width: 420px){
  .icon-btn .label{ display:none; }
  .icon-btn{ padding:8px; } /* compacto cuando solo hay icono */
  .icon-btn-active .label{ display:none; }
  .icon-btn-active{ padding:8px; } /* compacto cuando solo hay icono */
}

/* Asegura que el logo no se desplace raro */
.logo-link img{
  height: var(--logo-h, 90px);
  display:block;
  object-fit: contain;
}

/* Por si algún estilo anterior dejaba el enlace azul */
.navbar a{ color:inherit; }



.lang-selector{ position: relative; }
.lang-btn{ gap:6px; padding-right:10px; }
.lang-btn .chev{ width:16px; height:16px; margin-left:4px; }
.flag{ font-size:18px; line-height:1; }

/* Menú desplegable */
.lang-menu{
  position:absolute; top:100%; right:0;
  background:#fff; color:#111; min-width:120px;
  border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  list-style:none; margin:8px 0 0; padding:6px;
  display:none; z-index:1100;
}
.lang-menu.show{ display:block; }
.lang-menu li{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.lang-menu li:hover{ background:#f3f4f6; }

/* Mantén coherencia de colores con la barra */
.navbar .lang-btn{ color:#fff; border-color: rgba(255,255,255,.65); }
.navbar .lang-btn:hover{ background:#fff; color:#333; border-color:#fff; }

.cardsite-head{
  display: flex;
  align-items: center;   /* centra verticalmente icono y título */
  gap: 8px;              /* separación entre icono y texto */
  margin-bottom: 10px;   /* espacio con el resto de la card */
}

.cat-icon{
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.cardsite-title{
  margin: 0;             /* evita que “empuje” hacia abajo */
  font-size: 1.3rem;
}

.location-text {
  display: flex;
  align-items: center;       /* centra verticalmente todo */
  justify-content: flex-end; /* mantiene todo alineado a la derecha */
  gap: 8px;                  /* separación entre elementos */

  font-size: 1.1rem;  
  color: #333;
  padding: 8px 20px 15px 0;  
  background-color: #fff;
  min-height:55px;
}

.geo-label {
  margin-top:5px;  
}



.radio-select {  
  margin-top:5px;
  padding: 3px 6px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  max-width:100px;
  font-size:15px !important;
}
.radio-select:focus {
  border-color: #2e86c1; /* color al enfocar */
}





/* Contenedor fijo */
.floating-menu{
  position: fixed;
  top: 125px;             /* debajo de la cabecera */
  right: 0px;
  z-index: 3000;         /* por encima de todo (tu header tenía ~1000) */
}

.hamburger-btn {
  width: 44px;
  height: 44px;
  background: #333;      /* color cabecera */
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);

  /* Bordes redondeados solo a la izquierda */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  position: fixed;
  top: 150px;  /* ajusta según lo necesites */
  right: 0;    /* pegado al borde derecho */
  z-index: 3000;
}
.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  margin: 3px 0;
  border-radius: 2px;
}

/* Menú */
.side-menu{
  position: fixed;                 /* fijo para que no “salte” al hacer scroll */
  top: 167px;                      /* 80 (top) + 44 (alto botón) + 8 de separación */
  right: -5px;
  min-width: 200px;
  background: #333;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  padding: 8px;
  opacity: 0; transform: scale(.95); 
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.side-menu.open{
  opacity: 1; transform: scale(1);
  pointer-events: auto;
}
.side-menu ul{ list-style: none; margin: 0; padding: 4px; }
.side-menu li{ margin: 0; }
.side-menu a{
  display: block;
  padding: 10px 12px;
  color: #fff; text-decoration: none;
  border-radius: 8px;
  font-size: .95rem;
}
.side-menu a:hover, .side-menu a:focus{
  background: rgba(255,255,255,.12);
  outline: none;
}

.titulo-tipo{
  height: 40px;
  width: 100%;  
  text-align:center;
  color:grey;
  font-weight: normal;
}

.no-resultados{
  width:100%;
  text-align:center;
}









.side-menu a {
  display: flex;
  align-items: center;    /* icono y texto centrados verticalmente */
  gap: 8px;               /* separación entre icono y texto */
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: .95rem;
}

.side-menu a .ham-icon {
  display: inline-flex;
  width: 30px;            /* fija ancho para alinear */
  justify-content: center;
  font-size: 1.2rem;      /* tamaño del icono/emoji */
}

.distance{
  display: inline-flex;        /* se alinea con el resto de la línea */
  align-items: center;         /* centra icono y texto verticalmente */
  gap: 6px;                    /* separación entre icono y texto */
  line-height: 1.2;              /* evita desajustes por la altura de línea */
  width:100%;
}

.distance img{
  width: 25px;
  display: block;              /* elimina el “descender” del inline-img */
  object-fit: contain;
}

.distance span{
  font-size: 1.0rem;
  font-weight: 600;
  color: green;
}

.distance-street{
  display: inline-flex;        /* se alinea con el resto de la línea */
  align-items: center;         /* centra icono y texto verticalmente */
  gap: 6px;                    /* separación entre icono y texto */
  line-height: 1.2;              /* evita desajustes por la altura de línea */
  margin-bottom:5px;
  width:100%;
}

.distance-city{
  display: inline-flex;        /* se alinea con el resto de la línea */
  align-items: center;         /* centra icono y texto verticalmente */
  gap: 6px;                    /* separación entre icono y texto */
  line-height: 1.2;              /* evita desajustes por la altura de línea */
  margin-bottom:15px;
  width:100%;
}

.distance-street span{
  font-size: 1.0rem;  
  color: #000;
}

.distance-city span{
  font-size: 1.0rem;  
  color: grey;  
}


/* ====== Variables (ajusta el verde para que iguale tu "Ver en Google Maps") ====== */
:root{
  --maps-green: #28a745;   /* ← pon aquí el verde del botón de Google Maps */
  --maps-green-dark: #1f7f36;
  --text: #222;
  --line: #d9d9d9;
  --muted: #9aa1a7;
  --bg: #fff;
}

/* ===== Paginación ordenada ===== */
.pager{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.6rem .6rem;
  padding:.25rem 0 1.5rem;
  font-size:14px;
}

/* Agrupamos numeración para que quede centrada */
.pager .pages{
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Botones */
.pager .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2rem;
  height:2.2rem;                 /* alto uniforme */
  padding:0 .65rem;
  border:1px solid var(--line);
  border-radius:.55rem;
  background:var(--bg);
  color:var(--text);
  text-decoration:none;
  line-height:1;
  user-select:none;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.pager .btn:hover{ background:#f6f6f6; border-color:#cfcfcf; }
.pager .btn:active{ transform:translateY(1px); }

/* Activo = mismo verde que "Ver en Google Maps" */
.pager .btn.current{
  background:var(--maps-green);
  border-color:var(--maps-green);
  color:#fff;
  font-weight:600;
  pointer-events:none;
}

/* Deshabilitados */
.pager .btn.disabled{
  opacity:.45;
  pointer-events:none;
}

/* Ellipsis */
.pager .ellipsis{ padding:0 .15rem; color:var(--muted); }

/* Info y selector a la derecha (en desktop) */
.pager .meta{
  margin-left:.25rem;
  color:#666;
  white-space:nowrap;
}
.pager .page-size{
  margin-left:auto;              /* empuja a la derecha */
  display:flex;
  align-items:center;
  gap:.45rem;
}
.pager .page-size select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  height:2.2rem;                 /* igual al botón */
  padding:0 .65rem;
  border:1px solid var(--line);
  border-radius:.55rem;
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
}

/* Foco accesible */
.pager .btn:focus,
.pager .page-size select:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(40,167,69,.25);  /* usa el verde */
}

/* Hover consistente para el activo (ligeramente más oscuro) */
.pager .btn.current:hover{
  background:var(--maps-green-dark);
  border-color:var(--maps-green-dark);
}

/* Compacto en móviles */
@media (max-width: 560px){
  .pager{ gap:.5rem; }
  .pager .page-size{
    order: 3;                    /* baja el selector debajo */
    width:100%;
    justify-content:center;
    margin-left:0;
  }
  .pager .meta{
    order: 4;
    width:100%;
    text-align:center;
    margin-top:.2rem;
  }
}

/* Dark mode opcional */
@media (prefers-color-scheme: dark){
  :root{
    --text:#e6e6e6; --bg:#1f1f1f; --line:#333; --muted:#9aa1a7;
  }
  .pager .btn{ background:var(--bg); border-color:var(--line); color:var(--text); }
  .pager .btn:hover{ background:#262626; border-color:#3a3a3a; }
  .pager .btn.current{ background:var(--maps-green); border-color:var(--maps-green); color:#fff; }
  .pager .page-size select{ background:var(--bg); border-color:var(--line); color:var(--text); }
  .pager .meta{ color:#a0a0a0; }
  .auth-card{ background:#fff !important; color:#222; }
}


.por-pagina{
  width: 75px;
}


.acciones-secundarias {
  width:100%; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:20px;
}

/* Flecha personalizada para el select "Por página" */
.pager .page-size select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  position:relative;
  height:2.2rem;
  padding:0 2rem 0 .65rem;            /* espacio para la flecha */
  border:1px solid var(--line, #d9d9d9);
  border-radius:.55rem;
  background:#fff;
  color:var(--text, #222);
  cursor:pointer;

  /* Flecha SVG embebida (negra) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23222'> <path d='M5.23 7.21a.75.75 0 011.06.02L10 10.06l3.71-2.83a.75.75 0 111.04 1.08l-4.24 3.25a.75.75 0 01-.92 0L5.21 8.31a.75.75 0 01.02-1.1z'/> </svg>");
  background-repeat:no-repeat;
  background-position: right .6rem center;
  background-size:.8rem .8rem;
  transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

.pager .page-size select:hover{
  background-color:#f8f8f8;
  border-color:#cfcfcf;
}

.pager .page-size select:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(40,167,69,.25);      /* usa tu verde si quieres */
  border-color:#9ad2b4;                          /* opcional */
}

/* Estado disabled (por si lo usas alguna vez) */
.pager .page-size select:disabled{
  opacity:.6; cursor:not-allowed;
}

/* Dark mode: flecha clara */
@media (prefers-color-scheme: dark){
  .pager .page-size select{
    background:#1f1f1f; color:#e6e6e6; border-color:#333;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e6e6e6'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.06l3.71-2.83a.75.75 0 111.04 1.08l-4.24 3.25a.75.75 0 01-.92 0L5.21 8.31a.75.75 0 01.02-1.1z'/></svg>");
  .auth-card{ background:#fff !important; color:#222; }
  }
}

html, body { color-scheme: light; }


.create-site { margin-top : 30px;}

.edit-site-btn { margin-top : 35px; }






.address-line{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
}

.address-line .pin{
  width:16px;
  height:16px;
  opacity:0.85;
  flex:0 0 auto;
}

.address-line .address-text{
  font-size: 0.95em;
  line-height: 1.2;
}


.cardsite-info,
.cardsite-info * {
  text-align: left !important;
}

.distance {
  margin-top: 6px;
  margin-bottom: 8px;   /* separa distancia de la dirección */
}

.address-line {
  display: flex;
  align-items: flex-start; /* 🔑 CLAVE */
  gap: 6px;
  margin: 0;
}

.address-line .pin {
  width: 16px;
  height: 16px;
  opacity: 0.85;
  flex: 0 0 auto;
}

.address-line .address-text {
  line-height: 1.25;
}

.cardsite-info button {
  margin-top: 8px;
}

.cardsite-body {
  align-items: flex-start;
}

.distance {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.distance-icon {
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.9;
}

.current-location-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;          /* separación bajo “Sagunto” */
  font-size:12px;
  opacity:.9;
}



/* Ondas animadas */
.waves{
  width:16px;
  height:16px;
  position:relative;
  flex:0 0 auto;
}

.waves::before,
.waves::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:6px;
  height:6px;
  border:2px solid rgba(0,0,0,.7);
  border-radius:50%;
  opacity:.25;
  animation:wavesPulse 1.1s infinite;
}

.waves::after{
  width:14px;
  height:14px;
  opacity:.15;
  animation-delay:.2s;
}

@keyframes wavesPulse{
  0%   { transform:translate(-50%,-50%) scale(0.6); opacity:.35; }
  70%  { transform:translate(-50%,-50%) scale(1.25); opacity:.06; }
  100% { transform:translate(-50%,-50%) scale(1.35); opacity:0; }
}



/* Contenedor: dos filas, alineado a la derecha */
.location-text{
  display:flex;
  flex-direction:column;
  align-items:flex-end;     /* 🔑 TODO a la derecha */
  gap:2px;
  text-align:right;
}

/* Cada fila como una línea horizontal */
.location-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:100%;
}

/* Segunda línea: más pequeña y discreta */
.location-row-bottom{
  font-size:15px;
  opacity:.9;
}

/* Texto coords: truncado si no cabe */


/* Ondas animadas (igual que antes) */
.waves{
  width:16px;
  height:16px;
  position:relative;
  flex:0 0 auto;
}

.waves::before,
.waves::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:6px;
  height:6px;
  border:2px solid rgba(0,0,0,.7);
  border-radius:50%;
  opacity:.25;
  animation:wavesPulse 1.1s infinite;
}

.waves::after{
  width:14px;
  height:14px;
  opacity:.15;
  animation-delay:.2s;
}

@keyframes wavesPulse{
  0%   { transform:translate(-50%,-50%) scale(0.6); opacity:.35; }
  70%  { transform:translate(-50%,-50%) scale(1.25); opacity:.06; }
  100% { transform:translate(-50%,-50%) scale(1.35); opacity:0; }
}



/* Más aire debajo de la cabecera de ubicación */
.location-text{
  margin-top: 0px;     /* separa del logo/cabecera */
  margin-bottom: 8px;  /* separa del contenido inferior */
}

/* Aire entre fila superior (Sagunto) y la inferior (coords) */
.location-row-top{
  margin-bottom: 4px;
}

/* Segunda línea (coords) un poco más respirable */
.location-row-bottom{
  padding-top: 5px;
}


.cardsite-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.cardsite-title{
  flex:1; /* deja el badge a la derecha */
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.badge-ico{ font-size:13px; }

.badge-pending{
  background:#fff3cd;
  color:#856404;
  border:1px solid #ffeeba;
}

.badge-active{
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}


.pending-hint{
  margin-top:6px;
  font-size:12px;
  opacity:.85;
}

.page.dashboard {
  padding-top: 30px; /* altura navbar desktop */
}

@media (max-width: 768px) {
  .page.dashboard {
    padding-top: 30px; /* navbar móvil */
  }
}


.dashboard-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.dashboard-page-btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: #2f6fec;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: 0.2s ease;
}

.dashboard-page-btn:hover {
  background: #1e54c4;
}

.dashboard-page-btn.disabled {
  background: #d9d9d9;
  color: #777;
  pointer-events: none;
}

.dashboard-page-info {
  font-size: 14px;
  font-weight: 500;
}


/* =========================
   Dashboard – cards
========================= */

.dashboard-site-address {
  margin-top: 6px;
}

.dashboard-site-street {
  font-weight: 600;
}

.dashboard-site-city {
  opacity: 0.8;
  font-size: 0.95rem;
}

/* =========================
   Dashboard – acciones
========================= */

.dashboard-site-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

/* Cada form no debe romper layout */
.dashboard-site-actions form {
  margin: 0;
}

/* ===== MÓVIL ===== */
@media (max-width: 640px) {
  .dashboard-site-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-site-actions button {
    width: 100%;
    max-width: 220px;
  }
}

/* ===== DESKTOP ===== */
@media (min-width: 641px) {
  .dashboard-site-actions {
    flex-direction: row;
  }
}



:root{--bg:#f7f7fb;--card:#fff;--border:#dcdde4;--accent:#3b82f6;--okbg:#ecfdf5;--okbd:#a7f3d0;--oktx:#065f46}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;
  padding:1rem;
  color:#222;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente */
  align-items: center;     /* centra horizontalmente */
  }
.card{max-width:330px;margin:0 auto;background:var(--card);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:1.25rem 1.5rem}
h1{margin:0 0 1rem;font-size:1.35rem}
.form-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
input,select,button{width:100%;padding:.7rem .8rem;border:1px solid var(--border);border-radius:10px;font-size:1rem;background:#fff}
button{background:var(--accent);color:#fff;border:none;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.05)}
.col-2{grid-column:span 2}
.err{color:#b91c1c;font-size:.85rem;margin-top:.25rem}
.msg{padding:1rem;border-radius:10px;background:var(--okbg);border:1px solid var(--okbd);color:var(--oktx);margin-top:1rem}
.actions{margin-top:.25rem}
@media (max-width: 680px){
  .form-grid{grid-template-columns:1fr}
  .col-2{grid-column:span 1}
}
.result-card{
  margin-top:1rem;padding:1.1rem 1.2rem;border-radius:14px;
  background:linear-gradient(180deg,#f8fbff, #f3f7ff);
  border:1px solid #dbe7ff; box-shadow:0 10px 24px rgba(30,64,175,.08), inset 0 1px 0 #fff;
  animation:pop .25s ease-out;
}
@keyframes pop{from{transform:scale(.98);opacity:.7} to{transform:scale(1);opacity:1}}

.dose-value{
  font-size:2.6rem; font-weight:800; letter-spacing:-.02em; color:#0f172a; line-height:1;
}
.dose-value span{font-size:1rem;font-weight:700;color:#475569;margin-left:.35rem}

.dose-meta{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .6rem;border-radius:999px;border:1px solid #c7d2fe;
  background:#eef2ff;color:#3730a3;font-weight:600;font-size:.9rem;
}
.chip.interval::before{content:"⏱️"}
.chip.doses::before{content:"🗓️"}
.chip.drug::before{content:"💊"}

.dose-sub{margin-top:.6rem;color:#475569;font-size:.95rem}
.result-actions{margin-top:.6rem}
.btn-ghost{
  background:#fff;border:1px solid #cbd5e1;border-radius:10px;
  padding:.55rem .8rem;font-weight:600;cursor:pointer
}
.btn-ghost:hover{background:#f8fafc}



/* Centrar contenido del resultado */
.result-card{
  text-align:center;            /* centra el texto por defecto */
}

.dose-value{
  margin: .2rem auto 0;         /* centra el bloque */
  display:inline-flex;          /* para alinear el número y "ml" */
  align-items:baseline;
  gap:.35rem;
}

.dose-meta{
  margin-top:.6rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;       /* centra las chips */
}

.dose-sub{
  text-align:center;            /* centra el texto auxiliar */
}

/* Si dejaste acciones/botones debajo, céntralos también */
.result-actions{
  display:flex;
  justify-content:center;
}

.card h1{
  text-align: center;
  margin: 0 auto 1.75rem;
}



.site-footer{margin:40px auto 8px;text-align:center;color:#64748b;font-size:.9rem}
.site-footer a{color:#2563eb;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

.modal{position:fixed;inset:0;display:none;background:rgba(0,0,0,.45);padding:20px;z-index:1000}
.modal.show{display:block}
.modal-content{position:relative;max-width:880px;margin:0 auto;background:#fff;border-radius:16px;
  padding:24px 28px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-height:85vh;overflow:auto}
.modal-close{border:0;background:transparent;font-size:28px;position:absolute;right:18px;top:12px;cursor:pointer}
.modal h2{margin-bottom:.25rem}
.modal h3{margin:1rem 0 .25rem}
.modal p,.modal li{line-height:1.6}
.modal .muted{color:#94a3b8;font-size:.9rem}

.app-header {
    display: flex;
    align-items: center;
    justify-content: center; /* centra todo el bloque en el contenedor */
    gap: 10px; /* espacio entre icono y texto */
    margin-bottom: 20px;
    text-align: center;
}

.app-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.app-header h1 {
    margin: 0;
    font-size: 1.5rem;
}
.center {
  text-align:center;
}

.detectando {
  display: flex;
  align-items: center;
  justify-content: center; /* centra horizontalmente */
  gap: 8px;
  width: 100%; /* importante para que pueda centrarse bien */
  text-align: center;
}

.cargando {
  display: none;
  align-items: center;
  justify-content: center; /* centra horizontalmente */
  gap: 8px;
  width: 100%; /* importante para que pueda centrarse bien */
  text-align: center;
}




/* MAIN */





/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  padding-top: 120px; /* espacio para la barra fija */
}

.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  /*padding-left:20px;*/
  height: var(--nav-h);
  background: #333;
  color: #fff;
  z-index: 1000;
  overflow: visible; /* permite que el logo sobresalga por ABAJO */
}

.navbar-inner{
  max-width: none;
  /*padding-left: calc(var(--side-padding) + 15px);*/ /* 15px = padding interno de .cardsite */
  /*padding-right: calc(var(--side-padding) + 15px);*/
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* el contenido se pega ARRIBA */
}



.logo img{
  height: 90px;           /* ej.: más alto que 70px */
  object-fit: contain;
  display: block;  
}

.navbar .logo {
  font-size: 1.2rem;
  margin-top:10px;
  margin-left:0px;
}

.navbar .login-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.navbar .login-link:hover {
  text-decoration: underline;
}
.cardsite{
  width: 100%;
  max-width: var(--content-max);  /* 👈 mismo ancho que header */
  margin: 0 auto;
}

.cardsites-container{
  margin: 45px auto 0;    
  padding: 20px 0px 0px;
  max-width: calc(var(--content-max, 800px) + 40px);
  display: flex; flex-direction: column;
}

.cardsite + .cardsite {       /* toda card que sigue a otra card */
  margin-top: 20px;
}


/* Cada cardsite */
.cardsite {
  background: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.cardsite-title {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.cardsite-body {
  display: flex;
  align-items: top;
  gap: 15px;
}

.restaurant-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

.cardsite-info {
  flex: 1;
}

.cardsite-info p {
  margin-bottom: 10px;
}

.cardsite-info a {
  color: #007BFF;
  text-decoration: none;
}

.cardsite-info a:hover {
  text-decoration: underline;
}

.cardsite-info button {
  padding: 8px 12px;
  background: #28a745;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  max-width: 260px;
  float:right;
  font-size:0.7em;
}

.cardsite-info button:hover {
  background: #218838;
}

@media (min-width: 1024px){
  :root{ --content-max: 800px; }  /* cambia aquí si necesitas otro ancho */
}

:root{
  /* Un solo sitio para cambiar el ancho de la columna central */
  --content-max: 800px;     /* mismo ancho que .cardsite en escritorio */
  --side-padding: 20px;     /* respiro lateral en móvil/tablet */
}




/* ==== MAIN: hacer la columna más ancha y ocuparla completa ==== */

/* Quita el flex global del body en esta página */
body{
  display: block;             /* deja de centrar el body */
  justify-content: initial;
  align-items: initial;
  padding-top: 120px;         /* sigues teniendo la barra fija */
  background: #f5f5f5;
}

/* Ancho de la columna central (ajusta a tu gusto) */
:root{
  --content-max: 1100px;      /* antes 800px */
  --side-padding: 20px;
}

/* El contenedor puede limitarse, pero las cards deben ocupar todo su ancho */


/* Las cards deben estirarse a todo el ancho del contenedor */
.cardsite{
  width: 100%;
  max-width: none;            /* anula el tope de 800px */
}

:root{
  --nav-h: 70px;     /* altura de la barra */
  --logo-h: 120px;    /* altura del logo (ajústala a tu imagen) */
  --side-padding: 20px;
}
/* El header ocupa todo el ancho y usa el mismo padding que las cards */
.navbar-inner{
  max-width: none;                  /* no limites a 800/1100 */
  /*padding-left: var(--side-padding);
  padding-right: var(--side-padding);*/
  align-items: center;              /* centra verticalmente el login */
}

/* Quita desplazamientos del logo */
.navbar .logo{ 
  /*margin: 0;*/                        /* fuera margin-left:10px y margin-top */
}

/* El logo tal cual */
.logo img{
  height: 90px;
  display: block;
  object-fit: contain;  
}

.logo-link img{
  height: var(--logo-h);
  display: block;
  object-fit: contain;
  transform: translateY(calc((var(--logo-h) - var(--nav-h)) / 2));
  /* si el logo <= barra, el desplazamiento será 0 o negativo (no pasa nada) */
}

body{
  display: block; /* por si heredaba el flex del otro layout */
  padding-top: calc(var(--nav-h) + (var(--logo-h) - var(--nav-h)) / 2 + 10px);
  /* +10px de holgura; súbelo/bájalo si ves el logo muy pegado */
}




/* Alinear cabecera con las cards: mismo padding lateral + padding interno de la card (15px) */
.navbar-inner{
  max-width: none;
  /*padding-left: calc(var(--side-padding, 20px) + 15px);
  padding-right: calc(var(--side-padding, 20px) + 15px);*/
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;   /* centra verticalmente los botones */
}

/* Botones de acción (relocalizar + login) */
.nav-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right:20px;
  margin-top:2px;
}

/* Estilo del botón con icono */
.icon-btn{
  --btn-bd: rgba(255,255,255,.65);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--btn-bd);
  border-radius: 10px;
  color: #fff;                 /* fuerza blanco (no azul de <a>) */
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: .15s ease-in-out;
}

.icon-btn svg{
  width: 20px; height: 20px;
  fill: currentColor;          /* el SVG hereda el color del link */
  display: block;
}

.icon-btn .label{ color:inherit; }

/* Hover: invertimos */
.icon-btn:hover{
  background: #fff;
  color: #333;
  border-color: #fff;
}

.icon-btn-active{
  --btn-bd: rgba(255,255,255,.65);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--btn-bd);
  border-radius: 10px;
  color: #fff;                 /* fuerza blanco (no azul de <a>) */
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: .15s ease-in-out;
  background: var(--accent);   /* azul */  
  color: #fff;
}

.icon-btn-active svg{
  width: 20px; height: 20px;
  fill: currentColor;          /* el SVG hereda el color del link */
  display: block;
}

.icon-btn-active .label{ color:inherit; }

/* Hover: invertimos */
.icon-btn-active:hover{
  background: #fff;
  color: #333;
  border-color: #fff;
  filter: brightness(0.95);
}

/* Accesibilidad: texto solo para lectores de pantalla */
.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;
}

/* (Opcional) Ocultar el texto "Login" en pantallas muy pequeñas */
@media (max-width: 420px){
  .icon-btn .label{ display:none; }
  .icon-btn{ padding:8px; } /* compacto cuando solo hay icono */
  .icon-btn-active .label{ display:none; }
  .icon-btn-active{ padding:8px; } /* compacto cuando solo hay icono */
}

/* Asegura que el logo no se desplace raro */
.logo-link img{
  height: var(--logo-h, 90px);
  display:block;
  object-fit: contain;
}

/* Por si algún estilo anterior dejaba el enlace azul */
.navbar a{ color:inherit; }



.lang-selector{ position: relative; }
.lang-btn{ gap:6px; padding-right:10px; }
.lang-btn .chev{ width:16px; height:16px; margin-left:4px; }
.flag{ font-size:18px; line-height:1; }

/* Menú desplegable */
.lang-menu{
  position:absolute; top:100%; right:0;
  background:#fff; color:#111; min-width:120px;
  border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  list-style:none; margin:8px 0 0; padding:6px;
  display:none; z-index:1100;
}
.lang-menu.show{ display:block; }
.lang-menu li{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.lang-menu li:hover{ background:#f3f4f6; }

/* Mantén coherencia de colores con la barra */
.navbar .lang-btn{ color:#fff; border-color: rgba(255,255,255,.65); }
.navbar .lang-btn:hover{ background:#fff; color:#333; border-color:#fff; }

.cardsite-head{
  display: flex;
  align-items: center;   /* centra verticalmente icono y título */
  gap: 8px;              /* separación entre icono y texto */
  margin-bottom: 10px;   /* espacio con el resto de la card */
}

.cat-icon{
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.cardsite-title{
  margin: 0;             /* evita que “empuje” hacia abajo */
  font-size: 1.3rem;
}

.location-text {
  display: flex;
  align-items: center;       /* centra verticalmente todo */
  justify-content: flex-end; /* mantiene todo alineado a la derecha */
  gap: 8px;                  /* separación entre elementos */

  font-size: 1.1rem;  
  color: #333;
  padding: 8px 20px 15px 0;  
  background-color: #fff;
  min-height:55px;
}

.geo-label {
  margin-top:5px;  
}

.radio-label{
  margin-top:0;
  margin-left:6px;
  display:inline-flex;
  align-items:center;
}

.radio-select {  
  margin-top:5px;
  padding: 3px 6px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  max-width:100px;
}
.radio-select:focus {
  border-color: #2e86c1; /* color al enfocar */
}





/* Contenedor fijo */
.floating-menu{
  position: fixed;
  top: 125px;             /* debajo de la cabecera */
  right: 0px;
  z-index: 3000;         /* por encima de todo (tu header tenía ~1000) */
}

.hamburger-btn {
  width: 44px;
  height: 44px;
  background: #333;      /* color cabecera */
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);

  /* Bordes redondeados solo a la izquierda */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  position: fixed;
  top: 150px;  /* ajusta según lo necesites */
  right: 0;    /* pegado al borde derecho */
  z-index: 3000;
}
.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  margin: 3px 0;
  border-radius: 2px;
}

/* Menú */
.side-menu{
  position: fixed;                 /* fijo para que no “salte” al hacer scroll */
  top: 167px;                      /* 80 (top) + 44 (alto botón) + 8 de separación */
  right: -5px;
  min-width: 200px;
  background: #333;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  padding: 8px;
  opacity: 0; transform: scale(.95); 
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.side-menu.open{
  opacity: 1; transform: scale(1);
  pointer-events: auto;
}
.side-menu ul{ list-style: none; margin: 0; padding: 4px; }
.side-menu li{ margin: 0; }
.side-menu a{
  display: block;
  padding: 10px 12px;
  color: #fff; text-decoration: none;
  border-radius: 8px;
  font-size: .95rem;
}
.side-menu a:hover, .side-menu a:focus{
  background: rgba(255,255,255,.12);
  outline: none;
}

.titulo-tipo{
  margin-top:20px;
  height: 40px;
  width: 100%;  
  text-align:center;
  color:grey;
  font-weight: normal;
}

.no-resultados{
  width:100%;
  text-align:center;
}









.side-menu a {
  display: flex;
  align-items: center;    /* icono y texto centrados verticalmente */
  gap: 8px;               /* separación entre icono y texto */
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: .95rem;
}

.side-menu a .ham-icon {
  display: inline-flex;
  width: 30px;            /* fija ancho para alinear */
  justify-content: center;
  font-size: 1.2rem;      /* tamaño del icono/emoji */
}

.distance{
  display: inline-flex;        /* se alinea con el resto de la línea */
  align-items: center;         /* centra icono y texto verticalmente */
  gap: 6px;                    /* separación entre icono y texto */
  line-height: 1.2;              /* evita desajustes por la altura de línea */
  width:100%;
}

.distance img{
  width: 25px;
  display: block;              /* elimina el “descender” del inline-img */
  object-fit: contain;
}

.distance span{
  font-size: 1.0rem;
  font-weight: 600;
  color: green;
}

.distance-street{
  display: inline-flex;        /* se alinea con el resto de la línea */
  align-items: center;         /* centra icono y texto verticalmente */
  gap: 6px;                    /* separación entre icono y texto */
  line-height: 1.2;              /* evita desajustes por la altura de línea */
  margin-bottom:5px;
  width:100%;
}

.distance-city{
  display: inline-flex;        /* se alinea con el resto de la línea */
  align-items: center;         /* centra icono y texto verticalmente */
  gap: 6px;                    /* separación entre icono y texto */
  line-height: 1.2;              /* evita desajustes por la altura de línea */
  margin-bottom:15px;
  width:100%;
}

.distance-street span{
  font-size: 1.0rem;  
  color: #000;
}

.distance-city span{
  font-size: 1.0rem;  
  color: grey;  
}


/* ====== Variables (ajusta el verde para que iguale tu "Ver en Google Maps") ====== */
:root{
  --maps-green: #28a745;   /* ← pon aquí el verde del botón de Google Maps */
  --maps-green-dark: #1f7f36;
  --text: #222;
  --line: #d9d9d9;
  --muted: #9aa1a7;
  --bg: #fff;
}

/* ===== Paginación ordenada ===== */
.pager{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.6rem .6rem;
  padding:.25rem 0 1.5rem;
  font-size:14px;
}

/* Agrupamos numeración para que quede centrada */
.pager .pages{
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Botones */
.pager .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2rem;
  height:2.2rem;                 /* alto uniforme */
  padding:0 .65rem;
  border:1px solid var(--line);
  border-radius:.55rem;
  background:var(--bg);
  color:var(--text);
  text-decoration:none;
  line-height:1;
  user-select:none;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.pager .btn:hover{ background:#f6f6f6; border-color:#cfcfcf; }
.pager .btn:active{ transform:translateY(1px); }

/* Activo = mismo verde que "Ver en Google Maps" */
.pager .btn.current{
  background:var(--maps-green);
  border-color:var(--maps-green);
  color:#fff;
  font-weight:600;
  pointer-events:none;
}

/* Deshabilitados */
.pager .btn.disabled{
  opacity:.45;
  pointer-events:none;
}

/* Ellipsis */
.pager .ellipsis{ padding:0 .15rem; color:var(--muted); }

/* Info y selector a la derecha (en desktop) */
.pager .meta{
  margin-left:.25rem;
  color:#666;
  white-space:nowrap;
}
.pager .page-size{
  margin-left:auto;              /* empuja a la derecha */
  display:flex;
  align-items:center;
  gap:.45rem;
}
.pager .page-size select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  height:2.2rem;                 /* igual al botón */
  padding:0 .65rem;
  border:1px solid var(--line);
  border-radius:.55rem;
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
}

/* Foco accesible */
.pager .btn:focus,
.pager .page-size select:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(40,167,69,.25);  /* usa el verde */
}

/* Hover consistente para el activo (ligeramente más oscuro) */
.pager .btn.current:hover{
  background:var(--maps-green-dark);
  border-color:var(--maps-green-dark);
}

/* Compacto en móviles */
@media (max-width: 560px){
  .pager{ gap:.5rem; }
  .pager .page-size{
    order: 3;                    /* baja el selector debajo */
    width:100%;
    justify-content:center;
    margin-left:0;
  }
  .pager .meta{
    order: 4;
    width:100%;
    text-align:center;
    margin-top:.2rem;
  }
}

/* Dark mode opcional */
@media (prefers-color-scheme: dark){
  :root{
    --text:#e6e6e6; --bg:#1f1f1f; --line:#333; --muted:#9aa1a7;
  }
  .pager .btn{ background:var(--bg); border-color:var(--line); color:var(--text); }
  .pager .btn:hover{ background:#262626; border-color:#3a3a3a; }
  .pager .btn.current{ background:var(--maps-green); border-color:var(--maps-green); color:#fff; }
  .pager .page-size select{ background:var(--bg); border-color:var(--line); color:var(--text); }
  .pager .meta{ color:#a0a0a0; }
  .auth-card{ background:#fff !important; color:#222; }
}


.por-pagina{
  width: 75px;
}


.acciones-secundarias {
  width:100%; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:20px;
}

/* Flecha personalizada para el select "Por página" */
.pager .page-size select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  position:relative;
  height:2.2rem;
  padding:0 2rem 0 .65rem;            /* espacio para la flecha */
  border:1px solid var(--line, #d9d9d9);
  border-radius:.55rem;
  background:#fff;
  color:var(--text, #222);
  cursor:pointer;

  /* Flecha SVG embebida (negra) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23222'> <path d='M5.23 7.21a.75.75 0 011.06.02L10 10.06l3.71-2.83a.75.75 0 111.04 1.08l-4.24 3.25a.75.75 0 01-.92 0L5.21 8.31a.75.75 0 01.02-1.1z'/> </svg>");
  background-repeat:no-repeat;
  background-position: right .6rem center;
  background-size:.8rem .8rem;
  transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

.pager .page-size select:hover{
  background-color:#f8f8f8;
  border-color:#cfcfcf;
}

.pager .page-size select:focus{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(40,167,69,.25);      /* usa tu verde si quieres */
  border-color:#9ad2b4;                          /* opcional */
}

/* Estado disabled (por si lo usas alguna vez) */
.pager .page-size select:disabled{
  opacity:.6; cursor:not-allowed;
}

/* Dark mode: flecha clara */
@media (prefers-color-scheme: dark){
  .pager .page-size select{
    background:#1f1f1f; color:#e6e6e6; border-color:#333;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e6e6e6'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.06l3.71-2.83a.75.75 0 111.04 1.08l-4.24 3.25a.75.75 0 01-.92 0L5.21 8.31a.75.75 0 01.02-1.1z'/></svg>");
  .auth-card{ background:#fff !important; color:#222; }
  }
}

html, body { color-scheme: light; }


.create-site { margin-top : 30px;}

.edit-site-btn { margin-top : 35px; }






.address-line{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
}

.address-line .pin{
  width:16px;
  height:16px;
  opacity:0.85;
  flex:0 0 auto;
}

.address-line .address-text{
  font-size: 0.95em;
  line-height: 1.2;
}


.cardsite-info,
.cardsite-info * {
  text-align: left !important;
}

.distance {
  margin-top: 6px;
  margin-bottom: 8px;   /* separa distancia de la dirección */
}

.address-line {
  display: flex;
  align-items: flex-start; /* 🔑 CLAVE */
  gap: 6px;
  margin: 0;
}

.address-line .pin {
  width: 16px;
  height: 16px;
  opacity: 0.85;
  flex: 0 0 auto;
}

.address-line .address-text {
  line-height: 1.25;
}

.cardsite-info button {
  margin-top: 8px;
}

.cardsite-body {
  align-items: flex-start;
}

.distance {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.distance-icon {
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.9;
}

.current-location-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;          /* separación bajo “Sagunto” */
  font-size:12px;
  opacity:.9;
}



/* Ondas animadas */
.waves{
  width:16px;
  height:16px;
  position:relative;
  flex:0 0 auto;
}

.waves::before,
.waves::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:6px;
  height:6px;
  border:2px solid rgba(0,0,0,.7);
  border-radius:50%;
  opacity:.25;
  animation:wavesPulse 1.1s infinite;
}

.waves::after{
  width:14px;
  height:14px;
  opacity:.15;
  animation-delay:.2s;
}

@keyframes wavesPulse{
  0%   { transform:translate(-50%,-50%) scale(0.6); opacity:.35; }
  70%  { transform:translate(-50%,-50%) scale(1.25); opacity:.06; }
  100% { transform:translate(-50%,-50%) scale(1.35); opacity:0; }
}



/* Contenedor: dos filas, alineado a la derecha */
.location-text{
  display:flex;
  flex-direction:column;
  align-items:flex-end;     /* 🔑 TODO a la derecha */
  gap:2px;
  text-align:right;
}

/* Cada fila como una línea horizontal */
.location-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:100%;
}

/* Segunda línea: más pequeña y discreta */
.location-row-bottom{
  font-size:14px;
  opacity:.9;
}

/* Texto coords: truncado si no cabe */


/* Ondas animadas (igual que antes) */
.waves{
  width:16px;
  height:16px;
  position:relative;
  flex:0 0 auto;
}

.waves::before,
.waves::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:6px;
  height:6px;
  border:2px solid rgba(0,0,0,.7);
  border-radius:50%;
  opacity:.25;
  animation:wavesPulse 1.1s infinite;
}

.waves::after{
  width:14px;
  height:14px;
  opacity:.15;
  animation-delay:.2s;
}

@keyframes wavesPulse{
  0%   { transform:translate(-50%,-50%) scale(0.6); opacity:.35; }
  70%  { transform:translate(-50%,-50%) scale(1.25); opacity:.06; }
  100% { transform:translate(-50%,-50%) scale(1.35); opacity:0; }
}



/* Más aire debajo de la cabecera de ubicación */
.location-text{
  margin-top: 0px;     /* separa del logo/cabecera */
  margin-bottom: 8px;  /* separa del contenido inferior */
}

/* Aire entre fila superior (Sagunto) y la inferior (coords) */
.location-row-top{
  margin-bottom: 4px;
}

/* Segunda línea (coords) un poco más respirable */
.location-row-bottom{
  padding-top: 5px;
}


.cardsite-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.cardsite-title{
  flex:1; /* deja el badge a la derecha */
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.badge-ico{ font-size:13px; }

.badge-pending{
  background:#fff3cd;
  color:#856404;
  border:1px solid #ffeeba;
}

.badge-active{
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}


.pending-hint{
  margin-top:6px;
  font-size:12px;
  opacity:.85;
}

.page.dashboard {
  padding-top: 30px; /* altura navbar desktop */
}

@media (max-width: 768px) {
  .page.dashboard {
    padding-top: 30px; /* navbar móvil */
  }
}


.dashboard-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.dashboard-page-btn {
  padding: 8px 14px;
  border-radius: 8px;
  background: #2f6fec;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: 0.2s ease;
}

.dashboard-page-btn:hover {
  background: #1e54c4;
}

.dashboard-page-btn.disabled {
  background: #d9d9d9;
  color: #777;
  pointer-events: none;
}

.dashboard-page-info {
  font-size: 14px;
  font-weight: 500;
}


/* =========================
   Dashboard – cards
========================= */

.dashboard-site-address {
  margin-top: 6px;
}

.dashboard-site-street {
  font-weight: 600;
}

.dashboard-site-city {
  opacity: 0.8;
  font-size: 0.95rem;
}

/* =========================
   Dashboard – acciones
========================= */

.dashboard-site-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

/* Cada form no debe romper layout */
.dashboard-site-actions form {
  margin: 0;
}

/* ===== MÓVIL ===== */
@media (max-width: 640px) {
  .dashboard-site-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-site-actions button {
    width: 100%;
    max-width: 220px;
  }
}

/* ===== DESKTOP ===== */
@media (min-width: 641px) {
  .dashboard-site-actions {
    flex-direction: row;
  }
}


/* =========================
   Dashboard – botones fix
========================= */

.page.dashboard .cardsite-info button,
.page.dashboard .dashboard-site-actions button {
  float: none !important;     /* 🔥 anulamos el float global */
  max-width: none;
}

/* Asegura que el contenedor de acciones esté debajo */
.page.dashboard .dashboard-site-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

/* Botones uno al lado del otro */
.page.dashboard .dashboard-site-actions form {
  margin: 0;
}

.page.dashboard .dashboard-site-actions button {
  min-width: 110px;
}



/* =========================
   Dashboard – layout fix
========================= */

/* El body de la card pasa a columna */
.page.dashboard .cardsite-body {
  display: block;          /* 🔥 mata el flex horizontal */
}

/* Dirección */
.page.dashboard .dashboard-site-address {
  margin-top: 6px;
}

/* Acciones: fila debajo */
.page.dashboard .dashboard-site-actions {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

/* Botones alineados y mismo tamaño */
.page.dashboard .dashboard-site-actions button {
  min-width: 120px;
}



/* Dashboard: botones en fila y a la derecha (también en móvil) */
.page.dashboard .dashboard-site-actions{
  margin-top: 14px;
  display: flex;
  flex-direction: row !important;
  justify-content: flex-end;      /* 👈 derecha */
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Evita que el button herede cosas raras */
.page.dashboard .dashboard-site-actions form{
  margin: 0;
}

/* Tamaño consistente en móvil */
.page.dashboard .dashboard-site-actions button{
  width: auto;
  min-width: 110px;
}


.site-thumb{
  width: 96px;
  height: 72px;
  min-width: 96px;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}

.site-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}





.cardsite-photo{
  height: 140px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px 12px 0 0;
}











/* =========================
   CARDSITES (listado)
========================= */

:root{
  --content-max: 1100px;
  --side-padding: 20px;

  --card-radius: 12px;
  --card-bg: #fff;
  --card-shadow: 0 2px 6px rgba(0,0,0,0.10);

  --maps-green: #28a745;
  --maps-green-hover: #218838;
}

/* Contenedor cards */
.cardsites-container{
  margin: 25px auto 0;
  padding: 20px 0 0;
  max-width: calc(var(--content-max) + 40px);
  display: flex;
  flex-direction: column;
}

/* Separación entre cards */
.cardsite + .cardsite{
  margin-top: 20px;
}

/* Card base: AQUÍ va el radio + recorte */
.cardsite{
  width: 100%;
  max-width: none;
  margin: 0 auto;

  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;              /* 🔑 clave para que el radio recorte la foto */
}

/* Variante “normal” (mezquitas): padding interno */
.cardsite-body{
  padding: 15px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

/* Izquierda mini */
.site-thumb{
  width: 96px;
  height: 72px;
  min-width: 96px;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}
.site-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Derecha info */
.cardsite-right{ flex: 1; min-width: 0; }

.cardsite-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.cardsite-title{
  margin: 0;
  font-size: 1.3rem;
  text-align: left;
}

/* Info */
.cardsite-info{
  flex: 1;
}
.cardsite-info,
.cardsite-info *{
  text-align: left;
}

/* Distancia */
.distance{
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 6px 0 8px;
}
.distance span{
  font-size: 1rem;
  font-weight: 600;
  color: green;
}

/* Dirección */
.address-line{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
}
.address-line .pin{
  width: 16px;
  height: 16px;
  opacity: .85;
  flex: 0 0 auto;
}
.address-line .address-text{
  font-size: .95em;
  line-height: 1.25;
}

/* Botón maps */
.btn-maps{
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--maps-green);
  border: none;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;

  width: 100%;
  max-width: 260px;
  float: right;
  font-size: .7em;
}
.btn-maps:hover{
  background: var(--maps-green-hover);
}

/* =========================
   MONUMENTO (estilo Glovo)
   Cuando exista .cardsite-photo dentro de .cardsite
========================= */

/* Foto superior */
.cardsite-photo{
  height: 140px;                 /* sin !important */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* Overlay con título */
.cardsite-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.18), transparent);
}

.cardsite-title--onphoto{
  margin: 0;
  color: #fff;
  text-align: left;
}

/* Info debajo de foto (sin pegarse al borde) */
.cardsite-info--belowphoto{
  padding: 12px 0px 0px;
}

/* En modo monumento, el botón no debería flotar raro */
.cardsite-info--belowphoto .btn-maps{
  float: none;
}

/* Móvil */
@media (max-width: 420px){
  .btn-maps{ max-width: 100%; float: none; }
}


.cardsite-body--nologo{
  display:block;
  padding:0;
}

.cardsite-right--full{
  width:100%;
}
.cardsite-body{
  display:flex;
}

.cardsite-info--belowphoto .btn-maps{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;              /* ya lo alinea .cardsite-actions */
  text-align: center;
}


/* Botón maps: tamaño consistente y alineado a la derecha */
.btn-maps{
  float: none !important;         /* fuera floats viejos */
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: auto;
  min-width: 170px;              /* ajusta a tu gusto */
  max-width: 210px;              /* ajusta a tu gusto */

  margin-left: auto;             /* 🔥 empuja a la derecha */
  margin-top: 10px;

  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.7em;
}



/* ====== Botón Google Maps (unificado) ====== */
.btn-maps{
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: .7em;
  padding: 8px 12px;

  /* 🔥 clave: sin full width y sin float */
  width: auto !important;
  max-width: none !important;
  float: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* tamaño consistente */
  min-width: 160px;
}

/* Contenedor del botón: lo manda a la derecha SIEMPRE */
.cardsite-actions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;  /* 👈 derecha */
  width: 100%;
}



/* Badge dentro de la foto (arriba derecha) */
.cardsite-photo{
  position: relative; /* por si acaso */
}

.photo-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  /* estilo “pendiente-like” pero en verde */
  background: rgba(212, 237, 218, 0.95);
  color: #155724;
  border: 1px solid rgba(195, 230, 203, 0.95);

  /* si la foto es clara, ayuda a que se lea */
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
}

.photo-badge{
  /*background: rgba(212, 237, 218, 0.75);*/   /* antes 0.95 */
  border: 1px solid rgba(21, 87, 36, 0.35);
}

.photo-badge .badge-ico{ font-size: 13px; }


.cardsite-title--onphoto{
  color:#fff;

  /* ❌ quita stroke */
  -webkit-text-stroke: 0;

  /* ✅ borde exterior ultrafino */
  text-shadow:
    0 1px 1px rgba(0,0,0,0.85),
    0 -1px 1px rgba(0,0,0,0.85),
    1px 0 1px rgba(0,0,0,0.85),
   -1px 0 1px rgba(0,0,0,0.85);
}


.cardsite{
  background: var(--card-bg, #fff);
  border-radius: var(--card-radius, 12px);
  box-shadow: var(--card-shadow, 0 2px 6px rgba(0,0,0,.10));
  overflow: hidden;     /* 🔑 recorta foto y overlay con el mismo radio */
  padding: 0;           /* 🔥 importante */
}

.cardsite-photo{
  border-radius: 0 !important;  /* 🔥 deja que la card recorte */
}
.cardsite-info--belowphoto{
  padding: 12px 15px 15px;
}
.cardsite-info{
  padding: 12px 15px 15px;
}
.cardsite-body--nologo .cardsite-title{
  padding: 12px 15px 0;
}




.btn-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;         /* más pequeño */
  font-size:14px;
  line-height:1;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  max-width:100%;
}

.btn-action .icon{
  width:18px;
  height:18px;
  display:inline-flex;
}

.btn-action .icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* variantes */
.btn-route{
  background:#1f9d55; /* tu verde */
  color:#fff;
}

.btn-share{
  background:#fff;
  color:#1f9d55;
}


.btn-compact{
  width:auto !important;         /* evita 100% */
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;              /* más pequeño */
  border-radius:12px;
  white-space:nowrap;
}

.btn-action .icon{
  width:18px;
  height:18px;
  display:inline-flex;
}

.btn-action .icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}



/* ========= BOTONES CARD: compactos + derecha ========= */
.cardsite .cardsite-actions{
  display:flex;
  justify-content:flex-end !important;  /* a la derecha */
  align-items:center;
  gap:10px;                              /* espacio entre botones */
  padding:10px 12px 14px;
  flex-wrap:nowrap;                      /* en una línea */
}

/* neutraliza reglas globales tipo flex:1 o width:100% */
.cardsite .cardsite-actions .btn-action{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px !important;           /* tamaño bueno en móvil */
  font-size:13px !important;
  line-height:1 !important;
  border-radius:12px;
}

/* iconos bien (si usas SVG dentro) */
.cardsite .cardsite-actions .btn-action .icon{
  width:16px;
  height:16px;
  display:inline-flex;
}
.cardsite .cardsite-actions .btn-action .icon svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

/* si tu .btn-primary te está metiendo rarezas, lo fijamos aquí */
.cardsite .cardsite-actions .btn-primary{
  background:#1f9d55;
  color:#fff;
  border:none;
}

/* botón normal (secundario) */
.cardsite .cardsite-actions .btn-action:not(.btn-primary){
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  color:#1f9d55;
}

/* en pantallas muy estrechas: permitimos wrap pero manteniendo derecha */
@media (max-width: 360px){
  .cardsite .cardsite-actions{
    flex-wrap:wrap;
    justify-content:flex-end !important;
  }
}



/* =========================================================
   FIX DEFINITIVO: acciones de cards (solo listado)
   PÉGALO AL FINAL DEL CSS
========================================================= */

/* contenedor acciones: derecha, compacto */
.cardsite .cardsite-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 15px 15px;
  margin:0;
}

/* reset de <button> global dentro de las cards */
.cardsite .cardsite-actions button.btn-action{
  width:auto !important;              /* mata width:100% global */
  padding:8px 12px !important;        /* mata padding global */
  font-size:13px !important;          /* mata font-size global */
  border-radius:12px !important;
  line-height:1 !important;
  border:1px solid rgba(0,0,0,.12) !important;
  background:#fff !important;         /* mata background azul global */
  color:#1f9d55 !important;
  font-weight:700;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center;
  gap:8px;
}

/* lo mismo para <a> */
.cardsite .cardsite-actions a.btn-action{
  width:auto !important;
  padding:8px 12px !important;
  font-size:13px !important;
  border-radius:12px !important;
  line-height:1 !important;
  border:1px solid rgba(0,0,0,.12) !important;
  background:#fff !important;
  color:#1f9d55 !important;
  font-weight:700;
  text-decoration:none;
  display:inline-flex !important;
  align-items:center;
  gap:8px;
}

/* primario */
.cardsite .cardsite-actions .btn-primary{
  background:#1f9d55 !important;
  border-color:#1f9d55 !important;
  color:#fff !important;
}

/* iconos svg: tamaño y alineación */
.cardsite .cardsite-actions .icon{
  width:16px;
  height:16px;
  display:inline-flex;
}
.cardsite .cardsite-actions .icon svg{
  width:16px;
  height:16px;
  fill:currentColor;
  display:block;
}

/* en pantallas muy estrechas, que bajen a segunda línea pero sigan a la derecha */
@media (max-width: 360px){
  .cardsite .cardsite-actions{
    flex-wrap:wrap;
    justify-content:flex-end !important;
  }
}

.cardsite .cardsite-actions .btn-action{
  margin-top: 0 !important;
}


/* =========================
   FIX: botones pegados a la derecha, separados de la dirección,
   y menos espacio abajo
   ========================= */

/* La línea de dirección deja aire debajo */
.cardsite .address-line{
  margin-bottom: 10px !important;
}

/* Contenedor de botones: a la derecha + menos padding abajo */
.cardsite .cardsite-actions{
  justify-content: flex-end !important;   /* derecha */
  padding: 8px 8px 5px !important;      /* menos abajo + un pelín a la derecha */
  margin-top: 6px !important;             /* separa de la dirección */
}

/* En el modo "monumento" (debajo de la foto) suele necesitar un poco más de respiro */
.cardsite .cardsite-info--belowphoto .cardsite-actions{
  margin-top: 10px !important;
}

/* Si algún estilo raro centra el contenido, lo neutralizamos */
.cardsite .cardsite-actions .btn-action{
  margin-top: 0 !important;
}


/* ===== FORZAR CTA: "Cómo llegar" verde sólido + letras blancas ===== */
.cardsite .cardsite-actions button.btn-action.btn-primary,
.cardsite .cardsite-actions a.btn-action.btn-primary{
  border-color:#1f9d55 !important;
  color:#4b5563 !important;
}

/* Iconos normales (si son SVG monocolor) */
.cardsite .cardsite-actions .btn-primary .icon svg{
  fill:#fff !important;
}


/* El icono multicolor NO debe heredar el blanco */
.cardsite .cardsite-actions .btn-primary .gm-icon svg{
  fill: initial !important;
  display:block;
}

/* un pelín más “vivo” sin sombra */
.cardsite .cardsite-actions .btn-primary .gm-icon{
  width:18px; height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}



/* =========================================================
   UNIFICAR BOTONES EN CARDS (PEGAR AL FINAL)
========================================================= */

/* Contenedor de acciones */
.cardsite .cardsite-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center;
  gap:12px;
  width:100%;
  padding:8px 12px 10px !important;
  margin:8px 0 0 !important;
}

/* Desactiva estilos viejos de botones dentro de cards */
.cardsite .cardsite-info button,
.cardsite .cardsite-info .btn-maps{
  all: unset; /* 🔥 borra estilos antiguos */
}

/* Base unificada (sirve para <a> y <button>) */
.cardsite .cardsite-actions .btn-action{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:8px 12px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;

  width:auto !important;
  min-width: 128px;            /* consistente */
  max-width:none !important;

  border:1px solid rgba(0,0,0,.12) !important;
  background:#fff !important;
  color:#4b5563 !important;    /* grisaceo */
  text-decoration:none !important;
  cursor:pointer;
}

/* Primario = verde sólido + letras blancas */
.cardsite .cardsite-actions .btn-action.btn-primary{
  background:#1f9d55 !important;
  border-color:#1f9d55 !important;
  color:#fff !important;
}

/* Hover sutil */
.cardsite .cardsite-actions .btn-action:hover{
  filter:brightness(0.98);
}

/* Iconos (SVG o IMG) */
.cardsite .cardsite-actions .btn-action .icon{
  width:18px; height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cardsite .cardsite-actions .btn-action .icon svg{
  width:18px; height:18px;
  fill:currentColor;
  display:block;
}
.cardsite .cardsite-actions .btn-action .icon img{
  width:18px; height:18px;
  display:block;
}

/* En móvil muy estrecho, que bajen pero sigan a la derecha */
@media (max-width: 360px){
  .cardsite .cardsite-actions{ flex-wrap:wrap; justify-content:flex-end !important; }
}





/* =========================================================
   FIX FINAL BOTONES CARDSITES (PEGAR AL FINAL DEL TODO)
   - Todos blancos
   - "Cómo llegar" (btn-primary) blanco con borde verde
========================================================= */

.cardsite .cardsite-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  padding:8px 12px 10px !important;
  margin:8px 0 0 !important;
  flex-wrap:wrap !important;   /* por si en móvil no cabe */
}

/* Base para todos los botones (a y button) */
.cardsite .cardsite-actions .btn-action{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:128px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  padding:8px 12px !important;
  border-radius:12px !important;

  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;

  background:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important;
  color:#4b5563 !important;

  text-decoration:none !important;
  cursor:pointer !important;
  margin-top:0 !important;
}

/* Hover sutil */
.cardsite .cardsite-actions .btn-action:hover{
  background:#f9fafb !important;
  border-color:rgba(0,0,0,.16) !important;
}

/* BTN PRIMARY: sigue siendo BLANCO (no verde) */
.cardsite .cardsite-actions .btn-action.btn-primary{
  background:#fff !important;
  border-color:#1f9d55 !important;   /* borde verde */
  color:#374151 !important;          /* texto gris */
}

/* Iconos */
.cardsite .cardsite-actions .btn-action .icon{
  width:18px !important;
  height:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.cardsite .cardsite-actions .btn-action .icon img{
  width:18px !important;
  height:18px !important;
  display:block !important;
}
.cardsite .cardsite-actions .btn-action .icon svg{
  width:18px !important;
  height:18px !important;
  fill:currentColor !important;
  display:block !important;
}

/* icono Google Maps: mantener proporción real */
.cardsite .btn-action .icon img{
  height:18px !important;   /* controlas tamaño */
  width:auto !important;     /* mantiene proporción */
  display:block;
}

/* ===== FIX definitivo: gmaps-icon.png NO cuadrado, mantiene proporción ===== */
.cardsite .cardsite-actions a.btn-action.btn-route .icon img,
.cardsite .cardsite-actions a.btn-action.btn-primary .icon img,
.cardsite .cardsite-actions .btn-action .icon img[src$="gmaps-icon.png"]{
  height: 18px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

.cardsite .cardsite-actions{
  padding-right: 5px !important;
  padding-left: 5px !important;
}

/* Dirección: alinear icono y texto perfectamente */
.cardsite .address-line{
  display:flex;
  align-items:center;   /* centra verticalmente */
  gap:6px;
}

/* Chincheta */
.cardsite .address-line .pin{
  width:25px !important;
  height:auto !important;
  display:block;        /* evita baseline raro */
}



.app-header{
  margin-bottom: 10px;   /* antes seguramente mucho mayor */
}

#manual-location{
  text-align:left;
  margin-top:5px;
}

#manual-location label{
  display:block;
  margin:8px 0 4px;
  font-weight:500;
}

#manual-location select,
#manual-location button{
  width:100%;
  box-sizing:border-box;
}


#manual-location{
  text-align:left;
}

/* contenedor visual del formulario */
#manual-location > divndiv,
#manual-location > div{
  max-width:320px;      /* ancho del formulario */
  margin:0 auto;        /* centra el bloque */
}

/* selects y botón */
#manual-location select,
#manual-location button{
  width:100%;
  max-width:320px;
  margin:0 auto;
  display:block;
  box-sizing:border-box;
}

/* labels alineados al inicio del select */
#manual-location label{
  display:block;
  max-width:320px;
  margin:10px auto 4px;
}

#manual-location button{
  margin-top:14px;   /* ajusta a tu gusto: 12 / 16 / 20 */
}
#manual-location button{
  display:block;
  margin:16px auto 0;
}



.loader{
  width:50px;
  height:50px;
  border-radius:50%;
  position:relative;
}

.loader::before,
.loader::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid #4aa3df;
  animation:ripple 1.5s infinite;
}

.loader::after{
  animation-delay:.75s;
}

@keyframes ripple{
  0%{ transform:scale(.2); opacity:1;}
  100%{ transform:scale(1.6); opacity:0;}
}


.detectando{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;              /* separa loader del texto */
}

/* contenedor fijo */
.loader{
  width:42px;
  height:42px;
  position:relative;
  flex:0 0 42px;         /* evita que crezca */
}

/* ondas */
.loader::before,
.loader::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid #6faed6;
  animation:ripple 1.6s infinite;
}

.loader::after{
  animation-delay:.8s;
}

@keyframes ripple{
  0%{
    transform:scale(.3);
    opacity:1;
  }
  100%{
    transform:scale(1.2);   /* 🔥 antes 1.6 → ahora no invade */
    opacity:0;
  }
}







.photo-badges{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.photo-badge--eta .badge-ico{
  display:inline-flex;
  align-items:center;
}

.badge-svg{
  width:16px;
  height:16px;
  display:block;
}

.cardsite-photo{
  position: relative; /* CLAVE */
}

.photo-badges{
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  z-index: 3; /* por encima del overlay/título */
}

.photo-badges .photo-badge{
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.photo-badge{
  white-space: nowrap;
}

.photo-badge--eta{
  background: rgba(255, 210, 122, 0.90);     /* 🔥 transparente */
  border: 1px solid rgba(240, 180, 77, 0.55);
  color: #5a3b00;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);               /* mismo efecto que el verde */
}

.badge-svg{
  width:15px;
  height:15px;
  display:block;
  fill: currentColor;   /* 🔑 */
}
.photo-badge{
  font-weight:600;
  font-size:13px;
}

.photo-badge--eta .badge-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.photo-badge--eta img{
  width:16px;
  height:16px;
  display:block;

  filter: brightness(0) saturate(100%) 
          invert(16%) sepia(64%) saturate(731%) 
          hue-rotate(11deg) brightness(95%) contrast(96%);
}


/* --- FIX botones en cards: NO width 100% --- */
.cardsite .cardsite-actions button,
.cardsite .cardsite-actions a{
  width: auto !important;   /* mata el 100% global */
}

/* si quieres que sean compactos */
.cardsite .cardsite-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:12px !important;
  flex-wrap:nowrap;         /* todos en una línea */
}

.cardsite .cardsite-actions .btn-action{
  min-width: 0 !important;  /* que no obligue a un ancho mínimo */
  padding: 8px 10px !important;
}


.cardsite .cardsite-actions .ico-svg{
  width:18px;
  height:18px;
  display:block;
  fill: currentColor;   /* 🔑 mismo color que el texto */
}

/* compactar botones en cards */
.cardsite .cardsite-actions{
  gap:6px !important;          /* antes 12px */
}

/* si quieres aún más juntos */
@media (max-width:420px){
  .cardsite .cardsite-actions{
    gap:5px !important;
  }
}

.cardsite .cardsite-actions .btn-action{
  padding:8px 9px !important;
}


.geo-warning{
  margin: 0px auto 45px;
  padding: 12px 14px;
  max-width: 520px;

  background: #fff7ed;              /* naranja muy suave */
  border: 1px solid #fed7aa;
  border-radius: 12px;

  color: #9a3412;                   /* marrón/naranja oscuro */
  font-size: 14px;
  line-height: 1.35;
  text-align: center;

  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* texto en negrita dentro */
.geo-warning strong{
  font-weight: 700;
}

/* opcional: icono antes del texto */
.geo-warning::before{
  content: "📍";
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
}





/* ======================================================
   BOTÓN CAMBIAR UBICACIÓN — versión discreta para header
   ====================================================== */

.navbar .icon-btn,
.navbar .icon-btn-active{

  /* apariencia suave */
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;

  border-radius: 12px;
  padding: 6px 9px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  color:#e5e7eb !important;
  font-weight:600;

  transition:.18s ease;
}

/* icono */
.navbar .icon-btn svg,
.navbar .icon-btn-active svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* texto más discreto */
.navbar .icon-btn .label,
.navbar .icon-btn-active .label{
  font-size:13px;
  color:inherit;
}

/* hover elegante */
.navbar .icon-btn:hover,
.navbar .icon-btn-active:hover{
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* estado activo: leve, no azul chillón */
.navbar .icon-btn-active{
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.40) !important;
}

/* ===== MÓVIL: compacto PERO con texto ===== */
@media (max-width:520px){

  .navbar .icon-btn,
  .navbar .icon-btn-active{
    padding:5px 8px;
    font-size:12.5px;
    gap:5px;
  }

  .navbar .icon-btn svg,
  .navbar .icon-btn-active svg{
    width:16px;
    height:16px;
  }

  /* 🔥 aseguramos que NO se oculte el texto */
  .navbar .icon-btn .label,
  .navbar .icon-btn-active .label{
    display:inline !important;
  }
}




/* ===== FIX: ciudad en una línea (sin wrap) ===== */
.location-row-top{
  flex-wrap: nowrap;      /* 🔥 no permitir saltos */
}

/* El enlace de ciudad debe poder encogerse (clave: min-width:0) */
.location-row-top a.geo-label{
  min-width: 0;           /* 🔥 NECESARIO para ellipsis en flex */
  flex: 1 1 auto;         /* que use el espacio disponible */
  display: inline-block;  /* para ellipsis */
  
  white-space: nowrap;    /* no salto de línea */
  overflow: hidden;       /* recorta */
  text-overflow: ellipsis;/* ... */
}

/* Los iconos y el select NO deben encogerse */
.location-row-top img,
.location-row-top .radio-select{
  flex: 0 0 auto;
}


/* La fila sigue empujando todo a la derecha */
.location-row-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
}

/* Bloque pin+ciudad pegado a la derecha y sin separarse */
.geo-city{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:auto;    /* 🔥 se pega a la derecha */
  min-width:0;         /* 🔥 permite ellipsis dentro */
}

/* Icono fijo */
.geo-city .geo-icon{
  flex:0 0 auto;
}

/* Texto flexible con ellipsis */
.geo-city .geo-link{
  min-width:0;
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-decoration:none;     /* opcional */
  color:inherit;            /* opcional */
}


.detectando{
  display:flex;
  flex-direction:column;   /* 🔥 CLAVE: vertical */
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  text-align:center;
}

/*cookies*/
.cookie-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#1f2937;
  z-index:999999;
  color:white;
  padding:14px 20px;
  z-index:9999;
  box-shadow:0 -2px 10px rgba(0,0,0,0.15);
  display:none;
}

.cookie-content{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.cookie-content a{
  color:#93c5fd;
  text-decoration:underline;
}

.cookie-buttons{
  display:flex;
  gap:10px;
}

.btn-accept{
  background:#16a34a;
  border:none;
  color:white;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}

.btn-reject{
  background:#dc2626;
  border:none;
  color:white;
  padding:8px 14px;
  border-radius:6px;
  cursor:pointer;
}


.cookie-buttons{
  display:flex;
  gap:8px;
}

.cookie-buttons button{
  font-size:13px;        /* ↓ texto más pequeño */
  padding:6px 10px;      /* ↓ menos alto y ancho */
  border-radius:5px;
  line-height:1.2;
}

.btn-accept{
  background:#16a34a;
  border:none;
  color:white;
  cursor:pointer;
}

.btn-reject{
  background:#dc2626;
  border:none;
  color:white;
  cursor:pointer;
}

.cookie-buttons button{
  padding:8px 18px;      /* más ancho horizontal */
  font-size:13px;
  white-space:nowrap;    /* 🔴 evita doble línea */
  min-width:130px;       /* asegura ancho mínimo */
  text-align:center;
}

.cookie-buttons{
  display:flex;
  gap:10px;
  justify-content:center;   /* 🔴 centra horizontalmente */
  width:100%;               /* ocupa todo el ancho */
}


/* Badge info dentro de la foto */
.photo-badge--info{
  border:0;
  cursor:pointer;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  line-height:1;
  background:rgba(0,0,0,.55);
  color:#fff;
  border-radius:999px;
  padding:0;
}

/* Popover */
.photo-attrib-pop{
  position:absolute;
  top:42px;              /* ajusta según tu altura de badges */
  right:10px;            /* sale cerca del icono */
  max-width:260px;
  background:rgba(17,24,39,.95);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  display:none;
  z-index:50;
}

.photo-attrib-pop a{
  color:#93c5fd;
  text-decoration:underline;
}

.photo-attrib-title{
  font-weight:700;
  margin-bottom:6px;
}

.photo-attrib-muted{
  opacity:.85;
  margin-top:6px;
  font-size:11px;
}


.photo-badge--info{
  border:0;
  cursor:pointer;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  border-radius:999px;
  padding:0;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0); /* evita blur por composición */
}

.photo-badge--info .ico-info{
  width:16px;
  height:16px;
  fill: currentColor;
  display:block;
}



.photo-attrib-pop{
  position:absolute;
  top:38px;
  right:6px;

  min-width:220px;
  max-width:320px;     /* antes 260 */
  width:max-content;   /* se adapta al texto */

  background:rgba(17,24,39,.96);
  color:#fff;
  border-radius:14px;
  padding:12px 14px;

  font-size:13px;
  line-height:1.35;

  box-shadow:0 12px 30px rgba(0,0,0,.45);
  display:none;
  z-index:50;
}

/* evita que los enlaces rompan en vertical raro */
.photo-attrib-pop a{
  color:#93c5fd;
  text-decoration:underline;
  word-break:break-word;
}

/* título más claro */
.photo-attrib-title{
  font-weight:600;
  margin-bottom:6px;
  font-size:13px;
}

/* separa líneas */
.photo-attrib-body div{
  margin-bottom:3px;
}







.cardsite-photo{
  position: relative; /* importante para el absoluto del logo */
}

.cardsite-logo{
  position:absolute;
  top:14px;
  left:14px;
  width:76px;
  height:76px;
  background:#fff;
  border-radius:12px;

  border:1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.08);

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:4;
}

.cardsite-logo img{
  width: 86%;
  height: 86%;
  object-fit: contain;
  display:block;
}


.btn-success {
    background: linear-gradient(180deg, #4a86e8, #3b73d1);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    transition: all 0.2s ease;
}

.btn-success:hover {
    background: linear-gradient(180deg, #5a95f0, #4a86e8);
}

.btn-success:active {
    transform: translateY(1px);
}

.page.dashboard .cardsite .cardsite-info .dashboard-site-actions button.btn-success {
    all: revert;
    background: linear-gradient(180deg, #4a86e8, #3b73d1) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 120px;
    text-align: center !important;
    transition: all 0.2s ease;
}

.page.dashboard .cardsite .cardsite-info .dashboard-site-actions button.btn-success:hover {
    background: linear-gradient(180deg, #5a95f0, #4a86e8) !important;
}

.page.dashboard .cardsite .cardsite-info .dashboard-site-actions button.btn-success:active {
    transform: translateY(1px);
}

.page.dashboard .cardsite .cardsite-info .dashboard-site-actions button.btn-danger {
    all: revert;
    background: linear-gradient(180deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 120px;
    text-align: center !important;
    transition: all 0.2s ease;
}

.page.dashboard .cardsite .cardsite-info .dashboard-site-actions button.btn-danger:hover {
    background: linear-gradient(180deg, #f87171, #ef4444) !important;
}



.image-slider{
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

.slider-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;

  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.92);
  color: #111;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  padding: 0;

  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: background .15s ease, transform .15s ease, opacity .15s ease;
}

.slider-btn:hover{
  background: #fff;
}

.slider-btn:active{
  transform: translateY(-50%) scale(0.96);
}

.slider-btn-left{
  left: 10px;
}

.slider-btn-right{
  right: 10px;
}

/* si quieres separarlos del logo/título puedes ajustar top */
.image-slider .slider-btn-left,
.image-slider .slider-btn-right{
  top: 50%;
}

.image-slider.single-image .slider-btn{
  display: none;
}

.current-location-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;   /* antes 180 */
}


.location-right{
  margin-left:auto;
  display:flex;
  align-items:center;   /* 🔑 centra verticalmente */
  gap:6px;
}
.radio-select{
  margin-top:0;
}


.location-row-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:100%;
}

.location-row-bottom{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  width:100%;
  padding-top:0;
}

.radio-label{
  margin:0;
  display:block;
}

.radio-select{
  margin-top:0;
}

.location-row-bottom{
  margin-top:6px;
}

.location-row-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:100%;
  flex-wrap:nowrap;
}

.location-change-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#f9fafb;
  color:#374151;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  line-height:1;
  flex:0 0 auto;
}

.location-change-btn svg{
  width:14px;
  height:14px;
  fill:currentColor;
  display:block;
}

.location-change-btn .label{
  color:inherit;
}

.location-change-btn:hover{
  background:#f3f4f6;
}

.geo-city{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.geo-link{
  white-space:nowrap;
  text-decoration:none;
  color:inherit;
}

.location-change-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid #9ca3af;
  border-radius:10px;
  background:#4a4a4a;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}


/* ===== Botón Cambiar: estilo antiguo ===== */
.location-change-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;

  height:30px !important;
  padding:0 12px !important;

  border:1px solid #8b8b8b !important;
  border-radius:999px !important;

  background:linear-gradient(180deg, #555 0%, #3f3f3f 100%) !important;
  color:#fff !important;
  text-decoration:none !important;

  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.18) !important;

  vertical-align:middle !important;
}

.location-change-btn:hover{
  background:linear-gradient(180deg, #606060 0%, #474747 100%) !important;
  color:#fff !important;
}

.location-change-btn svg{
  width:14px !important;
  height:14px !important;
  fill:currentColor !important;
  display:block !important;
  flex:0 0 auto !important;
}

.location-change-btn .label{
  color:inherit !important;
  display:inline !important;
  line-height:1 !important;
}

/* fila superior bien alineada */
.location-row-top{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  width:100% !important;
}

.geo-city{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-left:auto !important;
  min-width:0 !important;
  font-size:15px !important;
}

.geo-icon{
  flex:0 0 auto !important;
}

.geo-link{
  white-space:nowrap !important;
  text-decoration:none !important;
  color:inherit !important;
  flex:0 0 auto !important;
}

.location-change-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;

  height:28px !important;
  padding:0 12px !important;

  border:1px solid #d1d5db !important;
  border-radius:999px !important;

  background:#f3f4f6 !important;
  color:#374151 !important;
  text-decoration:none !important;

  font-size:15px !important;   /* antes 12px */
  font-weight:500 !important;

  line-height:1 !important;
  white-space:nowrap !important;

  box-shadow:none !important;
}

.location-change-btn:hover{
  background:#e5e7eb !important;
}

.location-change-btn:hover{
  background:#e5e7eb !important;
}



.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.prayer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  /*background: rgba(255, 255, 255, 0.12);*/
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #eaf7f1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.prayer-chip .prayer-icon {
  font-size: 14px;
  line-height: 1;
}

.prayer-chip .prayer-name {
  color: #bfe8d1;
  font-weight: 700;
}

.prayer-chip .prayer-time {
  color: #ffffff;
  font-weight: 700;
}

.prayer-icon{
  width:16px;
  height:16px;
  color:#9fe0c2;
}

html {
  touch-action: manipulation;
}

.weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.weather-icon {
  width: 14px;
  height: 14px;
  color: #bfe8d1;
  flex: 0 0 auto;
}

.weather-temp,
.weather-label {
  line-height: 1;
}

.weather-icon{
    width:18px;
    height:18px;
    object-fit:contain;
}


.field {margin-bottom:15px;}

.err {
    display: none;
    color: #d93025;
    font-size: 13px;
    margin-top: 6px;
}

.err.show {
    display: block;
}

.url-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.url-row input{
    flex:1;
    min-width:0;
    height:46px;
    border-radius:12px;
    border:1px solid #e7e7e7;
    padding:0 12px;
    box-sizing:border-box;
}

.paste-btn{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border:none;
    border-radius:12px;
    background:#3b7ddd;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.paste-btn:hover{
    background:#2f6bc3;
}


.btn-success,
.btn-danger {
  display: inline-block;
  width: auto !important;
  min-width: 120px;
  padding: 10px 28px !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease;
}

.btn-success {
  background: linear-gradient(180deg, #4a86e8, #3b73d1) !important;
  color: #fff !important;
}

.btn-success:hover {
  background: linear-gradient(180deg, #5a95f0, #4a86e8) !important;
}

.btn-danger {
  background: linear-gradient(180deg, #ef4444, #dc2626) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: linear-gradient(180deg, #f87171, #ef4444) !important;
}

.dashboard-site-actions,
.cardsite-actions,
.mysite-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-site-actions form,
.cardsite-actions form,
.mysite-actions form {
  margin: 0;
}


.cardsite-actions-top{
    display:flex;
    gap:8px;
    margin-bottom:10px;
}

.dashboard-site-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mysites-site-actions{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top:10px;
}

.mysites-site-actions form{
  margin: 0;
}

.mysites-site-actions button{
  width: auto !important;
}