.glass-card {
background: rgba(255,255,255,0.98) !important;
box-shadow: 0 4px 18px 0 rgba(44,23,13,0.10), 0 1px 4px 0 rgba(200,0,0,0.06) !important;
backdrop-filter: blur(4px) saturate(1.1);
-webkit-backdrop-filter: blur(4px) saturate(1.1);
border-radius: 14px !important;
border: 1.5px solid #f3eaea !important;
overflow: hidden;
position: relative;
width: 220px;
max-width: 96vw;
margin: 0 auto 18px auto;
padding: 14px 8px 10px 8px !important;
transition: box-shadow 0.18s, border-color 0.18s;
}
.glass-title {
font-size: 1.08rem !important;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
font-weight: 800 !important;
color: #c00 !important;
text-shadow: 0 1px 4px #ffd6d6, 0 1px 0 #fff;
letter-spacing: 0.01em;
margin-bottom: 8px !important;
border-bottom: 1px solid #d90000;
padding-bottom: 6px;
background: none !important;
text-align: center !important;
text-transform: uppercase;
}
.info-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.info-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.45rem;
padding: 0.22rem 0.7rem 0.22rem 0.3rem;
font-size: 0.97rem;
color: #232323;
font-weight: 500;
border: none;
background: rgba(255,255,255,0.99);
box-shadow: 0 1px 6px 0 rgba(200,0,0,0.03);
border-radius: 8px;
margin: 0;
min-height: 22px;
border-bottom: none;
position: relative;
transition: background 0.14s, box-shadow 0.14s, transform 0.14s;
}
.info-link:hover .info-item {
background: #fff6f6;
box-shadow: 0 2px 12px 0 rgba(200,0,0,0.10);
border-radius: 14px;
transform: translateY(-1px) scale(1.01);
z-index: 2;
}
.info-ico {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgba(200,0,0,0.06);
margin: 0;
padding: 0;
border: 1.5px solid #ffeaea;
transition: background 0.14s, box-shadow 0.14s, border-color 0.14s;
}
.info-ico svg, .info-ico img {
width: 14px;
height: 14px;
color: #c00;
filter: drop-shadow(0 1px 3px #ffd6d6);
transition: color 0.14s, filter 0.14s;
}
.info-link:hover .info-ico {
background: #fff6f6;
box-shadow: 0 8px 32px 0 rgba(200,0,0,0.18);
border-color: #ffc6c6;
}
.info-link:hover .info-ico svg, .info-link:hover .info-ico img {
color: #a00;
filter: drop-shadow(0 4px 16px #ffc6c6);
}
.info-label {
display: flex;
align-items: center;
font-size: 0.97rem;
font-weight: 500;
color: #232323;
line-height: 1.2;
margin: 0;
padding: 0;
letter-spacing: 0.01em;
text-shadow: 0 1px 0 #fff, 0 1px 3px rgba(44,23,13,0.04);
}
.info-price {
color: #c00;
font-weight: 700;
}
.fsb-open-badge, .content span.fsb-open-badge {
display: inline-flex !important;
align-items: center;
font-size: 10px !important;
font-weight: 700;
padding: 2px 7px !important;
border-radius: 10px;
margin-left: 6px;
vertical-align: middle;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.5 !important;
white-space: nowrap;
}
.fsb-badge-open {
background: #e8f5e9;
color: #2a7a4b;
border: 1px solid #a5d6a7;
}
.fsb-badge-closed {
background: #fde8e8;
color: #c00;
border: 1px solid #f5c6c6;
}
.fsb-plat-disabled {
opacity: 0.45;
filter: grayscale(100%);
cursor: not-allowed !important;
pointer-events: auto;
position: relative;
}
.fsb-plat-disabled:hover::after {
content: attr(title);
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
background: #222;
color: #fff;
font-size: 12px;
padding: 5px 12px;
border-radius: 7px;
white-space: nowrap;
margin-top: 7px;
z-index: 99;
opacity: 0.97;
pointer-events: none;
box-shadow: 0 2px 12px rgba(0,0,0,0.13);
}
.fsb-plat-ico img, .bar-social-link img {
width: 24px;
height: 24px;
object-fit: contain;
filter: grayscale(0%) drop-shadow(0 2px 6px rgba(0,0,0,0.08));
transition: filter 0.18s, transform 0.18s;
}
.bar-social-link:hover img, .fsb-plat:hover .fsb-plat-ico img {
filter: grayscale(0%) brightness(1.15) drop-shadow(0 4px 12px rgba(200,0,0,0.13));
transform: scale(1.13) rotate(-2deg);
}
/* Sticky wrapper para sidebar info + iconos sociales */
.fsb-sticky-wrap {
position: sticky;
top: 38px;
z-index: 20;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: visible !important;
}
.fsb-sticky-wrap .fsb-card {
position: static;
margin-bottom: 0;
}
.fsb-sticky-wrap .fsb-social-container {
margin-bottom: 12px;
}
.glass-card .fsb-social-container {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #ede7e0;
margin-bottom: 0;
}
.sidebar {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 600px;
/* Asegura espacio para sticky */
position: relative;
overflow: visible !important;
}
/* Sidebar — Tarjeta sticky moderna -----------------------------------*/
.fsb-card.info-minimal {
background: linear-gradient(120deg, #fff 60%, #f7f4f1 100%) padding-box, linear-gradient(90deg, #c00 0%, #fff 100%) border-box;
border-radius: 26px;
box-shadow: 0 16px 48px 0 rgba(44,23,13,0.22), 0 2px 16px 0 rgba(200,0,0,0.10);
border: 3px solid transparent;
border-left: 7px solid #c00;
padding: 48px 36px 36px 32px;
margin-top: 44px;
margin-bottom: 44px;
width: 370px;
max-width: 99vw;
min-width: 260px;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
position: relative;
overflow: visible;
transition: box-shadow 0.22s, border-color 0.22s;
}
.fsb-card.info-minimal::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 7px;
border-radius: 18px 0 0 18px;
background: linear-gradient(180deg, #c00 0%, #ffb199 100%);
box-shadow: 0 0 12px 2px rgba(200,0,0,0.13);
z-index: 2;
}
.sidebar {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 600px;
position: relative;
overflow: visible !important;
width: 340px;
max-width: 98vw;
padding-right: 0;
}
/* Separador elegante para apartados */
.fsb-separator { display: none; }
.info-price {
color: #c00;
font-weight: 600;
}
}
/* Plataformas — Botones grandes y coloridos */
.fsb-platforms {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 22px;
justify-content: flex-start;
}
.fsb-plat {
display: flex;
align-items: center;
gap: 13px;
background: linear-gradient(120deg, #f7f4f1 70%, #ece6df 100%);
border-radius: 14px;
padding: 13px 22px;
font-size: 15px;
font-weight: 600;
color: #222;
text-decoration: none;
box-shadow: 0 2px 12px rgba(44,23,13,0.09);
border: 1.5px solid #ece6df;
transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s, background 0.18s;
letter-spacing: 0.01em;
}
.fsb-plat:hover {
box-shadow: 0 8px 24px rgba(44,23,13,0.16);
transform: translateY(-2px) scale(1.04);
border-color: #c00;
background: linear-gradient(120deg, #fff 70%, #f7f4f1 100%);
}
.fsb-plat-ico {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #fff 60%, #f7f4f1 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(44,23,13,0.10);
}
.fsb-plat-ico img {
width: 26px;
height: 26px;
object-fit: contain;
}
.fsb-plat-call { border-left: 4px solid #c00; }
.fsb-plat-reserve { border-left: 4px solid #2a7a4b; }
.fsb-plat-maps { border-left: 4px solid #1a5cc8; }
.fsb-plat-fork { border-left: 4px solid #0f8e56; }
.fsb-plat-ta { border-left: 4px solid #15b884; }
/* Filas de información — icono redondo */
.fsb-row {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 0;
border-bottom: 1px solid #ede7e0;
font-size: 14px;
color: #3a2c1a;
line-height: 1.6;
font-weight: 400;
letter-spacing: 0.01em;
}
.fsb-row:last-child { border-bottom: none; }
.fsb-row-ico {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #fff 60%, #f7f4f1 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(44,23,13,0.07);
}
.fsb-row-ico img {
width: 20px;
height: 20px;
object-fit: contain;
}
.fsb-row-val { flex: 1; min-width: 0; word-break: break-word; }
.fsb-price { color: #c00; font-weight: 700; }
/* Redes sociales - Contenedor con flechitas */
.fsb-social-container {
width: 100%;
margin-top: 8px;
padding: 0;
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}
.fsb-social-arrow {
width: 28px;
height: 28px;
border: 1px solid #dcc8b5;
background: linear-gradient(135deg, #ffffff 0%, #f8f4f0 100%);
border-radius: 50%;
color: #8f5e1f;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.22s ease;
flex-shrink: 0;
padding: 0;
font-weight: bold;
}
.fsb-social-arrow:hover:not(:disabled) {
background: linear-gradient(135deg, #fdfcfb 0%, #faf6f1 100%);
border-color: #9e7126;
color: #9e7126;
transform: scale(1.1);
}
.fsb-social-arrow:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.fsb-social-viewport {
width: 174px;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.fsb-social-track {
display: flex;
gap: 10px;
padding: 0;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
}
.fsb-social-track::-webkit-scrollbar {
display: none;
}
.social-icon-link {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff 0%, #f8f4f0 100%);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(44,23,13,0.1);
border: 1px solid #dcc8b5;
transition: all 0.22s ease;
flex-shrink: 0;
text-decoration: none;
}
.social-icon-link:hover {
box-shadow: 0 8px 20px rgba(44,23,13,0.18);
transform: translateY(-4px) scale(1.1);
border-color: #9e7126;
background: linear-gradient(135deg, #fdfcfb 0%, #faf6f1 100%);
}
.social-icon-link img {
width: 24px;
height: 24px;
object-fit: contain;
}
/* Basic ---------------------------------------- */
html{background: #fff url(../images/body_bg.jpg);}
body {font-size: 14px;text-align: center; margin :0; font-family:Arial, Helvetica, sans-serif; color: #333;background: url(../images/strip.png) 0 40px repeat-x;}
/* Ocultar elementos fantasma inyectados por plugins JS */
#ui-datepicker-div.ui-helper-hidden-accessible{position:absolute !important; clip:rect(1px,1px,1px,1px) !important; overflow:hidden !important; height:1px !important; width:1px !important; margin:-1px !important; padding:0 !important; border:0 !important;}
div.pp_overlay{position:fixed !important;}
.wrapper{text-align: left;max-width: 1200px;width: 100%;margin: 0px auto; overflow: visible; padding :0px; position: relative; height: auto;}
.columns-wrap{display: flex; flex-wrap: wrap; align-items: stretch; overflow: visible;}
/* Especiale --------------------------------*/
.helvetica{font-family: 'HelveticaCondensedBoldRegular';}
.round {
width:inherit;
border-radius: 1ex;
}
.shadow{
box-shadow: 2px 2px 4px #333;
}
.small{font-size: 11px; line-height: 15px;}
/* General ------------------------------*/
a{text-decoration: none;}
a img,img{border:none;}
/* ═════════════════════════════════════════════════════════════════════
EL MARCO DE FOTO · `.eb-foto` · CONTRATO ÚNICO DEL SITIO
═════════════════════════════════════════════════════════════════════
TODA caja que enseñe una foto SUBIDA POR UN CLIENTE lleva esta clase. No es
un adorno ni una opción: es la única forma de que la foto llene el recuadro
entero —sin bordes, sin zonas vacías y sin deformar la tarjeta— CUALQUIERA
que sea la proporción del archivo que suban.
Cómo se usa — dos piezas, las dos obligatorias:
1. La CAJA lleva `.eb-foto` y **una altura que no dependa de la foto**:
`height` fijo, `aspect-ratio`, o `align-self:stretch` + `min-height`.
2. La FOTO es hija directa: `,
pero `.mobile-menu a` sí lleva !important en todo, así que el rótulo NO
puede ser un o heredaría el aspecto de una opción más. */
.mobile-menu-grupo{
margin:0;padding:18px 24px 6px;
font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
color:#a0a0a8;
border-bottom:1px solid rgba(0,0,0,0.04);
}
/* ── La puerta del hostelero, la primera del menú del móvil ───────────────
En la barra de arriba no cabe (ver `.hdr-negocio`: a 900px quedan 4px entre
las banderas y el logotipo), así que en móvil su puerta es esta. Va la
primera y con dos líneas —la pregunta que hace que se reconozca y lo que
gana— porque una palabra suelta como «Panel» no le dice nada a nadie.
⚠ `.mobile-menu a` impone con !important el relleno, el tamaño y el color de
una opción normal, así que hay que desmontarlo con !important o esto sale
como un enlace más de la lista. Es el mismo tropiezo que ya documenta
`.mobile-menu-grupo` justo aquí arriba.
⚠ Gotcha #1: `` y `` no son ``, así que la regla legacy
`.content span` no les llega — pero `.mobile-menu` vive fuera de `.content`
de todas formas. Se dejan las medidas explícitas por si eso cambiara. */
.mobile-menu a.mobile-menu-negocio{
display:flex!important;align-items:center;gap:12px;
padding:16px 24px!important;
background:#fff5f5!important;
border-bottom:1px solid rgba(225,17,18,0.16)!important;
color:#0f1115!important;
min-height:64px;
}
.mobile-menu a.mobile-menu-negocio:hover,
.mobile-menu a.mobile-menu-negocio:focus-visible{
background:#ffe9e9!important;color:#0f1115!important;padding-left:24px!important;
}
.mobile-menu-negocio-ico{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;
background:var(--brand-red,#E11112);color:#fff;padding:0!important;
}
.mobile-menu-negocio-ico svg{width:20px;height:20px;display:block;}
.mobile-menu-negocio-txt{display:block;min-width:0;padding:0!important;}
.mobile-menu-negocio-txt strong{
display:block;font-size:14.5px;line-height:1.25;color:var(--brand-red,#E11112);
padding:0!important;
}
.mobile-menu-negocio-txt small{
display:block;font-size:11.5px;line-height:1.35;color:#6b6b73;margin-top:2px;
padding:0!important;
}
.mobile-menu-footer{padding:20px 24px;border-top:1px solid rgba(0,0,0,0.06);text-align:center;font-size:11px;color:#999;}
.mobile-menu-backdrop{position:fixed;inset:0;background:rgba(12,14,18,0.42);z-index:9998;display:none;}
.mobile-menu-backdrop:not([hidden]){display:block;}
body.mobile-menu-open{overflow:hidden;}
/* Columnas ------------------------------*/
.sidebar{width:260px;padding:0 0 0 14px;display:block;float:left;clear:none;overflow:visible;position:relative;z-index:1;box-sizing:border-box;}
.content{width:calc(100% - 260px);padding:10px 10px 0 0;display:block;float:left;clear:none;overflow:visible;position:relative;z-index:1;}
.content .innerFull{width: 100%; padding: 10px 10px; display: block; float: left; clear: none; overflow: hidden; line-height: 140%; text-align: justify; box-sizing: border-box;}
.content .izquierda{width: 55%; display: block; float: left; clear: none; padding: 0px 10px 10px 0; box-sizing: border-box;}
.content .derecha{width: 45%; display: block; float: left; clear: none; padding: 0px 0; box-sizing: border-box;}
.page-landing .wrapper{overflow: visible;}
.landing-fullwidth{width: 100% !important; max-width: 1200px; padding-right: 0; overflow: visible;}
/* El footer global se queda con el ancho reservado para la barra lateral
(calc(100% - 260px)) salvo en páginas "landing" (p.ej. Qué Es), donde el
contenido ya ocupa el ancho completo vía .landing-fullwidth: el footer
debe igualar ese mismo ancho, si no queda descuadrado respecto a las cajas. */
body.page-landing #footer{width: 100% !important; max-width: 1200px;}
/* Mismo caso para páginas sin sidebar (contacto, eventos por fecha, fichas
de menú/evento individuales): el contenido ya usa .content.no-sidebar a
ancho completo, el footer debe igualarlo o queda corto/descentrado. */
body.no-sidebar-page #footer{width: 100% !important; max-width: 1200px;}
/* Panel de cliente (y su login): el contenido va a ancho completo vía
.cpanel-fullwidth (1190px) pero el footer seguía con el hueco de 260px
reservado para la barra lateral, quedando notablemente más corto que las
tarjetas de arriba. Se iguala al MISMO ancho del contenido (1190px, no
1200px) para que los bordes coincidan exactamente. */
body.page-panel #footer,
body.page-perfil #footer{
width: 100% !important;
max-width: 1180px; /* = ancho visible real de las tarjetas (.content lleva 10px de padding derecho) */
padding-left: 0; padding-right: 0; /* sin el inset lateral de 10px, para que la barra empiece y acabe donde las tarjetas */
}
body.page-panel #footer:before,
body.page-perfil #footer:before{left: 0; right: 0;}
/* Al ensanchar, el menú del pie se quedaba apelotonado en el centro con
mucho aire a los lados: se reparte con más separación. El padding
izquierdo deja sitio al logo, que va superpuesto en esa esquina. */
body.page-panel #footer nav,
body.page-perfil #footer nav{gap: 40px; padding: 0 140px;}
#buscar{margin-top: 10px;}
/* Sidebar Boxes ------------------------------*/
.redbox{height: auto; float: left; clear: both; padding: 13px; margin-bottom: 20px; color: #fff; box-sizing: border-box;
background: #c00;
background: -webkit-linear-gradient(top, #ff0000 0%,#cc0000 100%);
background: linear-gradient(top, #ff0000 0%,#cc0000 100%);}
.redbox h3{color: #fff; font-size: 18px; margin-bottom: 15px; text-shadow: #333 1px 1px 1px}
.redbox label{display: block; float: none; clear: both; width: 100%; height: 20px; line-height: 20px;}
.redbox input{width: 100%; height: 20px; border: 1px solid #c00; padding: 4px; margin-bottom: 8px; box-sizing: border-box;}
.redbox input[type="submit"]{ background: #c00; color: #fff; text-align: center; border: 1px solid #fff; width: 100%; height: 30px; padding: 0; font-size: 16px; box-sizing: border-box;}
.redbox input[type="submit"]:hover,.redbox input[type="submit"].focus{font-weight: bold;background: #f00;}
.redbox a{color: #fff; display: block; float: none; clear: both;height: 20px; line-height: 20px; font-size: 12px; }
div.greybox{width:100%; height: auto; float: left; clear: both; padding: 13px; margin-bottom: 20px; color: #333; box-sizing: border-box;
background: #dbdbdb;
background: -webkit-linear-gradient(top, #eeeeee 0%,#dbdbdb 100%);
background: linear-gradient(top, #eeeeee 0%,#dbdbdb 100%);}
.sidebar .greybox,.sidebar .redbox{width:100% !important;min-height:auto !important;box-sizing:border-box;}
.content .izquierda .greybox,.content .izquierda .redbox{width: 100%; box-sizing: border-box;}
.content .derecha .greybox,.content .derecha .redbox{width: 100%; box-sizing: border-box;}
.content .greybox,.content .redbox{width: 100%; max-width: 100%; box-sizing: border-box;}
/* Lista Bares ------------------------------*/
ul.bares:not(.home-featured-track):not(.rc-list) li{display: flex; align-items: flex-start; clear: both; background: url(../images/contentSeparator.png) left bottom no-repeat; padding-bottom:8px; margin-bottom: 8px; height: auto; line-height: 140%; width: 100%;}
ul.bares:not(.home-featured-track):not(.rc-list) li div{flex: 1; min-width: 0; height: auto; overflow: hidden; }
ul.bares:not(.home-featured-track):not(.rc-list) li a{color: #333; text-decoration: none; font-weight: bold; display: block; float: none; clear: both;}
ul.bares:not(.home-featured-track):not(.rc-list) li strong{color: #333; text-decoration: none; font-weight: bold; display: block; float: none; clear: both;}
ul.bares:not(.home-featured-track):not(.rc-list) li a.thumb{ width: 190px; min-width: 190px; height: 140px; border: 1px solid #333; display: block; overflow: hidden; margin: 5px 15px 0 0;}
ul.bares:not(.home-featured-track):not(.rc-list) li a.red,.red{color: #d30000; text-decoration: none; font-size: 12px; font-weight: bold; float: left; clear: none; margin-right: 5px;}
ul.bares:not(.home-featured-track):not(.rc-list) li a:hover,ul.bares:not(.home-featured-track):not(.rc-list) li:hover a{color: #d30000;}
ul.bares:not(.home-featured-track):not(.rc-list) li a.flecha{width: 32px; min-width: 32px; height: 126px; display: block; overflow: hidden; background: url(../images/sideArrows.png) no-repeat; margin: 20px 10px;}
ul.bares:not(.home-featured-track):not(.rc-list) li:hover a.flecha, ul.bares:not(.home-featured-track):not(.rc-list) li a.flecha:hover{background-position: 0 -126px;}
/*ul.bares li span.bread{color: #d30000; text-decoration: none; font-size: 12px; font-weight: bold;}*/
/* Sidebar — Más Visitados estilo news horizontal (tipo AS.com) ---------*/
.sv-section{display:block;width:100%;padding-top:10px;}
.sv-section-head{display:block;margin-bottom:8px;padding-bottom:6px;}
.sv-section-title {
font-size: 1.38rem;
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
font-weight: 900;
letter-spacing: 0.01em;
margin: 0 0 6px 0;
padding: 0;
color: #c00;
border-bottom: 2.5px solid #ffc6c6;
display: block;
line-height: 1.2;
text-align: left;
text-shadow: 0 2px 12px #ffd6d6, 0 1px 0 #fff, 0 2px 8px rgba(44,23,13,0.09);
letter-spacing: 0.02em;
}
/* Cuando sv-section-title tiene glass-title, usa solo el borde de glass-title */
.sv-section-title.glass-title {
border-bottom: none;
}
/* Sidebar — Ficha Rápida del establecimiento ----------------------------*/
.fsb-section{display:block;width:100%;padding-top:10px;}
.fsb-section .sv-section-head{margin-bottom:14px;}
.fsb-ctas{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.fsb-cta{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;line-height:1.2;transition:opacity 0.15s ease,transform 0.15s ease;}
.fsb-cta:hover{opacity:0.88;transform:translateY(-1px);}
.fsb-cta-icon{font-size:16px;flex-shrink:0;}
.fsb-cta-call{background:#c00;color:#fff;}
.fsb-cta-reserve{background:#2a7a4b;color:#fff;}
.fsb-cta-maps{background:#e8f0fe;color:#1a5cc8;border:1px solid #c5d4f6;}
.fsb-rows{display:flex;flex-direction:column;gap:0;}
.fsb-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid #f0f0f0;font-size:12px;color:#444;line-height:1.4;}
.fsb-row:last-child{border-bottom:none;}
.fsb-row-icon{font-size:14px;flex-shrink:0;width:18px;text-align:center;margin-top:1px;}
.fsb-row-val{flex:1;min-width:0;word-break:break-word;}
.fsb-price{color:#c00;font-weight:700;}
.fsb-sep{color:#bbb;margin:0 2px;}
.fsb-link{color:#1a5cc8;text-decoration:none;word-break:break-all;}
.fsb-link:hover{text-decoration:underline;}
/* Sidebar — Ficha Rápida: plataformas y redes sociales ----------------*/
.fsb-platforms{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.fsb-section .bar-plat{min-height:34px;padding:7px 12px;font-size:12px;border-radius:7px;}
ul.populares{list-style:none;margin:0;padding:0;display:block;}
ul.populares li.sv-card{display:block;margin:0;padding:0;float:none;clear:none;width:auto;height:auto;background:transparent;background-image:none;border-bottom:1px solid #e8e8e8;}
ul.populares li.sv-card:last-child{border-bottom:none;}
.sv-card-inner{display:flex;align-items:flex-start;gap:12px;padding:12px 0;}
.sv-card-left{flex:1;min-width:0;}
.sv-card-right{flex-shrink:0;width:88px;}
.sv-card-right a,.sv-card-right a.sv-card-img-link{display:block;width:88px;height:70px;overflow:hidden;border-radius:4px;background:#ebebeb;}
.sv-card-right img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease;}
ul.populares li.sv-card:hover .sv-card-right img{transform:scale(1.05);}
.sv-card-cat{display:block;font-size:9px;font-weight:700;color:#c00;text-transform:uppercase;letter-spacing:1.3px;margin-bottom:4px;}
.sv-card-name{font-size:12px;font-weight:700;color:#1a1a1a;text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:5px;}
.sv-card-name:hover{color:#c00;}
.sv-card-loc{font-size:10px;color:#777;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-card-meta{font-size:10px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-sep{color:#ccc;margin:0 3px;}
.sv-price{color:#c00;font-weight:700;}
/* Eventos Destacados----------------------------*/
ul.destacados{display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; width: 100%; height: auto; line-height: 140%; overflow: visible;}
ul.destacados li{flex: 0 0 calc(25% - 9px); min-width: 0; height: auto; line-height: 140%; overflow: hidden; box-sizing: border-box;}
ul.destacados li a{color: #333; text-decoration: none; font-weight: bold; display: block;}
ul.destacados li strong{color: #333; text-decoration: none; font-weight: bold; display: block; font-size: 12px;}
ul.destacados li a.eventThumb{width: 100%; height: 120px; border: 1px solid #ddd; display: block; overflow: hidden; margin: 0 0 5px; border-radius: 6px; box-sizing: border-box;}
ul.destacados li a.eventThumb img{width: 100%; height: 100%; object-fit: cover;}
ul.destacados li a.red{color: #d30000; text-decoration: none; font-size: 12px; font-weight: bold; margin-right: 5px;}
ul.destacados li a:hover,ul.bares li:hover a{color: #d30000;}
.content ul li,.content ol li,.content p,.content span:not(.sr-tab-count):not(.ss-head-count):not(.sr-tab):not(.ss-sf-label):not(.ss-expand-btn):not(.sr-date-chip):not(.sr-hdr-eyebrow):not(.sr-hdr-count){ font-size: 14px; padding: 0; padding-bottom: 12px}
/* Index ------------------------------*/
#minimap,#miniform{display: block; float: left; clear: none; height: auto; width: 190px; box-sizing: border-box;}
#minimap{padding-top: 10px;}
#miniform{width: 170px; padding-left: 10px; box-sizing: border-box;}
#miniform fieldset.corto{width:100%;box-sizing:border-box;}
#miniform fieldset.corto label{width:100%;box-sizing:border-box;margin-bottom:4px;}
#miniform fieldset.corto select,
#miniform fieldset.corto div select{width:100%;box-sizing:border-box;padding-right:20px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E") right 5px center/8px no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:6px;}
#miniform fieldset.corto input[type="submit"]{width:100%;box-sizing:border-box;margin-top:6px;}
/* LIstas Perfil ----------------------------*/
ul.listasPerfil,ul.listasPerfil li{width: 400px; height: auto; float: left; clear: both; overflow: hidden; display: block;}
ul.listasPerfil li{height: 24px; border-bottom: 1px dotted #fff;}
ul.listasPerfil li p,ul.listasPerfil li a{width: 24px; height: 24px; display: block; float: left; clear: none; overflow: hidden; margin-right: 5px;}
ul.listasPerfil li p{width: 290px;}
ul.listasPerfil li a.borrar{background: url(../images/delete.png) no-repeat; text-indent: -9999px;}
ul.listasPerfil li button.borrar{
background: url(../images/delete.png) no-repeat; text-indent: -9999px;
width: 24px; height: 24px; display: block; float: left; clear: none; overflow: hidden;
margin-right: 5px; border: none; padding: 0; cursor: pointer;
}
ul.listasPerfil li a.editar{background: url(../images/edit.png) no-repeat;text-indent: -9999px;}
ul.listasPerfil li a.menu{background: url(../images/menu.png) no-repeat;text-indent: -9999px;}
ul.listasPerfil li a.estado0{background: url(../images/estado0.png) bottom left no-repeat;text-indent: -9999px;}
ul.listasPerfil li a.estado1{background: url(../images/estado1.png) bottom left no-repeat;text-indent: -9999px;}
ul.servs{width: 100%; max-width: 100%; display: block; float: left; clear: both; overflow: hidden; margin-bottom: 10px;}
ul.servs li{width: 210px; height: 20px; display: block; float: left; clear: none; text-align: left; overflow: hidden; margin: 0 16px 5px 0; background: #d0d0d0;}
ul.servs li div.imgcontainer{width: 210px; height: 200px; display: block; float: none; clear: both; position: relative;}
ul.servs li div a{width: 210px; height: 120px; padding: 0px; display: block;float: none; clear: both; text-align: center; overflow: hidden;}
ul.servs li div a.acciones{width: 120px; height: 12px; padding: 5px; display: block;float: none; clear: both; text-align: center; color: #fff; background: #c00; overflow: hidden; margin: 5px auto; font-size: 12px;}
ul.servs li div p.mensaje{width: 200px; height: auto; padding: 5px; display: block;float: left; clear: both; text-align: center; color: #333; background: #FAFAD2; overflow: hidden; margin: 5px auto; font-size: 12px;}
.corto{width: 150px;}
/* ficha bar — tarjeta principal */
.bar-card{position: relative; background: linear-gradient(180deg, #fffdfa 0%, #f8f4ee 100%); border: 1px solid #d8cdc1; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px rgba(61,40,24,0.12); margin-bottom: 18px; padding: 22px; display: flex; align-items: center; gap: 24px; box-sizing: border-box;}
.bar-card:before{content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #cc0000 0%, #8f140d 55%, #c5a06a 100%);}
.bar-card-left{flex: 0 0 286px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-self: center;}
.bar-card-photo {
width: 210px;
height: 160px;
overflow: hidden;
border-radius: 10px;
background: #ece6df;
margin-bottom: 8px;
box-shadow: 0 4px 14px rgba(30,19,11,0.10);
}
.bar-card-photo .fotoGrande {
width: 210px;
height: 160px;
display: block;
margin: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
.fotoGrande {
width: 210px;
height: 160px;
display: block;
overflow: hidden;
margin: 0;
border-radius: 10px;
}
.fotoGrande img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease, filter 0.35s ease;
}
.bar-card-photo:hover .fotoGrande img {
transform: scale(1.035);
filter: saturate(1.04);
}
/* ===== PREMIUM GALLERY + LIGHTBOX ===== */
.gallery-section{margin: 28px 0 30px;}
.gallery-section h4{display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #6b5947;}
.gallery-container{position: relative; width: 100%; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at top, #415f67 0%, #284148 55%, #16282d 100%); box-shadow: 0 18px 40px rgba(27,18,10,0.18); border: 1px solid rgba(117,89,55,0.18);}
.gallery-container:before{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0.08) 100%); pointer-events: none; z-index: 2;}
/* Main carousel */
.gallery-main{position: relative; width: 100%; height: 440px; overflow: hidden; cursor: pointer;}
.gallery-track{display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform;}
.gallery-slide{min-width: 100%; height: 100%; position: relative;}
.gallery-slide:after{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.18) 100%); pointer-events: none;}
.gallery-slide img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease, filter 0.4s ease; filter: saturate(1.03) contrast(1.02);}
.gallery-slide img:hover{transform: scale(1.035);}
/* Nav arrows */
.gallery-arrow{position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(18,30,34,0.68); color: #fff; border: 1px solid rgba(255,255,255,0.18); font-size: 20px; cursor: pointer; z-index: 4; display: flex; align-items: center; justify-content: center; transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 18px rgba(0,0,0,0.18);}
.gallery-arrow:hover{background: rgba(12,22,25,0.88); transform: translateY(-50%) scale(1.06); box-shadow: 0 14px 24px rgba(0,0,0,0.24);}
.gallery-prev{left: 18px;}
.gallery-next{right: 18px;}
/* Counter badge */
.gallery-counter{position: absolute; right: 18px; bottom: 86px; background: rgba(12,20,23,0.72); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; z-index: 4; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); letter-spacing: 1px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 18px rgba(0,0,0,0.18);}
/* Thumbnail strip */
.gallery-thumbs{display: flex; gap: 8px; padding: 14px 16px 16px; overflow-x: auto; background: linear-gradient(180deg, rgba(15,25,29,0.92) 0%, rgba(9,16,19,0.98) 100%); scroll-behavior: smooth; border-top: 1px solid rgba(255,255,255,0.08);}
.gallery-thumbs::-webkit-scrollbar{height: 4px;}
.gallery-thumbs::-webkit-scrollbar-track{background: rgba(255,255,255,0.04);}
.gallery-thumbs::-webkit-scrollbar-thumb{background: rgba(213,178,125,0.42); border-radius: 999px;}
.gallery-thumb{flex: 0 0 88px; height: 62px; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: 0.58; transition: transform 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; border: 2px solid transparent; position: relative; box-shadow: 0 8px 16px rgba(0,0,0,0.14);}
.gallery-thumb::after{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.34) 100%); transition: opacity 0.25s ease;}
.gallery-thumb:hover{opacity: 0.88; transform: translateY(-2px);}
.gallery-thumb:hover::after{opacity: 0.18;}
.gallery-thumb.active{opacity: 1; border-color: #d8b07d; box-shadow: 0 0 0 1px rgba(216,176,125,0.28), 0 10px 18px rgba(0,0,0,0.22);}
.gallery-thumb.active::after{opacity: 0;}
.gallery-thumb img{width: 100%; height: 100%; object-fit: cover; display: block;}
/* ===== LIGHTBOX FULLSCREEN ===== */
.gallery-lightbox{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;}
.gallery-lightbox.open{opacity: 1; visibility: visible;}
.gallery-lb-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7,10,12,0.95);}
.gallery-lb-close{position: absolute; top: 18px; right: 22px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.gallery-lb-close:hover{background: rgba(255,255,255,0.2); transform: rotate(90deg);}
.gallery-lb-arrow{position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); font-size: 22px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.gallery-lb-arrow:hover{background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.08);}
.gallery-lb-prev{left: 24px;}
.gallery-lb-next{right: 24px;}
.gallery-lb-content{position: relative; z-index: 1; max-width: 88vw; max-height: 72vh; display: flex; align-items: center; justify-content: center; padding: 14px;}
.gallery-lb-content img{max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px; transition: opacity 0.3s ease; box-shadow: 0 24px 60px rgba(0,0,0,0.52);}
.gallery-lb-content img.gallery-lb-loading{opacity: 0.3;}
.gallery-lb-counter{position: relative; z-index: 1; color: rgba(255,255,255,0.8); font-size: 12px; margin-top: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;}
.gallery-lb-thumbs{position: relative; z-index: 1; display: flex; gap: 8px; padding: 16px 8px 8px; max-width: 82vw; overflow-x: auto; scroll-behavior: smooth;}
.gallery-lb-thumbs::-webkit-scrollbar{height: 4px;}
.gallery-lb-thumbs::-webkit-scrollbar-thumb{background: rgba(213,178,125,0.45); border-radius: 999px;}
.gallery-lb-thumb{flex: 0 0 72px; height: 48px; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: 0.4; transition: all 0.25s; border: 2px solid transparent; box-shadow: 0 8px 18px rgba(0,0,0,0.18);}
.gallery-lb-thumb:hover{opacity: 0.78; transform: translateY(-2px);}
.gallery-lb-thumb.active{opacity: 1; border-color: #d8b07d; box-shadow: 0 0 0 1px rgba(216,176,125,0.25), 0 12px 22px rgba(0,0,0,0.24);}
.gallery-lb-thumb img{width: 100%; height: 100%; object-fit: cover; display: block;}
.bar-platforms{display: flex; flex-direction: column; gap: 8px; margin-bottom: 0;}
.bar-plat{display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; letter-spacing: 0.2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.12);}
.bar-plat img{width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; background: rgba(255,255,255,0.14); padding: 1px;}
.bar-plat:hover{transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 18px rgba(0,0,0,0.18); filter: saturate(1.05);}
.bar-plat-reserva{background: linear-gradient(135deg, #b10000 0%, #870d0d 100%);}
.bar-plat-fork{background: linear-gradient(135deg, #0f8e56 0%, #0a6640 100%);}
.bar-plat-ta{background: linear-gradient(135deg, #15b884 0%, #0c8d70 100%);}
.bar-plat-google{background: linear-gradient(135deg, #356dcc 0%, #2b57a4 100%);}
.bar-card-right{flex: 1; position: relative; min-width: 0; z-index: 1;}
.bar-card-logo{position: absolute; top: 2px; right: 2px;}
.bar-card-logo .bar-logo{display: block; width: 78px; height: 78px; margin: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,0.92); box-shadow: 0 10px 22px rgba(42,28,15,0.16); overflow: hidden; float: none; position: static; background: linear-gradient(180deg, #f9f7f2 0%, #ebe2d6 100%);}
.bar-logo img{width: 100%; height: 100%; object-fit: contain; display: block;}
.bar-gb-fields{padding: 16px 96px 10px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(249,245,239,0.98) 100%); border: 1px solid #e6dccf; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);}
.bar-gb-row{display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 13px; color: #43392f; line-height: 1.58; border-bottom: 1px solid #ebe2d7;}
.bar-gb-row:last-child{border-bottom: none;}
.bar-gb-icon{flex: 0 0 30px; width: 30px; height: 30px; font-size: 14px; text-align: center; color: #7d5f3b; background: #f3ece3; border: 1px solid #e7dac9; border-radius: 50%; line-height: 28px; padding-top: 0; box-sizing: border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);}
.bar-gb-text{flex: 1; min-width: 0; word-break: break-word; font-size: 13px; letter-spacing: 0.1px;}
.bar-gb-text a{color: #245eb0; text-decoration: none; font-weight: 600;}
.bar-gb-text a:hover{text-decoration: underline;}
.bar-description{position: relative; background: linear-gradient(180deg, #fffefc 0%, #f7f2eb 100%); border: 1px solid #ddd1c3; border-radius: 16px; padding: 24px 26px 22px; margin-bottom: 18px; box-shadow: 0 12px 28px rgba(56,37,23,0.08); font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; overflow: hidden;}
.bar-desc-text{font-size: 15px; line-height: 1.92; color: #463a2e; padding: 18px 20px 18px 22px; background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,244,238,0.96) 100%); border: 1px solid #ece2d7; border-left: 3px solid #bc1d14; border-radius: 12px; margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); text-wrap: pretty;}
.bar-desc-text p:last-child{margin-bottom: 0;}
.bar-description .bar-section-title{position: relative; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b5947; letter-spacing: 1.4px; margin: 18px 0 12px; padding-bottom: 0;}
.bar-description .bar-section-title:first-child{margin-top: 0;}
/* Social icons: Instagram, TikTok, WhatsApp */
.bar-social-icons{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7ddcf;}
.bar-social-link{display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f4efe7 100%); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; border: 1px solid #e3d7c8; box-shadow: 0 8px 18px rgba(60,41,25,0.08);}
.bar-social-link img{width: 28px; height: 28px; border-radius: 8px; display: block;}
.bar-social-link:hover{transform: translateY(-3px); box-shadow: 0 12px 22px rgba(0,0,0,0.14);}
.bar-card-social-icons{margin-top: 14px; padding-top: 14px; border-top: 1px solid #e4d8ca; justify-content: center; align-items: center;}
.bar-card-left .bar-social-link{width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 8px 16px rgba(60,41,25,0.1);}
.bar-card-left .bar-social-link img{width: 27px; height: 27px;}
.bar-social-instagram:hover{background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); border-color: transparent;}
.bar-social-tiktok:hover{background: #000; border-color: #000;}
.bar-social-facebook:hover{background: #1877f2; border-color: #1877f2;}
.bar-social-x:hover{background: #000; border-color: #000;}
.bar-social-whatsapp:hover{background: #25d366; border-color: #25d366;}
.bar-social-share{cursor: pointer; padding: 0; background: linear-gradient(180deg, #4e4a46 0%, #2e2b29 100%); border-color: #2f2c2a; color: #ffffff; box-shadow: 0 8px 16px rgba(30,26,23,0.24), inset 0 1px 0 rgba(255,255,255,0.08);}
.bar-social-share:hover{background: linear-gradient(180deg, #5c5753 0%, #373330 100%); border-color: #3a3633; color: #ffffff;}
/* Hero de establecimiento -----------------------------------------------*/
.bar-hero-breadcrumb{padding:12px 0 16px;font-size:13px;margin-bottom:8px;line-height:1.6;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px;}
.bar-hero-breadcrumb a.minibread.red{display:inline-block;margin:0 2px 0 0;padding:2px 4px;transition:color 0.2s ease;}
.bar-hero-breadcrumb a.minibread.red:hover{color:#f00;}
.bar-hero-breadcrumb .bc-sep{color:#c00;opacity:0.55;margin:0 2px 0 0;}
/* Móvil: se oculta la Región (primer nivel, el menos relevante) y su
separador para que Provincia » Ciudad quepa en una sola línea en la
mayoría de los casos; antes el conjunto de 3 niveles rompía a mitad de
frase y se veía descuadrado en nombres largos (Islas Baleares...). */
@media screen and (max-width: 640px){
.bar-hero-breadcrumb a.minibread.red.bc-region,
.bar-hero-breadcrumb .bc-region + .bc-sep{display:none !important;} /* movil-ok: el nivel de comunidad autonoma de la miga de pan; provincia y poblacion siguen visibles */
}
.bar-hero{position:relative;width:100%;height:320px;overflow:hidden;border-radius:14px;margin-bottom:14px;background:#1a1a1a;}
.bar-hero-img{
width: 100%;
height: 340px;
max-height: 38vw;
min-height: 220px;
object-fit: cover;
display: block;
border-radius: 18px 18px 0 0;
box-shadow: 0 18px 44px rgba(44,23,13,0.18);
cursor: pointer;
transition: transform 0.45s ease, box-shadow 0.22s;
}
.bar-hero:hover .bar-hero-img{transform:scale(1.03);}
.bar-hero-overlay{position:absolute;bottom:0;left:0;right:0;height:100%;background:linear-gradient(to top,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0.62) 45%,rgba(0,0,0,0) 78%);pointer-events:none;}
.bar-hero-logo{position:absolute;bottom:16px;left:16px;width:68px;height:68px;border-radius:12px;overflow:hidden;background:#fff;border:3px solid rgba(255,255,255,0.9);box-shadow:0 4px 16px rgba(0,0,0,0.28);}
.bar-hero-logo img{width:100%;height:100%;object-fit:contain;display:block;}
.bar-hero-caption{position:absolute;bottom:16px;left:calc(16px + 68px + 12px);right:16px;}
.bar-hero-caption-nolog{left:16px;}
.bar-hero-name{font-size:22px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.55);line-height:1.2;margin:0 0 4px;font-family:Georgia,'Times New Roman',serif;padding:0 !important;min-height:0 !important;background:none !important;display:block !important;float:none !important;}
.bar-hero-type{font-size:11px;color:rgba(255,255,255,0.8);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
/* Hint fotos en hero */
.bar-hero-gallery-hint{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:20px;display:flex;align-items:center;gap:5px;cursor:pointer;transition:background 0.18s;z-index:4;user-select:none;}
.bar-hero-gallery-hint:hover{background:rgba(0,0,0,0.78);}
/* CTA botón en hero */
/* Fila de acciones del hero. Existe porque la ficha pasó a enseñar TODAS las
acciones del local a la vez (reservar + llamar) en vez de solo una. Con un
único botón se ve exactamente igual que antes: un flex de un solo hijo no
cambia nada de su tamaño ni de su posición. */
.bar-hero-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px;}
.bar-hero-acciones .bar-hero-cta{margin-top:0;}
.bar-hero-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:2px;height:38px;padding:0 20px;background:linear-gradient(135deg,#c00 0%,#a00 100%);color:#fff;font-size:12.5px;font-weight:700;line-height:1;text-align:center;border-radius:999px;text-decoration:none;letter-spacing:0.04em;text-transform:uppercase;box-shadow:0 3px 12px rgba(192,0,0,0.35);transition:transform 0.18s,box-shadow 0.18s,background 0.18s;white-space:nowrap;}
.bar-hero-cta:hover{background:linear-gradient(135deg,#d40000 0%,#b30000 100%);transform:translateY(-1px);box-shadow:0 6px 18px rgba(192,0,0,0.45);color:#fff;}
.bar-hero-cta-tel{background:linear-gradient(135deg,#2a7a4b 0%,#1d5c36 100%);box-shadow:0 3px 12px rgba(42,122,75,0.35);}
.bar-hero-cta-tel:hover{background:linear-gradient(135deg,#33935a 0%,#256e42 100%);box-shadow:0 6px 18px rgba(42,122,75,0.45);}
/* Barra de compartir */
.bar-share-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.bar-share-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;background:#fff;border:1.5px solid #dcc8b5;border-radius:20px;color:#6b4c2a;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.18s;letter-spacing:0.02em;}
.bar-share-btn:hover{background:#f9f3ec;border-color:#9e7126;color:#9e7126;transform:translateY(-1px);}
.bar-share-btn--ok{background:#e8f5e9 !important;border-color:#a5d6a7 !important;color:#2a7a4b !important;}
/* Botón volver arriba */
.bar-back-top{position:fixed;bottom:80px;right:18px;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#c00 0%,#a00 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(192,0,0,0.35);opacity:0;transform:translateY(12px);transition:opacity 0.25s,transform 0.25s;pointer-events:none;z-index:900;}
.bar-back-top.bbt-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.bar-back-top:hover{background:linear-gradient(135deg,#d40000 0%,#b30000 100%);box-shadow:0 6px 20px rgba(192,0,0,0.45);}
.share-action{appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #3a3633; background: linear-gradient(180deg, #4f4b47 0%, #2f2c2a 100%); color: #ffffff; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease; box-shadow: 0 6px 14px rgba(30,26,23,0.2), inset 0 1px 0 rgba(255,255,255,0.08);}
.share-action:hover{transform: translateY(-1px); box-shadow: 0 9px 18px rgba(30,26,23,0.24); border-color: #4b4642; color: #ffffff; background: linear-gradient(180deg, #5b5652 0%, #373330 100%);}
.share-action:focus{outline: none; box-shadow: 0 0 0 3px rgba(95,90,84,0.18), 0 9px 18px rgba(30,26,23,0.24);}
.share-action-glyph{display: inline-block; width: 18px; height: 18px; line-height: 0; background: url('../images/share_classic.svg') center center / 18px 18px no-repeat;}
.share-action-icon{width: 46px; height: 46px; border-radius: 50%;}
.share-action-sr{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.share-action.is-copied{border-color: #6d675f; background: linear-gradient(180deg, #726c65 0%, #47423e 100%); color: #ffffff;}
/* ===== CARTA DEL RESTAURANTE ===== */
.carta-section{margin: 26px 0;}
.carta-section .ficha-panel{overflow: visible; border-radius: 20px; border-color: #e0d5c8; box-shadow: 0 16px 34px rgba(43,28,18,0.08);}
.carta-section .ficha-panel:hover{transform: none; box-shadow: 0 18px 38px rgba(43,28,18,0.1);}
.carta-section .ficha-panel-header{font-size: 14px; letter-spacing: 0.9px; padding: 16px 18px; background: linear-gradient(180deg, #fcfbf9 0%, #f3eee8 100%); border-bottom: 1px solid #e6dbcf; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);}
.carta-module{display: block; position: relative; padding: 18px; background: linear-gradient(180deg, #faf6ef 0%, #f1e8dc 100%); overflow: hidden;}
.carta-module:before{content: ''; position: absolute; top: -80px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(164,121,67,0.14) 0%, rgba(164,121,67,0.03) 58%, rgba(164,121,67,0) 72%); pointer-events: none;}
.carta-module:after{content: ''; position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: linear-gradient(90deg, rgba(162,119,67,0) 0%, rgba(162,119,67,0.35) 18%, rgba(162,119,67,0.35) 82%, rgba(162,119,67,0) 100%); pointer-events: none;}
.carta-module-split{display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr); gap: 18px; align-items: start;}
.carta-stage{min-width: 0; position: relative; z-index: 1;}
.carta-stage-head{display: block; margin-bottom: 14px; padding: 2px 2px 0;}
.carta-stage-intro{display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0;}
.carta-stage-title{display: block; margin: 0; color: #302014; font-size: 31px; line-height: 1; font-weight: 700; font-family: Georgia, 'Times New Roman', serif; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.carta-carousel-shell{border-radius: 18px; overflow: hidden; background: #151716; box-shadow: 0 20px 36px rgba(31,22,14,0.18); border: 1px solid rgba(123,95,59,0.2);}
.carta-carousel{position: relative; background: radial-gradient(circle at top, #62624f 0%, #34372f 46%, #1a1b18 100%); overflow: hidden;}
.carta-carousel-track{position: relative; min-height: 0;}
.carta-slide{display: none; width: 100%; text-align: center; position: relative;}
.carta-slide-active{display: block;}
.carta-slide:after{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.24) 100%); pointer-events: none;}
.carta-slide img{width: 100%; max-height: 520px; min-height: 420px; object-fit: contain; background: transparent; display: block; cursor: zoom-in; margin: 0 auto;}
.carta-arrow{position: absolute; top: 50%; transform: translateY(-50%); background: rgba(26,24,22,0.7); color: #fff7eb; border: 1px solid rgba(228,203,160,0.16); width: 46px; height: 46px; border-radius: 50%; font-size: 18px; cursor: pointer; transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; z-index: 3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 20px rgba(0,0,0,0.18);}
.carta-arrow:hover{background: rgba(20,18,16,0.92); transform: translateY(-50%) scale(1.06);}
.carta-arrow-prev{left: 16px;}
.carta-arrow-next{right: 16px;}
.carta-viewer-bar{display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; background: linear-gradient(180deg, #231f1a 0%, #181513 100%); border-top: 1px solid rgba(228,201,157,0.1);}
.carta-viewer-meta{display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1;}
.carta-dots{display: flex; align-items: center; gap: 6px; padding: 0; background: none;}
.carta-dot{display: inline-block; width: 18px; height: 4px; border-radius: 999px; background: rgba(235,222,196,0.22); cursor: pointer; transition: width 0.2s, background 0.2s, box-shadow 0.2s;}
.carta-dot.active{width: 28px; background: #f3dfb9; box-shadow: 0 0 0 4px rgba(224,193,143,0.08);}
.carta-viewer-actions{display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;}
.carta-action-chip{display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(234,215,182,0.16); background: rgba(255,255,255,0.06); color: #f5e8d1; font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;}
.carta-action-chip:hover{background: rgba(255,255,255,0.12); color: #fff9ef; transform: translateY(-1px);}
.carta-action-chip-secondary{background: rgba(255,255,255,0.02);}
.carta-action-chip-primary{background: linear-gradient(135deg, #8c3123 0%, #5a241f 100%); border-color: rgba(248,226,189,0.12); box-shadow: 0 10px 20px rgba(54,22,20,0.2);}
.carta-action-chip-primary:hover{background: linear-gradient(135deg, #9a3828 0%, #642921 100%);}
.carta-thumbs-wrap{margin-top: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(247,240,230,0.9) 100%); border: 1px solid #e3d6c3; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);}
.carta-thumbs{display: flex; gap: 10px; padding: 0; background: none; overflow-x: auto; scroll-behavior: smooth;}
.carta-thumbs::-webkit-scrollbar{height: 4px;}
.carta-thumbs::-webkit-scrollbar-thumb{background: rgba(124,92,52,0.28); border-radius: 999px;}
.carta-thumb{flex: 0 0 122px; width: 122px; cursor: pointer; border-radius: 12px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s; position: relative; background: #fff; box-shadow: 0 10px 16px rgba(72,48,28,0.08);}
.carta-thumb.active{border-color: #9b6a31; box-shadow: 0 0 0 1px rgba(155,106,49,0.16), 0 14px 20px rgba(72,48,28,0.12);}
.carta-thumb:hover{transform: translateY(-2px);}
.carta-thumb img{width: 100%; height: 74px; object-fit: cover; display: block;}
/* 2 líneas en vez de truncar a una: los nombres de sección reales
(p.ej. "Platos Principales") no cabían en una sola línea a 10px y
se veían cortados tipo "PLATO...". */
/* !important: la regla legacy ".content span" (padding:0;padding-bottom:12px;
font-size:14px) tiene mas especificidad y pisaba estas propiedades, dejando
la etiqueta sin padding lateral y con una fuente mas grande de lo previsto
-> se truncaba a los pocos caracteres pese al line-clamp. */
.carta-thumb-label, .content span.carta-thumb-label{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 7px 6px 8px !important; background: linear-gradient(180deg, #fffdfa 0%, #f3eadf 100%); font-size: 10px !important; font-weight: 700; line-height: 1.25 !important; text-align: center; color: #6a4a2d; text-transform: uppercase; letter-spacing: 0.4px; overflow: hidden; text-overflow: ellipsis; white-space: normal;}
.carta-resources{display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1;}
.carta-resource-card{padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,253,249,0.95) 0%, rgba(243,235,224,0.98) 100%); border: 1px solid #e2d4c0; box-shadow: 0 12px 20px rgba(72,48,28,0.06);}
.carta-resource-card-primary{background: linear-gradient(135deg, #fbf2e4 0%, #f1e4d0 100%);}
.carta-resource-head{display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;}
.carta-resource-tag{display: inline-flex; align-self: flex-start; padding: 4px 8px; border-radius: 999px; background: rgba(139,106,61,0.08); color: #8d6d49; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;}
.carta-resource-title{display: block; color: #38271c; font-size: 18px; line-height: 1.2; font-weight: 700; font-family: Georgia, 'Times New Roman', serif;}
.carta-resource-copy{display: block; color: #735b45; font-size: 13px; line-height: 1.5;}
.carta-external{padding: 0; background: none; border: none;}
.carta-external-link{display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(135deg, #6f2220 0%, #4b1c1b 52%, #2f1a19 100%); border: 1px solid rgba(239,216,178,0.12); border-radius: 14px; text-decoration: none; color: #fff6ea; transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease; box-shadow: 0 16px 24px rgba(77,30,26,0.22);}
.carta-external-link:hover{transform: translateY(-2px); color: #fffaf2; box-shadow: 0 18px 26px rgba(77,30,26,0.28); filter: saturate(1.04);}
.carta-external-icon{display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; font-size: 22px; flex-shrink: 0; background: rgba(244,223,190,0.12); color: #f2d7a8;}
.carta-external-text{flex: 1; font-size: 15px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.35; font-family: Georgia, 'Times New Roman', serif;}
.carta-external-arrow{font-size: 20px; font-weight: 700; flex-shrink: 0; transition: transform 0.2s; color: #f0d8ae;}
.carta-external-link:hover .carta-external-arrow{transform: translate(3px, -3px);}
.carta-pdfs{padding: 0;}
.carta-pdf-link{display: flex; align-items: center; gap: 12px; padding: 14px 14px; background: rgba(255,255,255,0.82); border: 1px solid #e5d8c6; border-radius: 13px; text-decoration: none; color: #2c1810; margin-bottom: 10px; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; box-shadow: 0 8px 16px rgba(72,48,28,0.05);}
.carta-pdf-link:last-child{margin-bottom: 0;}
.carta-pdf-link:hover{background: #fff; border-color: #d5c0a2; box-shadow: 0 12px 18px rgba(72,48,28,0.09); transform: translateY(-2px);}
.carta-pdf-icon{display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; font-size: 24px; flex-shrink: 0; background: linear-gradient(180deg, #f8efe4 0%, #ebdec9 100%); color: #8f6733;}
.carta-pdf-text{flex: 1; font-size: 14px; font-weight: 700; line-height: 1.4;}
.carta-pdf-seccion{display: inline-block; margin: 0 0 4px; color: #8e5a29; font-weight: 700; font-size: 11px; font-style: normal; letter-spacing: 0.8px; text-transform: uppercase;}
.carta-pdf-action{font-size: 11px; font-weight: 800; color: #7b5a2f; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;}
/* Carta Lightbox */
.carta-lightbox{display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000;}
.carta-lightbox.open{display: flex; align-items: center; justify-content: center;}
.carta-lb-overlay{position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.92);}
.carta-lb-close{position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; z-index: 10001; line-height: 1; padding: 4px 8px; opacity: 0.8; transition: opacity 0.2s;}
.carta-lb-close:hover{opacity: 1;}
.carta-lb-arrow{position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 10001; transition: background 0.2s;}
.carta-lb-arrow:hover{background: rgba(255,255,255,0.3);}
.carta-lb-prev{left: 16px;}
.carta-lb-next{right: 16px;}
.carta-lb-content{position: relative; z-index: 10001; max-width: 95vw; max-height: 85vh; text-align: center;}
.carta-lb-content img{max-width: 95vw; max-height: 80vh; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.5);}
.carta-lb-caption{color: #fff; font-size: 14px; padding: 10px 0; text-align: center;}
.carta-lb-caption em{color: #f0d68c; font-style: italic; margin-right: 6px;}
.carta-lb-counter{position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 13px; z-index: 10001;}
/* ===== FICHA — MODERN GRID PANELS ===== */
.ficha-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 26px 0; align-items: stretch;}
.ficha-grid-single{grid-template-columns: minmax(0, 1fr);}
.ficha-grid-secondary{margin-top: 18px;}
.ficha-panel{position: relative; background: linear-gradient(180deg, #ffffff 0%, #f5f3f0 100%); border-radius: 18px; box-shadow: 0 18px 34px rgba(35,24,16,0.08); overflow: hidden; border: 1px solid #e4ddd4; transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;}
.ficha-panel:before{content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #1f1f1f 0%, #c20b06 55%, #dfc291 100%); opacity: 0.98;}
.ficha-panel:hover{box-shadow: 0 22px 42px rgba(24,17,13,0.14); transform: translateY(-4px); border-color: #d9cabc;}
.ficha-panel-header{display: flex; align-items: center; justify-content: center; text-align: center; padding: 17px 20px 15px; background: linear-gradient(180deg, #fafafa 0%, #ebebeb 48%, #e0e0e0 100%); color: #232323; font-size: 14px; font-weight: 800; letter-spacing: 0.55px; text-transform: uppercase; border-bottom: 1px solid #d6d0c8; box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);}
.ficha-panel-body{padding: 0;}
.ficha-panel-list{padding: 10px 10px 12px;}
.ficha-panel-menu-featured:before{background: linear-gradient(90deg, #2e1b10 0%, #a87a36 46%, #d6b27b 100%);}
.ficha-panel-event-featured:before{background: linear-gradient(90deg, #221313 0%, #b60a06 58%, #ea5a4c 100%);}
.ficha-panel-menu-list:before{background: linear-gradient(90deg, #222222 0%, #8f5b1c 54%, #d6b27b 100%);}
.ficha-panel-event-list:before{background: linear-gradient(90deg, #232323 0%, #b30a06 54%, #dc958f 100%);}
/* Featured card (Evento/Plato Destacado) */
.ficha-feat-card{display: flex; flex-direction: column; min-height: 100%; text-decoration: none; color: #333; transition: color 0.28s ease;}
.ficha-feat-card:hover{color: #b40c07;}
.ficha-feat-img{width: 100%; height: 220px; overflow: hidden; position: relative; background: linear-gradient(180deg, #5a0f11 0%, #2f0c0d 100%);}
.ficha-feat-img:empty{display: block;}
.ficha-feat-evento .ficha-feat-img:before{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,8,8,0.1) 0%, rgba(80,9,10,0.34) 55%, rgba(16,10,10,0.72) 100%); z-index: 1;}
.ficha-feat-evento .ficha-feat-img:empty{background: radial-gradient(circle at 63% 40%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0.22) 12%, transparent 13%), linear-gradient(180deg, #b3181a 0%, #7d1112 48%, #420b0b 100%);}
.ficha-menu-card .ficha-feat-img{height: 220px; border-bottom: 1px solid #dfcfb6; background: linear-gradient(180deg, #567f82 0%, #355b5d 100%);}
.ficha-menu-card .ficha-feat-img:before{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,237,220,0.04) 0%, rgba(31,27,18,0.26) 100%); z-index: 1;}
.ficha-menu-card .ficha-feat-img:empty{background: linear-gradient(180deg, #6d9698 0%, #35585c 100%);}
.ficha-feat-img img{position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease, filter 0.35s ease;}
.ficha-feat-card:hover .ficha-feat-img img{transform: scale(1.05); filter: saturate(1.03) contrast(1.02);}
.ficha-feat-body{position: relative; flex: 1; padding: 18px 20px 20px; display: flex; flex-direction: column; background: linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%);}
.ficha-feat-evento .ficha-feat-body{background: linear-gradient(180deg, #ffffff 0%, #f8f5f3 100%);}
.ficha-feat-date{display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12px; color: #847568; margin-bottom: 8px; font-weight: 600; letter-spacing: 0.2px;}
.ficha-feat-title{font-size: 17px; font-weight: 900; color: #151515; margin: 0 0 10px; line-height: 1.3; text-transform: uppercase; text-align: center;}
.ficha-feat-card:hover .ficha-feat-title{color: #aa0f09;}
.ficha-feat-meta{font-size: 13px; color: #5f3825; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; font-weight: 600;}
.ficha-feat-desc{font-size: 13px; color: #695e54; line-height: 1.75; margin: 0 0 16px; position: relative; max-height: 5.2em; overflow: hidden;}
.ficha-feat-desc::after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2.4em; background: linear-gradient(transparent, #f8f5f3); pointer-events: none;}
.ficha-feat-footer{display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(108,85,65,0.12); min-height: 12px;}
.ficha-feat-price{display: inline-flex; align-items: center; justify-content: center; min-width: 88px; background: linear-gradient(180deg, #d5b177 0%, #b58234 100%); color: #fffaf0; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 14px rgba(123,83,26,0.18);}
.ficha-feat-cta{display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: #191919; padding: 0; border: none; background: none; transition: color 0.2s ease, gap 0.2s ease, transform 0.2s ease; white-space: nowrap; margin-left: auto;}
.ficha-feat-card:hover .ficha-feat-cta{color: #b40c07; gap: 10px; transform: translateX(2px);}
/* List items (Otros Eventos / Otros Menús) */
/* ===== MENU CARD — Carta de restaurante ===== */
.ficha-menu-card{display: block; text-decoration: none; color: #333; background: #fdf8f0 url('data:image/svg+xml, llevan el blindaje del gotcha nº 1: sin él, la regla
legacy `.content span:not(...)` les mete `padding-bottom:12px` y
`font-size:14px`, y el botón sale con doce píxeles de dorado colgando. */
.menu-mas-tit, .content span.menu-mas-tit{
display: block;
padding: 0 !important;
margin: 0 !important;
font-size: 13.5px !important;
font-weight: 700;
line-height: 1.25 !important;
letter-spacing: .01em;
}
.menu-mas-tit b{ font-weight: 700; }
.menu-mas-sub, .content span.menu-mas-sub{
display: block;
padding: 2px 0 0 !important;
margin: 0 !important;
font-size: 11.5px !important;
font-weight: 400;
line-height: 1.3 !important;
/* ⚠ Medido sobre la página servida, no elegido a ojo: el crema `#f7e9cf`
daba 4,05 sobre este dorado y la WCAG pide 4,5. Este da 4,63. Si se
cambia el fondo del botón hay que volver a medirlo — un crema que
«parece» igual puede quedarse por debajo sin que se note. */
color: #fdf8ef;
}
@media screen and (max-width: 640px){
.menu-seccion{ font-size: 10.5px; margin: 14px 0 5px; }
/* Es LA acción del bloque: se pulsa con el pulgar, no con la uña. */
.menu-mas, .content a.menu-mas{ min-height: 56px; padding: 12px 14px !important; }
.menu-mas-tit, .content span.menu-mas-tit{ font-size: 13px !important; }
.menu-mas-sub, .content span.menu-mas-sub{ font-size: 11px !important; }
}
.ficha-empty{padding: 28px 22px; text-align: center; color: #8f8377; font-size: 13px; font-style: italic; margin: 0;}
/* ===== DETAIL PAGES (Evento / Plato) ===== */
.detail-breadcrumb{display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding: 0;}
.detail-breadcrumb .minibread{font-size: 13px;}
/* Card principal */
.detail-card{background: #fff; border-radius: 12px; box-shadow: 0 1px 8px rgba(0,0,0,0.07); overflow: hidden; border: 1px solid #e8e8e8; margin-bottom: 20px;}
.detail-card-img{width: 100%; height: 340px; max-height: 340px; overflow: hidden; background: #f7f7f7;}
.detail-card-img img{width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; margin: 0 auto;}
.detail-card-body{padding: 22px 26px;}
.detail-card-topbar{display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px;}
.detail-card-type{font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #888; margin-bottom: 8px;}
/* span + !important: la regla legacy ".content span" le metía padding-bottom
12px y la estrella quedaba descentrada, medio fuera de la píldora */
.detail-star, .content span.detail-star{display:inline-flex;align-items:center;color: #c9a96e; font-size: 13px !important; line-height: 1 !important; padding: 0 !important; vertical-align: middle;}
.detail-card-title{font-size: 22px; font-weight: 700; color: #222; margin: 0 0 12px; line-height: 1.3; font-family: Georgia, 'Times New Roman', serif;}
.detail-card-price{font-size: 24px; font-weight: 700; color: #222; font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.5px;}
.detail-card-meta{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;}
.detail-card-meta-item, .content span.detail-card-meta-item{display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 14px !important; border-radius: 999px; background: rgba(91,68,48,0.07); color: #5b4430; font-size: 12.5px !important; font-weight: 600; line-height: 1 !important; letter-spacing: 0.2px; white-space: nowrap;}
.detail-card-meta-item svg{width: 14px; height: 14px; flex-shrink: 0; stroke: #8a7a68;}
.detail-card-meta-item.detail-card-price, .content span.detail-card-meta-item.detail-card-price{margin-left: auto; background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%); color: #fff; font-weight: 700; font-size: 15px !important; box-shadow: 0 2px 8px rgba(225,17,18,0.28);}
.detail-share-action{width: 40px; height: 40px; padding: 0; border-radius: 50%; flex-shrink: 0; color: #ffffff; background: linear-gradient(180deg, #5a5550 0%, #34312f 100%); border-color: #3b3734; box-shadow: 0 6px 12px rgba(29,25,22,0.18), inset 0 1px 0 rgba(255,255,255,0.08);}
.detail-share-action:hover{background: linear-gradient(180deg, #67615c 0%, #3e3a37 100%); border-color: #4a4541; color: #ffffff;}
/* Event action buttons */
.detail-evt-actions{text-align: center; margin-bottom: 20px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;}
.detail-evt-btn{display: inline-block; padding: 10px 28px; font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; border: 1.5px solid #222; color: #222; border-radius: 6px; transition: all 0.25s; background: #fff;}
.detail-evt-btn:hover{background: #222; color: #fff;}
.detail-evt-btn-sec{border-color: #bbb; color: #666;}
.detail-evt-btn-sec:hover{background: #666; color: #fff; border-color: #666;}
/* Menu content — elegant typography */
.detail-menu-content{background: #fdfbf7; border-radius: 12px; border: 1px solid #e8dcc8; padding: 28px 32px; margin-bottom: 20px; text-align: center;}
.detail-menu-ornament{color: #c9a96e; font-size: 10px; letter-spacing: 12px; margin: 0 0 16px; opacity: 0.7;}
.detail-menu-ornament:last-child{margin: 16px 0 0;}
.detail-menu-text{font-size: 15px; line-height: 2; color: #3a3025; font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.3px;}
/* Back to restaurant */
.detail-back{text-align: center; margin-bottom: 24px;}
.detail-back-link{display: inline-block; font-size: 13px; font-weight: 600; color: #8b7355; text-decoration: none; letter-spacing: 0.5px; padding: 8px 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;}
.detail-back-link:hover{color: #5a4a3a; border-bottom-color: #c9a96e;}
/* Return to restaurant */
/* ── Cartel del evento en la ficha pública ─────────────────────────────
Solo se pinta si el establecimiento subió uno (ver eventos.php): si no hay
cartel, no existe ni el contenedor. */
.evt-cartel{
margin: 26px 0;
text-align: center;
}
.evt-cartel-titulo{
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: #a89170;
}
.evt-cartel-titulo svg{ width: 16px; height: 16px; flex-shrink: 0; }
.evt-cartel-titulo-txt, .content span.evt-cartel-titulo-txt{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11.5px !important;
letter-spacing: .9px;
text-transform: uppercase;
line-height: 1 !important;
padding: 0 !important;
transform: translateY(1px);
}
.evt-cartel-marco{
position: relative;
display: inline-block;
max-width: min(100%, 440px);
padding: 10px;
background: linear-gradient(180deg, #fffefb 0%, #f7f1e8 100%);
border: 1px solid #e8dcc9;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(41,28,18,.10);
transition: transform .2s ease, box-shadow .2s ease;
text-decoration: none !important;
}
.evt-cartel-marco:hover{
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(41,28,18,.16);
}
.evt-cartel-marco img{
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
.evt-cartel-lupa, .content span.evt-cartel-lupa{
position: absolute;
right: 18px; bottom: 18px;
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(24,24,27,.72);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
opacity: 0;
transition: opacity .2s ease;
}
.evt-cartel-lupa svg{ width: 16px; height: 16px; }
.evt-cartel-marco:hover .evt-cartel-lupa{ opacity: 1; }
@media (hover: none){ .evt-cartel-lupa{ opacity: .85; } }
/* ── Tarjeta "volver al establecimiento" ───────────────────────────────
Pie de las fichas de evento y de menú. La pinta tarjetaVolverEstablecimiento()
en funciones.php: un único componente para las dos fichas.
TODOS los de aquí van blindados con `.content` + !important. Sin eso,
la regla legacy `.content span:not(...)` les inyecta font-size:14px y
padding-bottom:12px, que era exactamente lo que hacía que el texto de las
píldoras quedara pegado arriba y pareciera salirse (ver gotcha #1). */
.detail-return-card{ margin: 26px 0 30px; }
.detail-return-link{
display: flex;
align-items: center;
gap: 16px;
text-decoration: none !important;
color: #221913;
padding: 16px 20px;
border: 1px solid #ece3d6;
border-radius: 18px;
background: linear-gradient(180deg, #fffefb 0%, #faf5ee 100%);
box-shadow: 0 2px 10px rgba(41,28,18,.05);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.detail-return-link:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(41,28,18,.11);
border-color: #d9c3a3;
}
/* Círculo con la flecha. Ahora es un SVG (antes el carácter "←", que heredaba
el relleno fantasma y quedaba descentrado). Al pasar por encima se desplaza
un poco a la izquierda: refuerza que la acción es "retroceder". */
.detail-return-arrow, .content span.detail-return-arrow{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
border: 1.5px solid #e6d8c2;
color: #b6862c;
padding: 0 !important;
box-shadow: 0 1px 3px rgba(41,28,18,.07);
transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.detail-return-arrow svg{ width: 19px; height: 19px; }
.detail-return-link:hover .detail-return-arrow{
transform: translateX(-3px);
background: #b6862c;
border-color: #b6862c;
color: #fff;
}
.detail-return-body, .content span.detail-return-body{
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1;
padding: 0 !important;
}
/* Rótulo que explica la acción: sin él era solo una flecha suelta */
.detail-return-kicker, .content span.detail-return-kicker{
display: block;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 10.5px !important;
letter-spacing: .8px;
text-transform: uppercase;
color: #a89170;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
}
.detail-return-title{
display: block;
margin: 0 !important;
padding: 0 !important;
font-size: 21px;
line-height: 1.15;
color: #1f1712;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
}
.detail-return-meta, .content span.detail-return-meta{
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 2px 0 0 !important;
padding: 0 !important;
}
/* Las píldoras: el blindaje es lo que impide que el texto se descoloque. */
.detail-return-chip, .content span.detail-return-chip{
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 11px !important;
margin: 0 !important;
border-radius: 999px;
background: rgba(182,134,44,.11);
border: 1px solid rgba(182,134,44,.18);
color: #7a6034;
font-size: 11.5px !important;
line-height: 1 !important;
font-weight: 700;
letter-spacing: .2px;
white-space: nowrap;
}
@media(max-width: 640px){
.detail-return-link{ padding: 14px; gap: 12px; align-items: flex-start; }
.detail-return-arrow, .content span.detail-return-arrow{ width: 38px; height: 38px; }
.detail-return-arrow svg{ width: 17px; height: 17px; }
.detail-return-title{ font-size: 18px; }
}
/* Legacy detail styles (eventos) */
.detail-hero{background: #fff; border-radius: 12px; box-shadow: 0 1px 8px rgba(0,0,0,0.07); overflow: hidden; border: 1px solid #e8e8e8; margin-bottom: 20px;}
.detail-hero-img{width: 100%; max-height: 380px; overflow: hidden; background: #f7f7f7;}
.detail-hero-img img{width: 100%; max-height: 380px; object-fit: contain; display: block; margin: 0 auto;}
.detail-hero-body{padding: 22px 26px;}
.detail-badge{display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #888; margin-bottom: 8px;}
.detail-badge-evento{background: none; color: #888; border: none; padding: 0;}
.detail-badge-plato{background: none; color: #888; border: none; padding: 0;}
.detail-title{font-size: 22px; font-weight: 700; color: #222; margin: 0 0 12px; line-height: 1.3; font-family: Georgia, 'Times New Roman', serif;}
.detail-title span{display: inline; color: #c9a96e; font-size: 14px; text-indent: 0; overflow: visible; width: auto; height: auto; background: none; vertical-align: middle; margin-left: 6px;}
.detail-meta-grid{display: flex; flex-wrap: wrap; gap: 16px;}
.detail-meta-item{display: flex; align-items: center; gap: 6px; font-size: 14px; color: #555;}
.detail-meta-icon{font-size: 16px;}
.detail-price{font-weight: 700; color: #222; font-size: 20px; font-family: Georgia, 'Times New Roman', serif;}
.detail-content{background: #fff; border-radius: 12px; box-shadow: 0 1px 8px rgba(0,0,0,0.07); border: 1px solid #e8e8e8; padding: 22px 26px; margin-bottom: 20px;}
.detail-text{font-size: 15px; line-height: 1.8; color: #444; font-family: Georgia, 'Times New Roman', serif;}
.detail-text p{margin: 0 0 12px;}
.detail-actions{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0;}
.detail-btn{display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.25s; border: none; cursor: pointer;}
.detail-btn-reserva{background: #222; color: #fff;}
.detail-btn-reserva:hover{background: #444; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.detail-btn-web{background: #fff; color: #333; border: 1.5px solid #ddd;}
.detail-btn-web:hover{border-color: #999; background: #f9f9f9;}
.detail-bar-link{margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0;}
/* Legacy social buttons (kept for backward compat) */
.res,.fb,.tw,.wb{height: 34px; line-height: 34px; color: #fff; padding: 0 14px 0 36px; background: #3b5998 url(../images/facebook_32.png) 8px center no-repeat; background-size: 20px 20px; display: inline-block; float: none; clear: none; margin: 0; font-size: 12px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; font-weight: 500; max-width: 280px; box-sizing: border-box;}
.fb:hover{background-color: #2d4373;}
.tw{background: #1da1f2 url(../images/twitter_32.png) 8px center no-repeat; background-size: 20px 20px;}
.tw:hover{background-color: #0c85d0;}
.res{background: #cc0000; padding: 0 14px; color: #fff; font-weight: 600;}
.res:hover{background: #a00;}
.wb{background: #444 url(../images/earth.png) 8px center no-repeat; background-size: 20px 20px;}
.wb:hover{background-color: #333;}
/* span.icos + !important: la regla legacy ".content span" mete padding-bottom
12px y descentraba el icono dentro de su recuadro */
.icos, .content span.icos{width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0; border: 1px solid #e8e8e8; border-radius: 8px; padding: 5px !important; background: #fafafa; transition: all 0.15s; cursor: default; color: #8a6a54;}
.icos img{width: 100%; height: 100%; object-fit: contain;}
.icos svg{width: 100%; height: 100%; flex-shrink: 0;}
.icos:hover{background: #fff; border-color: #cc0000; box-shadow: 0 2px 6px rgba(204,0,0,0.12); transform: translateY(-1px); color: #cc0000;}
.servicios-grid{display: flex; flex-wrap: wrap; gap: 8px; clear: both; overflow: hidden; padding: 14px 16px; background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(246,241,234,0.95) 100%); border: 1px solid #e7ddcf; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);}
.bar-description .servicios-grid .icos{width: 38px; height: 38px; border-radius: 10px; padding: 6px !important; background: linear-gradient(180deg, #ffffff 0%, #f5f1eb 100%); border-color: #eadfce; box-shadow: 0 5px 12px rgba(60,41,25,0.06); color: #8a6a54;}
.bar-description .servicios-grid .icos:hover{background: #fff; border-color: #bc1d14; box-shadow: 0 8px 16px rgba(188,29,20,0.12); transform: translateY(-2px); color: #bc1d14;}
.bar-description .servicios-grid .icos img{width: 100%; height: 100%; object-fit: contain; filter: saturate(0.96);}
.bar-description .servicios-grid .icos svg{width: 100%; height: 100%;}
#tooltip{width: auto; height: 48px; display: block; float: none; clear: both; overflow: hidden; background: #333; padding: 10px; color: #fff; font-weight: normal; position: absolute; z-index: 9;
box-shadow: 2px 2px 4px #333;
}
#tooltip h2{font-size: 18px; color: #fff; display: block; float: none; clear: both;font-family: 'HelveticaCondensedBoldRegular';}
#barmap{width: 100%; max-width: 100%; height: 400px; display: block; float: none; clear: both; background: #eee; margin: 0px auto; border: 1px solid #ccc; box-sizing: border-box;}
.morelink{color: #333; text-decoration: none; font-weight: bold; text-align: right; width: 95%; display: block; float: none; clear: both; margin: 10px auto;}
.morelink:hover{color: #d30000;}
.shadow4{
box-shadow: 2px 2px 4px #333;
}
img.ui-datepicker-trigger,.ui-datepicket-trigger{display: none;}
ul.minioptions{width: 100%; display: block; float: left; clear: both; overflow: hidden; margin-bottom: 10px;}
ul.minioptions li{width: 170px; height: 20px; display: block; float: left; clear: none; text-align: left; overflow: hidden; margin: 0 1px 1px 0; background: #d0d0d0; font-size: 11px; overflow: hidden;}
ul.minioptions li label{width: 170px; height: 20px; line-height: 20px; display: block; float: none; clear: both;}
ul.minioptions li label input{float: left; margin: 4px 2px;}
#clicker{width: 100%; max-width: 680px; height: 40px; background: #d0d0d0 url(../images/clicker.png) bottom right no-repeat; border: 1px solid #aaa; line-height: 40px; padding: 0 10px; box-sizing: border-box;
border-radius: 1ex;
}
#clicker.closed{background: #d0d0d0 url(../images/clicker.png) top right no-repeat;}
.buscador-box #clicker{width:100%;height:38px;background:#f0f0f0 !important;background-image:none !important;border:1px solid #ccc;border-radius:4px;line-height:38px;padding:0 12px;font-size:13px;font-weight:600;color:#555;cursor:pointer;box-sizing:border-box;margin-bottom:10px;position:relative;}
.buscador-box #clicker.closed{background:#f0f0f0 !important;background-image:none !important;}
/* ── Buscador modernizado ── */
.buscador-box{background:rgba(255,255,255,0.95) !important;border:none !important;border-radius:14px !important;padding:14px 16px 12px !important;box-shadow:0 4px 20px rgba(0,0,0,0.15) !important;}
/* SINCRONÍA: los dos buscadores del sitio (locales y eventos) usan la misma
rejilla .bf-grid, así que sus campos tienen que medir lo mismo. El de
eventos se quedaba en 33px y el de locales en 38 — dos cajas que hacen lo
mismo y no se parecen. 38px es la altura única de todos los controles. */
.buscador-box .bf-field select,
.buscador-box .bf-field input[type="text"],
.buscador-box .bf-field .flatpickr-input,
.buscador-box .bf-field div select{
height:38px !important;line-height:38px !important;
padding:0 11px !important;font-size:13.5px !important;border-radius:9px !important;
}
.buscador-box .bf-field select,
.buscador-box .bf-field div select{padding-right:28px !important;}
.buscador-box .bf-field label{font-size:10.5px;margin-bottom:3px;}
.buscador-box h3{margin:0 0 10px;font-size:12px;font-weight:700;color:#666;letter-spacing:0.06em;text-transform:uppercase;border-bottom:2px solid #E11112;padding-bottom:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
/* Rejilla de 12 tramos: cada filtro pide el ancho que necesita (.bf-c3, .bf-c6,
.bf-c12) en vez de tres columnas iguales. Con tres columnas fijas, al entrar
el código postal quedaban 9 campos: dos filas llenas, una fila con un hueco
y "Servicios" solo al final. Ahora las filas cierran exactas —cuatro filtros
arriba, cuatro abajo, servicios a todo lo ancho— y en eventos la Zona ocupa
el doble, que es texto libre y lo agradece. */
.bf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:9px 10px;margin-bottom:2px;}
.bf-c3{grid-column:span 3;}
.bf-c4{grid-column:span 4;}
.bf-c6{grid-column:span 6;}
.bf-c12{grid-column:1 / -1;}
/* Las medias van SIEMPRE prefijadas con .bf-grid. El panel avanzado de la
portada (.hero-advanced-grid) reutiliza estas mismas clases de tramo, pero
solo se convierte en rejilla a partir de 641px: sin prefijar, la regla de
980px le pondría todos los campos a ancho completo entre 641 y 980 y se
quedaría en una sola columna justo en tableta. */
@media(max-width:980px){
/* Dos por fila: .bf-c3 pasa a media anchura y lo ancho ocupa la fila entera */
.bf-grid .bf-c3{grid-column:span 6;}
.bf-grid .bf-c4,.bf-grid .bf-c6{grid-column:1 / -1;}
}
@media(max-width:620px){
.bf-grid .bf-c3,.bf-grid .bf-c4,.bf-grid .bf-c6{grid-column:1 / -1;}
}
.bf-field{display:flex;flex-direction:column;gap:3px;min-width:0;}
.bf-field label{font-size:10px;font-weight:700;text-transform:uppercase;color:#666;letter-spacing:0.06em;margin-bottom:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.bf-field select,
.bf-field input[type="text"]{width:100%;padding:7px 10px;border:1px solid #ddd;border-radius:8px;font-size:13px;color:#333;background:#fff;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.bf-field select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") right 10px center/10px no-repeat;padding-right:28px;cursor:pointer;}
.bf-field select:focus,
.bf-field input[type="text"]:focus{border-color:#E11112;box-shadow:0 0 0 3px rgba(225,17,18,0.10);outline:none;}
.bf-field select:hover,
.bf-field input[type="text"]:hover{border-color:#bbb;}
/* Flatpickr añade .flatpickr-input que resetea estilos: revertir */
.bf-field .flatpickr-input{width:100% !important;padding:7px 10px !important;border:1px solid #ddd !important;border-radius:8px !important;font-size:13px !important;color:#333 !important;background:#fff !important;box-sizing:border-box !important;-webkit-appearance:none !important;appearance:none !important;transition:border-color .2s,box-shadow .2s !important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;cursor:pointer !important;}
.bf-field .flatpickr-input:focus{border-color:#E11112 !important;box-shadow:0 0 0 3px rgba(225,17,18,0.10) !important;outline:none !important;}
.bf-field .flatpickr-input:hover{border-color:#bbb !important;}
.bf-field div select{width:100%;padding:7px 28px 7px 10px;border:1px solid #ddd;border-radius:8px;font-size:13px;color:#333;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") right 10px center/10px no-repeat;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;cursor:pointer;}
.bf-field div select:focus{border-color:#E11112;box-shadow:0 0 0 3px rgba(225,17,18,0.10);outline:none;}
.bf-field div select:hover{border-color:#bbb;}
.bf-services-toggle{width:100%;padding:7px 10px;background:#fff;border:1px solid #ddd;border-radius:8px;font-size:13px;font-weight:600;color:#555;cursor:pointer;box-sizing:border-box;margin-bottom:8px;transition:border-color .2s;position:relative;text-align:left;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.bf-services-toggle:hover{border-color:#bbb;}
.bf-services-toggle::after{content:'';display:inline-block;width:10px;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat center;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:transform .2s;}
.bf-services-toggle.closed::after{transform:translateY(-50%) rotate(-90deg);}
.bf-services{margin-bottom:8px;}
.bf-services ul.minioptions{width:100% !important;display:grid !important;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px;float:none !important;}
.bf-services ul.minioptions li{width:auto !important;height:auto !important;padding:5px 8px;border-radius:6px;font-size:12px;background:#fff;border:1px solid #ddd;transition:border-color .15s;float:none !important;}
.bf-services ul.minioptions li:hover{border-color:#bbb;}
.bf-services ul.minioptions li label{width:auto !important;height:auto !important;line-height:1.4;display:flex !important;align-items:center;gap:5px;cursor:pointer;float:none !important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.bf-services ul.minioptions li label input{float:none !important;margin:0;width:14px;height:14px;flex-shrink:0;}
/* Móvil: el grid fijo de 4 columnas dejaba celdas de ~70px y el texto se
solapaba con el checkbox — reducir columnas según ancho disponible. */
@media(max-width:860px){
.bf-services ul.minioptions{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
.bf-services ul.minioptions{grid-template-columns:1fr;}
}
.bf-submit{margin-top:10px;text-align:center;}
.bf-submit input[type="submit"]{display:inline-block;width:auto;padding:9px 40px;background:#E11112;color:#fff;border:none;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;transition:background .2s,transform .1s;text-transform:uppercase;letter-spacing:0.07em;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.bf-submit input[type="submit"]:hover{background:#b80d0e;}
.bf-submit input[type="submit"]:active{transform:scale(0.98);}
/* ── hero-advanced-inner en la página del buscador ──
Antes forzaba 3 columnas iguales aquí, lo que anulaba la rejilla de 12
tramos por especificidad (0,2,0 contra 0,1,0). Ahora solo aporta el
align-items y deja mandar a los .bf-cN. */
.buscador-page-form{margin-top:34px;}
.buscador-page-form .bf-grid{align-items:start;}
/* Compactado: la caja tenía 20px de aire y campos de 42px para escribir un
código postal de cinco cifras. Se baja a los 38px que usan todos los
controles del panel y se recorta el relleno; se ganan unos 80px de alto
sin que nada quede apretado. */
.buscador-page-form{padding:16px 18px !important;}
.buscador-page-form .bf-field label{font-size:10.5px;margin-bottom:3px;}
.hero-advanced-inner.buscador-page-form select,
.hero-advanced-inner.buscador-page-form .bf-field input[type="text"]{
padding:0 11px !important;font-size:13.5px !important;border-radius:9px !important;
/* Altura EXPLÍCITA e idéntica. Con solo relleno vertical no casaban: el
usa "normal"
(18px), así que quedaban a 36,89 y 36 px — casi un píxel de desnivel
entre dos campos de la misma fila. Es la misma altura única (38px) que
usan los controles del panel. */
height:38px !important;line-height:38px !important;
}
.hero-advanced-inner.buscador-page-form select{padding-right:28px !important;}
/* Fix campo texto (Zona): mismas dimensiones que los selects */
.hero-advanced-inner .bf-field input[type="text"]{
padding:10px 12px !important;border-radius:10px !important;
font-size:14px !important;height:auto !important;line-height:1.4 !important;
}
/* Selects dentro de div (provinciasBox/ciudadesBox) */
.hero-advanced-inner .bf-field div select{
display:block;width:100%;
padding:10px 32px 10px 12px;border:1px solid #ddd;border-radius:10px;
font-size:14px;color:#333;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") right 12px center/10px no-repeat;
box-sizing:border-box;-webkit-appearance:none;appearance:none;
transition:border-color .2s,box-shadow .2s;cursor:pointer;
}
.hero-advanced-inner .bf-field div select:focus{border-color:#E11112;box-shadow:0 0 0 3px rgba(225,17,18,.10);outline:none;}
.hero-advanced-inner .bf-field div select:hover{border-color:#bbb;}
/* Override #clicker legacy — mismo aspecto que select */
.hero-advanced-inner #clicker{
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") right 12px center/10px no-repeat !important;
border:1px solid #ddd !important;border-radius:10px !important;
padding:10px 32px 10px 12px !important;
font-size:14px !important;line-height:1.4 !important;
height:auto !important;color:#555 !important;
font-weight:400 !important;max-width:100% !important;
margin-bottom:0 !important;box-shadow:none !important;
transition:border-color .2s,box-shadow .2s !important;
}
.hero-advanced-inner #clicker.closed,
.hero-advanced-inner #clicker:not(.closed){
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important;
}
.hero-advanced-inner #clicker:hover{border-color:#bbb !important;}
/* Quitar el ::after del toggle ya que la flecha va en el background */
.hero-advanced-inner .bf-services-toggle::after{display:none;}
/* Panel servicios: pills modernos */
.hero-advanced-inner .bf-services{
border:1px solid #e0d9d0;border-radius:12px;
padding:14px 16px;background:#f9f7f5;margin-top:10px;
}
.hero-advanced-inner .bf-services ul.minioptions{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:6px !important;
list-style:none !important;margin:0 !important;padding:0 !important;
float:none !important;width:100% !important;
}
.hero-advanced-inner .bf-services ul.minioptions li{
width:100% !important;height:auto !important;
padding:0 !important;border:none !important;
background:none !important;float:none !important;
}
.hero-advanced-inner .bf-services ul.minioptions li label{
display:flex !important;align-items:center !important;gap:5px !important;
width:100% !important;
padding:7px 11px !important;border:1.5px solid #d0c8be !important;
border-radius:10px !important;font-size:11px !important;font-weight:600 !important;
color:#463a2e !important;cursor:pointer !important;background:#fff !important;
transition:all .15s !important;white-space:normal !important;
user-select:none;-webkit-user-select:none;
float:none !important;line-height:1.3 !important;
min-height:36px !important;height:100% !important;box-sizing:border-box !important;
}
.hero-advanced-inner .bf-services ul.minioptions li label:hover{
border-color:#E11112 !important;color:#E11112 !important;
}
.hero-advanced-inner .bf-services ul.minioptions li label input[type="checkbox"]{
width:13px !important;height:13px !important;
margin:0 !important;float:none !important;
accent-color:#E11112;flex-shrink:0;
}
@media(max-width:700px){
.buscador-page-form{margin-top:22px;}
}
/* Variante del hero: mismo problema de columnas fijas en pantallas estrechas */
@media(max-width:860px){
.hero-advanced-inner .bf-services ul.minioptions{grid-template-columns:repeat(2,1fr) !important;}
}
@media(max-width:480px){
.hero-advanced-inner .bf-services ul.minioptions{grid-template-columns:1fr !important;}
}
#pagination{width: 100%; max-width: 100%; height: auto; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 6px; float: none; clear: both; overflow: visible; padding: 18px 0 12px; text-align: center; box-sizing: border-box; margin: 0; border-top: 1px solid #e5e5e5;}
#pagination span,#pagination a{display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; text-align: center; color: #555; text-decoration: none; font-size: 13px; font-weight: 600; border: 1px solid #ddd; border-radius: 4px; transition: all 0.2s ease; background: #fff; cursor: pointer; box-sizing: border-box;}
#pagination a:hover{background: #cc0000; color: #fff; border-color: #cc0000;}
#pagination .current{background: #cc0000; color: #fff; border-color: #cc0000; font-weight: 700; cursor: default;}
#pagination .indicador{border: none; background: none; color: #999; font-size: 12px; font-weight: 400; min-width: auto; padding: 0 8px 0 0; cursor: default;}
#pagination .disabled{color: #ccc; cursor: default; border-color: #eee; background: #f5f5f5;}
#pagination .next{font-size: 12px;}
.topImage{width: 100%; max-width: 720px; height: 200px; overflow: hidden; display: block; float: none; clear: both; margin: 0 0 10px 0;}
.banners{width: 200px; height: auto; display: block; float: none; clear: both; margin: 8px auto; text-align: center;}
.banners img{margin: 0pc auto;}
.sitemap{padding: 10px; text-align: left; display: block;}
.sitemap h3{margin:20px 0 0 0; border-bottom: 1px solid #333;}
.sitemap a{color: #333; text-decoration: none; float: none; clear: both; display: block; font-family: 'HelveticaCondensedBoldRegular'; font-size: 16px; padding-left: 10px; line-height: 140%;}
.sitemap a:hover{color: #c50000;}
.sitemap .nivel2{font-size: 14px; padding-left: 20px;}
.sitemap .nivel3{font-size: 12px; padding-left: 40px;}
#mapa{width: 100%; max-width: 100%; height: 300px; display:block; float: none; clear: both; box-sizing: border-box;}
#clicker2{background: url(../images/clicker.png) bottom right no-repeat; display: block; position: absolute; right: 10px; top: 10px; z-index: 3}
#clicker2.closed{background: url(../images/clicker.png) top right no-repeat;}
.infobox{padding: 10px;line-height: 140%;}
.infobox a{display: block; float: right; clear: both; width: 80px; text-align: right; color: #333; text-decoration: none; margin-top: 20px; font-weight: bold;}
.infobox img{margin-right: 20px;}
#proxEv{width: 100%; max-width: 100%; height: auto; float: none; clear: both; overflow: hidden; position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 0;}
#proxEv ul.destacados{flex: 1; min-width: 0; overflow: hidden; flex-wrap: nowrap;}
.prevE,.nextE{width: 32px; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; text-decoration: none; text-indent: 0; position: static; background: #cc0000; color: #fff; font-size: 14px; z-index: 3; border-radius: 50%; transition: background 0.2s ease; flex-shrink: 0; cursor: pointer; border: none; padding: 0;}
.prevE:hover,.nextE:hover{background: #990000;}
.mismedios{width: 46%; margin: 1%; float: left; clear: none; display: block; overflow: hidden;border-radius: 1ex; -webkit-border-radius: 1ex; -moz-border-radius: 1ex; background: #ddd; padding: 1%;}
.mismedios legend{font-size: 18px; font-family: 'HelveticaCondensedBoldRegular'; text-decoration: underline;}
.mismedios .det{display: block; float: none; clear: both; overflow: hidden; font-size: 12px; font-weight: normal; margin: 10px auto; padding: 0 10px; border-radius: 1ex; -webkit-border-radius: 1ex; -moz-border-radius: 1ex; padding: 10px; font-size: 12px; color: #000; border: 1px solid #666;color: #333; background: #FAFAD2; }
.mismedios input[type="submit"]{
margin: 10px 0; float: right; clear: both;
}
.planesradio{width: 94%; height: auto; float: left; clear: both; background: #d0d0d0; border: 1px solid #333; margin: 0px auto;padding: 10px; font-size: 12px; color: #000;}
.planesradio input[type="radio"]{width: 24px; height: 24px; display: block; float: left; clear: none; margin: 0;}
.planesradio label{width: 100%; font-size: 15px; font-weight: bold; height: auto; display: block; float: none; clear: both;}
/* ═══════════════════════════════════════════════════════════════
* SMART SEARCH BAR – Minimalist Google-style (Etapa 34)
* ═══════════════════════════════════════════════════════════════ */
/* Wrapper — clean, minimal */
.smartsearch-bar-wrapper{
width: 100%; box-sizing: border-box;
padding: 24px 0 20px; margin: 0 0 16px 0;
text-align: center;
}
.smartsearch-bar-results{ margin-bottom: 20px; }
/* Search Container */
.smartsearch-container{
position: relative; z-index: 10;
max-width: 600px; margin: 0 auto;
}
.smartsearch-input{
width: 100%; box-sizing: border-box;
padding: 12px 48px 12px 48px;
font-size: 16px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #202124; background: #fff;
border: 1px solid #dfe1e5; border-radius: 24px;
outline: none; transition: box-shadow .2s, border-color .2s;
-webkit-appearance: none; appearance: none;
}
.smartsearch-input:hover{
box-shadow: 0 1px 6px rgba(32,33,36,0.18);
border-color: rgba(223,225,229,0);
}
.smartsearch-input:focus{
box-shadow: 0 1px 6px rgba(32,33,36,0.25);
border-color: rgba(223,225,229,0);
}
.smartsearch-input::placeholder{
color: #9aa0a6; font-size: 15px;
}
/* Icons inside input */
.smartsearch-icon{
position: absolute; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 2;
}
.smartsearch-icon-search{ left: 14px; }
.smartsearch-icon-voice{
right: 14px; cursor: pointer; pointer-events: auto;
width: 24px; height: 24px; opacity: 0.55;
transition: opacity .2s;
}
.smartsearch-icon-voice:hover{ opacity: 1; }
.smartsearch-icon-voice.ss-listening svg path{ fill: #e63946; }
/* Clear button */
.smartsearch-clear{
position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
background: none; border: none; font-size: 20px; color: #70757a;
cursor: pointer; padding: 4px 8px; line-height: 1; z-index: 3;
display: none; font-family: Arial, sans-serif;
}
.smartsearch-clear:hover{ color: #202124; }
/* ─── Dropdown Autocomplete ─── */
.smartsearch-dropdown{
display: none; position: absolute; top: 100%; left: 0; right: 0;
margin-top: 0; background: #fff;
border-radius: 0 0 24px 24px;
box-shadow: 0 4px 6px rgba(32,33,36,0.18);
border-top: 1px solid #e8eaed;
max-height: 400px; overflow-y: auto; z-index: 100;
text-align: left;
}
.smartsearch-dropdown.ss-open{
display: block;
}
padding: 44px;
border-radius: 36px;
background: linear-gradient(180deg, #faf6f1 0%, #f2e9df 100%);
border: 1px solid rgba(53,34,23,0.10);
box-shadow: 0 30px 70px rgba(45,24,12,0.12);
}
.smartsearch-dd-section{
padding: 4px 0;
border-bottom: 1px solid #f1f3f4;
}
.smartsearch-dd-section:last-child{ border-bottom: none; }
pointer-events: none;
border-radius: 0;
opacity: 1;
filter: none;
background: none;
border: none;
box-shadow: none;
content: none;
}
.qe-spotlight .qe-section-heading{
position: relative;
z-index: 1;
max-width: none;
margin-bottom: 36px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
gap: 26px;
align-items: end;
text-align: left;
}
.qe-spotlight .qe-section-title{
margin: 0;
font-size: 54px;
line-height: 0.94;
letter-spacing: -1.2px;
color: #171310;
}
.qe-spotlight .qe-section-intro{
max-width: 520px;
margin-left: auto;
font-size: 16px;
line-height: 1.75;
color: #5e5148;
}
.qe-spotlight-stage{
position: relative;
z-index: 1;
padding: 0;
border-radius: 0;
background: transparent;
border: none;
box-shadow: none;
}
.qe-spotlight-stage::before{
content: '';
position: absolute;
left: 0;
right: 0;
top: -18px;
height: 1px;
background: linear-gradient(90deg, rgba(23,19,16,0.08) 0%, rgba(23,19,16,0.44) 22%, rgba(23,19,16,0.08) 100%);
padding: 4px 16px; font-size: 11px; font-weight: 600;
display: block; font-size: 12px; color: #70757a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smartsearch-dd-footer{
padding: 8px 16px; text-align: center;
border-top: 1px solid #e8eaed;
}
.smartsearch-dd-footer a{
color: #1a73e8; font-size: 13px; font-weight: 500;
text-decoration: none;
}
.smartsearch-dd-footer a:hover{ text-decoration: underline; }
/* ─── Full Results Page ─── */
.smartsearch-fullpage{ min-height: 400px; padding: 0 4px; }
.search-page-title{ display: none !important; }
.search-category{ margin-bottom: 20px; }
.search-cat-title{
font-family: 'HelveticaCondensedBoldRegular','Arial Narrow',Arial,sans-serif;
font-size: 16px; color: #333; padding: 8px 14px;
background: linear-gradient(90deg, #f8f4ee 0%, #fff 100%);
border-left: 5px solid #cc0000; border-radius: 0 8px 8px 0;
margin-bottom: 10px; letter-spacing: 0.3px;
}
.search-cat-count{ font-weight: 400; color: #9a8b7a; font-size: 13px; }
/* ── Header de resultados ── */
.sr-header{
padding: 10px 0 16px;
border-bottom: 1px solid #e6ddd4;
margin-bottom: 22px;
}
.sr-hdr-eyebrow{
font-size: 11px !important; font-weight: 600 !important;
text-transform: uppercase !important; letter-spacing: 0.12em !important;
color: #9a8b7a !important; margin: 0 0 6px !important;
font-family: 'Segoe UI', Roboto, sans-serif !important;
background: none !important; padding: 0 !important; min-height: 0 !important;
}
.sr-hdr-query{
font-size: 30px !important; font-weight: 700 !important;
font-family: Georgia, 'Times New Roman', serif !important;
font-style: italic !important;
color: #19120e !important;
margin: 0 0 10px !important; line-height: 1.2 !important;
background: none !important; background-image: none !important;
padding: 0 !important; min-height: 0 !important;
float: none !important; display: block !important;
}
.sr-hdr-count{
font-size: 13px !important; color: #6b5947 !important;
margin: 0 !important; font-family: 'Segoe UI', Roboto, sans-serif !important;
background: none !important; padding: 0 !important;
}
.sr-hdr-nores{ color: #9a8b7a !important; }
/* ── Filter Tabs ── */
.sr-tabs{
display: flex; gap: 6px; margin-bottom: 24px;
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
padding-bottom: 2px;
}
.sr-tabs::-webkit-scrollbar{ display: none; }
.sr-tab{
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 16px;
border: 1.5px solid #d8cdc1;
border-radius: 24px;
background: transparent;
color: #6b5947;
font-size: 13px; font-weight: 600;
font-family: 'Segoe UI', Roboto, sans-serif;
cursor: pointer; white-space: nowrap;
transition: border-color .18s, color .18s, background .18s;
}
.sr-tab svg{ opacity: .5; transition: opacity .18s; }
.sr-tab:hover{ border-color: #E11112; color: #E11112; }
.sr-tab:hover svg{ opacity: 1; }
.sr-tab.sr-tab-active{
background: #E11112 !important; border-color: #E11112 !important; color: #fff !important;
}
.sr-tab.sr-tab-active svg{ opacity: 1; filter: invert(1) brightness(2); }
.sr-tab.sr-tab-active .sr-tab-count{ color: #fff !important; }
.sr-tab-count{
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 5px !important;
background: #e5dfd8; color: #6b5947;
font-size: 11px !important; font-weight: 700; border-radius: 10px;
line-height: 1 !important; flex-shrink: 0;
}
.sr-tab.sr-tab-active .sr-tab-count{ background: rgba(255,255,255,0.2); }
/* ── Sections ── */
.sr-sections{ display: flex; flex-direction: column; gap: 32px; }
.search-section{}
/* ── Section header ── */
.ss-head{
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
gap: 8px;
padding-bottom: 10px;
margin-bottom: 14px;
border-bottom: 1px solid #ede8e0;
}
.ss-head-title{
display: block;
flex-shrink: 0;
white-space: nowrap;
margin: 0;
padding: 0 !important;
font-size: 13px !important;
font-weight: 800;
line-height: 1.4 !important;
color: #19120e;
font-family: 'HelveticaCondensedBoldRegular','Arial Narrow',Arial,sans-serif;
text-transform: uppercase;
letter-spacing: 0.7px;
}
.ss-head-title svg{
display: inline-block;
vertical-align: -3px;
margin-right: 5px;
width: 16px;
height: 16px;
}
.ss-head-count{
flex-shrink: 0;
white-space: nowrap;
margin: 0 !important;
padding: 0 !important;
font-size: 12px !important;
font-weight: 400;
line-height: 1.4 !important;
color: #9a8b7a;
font-family: 'Segoe UI', Roboto, sans-serif;
}
.ss-head-more{
margin-left: auto;
flex-shrink: 0;
align-self: center;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 13px;
font-size: 11px !important;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #E11112 !important;
text-decoration: none;
white-space: nowrap;
border: 1.5px solid #E11112;
border-radius: 20px;
background: transparent;
transition: background .18s, color .18s;
}
.ss-head-more:hover{ background: #E11112; color: #fff !important; }
/* ── Sub-filtros ── */
.ss-subfilters{
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin-bottom: 16px;
background: none; border: none; border-radius: 0; overflow: visible;
}
.ss-sf-label{
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: #9a8b7a; white-space: nowrap;
font-family: 'Segoe UI', Roboto, sans-serif;
padding: 0; background: none; border: none; flex-shrink: 0;
}
.ss-filter{
padding: 6px 28px 6px 12px;
border: 1.5px solid #d8cdc1; border-radius: 20px;
background-color: #fff;
font-size: 12px; font-weight: 600; color: #463a2e;
cursor: pointer; outline: none;
font-family: 'Segoe UI', Roboto, sans-serif;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b5947' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color .15s;
}
.ss-filter:focus, .ss-filter:hover{ border-color: #E11112; }
.ss-filter:last-of-type{ border-right: 1.5px solid #d8cdc1; }
.ss-reset-btn{
padding: 5px 12px;
border: 1.5px solid #d8cdc1; border-radius: 20px;
background: transparent; color: #9a8b7a;
font-size: 12px; font-weight: 600;
cursor: pointer; font-family: 'Segoe UI', Roboto, sans-serif;
transition: border-color .15s, color .15s;
}
.ss-reset-btn:hover{ border-color: #E11112; color: #E11112; }
/* ── Expand button ── */
.ss-expand-wrap{ display: flex; justify-content: center; margin-top: 12px; }
.ss-expand-btn{
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 22px;
border: 1px solid #d0c8be;
background: transparent; color: #6b5947;
font-size: 13px; font-weight: 500; border-radius: 6px;
cursor: pointer;
transition: border-color .15s, color .15s;
font-family: 'Segoe UI', Roboto, sans-serif;
}
.ss-expand-btn:hover{ border-color: #E11112; color: #E11112; }
/* ── Date chip ── */
.sr-date-chip{
font-size: 12px; font-weight: 600;
color: #1a56db; margin-right: 5px;
font-family: 'Segoe UI', Roboto, sans-serif;
}
/* Hidden overflow items */
li.sr-ov{ display: none !important; }
/* ── Responsive ── */
@media(max-width:640px){
.sr-hdr-query{ font-size: 22px !important; }
.sr-tabs{ gap: 5px; }
.sr-tab{ padding: 7px 12px; font-size: 12px; }
.ss-head{ flex-wrap: nowrap; gap: 6px; }
.ss-head-title{ font-size: 12px !important; }
.ss-head-more{ display: none; } /* movil-ok: el enlace «Busqueda avanzada» de la cabecera de resultados; en movil se llega al buscador desde la barra de abajo */
.ss-subfilters{ gap: 6px; }
.ss-filter{ flex: 1 1 calc(50% - 3px); min-width: 110px; }
}
.search-results-list{ list-style: none; margin: 0; padding: 0; }
.search-result-item{
margin-bottom: 10px; padding: 0;
border-bottom: none;
}
.search-result-link{
display: flex; align-items: stretch; gap: 0;
padding: 0; text-decoration: none; color: #333;
transition: box-shadow .25s, transform .2s;
border-radius: 12px; overflow: hidden;
background: linear-gradient(180deg, #fffdfa 0%, #f8f4ee 100%);
border: 1px solid #d8cdc1;
box-shadow: 0 6px 18px rgba(61,40,24,0.08);
position: relative;
}
.search-result-link:before{
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, #cc0000 0%, #8f140d 55%, #c5a06a 100%);
z-index: 1;
}
.search-result-link:hover{
box-shadow: 0 10px 28px rgba(61,40,24,0.15);
transform: translateY(-2px);
border-color: #c5a06a;
}
.search-result-thumb{
width: 100px; min-height: 80px; object-fit: cover;
flex-shrink: 0; background: #ece6df;
border-radius: 0; margin: 0;
}
.search-result-info{
flex: 1; min-width: 0; padding: 10px 16px;
display: flex; flex-direction: column; justify-content: center;
}
.search-result-title{
display: block; font-size: 15px; font-weight: 700;
color: #333; margin-bottom: 3px;
font-family: 'HelveticaCondensedBoldRegular', 'Arial Narrow', Arial, sans-serif;
text-transform: uppercase; letter-spacing: 0.4px;
}
.search-result-link:hover .search-result-title{ color: #cc0000; text-decoration: none; }
.search-result-meta{
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
font-size: 12px; color: #6b5947; margin-bottom: 4px;
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: 0.2px;
}
.search-result-excerpt{
font-size: 13px; color: #463a2e; line-height: 1.55;
margin: 0; padding: 0;
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.search-result-type-label{
display: block; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 3px;
font-family: 'HelveticaCondensedBoldRegular', 'Arial Narrow', Arial, sans-serif;
}
.search-result-type-label.type-evento{ color: #1a56db; }
.search-result-type-label.type-plato{ color: #92600a; }
/* Sin resultados — estado vacío rediseñado */
.search-no-results{
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 64px 24px 80px;
max-width: 560px; margin: 0 auto;
}
.search-no-icon-wrap{
width: 88px; height: 88px;
background: #fdf2f2;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 28px;
border: 2px solid rgba(225,17,18,0.12);
flex-shrink: 0;
}
.search-no-title{
font-size: 22px; font-weight: 800;
color: #19120e;
font-family: Georgia, 'Times New Roman', serif;
margin: 0 0 10px; line-height: 1.3;
}
.search-no-query-badge{
display: inline-block;
background: rgba(225,17,18,0.08);
color: #E11112; font-weight: 700;
padding: 1px 9px; border-radius: 6px;
font-style: italic;
}
/* ⚠ La regla heredada de 2009
`.content span:not(...)` → padding: 0 0 12px; font-size: 14px
tiene especificidad (0,17,1) y le gana a todo lo de aquí arriba (0,1,0). En
esta píldora se veía a simple vista: el recuadro rojo se quedaba SIN relleno
a los lados —el texto pegado al borde— y con 12px de rojo vacío colgando por
debajo, además de encoger la palabra a 14px cuando tenía que heredar los 22
del título. Medido: 40,8×30,2 cuando debía ser ~62×26.
Nombrando el `span` e insistiendo con `!important` —lo único que vence a esa
regla— vuelve a ser lo que su autor escribió. Mismo apaño que ya se usa en
`.detail-card-meta-item`, `.carta-thumb-label` y `.info-ico`. */
.search-no-query-badge,
.content span.search-no-query-badge{
padding: 1px 9px !important;
font-size: inherit !important;
line-height: 1.25;
}
/* Los otros dos `span` de este bloque caen en la misma trampa. No se veía roto
—el ✦ y su texto quedan alineados igual— pero cada consejo arrastraba 12px
de aire muerto por debajo. */
.content span.search-no-tip-icon,
.search-no-tip > span{
padding: 0 !important;
}
.search-no-subtitle{
font-size: 15px; color: #6b5947;
font-family: Georgia, 'Times New Roman', serif;
margin: 0 0 32px; line-height: 1.6;
}
.search-no-tips{
list-style: none; padding: 0;
margin: 0 0 36px; width: 100%;
display: flex; flex-direction: column; gap: 10px;
text-align: left;
}
.search-no-tip{
display: flex; align-items: flex-start; gap: 12px;
background: #faf8f5;
border: 1px solid #e6ddd4;
border-radius: 10px;
padding: 12px 16px;
font-size: 14px; color: #463a2e;
line-height: 1.5;
}
.search-no-tip-icon{
flex-shrink: 0; margin-top: 1px;
color: #E11112; font-size: 16px;
}
.search-no-actions{
display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.search-no-btn-primary{
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 28px;
background: #E11112; color: #fff !important;
border-radius: 24px; text-decoration: none !important;
font-size: 14px; font-weight: 700;
transition: background .2s, box-shadow .2s;
border: none;
}
.search-no-btn-primary:hover{
background: #c0000f;
box-shadow: 0 6px 18px rgba(225,17,18,0.30);
color: #fff !important;
}
.search-no-btn-secondary{
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 26px;
border: 1.5px solid #c5a06a; color: #6b5947 !important;
border-radius: 24px; text-decoration: none !important;
font-size: 14px; font-weight: 600;
background: transparent;
transition: border-color .2s, color .2s, background .2s;
}
.search-no-btn-secondary:hover{
background: #faf4ea; color: #463a2e !important; border-color: #b0845a;
}
/* Icono emoji legacy — oculto si existe el nuevo wrapper */
.search-no-icon{ font-size: 48px; margin-bottom: 16px; }
.search-no-suggestions{
font-size: 13px; color: #9a8b7a; margin-top: 10px;
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Responsive */
@media (max-width: 600px){
.search-result-link{ flex-direction: column; }
.search-result-thumb{ width: 100%; min-height: 140px; }
.search-result-info{ padding: 10px 14px; }
.search-result-link:before{ width: 100%; height: 4px; bottom: auto; }
}
/* ─── Recent searches ─── */
.smartsearch-recent-label{
padding: 8px 16px 4px; font-size: 11px; font-weight: 600;
color: #70757a; text-transform: uppercase;
}
.smartsearch-recent-item{
display: flex; align-items: center; gap: 10px;
padding: 7px 16px; cursor: pointer; color: #202124;
transition: background .1s;
}
.smartsearch-recent-item:hover{ background: #f1f3f4; }
.smartsearch-recent-icon{ color: #9aa0a6; font-size: 14px; }
.smartsearch-recent-text{ font-size: 14px; }
/* ===== Client Panel Dashboard ===== */
.cpanel-fullwidth{ width: 100% !important; max-width: 1190px; }
/* ── Panel Login Page (when not authenticated) ── */
.panel-login-page {
max-width: 400px;
margin: 40px auto 60px;
padding: 32px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 16px rgba(0,0,0,0.08);
text-align: center;
}
.panel-login-page h2 {
font-size: 22px;
font-weight: 700;
color: #333;
margin: 0 0 6px;
}
.panel-login-subtitle {
font-size: 14px !important;
color: #888 !important;
margin: 0 0 24px !important;
}
.panel-login-form {
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
}
.panel-login-form label {
font-size: 12px;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-top: 8px;
}
.panel-login-form input[type="text"],
.panel-login-form input[type="password"] {
width: 100%;
padding: 11px 14px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 15px;
color: #333;
background: #fafafa;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.panel-login-form input:focus {
border-color: #c00;
box-shadow: 0 0 0 3px rgba(225,17,18,0.1);
outline: none;
background: #fff;
}
.panel-login-form button {
margin-top: 14px;
padding: 12px;
background: #c00;
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.panel-login-form button:hover {
background: #a00;
}
.panel-login-error {
background: #fff3cd;
border: 1px solid #ffc107;
color: #856404;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
text-align: center;
}
.panel-login-links {
display: flex;
justify-content: space-between;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #eee;
}
.panel-login-links a {
font-size: 13px;
color: #c00;
text-decoration: none;
}
.panel-login-links a:hover {
text-decoration: underline;
}
.cpanel-dashboard{ width: 100%; float: left; clear: both; }
/* ════════════════════════════════════════════════════════════
BOTONES PÍLDORA DE CABECERA DEL PANEL · .pnl-*
Construidos desde cero. Prefijo nuevo (.pnl-) a propósito:
no comparte nombre con nada anterior, así que no puede
heredar restos de reglas viejas.
Centrado: el botón es flex con align-items:center. El icono
es un bloque de tamaño fijo y el texto va en su propio span
con line-height:1. La fuente del sitio dibuja las MAYÚSCULAS
0,9px por encima del centro de su caja (dato obtenido
escaneando los píxeles reales renderizados en un canvas; las
métricas de fuente vía JS mienten con esta fuente), por eso
el texto lleva translateY(1px) — sin ese ajuste el icono se
ve más bajo que las letras.
════════════════════════════════════════════════════════════ */
.pnl-actions{
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.pnl-actions form{ margin: 0; padding: 0; }
.pnl-btn{
/* reset explícito: nada de estilos por defecto del navegador ni heredados */
-webkit-appearance: none; appearance: none;
margin: 0; box-sizing: border-box; background: none; border: none;
text-decoration: none !important; cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 38px;
padding: 0 20px;
border-radius: 999px;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11.5px;
letter-spacing: .6px;
text-transform: uppercase;
white-space: nowrap;
transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pnl-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.pnl-btn__ico{
display: block;
width: 16px; height: 16px;
flex-shrink: 0;
}
/* IMPORTANTE (gotcha #1 del proyecto): la regla legacy
`.content span:not(...)` de style.css (~L840) le mete a CUALQUIER
span dentro de .content un `font-size:14px` y un `padding-bottom:12px`.
Sin blindar esto, la caja del texto pasaba de ~11px a 26px con las
letras pegadas arriba y 12px de aire abajo — y como el flex centra la
CAJA, el icono quedaba visiblemente por debajo de las letras. De ahí
venía el descuadre, no de las métricas de la fuente.
Prefijo .content + !important = única forma fiable de ganarle. */
.content .pnl-btn__txt,
.pnl-btn__txt{
display: block;
font-size: 11.5px !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
/* Con la caja ya limpia, queda un residuo medido de 0,9px (las mayúsculas
de esta fuente se dibujan algo por encima del centro de su caja). Se
compensa bajando la etiqueta 1px: icono y letras quedan al mismo nivel. */
transform: translateY(1px);
}
/* Secundario: contorno sobre el degradado rojo */
.pnl-btn--ghost{
border: 1.5px solid rgba(255,255,255,.55);
background: rgba(255,255,255,.08);
color: #fff;
}
.pnl-btn--ghost:hover{
background: rgba(255,255,255,.2);
border-color: #fff;
transform: translateY(-1px);
}
/* Principal: sólido blanco */
.pnl-btn--solid{
background: #fff;
color: var(--brand-red-dark, #c00);
box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.pnl-btn--solid:hover{
background: #fff;
transform: translateY(-1px);
box-shadow: 0 7px 20px rgba(0,0,0,.28);
}
@media (prefers-reduced-motion: reduce){
.pnl-btn{ transition: none; }
.pnl-btn:hover{ transform: none; }
}
/* Welcome header */
.cpanel-welcome{
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
padding: 28px 32px; margin-bottom: 22px; border-radius: 12px;
background: linear-gradient(135deg, #8b0000 0%, #cc0000 60%, #e63900 100%);
color: #fff; box-shadow: 0 4px 24px rgba(139,0,0,.25);
}
.cpanel-welcome-text h1{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 24px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px 0;
text-shadow: 1px 1px 3px rgba(0,0,0,.3);
/* Anular el h1 genérico (línea ~464): min-height/padding/background(h1_bg.png)/color:#333
se colaban aquí porque ese h1 no está scopeado a .content y esta regla, aunque más
específica, no pisaba esas propiedades. Sin esto la cabecera del panel de cliente se
veía con una caja/imagen de fondo ajena y el texto en gris oscuro en vez de blanco. */
color: #fff; background: none; min-height: 0; padding: 0; line-height: 1.25;
}
.cpanel-welcome-text .cpanel-subtitle{
font-family: Georgia, 'Times New Roman', serif;
font-size: 13px; opacity: .85; margin: 0; font-style: italic;
}
/* Stats row */
.cpanel-stats{
display: flex; gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
}
.cpanel-stat-item{
flex: 1; min-width: 100px; text-align: center; padding: 18px 12px; border-radius: 10px;
background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,.06);
display: flex; flex-direction: column; gap: 2px;
transition: box-shadow .15s, transform .15s, border-color .15s;
text-decoration: none !important; cursor: pointer;
}
.cpanel-stat-item:hover{
box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); border-color: #cc0000;
}
/* Aviso "completa tu perfil" / "añade tu primer local" */
.cpanel-nudge{
display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 20px;
border-radius: 12px; border: 1px solid;
}
.cpanel-nudge-primary{
background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%); border-color: rgba(204,0,0,0.22);
}
.cpanel-nudge-info{
background: linear-gradient(135deg, #fff8e8 0%, #fff0d0 100%); border-color: rgba(184,134,11,0.28);
}
.cpanel-nudge-icon{
width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.cpanel-nudge-primary .cpanel-nudge-icon{ background: rgba(204,0,0,0.12); color: #cc0000; }
.cpanel-nudge-info .cpanel-nudge-icon{ background: rgba(184,134,11,0.15); color: #92600a; }
.cpanel-nudge-body{ flex: 1; min-width: 0; }
.cpanel-nudge-body strong{
display: block; font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 15px; color: #222; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .3px;
}
.content .cpanel-nudge-body p{
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 13px !important; color: #555; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important;
}
.cpanel-nudge-btn{
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
height: 40px; padding: 0 20px; border-radius: 999px; white-space: nowrap;
font-size: 13px; font-weight: 700; text-decoration: none !important;
transition: transform .15s, box-shadow .15s;
}
.cpanel-nudge-primary .cpanel-nudge-btn{ background: #cc0000; color: #fff !important; box-shadow: 0 6px 16px rgba(204,0,0,0.28); }
.cpanel-nudge-info .cpanel-nudge-btn{ background: #b8860b; color: #fff !important; box-shadow: 0 6px 16px rgba(184,134,11,0.28); }
.cpanel-nudge-btn:hover{ transform: translateY(-2px); }
@media screen and (max-width: 640px){
.cpanel-nudge{ flex-direction: column; text-align: center; }
.cpanel-nudge-btn{ width: 100%; }
}
.cpanel-stat-num{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 36px; color: #cc0000; line-height: 1;
}
.cpanel-stat-label{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11px; text-transform: uppercase; color: #666; letter-spacing: .5px;
}
.cpanel-stat-quota{
font-size: 11px; color: #999; font-style: italic;
}
/* Main action cards — sin iconos decorativos: el título grande (h2) y la
barra de color a la izquierda son la identidad de cada tarjeta. El
número pasa a ser un bloque de estadística real (grande, en color),
no una etiqueta pequeña en cursiva. auto-fit con 4 tarjetas siempre
forma una rejilla par (2x2 o 4x1), nunca deja una suelta. */
.cpanel-cards{
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px; margin-bottom: 22px;
}
.cpanel-card{
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 24px 26px; border-radius: 12px; text-decoration: none !important;
border: 1px solid #e8e8e8; background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
transition: transform .15s, box-shadow .15s, border-color .15s;
position: relative; overflow: hidden;
}
.cpanel-card::before{
content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
}
.cpanel-card-locales::before{ background: #cc0000; }
.cpanel-card-eventos::before{ background: #1a56db; }
.cpanel-card-menus::before{ background: #b8860b; }
.cpanel-card-carta::before{ background: #2e7d32; }
/* ── Carta digital y QR ────────────────────────────────────────────────
Ocupa la fila entera: con cinco tarjetas la rejilla dejaba una suelta y
descolgada (el 2-2-1 que ya se corrigió en su día). Así cierra el bloque
en lugar de romperlo. */
.cpanel-card-qr{
grid-column: 1 / -1;
background: linear-gradient(180deg, #fffdf8 0%, #fdf6e7 100%);
border-color: #e6d2a8;
}
.cpanel-card-qr::before{ background: #b6862c; }
.cpanel-card-qr:hover{ border-color: #b6862c; }
.cpanel-card-qr .cpanel-card-stat{ border-left-color: #ecd9ae; }
/* Distintivo "Nuevo". Dos correcciones medidas, no a ojo:
1) RELLENO ASIMÉTRICO (3.75 arriba / 2.25 abajo). Es el gotcha #4: la fuente
HelveticaCondensedBoldRegular dibuja las MAYÚSCULAS ~0,75px por encima del
centro de su caja de línea. Aquí no sirve el translateY de la receta
habitual, porque el ES la píldora: moverlo desplazaría también el
fondo. Bajando el texto con el relleno se corrige solo el texto.
2) translateY(-0.6px) sube la píldora entera, que quedaba baja respecto a las
letras del h2 (vertical-align:middle no acierta con el centro óptico de
unas mayúsculas de 21px). */
.cpanel-card-nuevo, .content span.cpanel-card-nuevo{
display: inline-block;
vertical-align: middle;
margin-left: 9px;
padding: 3.75px 8px 2.25px !important;
border-radius: 999px;
background: #b6862c;
color: #fff;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 9.5px !important;
letter-spacing: .6px;
text-transform: uppercase;
line-height: 1 !important;
transform: translateY(-0.6px);
}
.cpanel-card:hover{
transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,.12);
border-color: #ccc;
}
.cpanel-card-body{ flex: 1; min-width: 0; }
.cpanel-card h2{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 21px; text-transform: uppercase; color: #1a1a1a; margin: 0 0 5px 0;
letter-spacing: .3px; line-height: 1.15;
}
.content .cpanel-card p{
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 13px !important; color: #777; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important;
}
.cpanel-card-stat{
flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
min-width: 64px; padding-left: 20px; border-left: 1px solid #eee;
}
/* .content span:not(...) (gotcha #1, style.css ~L840) le gana en
especificidad a un solo .cpanel-card-stat-num — reforzar con .content
delante + !important, mismo patrón que el resto de spans nuevos. */
.content .cpanel-card-stat-num{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 34px !important; line-height: 1 !important; color: #1a1a1a;
padding: 0 !important;
}
.content .cpanel-card-stat-label{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 10.5px !important; text-transform: uppercase; color: #999;
letter-spacing: .4px; margin-top: 3px; padding: 0 !important;
}
.cpanel-card-locales .cpanel-card-stat-num{ color: #cc0000; }
.cpanel-card-eventos .cpanel-card-stat-num{ color: #1a56db; }
.cpanel-card-menus .cpanel-card-stat-num{ color: #b8860b; }
.cpanel-card-carta .cpanel-card-stat-num{ color: #2e7d32; }
/* Secondary actions */
.cpanel-secondary{
display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.cpanel-action{
flex: 1; min-width: 180px; display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: 10px; text-decoration: none !important;
background: #f7f7f7; border: 1px solid #e0e0e0;
transition: background .15s, border-color .15s, transform .15s;
}
.cpanel-action:hover{ background: #eee; border-color: #ccc; transform: translateY(-1px); }
.cpanel-action-plan{ background: #fff8e1; border-color: #f0d060; }
.cpanel-action-plan:hover{ background: #fff3cd; }
.cpanel-action-icon{
width: 38px; height: 38px; border-radius: 8px; display: flex;
align-items: center; justify-content: center;
background: #e8e8e8; color: #555; flex-shrink: 0;
}
.cpanel-action-plan .cpanel-action-icon{ background: #fde68a; color: #92600a; }
.cpanel-action-text{ display: flex; flex-direction: column; }
.cpanel-action-text strong{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 13px; color: #333; text-transform: uppercase;
}
.cpanel-action-text em{
font-family: 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 12px; color: #888; font-style: normal;
}
/* Dashboard responsive */
@media screen and (max-width: 720px){
.cpanel-welcome{ flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
.pnl-actions{ justify-content: center; }
.cpanel-cards{ grid-template-columns: 1fr; }
.cpanel-stats{ flex-direction: column; }
.cpanel-secondary{ flex-direction: column; }
.cpanel-sections{ grid-template-columns: 1fr; }
}
/* ===== Profile Sections (perfil.php) ===== */
.cpanel-sections{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 22px;
}
.cpanel-section{
background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden;
display: flex; flex-direction: column;
}
.cpanel-section-header{
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid #eee;
}
.cpanel-section-header h3{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 15px; text-transform: uppercase; letter-spacing: .3px;
margin: 0; color: #222;
}
.cpanel-section-icon{
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cpanel-section-locales .cpanel-section-icon{ background: #fde8e8; color: #cc0000; }
.cpanel-section-eventos .cpanel-section-icon{ background: #e8eefb; color: #1a56db; }
.cpanel-section-carta .cpanel-section-icon{ background: #e8f5e9; color: #2e7d32; }
.cpanel-section-menus .cpanel-section-icon{ background: #fdf3e0; color: #b8860b; }
.cpanel-section-body{
padding: 14px 18px; flex: 1; display: flex; flex-direction: column;
}
/* Override old listasPerfil inside new sections */
.cpanel-section ul.listasPerfil,
.cpanel-section ul.listasPerfil li{
width: 100%; box-sizing: border-box;
}
.cpanel-section ul.listasPerfil li{
border-bottom-color: #e8e8e8; padding: 4px 0;
}
.cpanel-section ul.listasPerfil li p{ color: #333; width: auto; flex: 1; }
.cpanel-section ul.listasPerfil li h4{ color: #555; }
/* Buttons */
/* Botones de acción del panel (Nuevo local, Nuevo evento, Editar datos...).
Modernizados a píldora para igualar el lenguaje visual del resto del sitio
(antes eran rectángulos de 6px, los únicos con esa forma en el panel). */
.cpanel-btn{
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 24px; border-radius: 999px; border: none;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
cursor: pointer; margin-top: 10px;
text-align: center; text-decoration: none;
-webkit-appearance: none; appearance: none;
transition: background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.cpanel-btn svg{ flex-shrink: 0; width: 16px; height: 16px; }
/* mismo ajuste óptico que en las demás píldoras con texto en mayúsculas */
.content .cpanel-btn__txt{
display: block; font-size: 12px !important; line-height: 1 !important;
padding: 0 !important; margin: 0 !important; transform: translateY(1px);
}
.cpanel-btn-primary{
background: #cc0000; color: #fff;
box-shadow: 0 4px 14px rgba(204,0,0,.26);
}
.cpanel-btn-primary:hover{ background: #a00; transform: translateY(-1px); box-shadow: 0 7px 20px rgba(204,0,0,.32); }
.cpanel-btn-outline{
background: transparent; color: #cc0000; border: 1.5px solid #cc0000;
}
.cpanel-btn-outline:hover{ background: #fde8e8; transform: translateY(-1px); }
.cpanel-btn-cta{
background: #f0ad4e; color: #fff;
box-shadow: 0 4px 14px rgba(240,173,78,.3);
}
.cpanel-btn-cta:hover{ background: #ec971f; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce){
.cpanel-btn, .cl2-btn{ transition: none; }
.cpanel-btn:hover, .cl2-btn:hover{ transform: none; }
}
/* Notices */
.cpanel-notice{
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 13px; color: #666; padding: 8px 12px; border-radius: 6px;
background: #f5f5f5; border: 1px solid #e0e0e0; margin-bottom: 6px;
}
.cpanel-notice-warn{
background: #fff8e1; border-color: #f0d060; color: #7a5d00;
}
/* Alert (salida messages) */
.cpanel-alert{
padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32;
font-family: 'Segoe UI', Arial, sans-serif; font-size: 13px;
}
/* ── Navegación de secciones: tarjetas independientes ──
Antes era una barra segmentada (un solo bloque con separadores
internos), que se veía anticuada. Ahora cada sección es su propia
tarjeta con aire entre ellas, manteniendo el orden y la posición
horizontal. El contenedor ya no pinta fondo ni borde. */
.cpanel-nav{
display: flex; gap: 10px; background: none; border: none;
border-radius: 0; margin-bottom: 20px; overflow: visible;
}
.cpanel-nav-item{
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
height: 42px; padding: 0 10px;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
color: #6b7280; text-decoration: none !important;
background: #fff; border: 1px solid #e4e4e7; border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.cpanel-nav-item:hover{
background: #fff; color: #18181b; border-color: #d4d4d8;
transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.09);
}
.cpanel-nav-item svg{ flex-shrink: 0; width: 16px; height: 16px; }
/* etiqueta con la receta validada (ver CLAUDE.md gotcha #4) */
.content .cpanel-nav-item .cpanel-nav-txt{
display: block; font-size: 11.5px !important; line-height: 1 !important;
padding: 0 !important; margin: 0 !important; transform: translateY(1px);
}
.cpanel-nav-active{
background: #cc0000; color: #fff !important; border-color: #cc0000;
box-shadow: 0 5px 16px rgba(204,0,0,.3);
}
.cpanel-nav-active:hover{
background: #b00; color: #fff !important; border-color: #b00;
box-shadow: 0 7px 20px rgba(204,0,0,.36);
}
@media (prefers-reduced-motion: reduce){
.cpanel-nav-item{ transition: none; }
.cpanel-nav-item:hover{ transform: none; }
}
/* ════════════════════════════════════════════════════════════
Diálogo de confirmación propio (.pnl-modal)
Sustituye al confirm() nativo del navegador, que rompía la
estética del panel y mostraba una barra gris del sistema.
════════════════════════════════════════════════════════════ */
.pnl-modal{
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.pnl-modal[hidden]{ display: none; }
.pnl-modal__backdrop{
position: absolute; inset: 0;
background: rgba(24,24,27,.55);
backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
animation: pnlFade .18s ease;
}
.pnl-modal__box{
position: relative; z-index: 1;
width: 100%; max-width: 420px;
background: #fff; border-radius: 16px;
padding: 30px 28px 24px;
box-shadow: 0 20px 60px rgba(0,0,0,.3);
text-align: center;
animation: pnlPop .2s cubic-bezier(.2,.9,.3,1.2);
}
.pnl-modal__icon{
width: 54px; height: 54px; margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: #fee2e2; color: #dc2626;
}
.pnl-modal__icon svg{ width: 25px; height: 25px; }
.content .pnl-modal__title{
margin: 0 0 8px !important; padding: 0 !important;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 19px !important; line-height: 1.3 !important; color: #18181b;
border: none;
}
.content .pnl-modal__text{
margin: 0 0 24px !important; padding: 0 !important;
font-family: 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 14px !important; line-height: 1.5 !important; color: #52525b;
}
.pnl-modal__actions{ display: flex; gap: 10px; justify-content: center; }
.pnl-modal__btn{
-webkit-appearance: none; appearance: none; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
min-width: 130px; height: 42px; padding: 0 20px;
border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.pnl-modal__btn:hover{ transform: translateY(-1px); }
.pnl-modal__btn--cancel{ background: #fff; color: #3f3f46; border-color: #d4d4d8; }
.pnl-modal__btn--cancel:hover{ background: #f4f4f5; border-color: #a1a1aa; }
.pnl-modal__btn--danger{ background: #dc2626; color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.32); }
.pnl-modal__btn--danger:hover{ background: #b91c1c; box-shadow: 0 7px 20px rgba(220,38,38,.4); }
.pnl-modal__btn:focus-visible{ outline: 2px solid #18181b; outline-offset: 2px; }
@keyframes pnlFade{ from{opacity:0} to{opacity:1} }
@keyframes pnlPop{ from{opacity:0; transform: translateY(10px) scale(.97)} to{opacity:1; transform:none} }
@media (max-width: 480px){
.pnl-modal__actions{ flex-direction: column-reverse; }
.pnl-modal__btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
.pnl-modal__backdrop, .pnl-modal__box{ animation: none; }
.pnl-modal__btn{ transition: none; }
.pnl-modal__btn:hover{ transform: none; }
}
/* ── Section-specific welcome header colors ── */
.cpanel-welcome-locales{ background: linear-gradient(135deg, #cc0000 0%, #8b0000 100%); }
.cpanel-welcome-eventos{ background: linear-gradient(135deg, #1a56db 0%, #0e3ca0 100%); }
.cpanel-welcome-menus{ background: linear-gradient(135deg, #b8860b 0%, #8b6508 100%); }
.cpanel-welcome-carta{ background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%); }
.cpanel-welcome-perfil{ background: linear-gradient(135deg, #555 0%, #333 100%); }
/* ── Full-width section (single section pages) ── */
.cpanel-section-full{
background: #fff; border-radius: 10px; border: 1px solid #e0e0e0;
overflow: hidden; margin-bottom: 16px;
}
.cpanel-section-full .cpanel-section-body{
padding: 18px 20px;
}
.cpanel-section-full ul.listasPerfil,
.cpanel-section-full ul.listasPerfil li{
width: 100%; box-sizing: border-box;
}
.cpanel-section-full ul.listasPerfil li{
border-bottom-color: #e8e8e8; padding: 6px 0;
}
.cpanel-section-full ul.listasPerfil li p{ color: #333; width: auto; flex: 1; }
.cpanel-section-full ul.listasPerfil li h4{ color: #555; }
/* ── Mi Cuenta grid ── */
.cpanel-cuenta-grid{
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
/* ── Section icon colors for perfil ── */
.cpanel-section-perfil .cpanel-section-icon{ background: #f0f0f0; color: #555; }
/* ── Notice ok variant ── */
.cpanel-notice-ok{
background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32;
}
/* ── Dashboard card for Mi Cuenta ── */
.cpanel-card-cuenta{
border-left: 4px solid #555;
}
.cpanel-card-cuenta .cpanel-card-icon{ color: #555; }
/* ── Listing component (eventos, platos, carta — legacy) ── */
.cpanel-listing{
display: flex; flex-direction: column; gap: 0;
}
.cpanel-listing-group-header{
display: flex; align-items: center; gap: 8px;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 12px; text-transform: uppercase; letter-spacing: .3px;
color: #888; padding: 14px 0 6px 0; border-bottom: 1px solid #eee;
margin-bottom: 2px;
}
.cpanel-listing-group-header svg{ color: #aaa; }
.cpanel-listing-group{ display: flex; flex-direction: column; gap: 0; }
.cpanel-listing-item{
display: flex; align-items: center; gap: 14px;
padding: 12px 14px; border-bottom: 1px solid #f0f0f0;
transition: background .12s;
}
.cpanel-listing-item:last-child{ border-bottom: none; }
.cpanel-listing-item:hover{ background: #fafafa; }
.cpanel-listing-icon{
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; background: #fde8e8; color: #cc0000;
}
.cpanel-icon-eventos{ background: #e8eefb; color: #1a56db; }
.cpanel-icon-menus{ background: #fdf3e0; color: #b8860b; }
.cpanel-icon-carta{ background: #e8f5e9; color: #2e7d32; }
.cpanel-listing-info{
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.cpanel-listing-name{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 14px; color: #222; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.cpanel-listing-meta{
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 11px; color: #999; letter-spacing: .2px;
}
.cpanel-listing-actions{
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.cpanel-listing-btn{
display: inline-flex; align-items: center; gap: 4px;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
padding: 6px 12px; border-radius: 6px; border: 1px solid transparent;
cursor: pointer; transition: all .12s; text-decoration: none;
line-height: 1;
}
.cpanel-listing-edit{
background: #f0f4ff; color: #1a56db; border-color: #d0dbf0;
}
.cpanel-listing-edit:hover{ background: #dce6fa; }
.cpanel-listing-delete{
background: #fff; color: #c62828; border-color: #f0d0d0;
}
.cpanel-listing-delete:hover{ background: #fde8e8; }
.cpanel-badge-active{
background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7;
}
.cpanel-badge-inactive{
background: #f5f5f5; color: #888; border-color: #ddd;
}
.cpanel-badge-suspended{
background: #fff3e0; color: #e65100; border-color: #ffcc80;
}
/* ── Listing V2: Bares cards ── */
.cpanel-listing-v2{
display: flex; flex-direction: column; gap: 10px;
}
/* ⚠ BLINDAJE OBLIGATORIO (gotcha #1 del proyecto)
`.content span:not(...)` (style.css ~L840) tiene especificidad (0,9,1) y
machaca a cualquier .cl2-* de una sola clase (0,1,0): les metía
font-size:14px y padding-bottom:12px. Efectos reales que provocaba:
el nombre del local salía RECORTADO (tiene overflow:hidden y el padding
fantasma lo desbordaba) y el texto de los botones se iba hacia arriba.
Por eso todos los spans de este listado van con .content + !important. */
.content .cl2-name,
.content .cl2-btn-label,
.content .cl2-status,
.content .cl2-dot,
.content .cl2-meta{
padding: 0 !important;
margin: 0 !important;
}
.cl2-card{
display: flex; align-items: stretch; gap: 0;
background: #fff; border: 1px solid #e4e4e7; border-radius: 14px;
padding: 0; overflow: hidden;
transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.cl2-card:hover{ border-color: #d4d4d8; box-shadow: 0 4px 18px rgba(0,0,0,.07); transform: translateY(-1px); }
.cl2-estado-paused{ background: #fafafa; }
.content .cl2-estado-paused .cl2-name{ color: #9ca3af !important; }
/* ── Columna de reordenar ── */
.cl2-reorder{
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 0 10px; border-right: 1px solid #f1f1f3;
background: #fbfbfc; flex-shrink: 0; width: 44px;
}
.cl2-reorder-form{ display: contents; }
.cl2-arrow{
display: flex; align-items: center; justify-content: center;
width: 26px; height: 22px; border-radius: 6px;
border: none; background: transparent; color: #a1a1aa;
cursor: pointer; transition: background .12s, color .12s, opacity .12s; padding: 0;
font-size: 0; line-height: 0;
-webkit-appearance: none; appearance: none;
}
.cl2-arrow svg{ width: 15px; height: 15px; }
.cl2-arrow:hover:not(:disabled){ background: #e8eaee; color: #27272a; }
.cl2-arrow:active:not(:disabled){ background: #dcdfe4; }
/* Estado deshabilitado (primera tarjeta no sube, última no baja). Se usa el
atributo :disabled del — el JS solo lo alterna al reordenar. */
.cl2-arrow:disabled{
opacity: .25; cursor: default; pointer-events: none; background: transparent;
}
.cl2-arrow-disabled{ opacity: .25; cursor: default; pointer-events: none; }
/* ── Columna de información ── */
.cl2-info{
flex: 1; min-width: 0; padding: 16px 18px;
display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
.content .cl2-name{
display: block;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 17px !important; line-height: 1.25 !important;
color: #18181b; letter-spacing: .2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Estado como badge-píldora, no como texto suelto */
.content .cl2-status{
display: inline-flex !important; align-items: center; gap: 6px;
width: auto; align-self: flex-start;
height: 22px; padding: 0 10px !important; border-radius: 999px;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 11px !important; font-weight: 600; line-height: 1 !important; letter-spacing: .3px;
}
.content .cl2-dot{
width: 7px; height: 7px; border-radius: 50%; display: inline-block !important; flex-shrink: 0;
}
.cl2-status-active{ color: #15803d; background: #dcfce7; }
.cl2-status-active .cl2-dot{ background: #22c55e; }
.cl2-status-paused{ color: #b45309; background: #fef3c7; }
.cl2-status-paused .cl2-dot{ background: #f59e0b; }
/* ── Columna de acciones ── */
.cl2-actions{
display: flex; align-items: center; gap: 6px;
padding: 12px 16px 12px 0; flex-shrink: 0;
}
.cl2-action-form{ display: contents; }
.cl2-btn{
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
height: 34px; padding: 0 15px;
border-radius: 999px; /* píldora, coherente con el resto del sitio */
border: 1px solid transparent;
cursor: pointer; transition: background .12s, border-color .12s, transform .12s;
text-decoration: none; white-space: nowrap;
-webkit-appearance: none; appearance: none; margin: 0;
}
.cl2-btn:hover{ transform: translateY(-1px); }
/* Icono y etiqueta con LA MISMA receta que los botones de cabecera
(.pnl-btn), que es la validada: icono 16px, texto 11.5px, line-height 1
y etiqueta bajada 1px. Antes aquí eran 15px/11px y el icono quedaba
visiblemente por encima del texto. */
.cl2-btn svg{ flex-shrink: 0; width: 16px; height: 16px; }
.content .cl2-btn-label{
display: block;
font-size: 11.5px !important;
line-height: 1 !important;
transform: translateY(1px);
}
.cl2-btn-pause{
background: #fffbeb; color: #b45309; border-color: #fde68a;
}
.cl2-btn-pause:hover{ background: #fef3c7; border-color: #fcd34d; }
.cl2-estado-paused .cl2-btn-pause{
background: #ecfdf5; color: #059669; border-color: #a7f3d0;
}
.cl2-estado-paused .cl2-btn-pause:hover{ background: #d1fae5; border-color: #6ee7b7; }
.cl2-btn-edit{
background: #eff6ff; color: #2563eb; border-color: #bfdbfe;
}
.cl2-btn-edit:hover{ background: #dbeafe; border-color: #93c5fd; }
.cl2-btn-view{
background: #f0fdf4; color: #16a34a; border-color: #bbf7d0;
}
.cl2-btn-view:hover{ background: #dcfce7; border-color: #86efac; }
.cl2-btn-delete{
background: #fff; color: #dc2626; border-color: #fecaca;
}
.cl2-btn-delete:hover{ background: #fef2f2; border-color: #fca5a5; }
/* ── Group header for events ── */
/* ── Bar filter selector ── */
/* ── Filtro por establecimiento ────────────────────────────────────────
Era un recuadro gris con el nativo del sistema. Ahora sigue el
mismo lenguaje que las cabeceras de grupo: tarjeta blanca, borde fino,
etiqueta en mayúsculas condensadas y un desplegable con flecha propia
(el control nativo no se puede estilizar y desentonaba). */
.cl2-bar-filter{
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
margin-bottom: 18px;
background: #fff;
border: 1px solid #ececef;
border-radius: 14px;
box-shadow: 0 1px 3px rgba(24,24,27,.04);
}
.cl2-bf-label{
display: inline-flex;
align-items: center;
gap: 7px; /* receta validada, ver gotcha #4 */
color: #8a8a93;
white-space: nowrap;
margin: 0;
}
.cl2-bf-label svg{ width: 16px; height: 16px; flex-shrink: 0; }
.cl2-bf-label-txt, .content span.cl2-bf-label-txt{
display: block;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11px !important;
letter-spacing: .6px;
text-transform: uppercase;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
transform: translateY(1px);
}
.cl2-bf-control, .content span.cl2-bf-control{
position: relative;
display: block;
flex: 1;
max-width: 340px;
padding: 0 !important;
}
.cl2-bar-select{
-webkit-appearance: none; appearance: none;
width: 100%;
box-sizing: border-box;
height: 40px;
padding: 0 40px 0 15px; /* hueco a la derecha para la flecha */
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 12.5px;
letter-spacing: .3px;
color: #27272a;
background: #fff;
border: 1.5px solid #e4e4e7;
border-radius: 999px;
cursor: pointer;
outline: none;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.cl2-bar-select:hover{ border-color: #d4d4d8; background: #fdfdfc; }
.cl2-bar-select:focus{
border-color: #b6862c;
box-shadow: 0 0 0 3px rgba(182,134,44,.16);
}
/* Flecha propia. pointer-events:none para que el clic siga llegando al
que hay debajo. */
.cl2-bf-chevron{
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 15px; height: 15px;
color: #a1a1aa;
pointer-events: none;
transition: color .15s;
}
.cl2-bar-select:hover ~ .cl2-bf-chevron,
.cl2-bar-select:focus ~ .cl2-bf-chevron{ color: #b6862c; }
@media(max-width: 640px){
.cl2-bar-filter{ flex-direction: column; align-items: stretch; gap: 9px; padding: 12px; }
.cl2-bf-control, .content span.cl2-bf-control{ max-width: none; }
}
/* ── Cabecera de grupo por establecimiento ─────────────────────────────
La usan eventos, menús y carta (una sola función PHP: cl2CabeceraGrupo).
Antes era un iconito de casa + el nombre en texto plano, que heredaba el
formato del dato: un bar grabado en mayúsculas y otro en minúsculas hacían
que dos cabeceras seguidas no se parecieran. Ahora lleva el logo real del
negocio, tipografía uniforme (mayúsculas condensadas, el lenguaje del
sitio), el número de fichas y acceso a su página pública. */
.cl2-group-header{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 0 0 10px;
background: linear-gradient(180deg, #fff 0%, #fcfbf8 100%);
border: 1px solid #ececef;
border-left: 3px solid #b6862c; /* filo dorado: marca la jerarquía */
border-radius: 12px;
box-shadow: 0 1px 3px rgba(24,24,27,.04);
}
/* La separación entre establecimientos va en el CONTENEDOR, no en la cabecera.
Antes estaba en `.cl2-group-header{margin-top:26px}` con un
`.cl2-group-header:first-child{margin-top:0}` para el primero — pero la
cabecera es SIEMPRE el primer hijo de su .cl2-bar-group, así que esa regla
anulaba el margen de todas y los grupos quedaban pegados (hueco real: 0px). */
.cl2-bar-group + .cl2-bar-group{ margin-top: 30px; }
/* Logo del negocio (o sus iniciales si aún no ha subido ninguno) */
.cl2-gh-avatar, .content span.cl2-gh-avatar{
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #fdf6e7;
border: 1px solid #ecd9ae;
padding: 0 !important;
}
.cl2-gh-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cl2-gh-ini, .content span.cl2-gh-ini{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 14px !important;
letter-spacing: .5px;
color: #b6862c;
line-height: 1 !important;
padding: 0 !important;
transform: translateY(1px); /* receta validada: ver gotcha #4 */
}
.cl2-gh-txt, .content span.cl2-gh-txt{
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0; /* permite recortar nombres largos */
flex: 1;
padding: 0 !important;
}
/* Mayúsculas por CSS: así da igual cómo esté grabado el nombre en la base de
datos, todas las cabeceras se ven iguales. */
.cl2-gh-name, .content span.cl2-gh-name{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 13.5px !important;
letter-spacing: .5px;
text-transform: uppercase;
color: #27272a;
line-height: 1.2 !important;
padding: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cl2-gh-sub, .content span.cl2-gh-sub{
font-size: 11.5px !important;
color: #8a8a93;
line-height: 1 !important;
padding: 0 !important;
}
/* Acceso a la ficha pública del establecimiento */
.cl2-gh-link{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 13px;
border-radius: 999px;
border: 1px solid #e4e4e7;
background: #fff;
color: #71717a;
text-decoration: none !important;
transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.cl2-gh-link svg{ width: 13px; height: 13px; flex-shrink: 0; }
.cl2-gh-link-txt, .content span.cl2-gh-link-txt{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 10.5px !important;
letter-spacing: .5px;
text-transform: uppercase;
line-height: 1 !important;
padding: 0 !important;
transform: translateY(1px); /* receta validada: ver gotcha #4 */
}
.cl2-gh-link:hover{
background: #fdf6e7;
border-color: #b6862c;
color: #8a6420;
transform: translateY(-1px);
}
@media(max-width: 640px){
.cl2-group-header{ gap: 10px; padding: 10px 12px; }
.cl2-gh-avatar, .content span.cl2-gh-avatar{ width: 32px; height: 32px; }
/* En móvil el botón se queda solo con el icono: el texto no cabe.
Se hace de 40x40 porque responsive.css impone `min-height:40px` a todos
los enlaces (objetivo táctil, regla correcta que NO conviene desactivar);
sin igualar el ancho quedaba un rectángulo de 30x40 descuadrado. */
.cl2-gh-link{ padding: 0; width: 40px; height: 40px; min-height: 40px; justify-content: center; }
.cl2-gh-link-txt, .content span.cl2-gh-link-txt{ display: none !important; } /* movil-ok: el texto del enlace de la cabecera de grupo del panel; queda su icono, con aria-label */
}
.cl2-icon-only{
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
color: #9ca3af;
border-right: 1px solid #f0f0f0;
min-width: 48px;
}
.cl2-meta{
font-size: 12px;
color: #6b7280;
margin-top: 2px;
}
/* ── Checkbox label for forms ── */
.ef-checkbox-label{
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #3f3f46;
cursor: pointer;
}
.ef-checkbox-label input[type="checkbox"]{
width: 18px;
height: 18px;
accent-color: #cc0000;
}
/* ── Responsive adjustments ── */
@media (max-width: 700px){
.cpanel-nav{ flex-wrap: wrap; }
/* tarjetas separadas también en móvil: 2 por fila descontando el gap */
.cpanel-nav{ gap: 8px; }
.cpanel-nav-item{ flex: 0 0 calc(50% - 4px); height: 40px; font-size: 10.5px; }
.content .cpanel-nav-item .cpanel-nav-txt{ font-size: 10.5px !important; }
.cpanel-cuenta-grid{ grid-template-columns: 1fr; }
.cpanel-listing-item{ flex-wrap: wrap; gap: 8px; padding: 10px 10px; }
.cpanel-listing-actions{ width: 100%; }
.cpanel-listing-btn{ font-size: 10px; padding: 5px 10px; }
/* V2 responsive */
.cl2-card{ flex-wrap: wrap; }
.cl2-reorder{ flex-direction: row; border-right: none; border-bottom: 1px solid #f0f0f0; width: 100%; padding: 6px 12px; justify-content: flex-start; gap: 6px; }
.cl2-info{ padding: 12px; width: 100%; }
.cl2-actions{ padding: 10px 12px; width: 100%; border-top: 1px solid #f0f0f0; justify-content: flex-end; gap: 8px; }
/* En móvil los botones quedan solo con icono. Necesita .content +
!important para ganarle a `.content .cl2-btn-label{display:block}`
de arriba (mismo nº de clases, pero esta regla va después). */
.content .cl2-btn-label{ display: none !important; } /* movil-ok: el rotulo del boton del listado del panel; queda su icono, con aria-label */
.cl2-btn{ width: 38px; padding: 0; height: 38px; }
.content .cl2-name{ font-size: 16px !important; white-space: normal; }
.cpanel-btn{ width: 100%; }
}
/* ═══════════════════════════════════════════
EDIT FORM v2 (ef-*)
Modern card-based form for bar editing
═══════════════════════════════════════════ */
.ef-form{
max-width: 800px;
margin: 0 auto;
padding: 0;
}
.ef-alert{
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.6;
}
.ef-alert-error{
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.ef-section{
background: #fff;
border: 1px solid #e4e4e7;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
}
.ef-section-title{
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: #18181b;
margin: 0 0 20px 0;
padding: 0 0 14px 0;
border-bottom: 1px solid #f4f4f5;
}
.ef-section-title svg{
color: #71717a;
flex-shrink: 0;
}
/* Rejilla del formulario: columnas que se ADAPTAN al ancho disponible en vez
de dos columnas fijas. Con `auto-fit` + `minmax` caben 3-4 campos por fila
en escritorio (antes solo 2, así que un desplegable con la palabra "Bar"
ocupaba media pantalla), 2 en tablet y 1 en móvil, sin media queries. */
.ef-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px 16px;
align-items: start;
}
.ef-field{
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0; /* evita que un campo desborde su columna */
}
.ef-field.ef-full{
grid-column: 1 / -1;
}
/* Campos que necesitan más aire por su contenido (direcciones, URLs largas) */
.ef-field.ef-wide{
grid-column: span 2;
}
@media screen and (max-width: 620px){
.ef-grid{grid-template-columns: 1fr; gap: 13px;}
.ef-field.ef-wide{grid-column: 1 / -1;}
}
.ef-field label{
font-size: 13px;
font-weight: 500;
color: #3f3f46;
display: flex;
align-items: center;
gap: 4px;
width: auto;
height: auto;
float: none;
clear: none;
margin: 0;
padding: 0;
line-height: 1.4;
}
/* Asterisco de campo obligatorio.
⚠ Es un dentro de .content, así que la regla legacy `.content span`
(gotcha #1) le metía padding-bottom:12px. Eso inflaba la etiqueta de 18,2px
a 31,6px y hundía el campo 13,4px respecto a los de su misma fila: por eso
"Teléfono" (obligatorio) aparecía desplazado frente a Móvil, E-mail y
Página web, que no llevan asterisco. Blindado con .content + !important. */
.content .ef-req,
.ef-req{
color: #dc2626;
font-weight: 700;
font-size: 14px !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
display: inline-block;
vertical-align: middle;
}
/* OJO: los tipos que falten en esta lista se quedan con el estilo por
defecto del navegador y desentonan (les pasaba a "Hora de apertura" y
"Hora de cierre": 24px de alto, borde de 2px y esquinas rectas frente a
los 41px, borde de 1px y radio 8px del resto). Al añadir un campo nuevo,
añadir aquí su type. */
.ef-field input[type="text"],
.ef-field input[type="tel"],
.ef-field input[type="email"],
.ef-field input[type="url"],
.ef-field input[type="file"],
.ef-field input[type="time"],
.ef-field input[type="date"],
.ef-field input[type="number"],
.ef-field input[type="password"],
.ef-field input[type="search"],
.ef-field select,
.ef-field textarea{
width: 100%;
padding: 0 11px;
border: 1px solid #d4d4d8;
border-radius: 8px;
font-size: 14px;
color: #18181b;
background: #fafafa;
transition: border-color .2s, box-shadow .2s;
box-sizing: border-box;
line-height: 1.4;
/* Altura ÚNICA para todos los controles. Antes cada tipo traía la suya
del navegador: los quedaban en 36px, los contenedor
(#provinciasBox / #ciudadesBox), así que quedaban fuera de la regla de
arriba y salían a 40px mientras el resto medía 38px. */
.ef-field div[id] select{
width: 100%;
height: 38px;
padding: 0 11px;
border: 1px solid #d4d4d8;
border-radius: 8px;
font-size: 14px;
color: #18181b;
background: #fafafa;
box-sizing: border-box;
line-height: 1.4;
cursor: pointer;
margin: 0;
display: block;
}
.ef-field input[type="file"]{
padding: 8px 10px;
font-size: 13px;
cursor: pointer;
}
/* Selects inside dynamic divs (provinciasBox, ciudadesBox) */
.ef-field div select{
width: 100%;
padding: 10px 12px;
border: 1px solid #d4d4d8;
border-radius: 8px;
font-size: 14px;
color: #18181b;
background: #fafafa;
box-sizing: border-box;
height: auto;
float: none;
clear: none;
margin: 0;
display: block;
}
.ef-hint{
font-size: 12px;
color: #71717a;
margin: 0;
line-height: 1.4;
}
/* Logo */
/* ══ Panel del logo ══
Dos columnas: a la izquierda el círculo (que es EXACTAMENTE lo que se ve
en la ficha pública) y a la derecha la zona de subida, que aprovecha todo
el espacio restante. Antes había dos vistas previas del mismo logo — una
cuadrada y otra circular — repartidas en tres columnas mal proporcionadas. */
.ef-logo-panel{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 26px;
align-items: center;
}
.ef-logo-visual{
display: flex; flex-direction: column; align-items: center; gap: 9px;
flex-shrink: 0;
}
.ef-logo-circle{
position: relative;
width: 132px; height: 132px; border-radius: 50%;
background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
background-color: #f4f4f5;
border: 3px solid #fff;
box-shadow: 0 0 0 1px #e4e4e7, 0 4px 14px rgba(0,0,0,.08);
cursor: grab; touch-action: none;
user-select: none; -webkit-user-select: none;
transition: box-shadow .15s, transform .15s;
}
.ef-logo-circle:hover{ box-shadow: 0 0 0 2px var(--brand-red,#c00), 0 6px 18px rgba(0,0,0,.12); }
.ef-logo-circle.is-dragging{ cursor: grabbing; box-shadow: 0 0 0 2px var(--brand-red,#c00), 0 6px 18px rgba(0,0,0,.16); }
/* Sin logo: círculo neutro con icono, sin cursor de arrastre */
.ef-logo-circle.is-empty{
cursor: default;
background-image: none !important;
border-style: solid;
box-shadow: 0 0 0 1px #e4e4e7;
}
.ef-logo-circle.is-empty:hover{ box-shadow: 0 0 0 1px #e4e4e7; }
.content .ef-logo-circle-empty{
display: none !important;
position: absolute; inset: 0; padding: 0 !important; margin: 0 !important;
align-items: center; justify-content: center; color: #c4c4c8;
}
.ef-logo-circle.is-empty .ef-logo-circle-empty{ display: flex !important; }
.ef-logo-circle-empty svg{ width: 38px; height: 38px; }
/* Icono de "mover" que aparece al pasar por encima cuando SÍ hay logo */
.content .ef-logo-drag-hint{
display: flex !important; position: absolute; inset: 0;
padding: 0 !important; margin: 0 !important;
align-items: center; justify-content: center;
color: #fff; opacity: 0; border-radius: 50%;
background: rgba(0,0,0,.32);
transition: opacity .15s; pointer-events: none;
}
.ef-logo-circle:hover .ef-logo-drag-hint,
.ef-logo-circle.is-dragging .ef-logo-drag-hint{ opacity: 1; }
.ef-logo-circle.is-empty .ef-logo-drag-hint{ display: none !important; }
.ef-logo-circle-empty svg,
.ef-logo-drag-hint svg{ flex-shrink: 0; }
.ef-logo-drag-hint svg{ width: 26px; height: 26px; }
.content .ef-logo-caption{
display: block !important; padding: 0 !important; margin: 0 !important;
max-width: 150px; text-align: center;
font-size: 11.5px !important; line-height: 1.35 !important; color: #71717a;
}
/* Zona de subida: arrastrar y soltar o pulsar */
.ef-dropzone{
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; min-height: 118px; padding: 18px 20px;
border: 2px dashed #d4d4d8; border-radius: 12px; background: #fafafa;
cursor: pointer; text-align: center;
transition: border-color .15s, background .15s;
width: auto !important; height: auto !important; float: none !important;
}
.ef-dropzone:hover{ border-color: var(--brand-red,#c00); background: #fff; }
.ef-dropzone.is-over{ border-color: var(--brand-red,#c00); background: #fff5f5; border-style: solid; }
.ef-dropzone.has-file{ border-style: solid; border-color: #86efac; background: #f0fdf4; }
/* El input real se oculta: la etiqueta entera actúa de botón */
.ef-dropzone input[type="file"]{
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.content .ef-dropzone-ico{
display: flex !important; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0 !important; margin: 0 !important;
border-radius: 50%; background: #f4f4f5; color: #71717a; flex-shrink: 0;
}
.ef-dropzone:hover .ef-dropzone-ico,
.ef-dropzone.is-over .ef-dropzone-ico{ background: #fee2e2; color: var(--brand-red,#c00); }
.ef-dropzone.has-file .ef-dropzone-ico{ background: #dcfce7; color: #15803d; }
.ef-dropzone-ico svg{ width: 19px; height: 19px; }
.content .ef-dropzone-txt{
display: block !important; padding: 0 !important; margin: 0 !important;
font-size: 13px !important; line-height: 1.45 !important; color: #52525b;
}
.content .ef-dropzone-txt strong{ color: #18181b; }
.content .ef-dropzone-file{
display: inline-flex !important; align-items: center;
max-width: 100%; padding: 3px 11px !important; margin: 0 !important;
border-radius: 999px; background: #15803d; color: #fff;
font-size: 11.5px !important; font-weight: 600; line-height: 1.3 !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.content .ef-dropzone-file[hidden]{ display: none !important; }
.content ul.ef-logo-tips{
list-style: none; padding: 0 !important; margin: 11px 0 0 !important;
display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.content ul.ef-logo-tips li{
padding: 0 !important; margin: 0 !important;
font-size: 11.5px !important; line-height: 1.4 !important; color: #8a8a93;
position: relative; padding-left: 12px !important;
}
.content ul.ef-logo-tips li:before{
content: ''; position: absolute; left: 2px; top: 7px;
width: 4px; height: 4px; border-radius: 50%; background: #c4c4c8;
}
@media screen and (max-width: 620px){
.ef-logo-panel{ grid-template-columns: 1fr; gap: 18px; justify-items: center; }
.ef-dropzone{ width: 100% !important; }
.content ul.ef-logo-tips{ justify-content: center; }
}
/* Map */
.ef-map{
width: 100%;
height: 300px;
border-radius: 10px;
border: 1px solid #e4e4e7;
overflow: hidden;
background: #f4f4f5;
}
/* ══ Mapa integrado en la sección de Ubicación ══
Antes el mapa vivía en una sección aparte ("Ubicación en el mapa") pese a
alimentarse de la dirección de arriba: había que subir y bajar. Ahora va
pegado a los campos, con su aviso y su botón en una barra compacta. */
.ef-mapa-bloque{ margin-top: 16px; }
.ef-mapa-cab{
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin-bottom: 9px;
}
.content .ef-mapa-txt{
display: block !important; padding: 0 !important; margin: 0 !important;
font-size: 12px !important; line-height: 1.4 !important; color: #8a8a93;
flex: 1 1 200px; min-width: 0;
}
/* «Todavía sin ubicación». Ámbar, no rojo: no es un error del hostelero, es un
paso que le queda por dar. Y el mismo par de colores que el distintivo de
ficha de ejemplo, para no inventar una tercera familia de avisos.
Los !important y el `.content span` son el gotcha #1 de siempre. */
.ef-mapa-aviso,
.content span.ef-mapa-aviso{
display: block !important;
flex: 1 1 100%; min-width: 0;
margin: 6px 0 0 !important;
padding: 8px 10px !important;
background: #fdf4dc; border: 1px solid #e3c473; border-radius: 8px;
color: #6d4f0c;
font-size: 12.5px !important; line-height: 1.45 !important; font-weight: 600;
}
.ef-mapa-aviso[hidden]{ display: none !important; }
.ef-btn-geo2{
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: 34px; padding: 0 16px; flex-shrink: 0;
border: 1px solid #d4d4d8; border-radius: 999px; background: #fff; color: #3f3f46;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
cursor: pointer; white-space: nowrap;
-webkit-appearance: none; appearance: none; margin: 0;
transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.ef-btn-geo2:hover{ border-color: var(--brand-red,#c00); color: var(--brand-red,#c00); background: #fff5f5; transform: translateY(-1px); }
.ef-btn-geo2 svg{ width: 15px; height: 15px; flex-shrink: 0; }
.content .ef-btn-geo2-txt{
display: block !important; padding: 0 !important; margin: 0 !important;
font-size: 11px !important; line-height: 1 !important; transform: translateY(1px);
}
/* Texto introductorio de sección (explica el para qué antes de los campos) */
.content p.ef-section-intro{
margin: -6px 0 16px !important; padding: 0 !important;
font-size: 12.5px !important; line-height: 1.5 !important; color: #8a8a93;
}
/* Iconos identificativos de cada plataforma, dentro de su etiqueta */
.content .ef-plat-ico{
display: inline-flex !important; align-items: center; justify-content: center;
width: 20px; height: 20px; padding: 0 !important; margin: 0 6px 0 0 !important;
border-radius: 5px; flex-shrink: 0; vertical-align: middle;
}
.ef-plat-ico svg{ width: 12px; height: 12px; }
.ef-plat-propio{ background: #fee2e2; color: #b91c1c; }
.ef-plat-fork{ background: #dcfce7; color: #15803d; }
.ef-plat-trip{ background: #fef3c7; color: #b45309; }
.ef-plat-gmaps{ background: #dbeafe; color: #1d4ed8; }
@media screen and (max-width: 620px){
.ef-map{ height: 240px; }
.ef-mapa-cab{ flex-direction: column; align-items: stretch; }
.ef-btn-geo2{ width: 100%; }
}
/* Social icons */
.ef-social-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 14px;
font-weight: 700;
color: #71717a;
flex-shrink: 0;
}
/* Services — override legacy .minioptions */
.ef-services ul.minioptions,
.ef-services ul{
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
gap: 6px 16px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
float: none !important;
clear: none !important;
overflow: visible !important;
}
.ef-services ul.minioptions li,
.ef-services ul li{
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
width: auto !important;
height: auto !important;
background: none !important;
overflow: visible !important;
}
.ef-services ul.minioptions li label,
.ef-services ul li label{
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
color: #3f3f46 !important;
cursor: pointer;
width: auto !important;
height: auto !important;
float: none !important;
margin: 0 !important;
padding: 4px 0 !important;
line-height: 1.4 !important;
}
.ef-services ul.minioptions li label input,
.ef-services ul li input[type="checkbox"]{
width: 16px !important;
height: 16px !important;
accent-color: #cc0000;
flex-shrink: 0;
border: none;
margin: 0 !important;
float: none !important;
}
/* Social SVG icons in labels */
.ef-social-svg{
width: 16px;
height: 16px;
vertical-align: -2px;
opacity: .7;
}
/* Geocode button */
.ef-btn-geo{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 8px 18px;
background: #f0f9ff;
color: #0369a1;
border: 1px solid #bae6fd;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.ef-btn-geo:hover{
background: #e0f2fe;
}
/* Translate row & button */
.ef-label-row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.ef-label-row label{
margin-bottom: 0 !important;
}
.ef-btn-translate{
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.ef-btn-translate:hover{
background: #fde68a;
}
.ef-btn-translate:disabled{
opacity: .6;
cursor: wait;
}
/* Images grid */
/* ── Galería de fotos del establecimiento ──────────────────────────────
Cada hueco es un cuadrado clicable con arrastrar-y-soltar. El input
nativo se oculta (mostraba el feísimo "Ningún archivo seleccionado")
pero sigue siendo el que envía el formulario: la etiqueta
lo
dispara al pulsar, así que no se pierde accesibilidad ni teclado. */
/* Huecos PEQUEÑOS a propósito: 9 recuadros grandes obligaban a hacer scroll y
se comían la pantalla. Aquí caben todos en una o dos filas y, para ver una
foto de verdad, está la lupa que abre el visor a pantalla completa. */
.ef-images-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 10px;
}
.ef-img-slot{
position: relative;
display: block;
aspect-ratio: 1 / 1;
background: #fafafa;
border: 1.5px dashed #d4d4d8;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.ef-img-slot:hover{
border-color: #b6862c;
background: #fdfaf3;
}
.ef-img-slot.is-drag{
border-color: #b6862c;
border-style: solid;
background: #fdf6e7;
box-shadow: 0 0 0 3px rgba(182,134,44,.16);
}
.ef-img-slot.has-img{
border-style: solid;
border-color: #e4e4e7;
background: #fff;
}
/* El input real: invisible pero presente en el DOM y accesible por teclado */
.ef-img-slot input[type="file"]{
position: absolute;
width: 1px; height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.ef-img-slot input[type="file"]:focus-visible + *,
.ef-img-slot:focus-within{
outline: 2px solid #b6862c;
outline-offset: 2px;
}
.ef-img-num, .content span.ef-img-num{
position: absolute;
top: 5px; left: 5px;
z-index: 3;
background: rgba(255,255,255,.92);
color: #52525b;
font-size: 9.5px !important;
font-weight: 700;
width: 17px; height: 17px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
line-height: 1;
box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
/* Abajo-izquierda a propósito: arriba-derecha lo pisan los botones */
.ef-img-principal, .content span.ef-img-principal{
position: absolute;
bottom: 5px; left: 5px;
z-index: 3;
background: #b6862c;
color: #fff;
font-size: 8px !important;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
padding: 2px 5px !important;
border-radius: 999px;
line-height: 1;
}
.ef-img-preview, .content span.ef-img-preview{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
}
.ef-img-preview img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Cruz "+" del hueco vacío: desaparece en cuanto hay foto */
.ef-img-empty, .content span.ef-img-empty{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #c4c4c8;
padding: 0 !important;
pointer-events: none;
transition: color .15s;
}
.ef-img-empty svg{ width: 20px; height: 20px; }
.ef-img-slot:hover .ef-img-empty{ color: #b6862c; }
.ef-img-slot.has-img .ef-img-empty{ display: none; }
/* Marca para archivos PDF (carta): no hay vista previa posible */
.ef-img-pdf, .content span.ef-img-pdf{
font-size: 12px !important;
font-weight: 700;
color: #b6862c;
letter-spacing: .06em;
padding: 0 !important;
}
.ef-img-delete{
position: absolute;
top: 5px; right: 5px;
z-index: 4;
background: rgba(220,38,38,.94);
color: #fff;
border: 0;
width: 20px; height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
/* Siempre visible (atenuado) en vez de solo al hover: en táctil no hay hover
y depender de @media(hover:none) dejaría el borrado inalcanzable si el
navegador no soporta la consulta. */
opacity: .6;
transition: opacity .15s, background .15s;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ef-img-delete svg{ width: 11px; height: 11px; }
.ef-img-slot:hover .ef-img-delete,
.ef-img-slot:focus-within .ef-img-delete,
.ef-img-delete:hover, .ef-img-delete:focus{ opacity: 1; }
.ef-img-delete:hover{ background: #b91c1c; }
/* Estado "pulsa otra vez para confirmar" */
.ef-img-delete.confirmar{
opacity: 1;
background: #b91c1c;
width: 26px;
box-shadow: 0 0 0 3px rgba(220,38,38,.3);
}
/* Lupa: abre el visor a pantalla completa. Solo aparece si hay foto. */
.ef-img-zoom{
position: absolute;
bottom: 5px; right: 5px;
z-index: 4;
background: rgba(24,24,27,.75);
color: #fff;
border: 0;
width: 20px; height: 20px;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: .75;
transition: opacity .15s, background .15s;
}
.ef-img-zoom svg{ width: 11px; height: 11px; }
.ef-img-slot.has-img .ef-img-zoom{ display: flex; }
.ef-img-slot:hover .ef-img-zoom,
.ef-img-zoom:hover, .ef-img-zoom:focus{ opacity: 1; background: #18181b; }
.ef-hint-soft, .content span.ef-hint-soft{
color: #71717a;
font-size: 12px !important;
padding: 0 !important;
}
/* Campo Sección: desplegable + campo libre que aparece al elegir "Otra…" */
.sec-propia{ margin-top: 8px; }
.sec-propia[hidden]{ display: none !important; }
/* ── Distintivo "Opcional" en los títulos de sección ─────────────────
Relleno asimétrico (4.75 arriba / 1.25 abajo) por el gotcha #4: medido con
escaneo de píxeles, las mayúsculas de esta fuente caían 1,75px por encima
del centro de la píldora. No vale translateY: el span ES la píldora y
movería también el fondo; hay que bajar solo el texto. */
.ef-opcional, .content span.ef-opcional{
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 4.75px 9px 1.25px !important;
border-radius: 999px;
background: #f4f4f5;
border: 1px solid #e4e4e7;
color: #8a8a93;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 9.5px !important;
letter-spacing: .5px;
text-transform: uppercase;
line-height: 1 !important;
vertical-align: middle;
}
/* ── Interruptor (sustituye a la casilla suelta) ────────────────────── */
.ef-switch{
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 12px 14px;
border: 1px solid #ececef;
border-radius: 12px;
background: #fcfcfd;
transition: border-color .15s, background .15s;
}
.ef-switch:hover{ border-color: #d9c3a3; background: #fffdf8; }
.ef-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.ef-switch-track, .content span.ef-switch-track{
flex-shrink: 0;
position: relative;
width: 42px; height: 24px;
border-radius: 999px;
background: #d4d4d8;
padding: 0 !important;
transition: background .18s ease;
margin-top: 1px;
}
.ef-switch-thumb, .content span.ef-switch-thumb{
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
padding: 0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,.22);
transition: transform .18s ease;
}
.ef-switch input:checked + .ef-switch-track{ background: #b6862c; }
.ef-switch input:checked + .ef-switch-track .ef-switch-thumb{ transform: translateX(18px); }
.ef-switch input:focus-visible + .ef-switch-track{ box-shadow: 0 0 0 3px rgba(182,134,44,.22); }
.ef-switch-txt, .content span.ef-switch-txt{
display: flex;
flex-direction: column;
gap: 3px;
padding: 0 !important;
}
.ef-switch-txt strong{ font-size: 13.5px; color: #27272a; line-height: 1.25; }
.ef-switch-txt em{ font-style: normal; font-size: 12px; color: #8a8a93; line-height: 1.35; }
/* ── Bloque plegable (traducciones) ─────────────────────────────────── */
.ef-desplegable{
margin-top: 14px;
border: 1px solid #ececef;
border-radius: 12px;
background: #fcfcfd;
overflow: hidden;
}
.ef-desplegable > summary{
display: flex;
align-items: center;
gap: 10px;
padding: 13px 15px;
cursor: pointer;
list-style: none;
color: #52525b;
transition: background .15s;
}
.ef-desplegable > summary::-webkit-details-marker{ display: none; }
.ef-desplegable > summary:hover{ background: #f7f7f8; }
.ef-desplegable > summary > svg:first-child{ width: 16px; height: 16px; flex-shrink: 0; color: #b6862c; }
.ef-desplegable-txt, .content span.ef-desplegable-txt{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 12px !important;
letter-spacing: .4px;
text-transform: uppercase;
color: #3f3f46;
line-height: 1 !important;
padding: 0 !important;
transform: translateY(1px);
}
.ef-desplegable-nota, .content span.ef-desplegable-nota{
flex: 1;
font-size: 11.5px !important;
color: #a1a1aa;
line-height: 1 !important;
padding: 0 !important;
}
.ef-desplegable-flecha{
width: 16px; height: 16px;
flex-shrink: 0;
color: #a1a1aa;
transition: transform .2s ease;
}
.ef-desplegable[open] > summary .ef-desplegable-flecha{ transform: rotate(180deg); }
.ef-desplegable[open] > summary{ border-bottom: 1px solid #ececef; }
.ef-desplegable-cuerpo{ padding: 16px 15px 4px; }
/* ── Sección "El evento": datos a la izquierda, cartel a la derecha ────
Antes el cartel era una sección aparte y los campos ocupaban todo el ancho
(un título de evento no necesita 900px, ni una fecha 400px). Ahora el
cartel ocupa el hueco que quedaba vacío a la derecha y los campos se
reparten en una rejilla de 4 tramos. */
.ef-evt-layout{
display: grid;
grid-template-columns: 1fr 200px;
gap: 22px;
align-items: start;
}
.ef-evt-campos{ min-width: 0; }
/* Rejilla de 4 tramos: cada campo pide los que necesita (.ef-col-N).
Se prefija con .ef-evt-campos para ganar en especificidad a la regla móvil
genérica `.ef-grid{grid-template-columns:1fr}`, que vive MÁS ABAJO en este
mismo archivo y, con la misma especificidad, ganaría por orden. */
.ef-evt-campos .ef-grid--evt{
grid-template-columns: repeat(4, 1fr);
gap: 12px 14px;
}
.ef-grid--evt .ef-col-1{ grid-column: span 1; }
.ef-grid--evt .ef-col-2{ grid-column: span 2; }
.ef-grid--evt .ef-col-3{ grid-column: span 3; }
.ef-grid--evt .ef-col-4{ grid-column: span 4; }
/* Columna del cartel */
.ef-evt-cartel{
display: flex;
flex-direction: column;
gap: 9px;
}
.ef-evt-cartel-cab, .content span.ef-evt-cartel-cab{
display: flex;
align-items: center;
gap: 7px;
color: #8a8a93;
padding: 0 !important;
}
.ef-evt-cartel-cab svg{ width: 15px; height: 15px; flex-shrink: 0; }
.ef-evt-cartel-txt, .content span.ef-evt-cartel-txt{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11px !important;
letter-spacing: .6px;
text-transform: uppercase;
color: #3f3f46;
line-height: 1 !important;
padding: 0 !important;
transform: translateY(1px);
}
.ef-evt-cartel-cab .ef-opcional,
.content .ef-evt-cartel-cab span.ef-opcional{ margin-left: 0; }
.ef-evt-cartel-nota, .content span.ef-evt-cartel-nota{
font-size: 11px !important;
line-height: 1.4 !important;
color: #a1a1aa;
padding: 0 !important;
}
/* El hueco del cartel llena la columna */
.ef-evt-cartel .ef-images-grid--cartel{ max-width: none; }
/* Interruptor compacto: ancho al contenido, no una banda completa */
.ef-switch--compacto{
display: inline-flex;
width: fit-content;
max-width: 100%;
margin-top: 14px;
padding: 9px 14px 9px 11px;
align-items: center;
gap: 10px;
}
.ef-switch--compacto .ef-switch-txt strong{ font-size: 12.5px; }
.ef-switch--compacto .ef-switch-txt em{ font-size: 11px; }
/* Variante en columna estrecha (bajo el cartel): el mando arriba y el texto
debajo, porque a 200px no caben en una fila sin apretujarse. */
.ef-switch--vertical{
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-top: 4px;
padding: 11px 12px;
}
.ef-switch--vertical .ef-switch-txt strong{ font-size: 12.5px; }
.ef-switch--vertical .ef-switch-txt em{ font-size: 11px; line-height: 1.4; }
/* Separador interno de la rejilla: divide asuntos dentro de una MISMA sección
sin gastar otra caja con su cabecera, su borde y su aire. */
.ef-subseccion{
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 2px;
padding-top: 16px;
border-top: 1px solid #ececef;
color: #a1a1aa;
}
.ef-subseccion svg{ width: 15px; height: 15px; flex-shrink: 0; }
.ef-subseccion-txt, .content span.ef-subseccion-txt{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 11px !important;
letter-spacing: .7px;
text-transform: uppercase;
color: #52525b;
line-height: 1 !important;
padding: 0 !important;
transform: translateY(1px);
}
@media(max-width: 900px){
/* El cartel pasa debajo y los campos recuperan el ancho completo */
.ef-evt-layout{ grid-template-columns: 1fr; gap: 18px; }
.ef-evt-cartel{ flex-direction: row; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
/* Ancho EXPLÍCITO: al pasar el contenedor a fila, este bloque se queda sin
referencia de ancho (el hueco de dentro es width:100% del bloque, y el
bloque se dimensiona por su contenido) y colapsaba a 2px. */
.ef-evt-cartel .ef-images-grid--cartel{ width: 150px; flex: 0 0 150px; max-width: 150px; }
.ef-evt-cartel-cab, .content span.ef-evt-cartel-cab{ width: 100%; }
.ef-evt-cartel-nota, .content span.ef-evt-cartel-nota{ flex: 1; min-width: 140px; }
.ef-evt-campos .ef-grid--evt{ grid-template-columns: repeat(2, 1fr); }
.ef-grid--evt .ef-col-3, .ef-grid--evt .ef-col-4{ grid-column: span 2; }
.ef-grid--evt .ef-col-2{ grid-column: span 2; }
}
@media(max-width: 560px){
.ef-evt-campos .ef-grid--evt{ grid-template-columns: 1fr; }
.ef-grid--evt .ef-col-1, .ef-grid--evt .ef-col-2,
.ef-grid--evt .ef-col-3, .ef-grid--evt .ef-col-4{ grid-column: 1 / -1; }
.ef-switch--compacto{ width: 100%; }
}
/* ── Autocompletado de código postal (autocompletar-cp.js) ────────────
Lista de sugerencias bajo el campo, como en las webs de paquetería. */
.cp-sug{
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
z-index: 60;
margin-top: 4px;
max-height: 232px;
overflow-y: auto;
background: #fff;
border: 1px solid #d9d9df;
border-radius: 10px;
box-shadow: 0 10px 26px rgba(0,0,0,0.13);
}
.cp-sug.is-open{ display: block; }
.cp-sug-item{
display: flex;
align-items: baseline;
gap: 9px;
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #f2f2f5;
}
.cp-sug-item:last-child{ border-bottom: none; }
.cp-sug-item.is-activa{ background: #fdf1f1; }
.cp-sug-item strong{
font-size: 13px;
font-weight: 700;
color: var(--brand-red);
letter-spacing: .4px;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.cp-sug-item span{
font-size: 12.5px !important;
color: #52525b;
padding: 0 !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── "Copiar datos de mi local" (botonCopiarDatos) ────────────────────
Ofrecimiento, no obligación: se ve, se entiende de un vistazo y no compite
con el botón de guardar. Verde suave para separarlo de los avisos grises
(contexto) y ámbar (ojo con esto). */
.cd-bloque{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
padding: 14px 16px;
background: #f2f9f4;
border: 1px solid #cfe6d6;
border-radius: 12px;
}
.cd-ico, .content span.cd-ico{
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex-shrink: 0;
margin: 0 !important; padding: 0 !important;
border-radius: 9px;
background: rgba(46,125,50,0.12); color: #2e7d32;
}
.cd-ico svg{ width: 17px; height: 17px; }
.cd-txt{ flex: 1; min-width: 190px; }
.cd-txt strong, .content .cd-txt strong{
display: block; font-size: 13px; color: #24603a; line-height: 1.35;
}
.cd-txt span, .content .cd-txt span{
display: block; font-size: 12px !important; line-height: 1.5 !important;
color: #4b7a5c; padding: 0 !important;
}
.cd-mandos{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content .cd-select{
height: 38px !important; padding: 0 10px !important; margin: 0 !important;
max-width: 210px;
border: 1px solid #cfe6d6; border-radius: 8px;
background: #fff; font-size: 13px; color: #24603a;
}
.cd-btn{
display: inline-flex; align-items: center; justify-content: center;
height: 38px; padding: 0 16px;
border: none; border-radius: 999px;
background: #2e7d32; color: #fff;
font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.cd-btn:hover{ background: #256428; transform: translateY(-1px); }
.cd-btn:disabled{ opacity: .6; cursor: default; transform: none; }
.cd-aviso, .content p.cd-aviso{
display: none;
width: 100%;
margin: 0 !important; padding: 0 !important;
font-size: 12px !important; line-height: 1.5 !important; font-weight: 600;
}
.content p.cd-aviso.is-visible{ display: block; }
.content p.cd-aviso.is-ok{ color: #2e7d32; }
.content p.cd-aviso.is-info{ color: #64748b; }
.content p.cd-aviso.is-cargando{ color: #64748b; }
.cd-undo{
border: none; background: none; padding: 0;
font-size: 12px; font-weight: 700; color: #24603a;
text-decoration: underline; cursor: pointer;
}
@media(max-width: 560px){
.cd-mandos{ width: 100%; }
.content .cd-select{ flex: 1; max-width: none; }
.cd-btn{ flex-shrink: 0; }
}
/* ── Aviso de contexto en "Editar datos" ──────────────────────────────
Aclara que lo de esa pantalla son los datos de la EMPRESA y no los del
local, que es lo que hacía pensar que estaban duplicados. */
.ef-datos-nota{
display: flex;
align-items: flex-start;
gap: 11px;
margin-bottom: 18px;
padding: 13px 16px;
background: #f6f8fb;
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.ef-datos-nota > svg{ width: 19px; height: 19px; color: #64748b; flex-shrink: 0; margin-top: 1px; }
.ef-datos-nota strong, .content .ef-datos-nota strong{
display: block;
font-size: 13px;
color: #334155;
line-height: 1.4;
}
.ef-datos-nota span, .content .ef-datos-nota span{
display: block;
font-size: 12px !important;
line-height: 1.5 !important;
color: #64748b;
padding: 0 !important;
}
/* ── Tarjeta de estado (404, gracias, confirmaciones) ─────────────────
La pinta tarjetaEstado() en funciones.php. Sustituye a los `greybox round
shadow` de 2005 que tenían el 404 y el "gracias" del contacto. */
.estado-card{
max-width: 620px;
margin: 30px auto 40px;
padding: 44px 40px 40px;
text-align: center;
background: #fff;
border: 1px solid #ececef;
border-radius: 22px;
box-shadow: 0 14px 34px rgba(0,0,0,0.06);
}
.estado-card-icono, .content span.estado-card-icono{
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
margin: 0 0 20px !important;
padding: 0 !important;
border-radius: 50%;
}
.estado-card-icono svg{ width: 30px; height: 30px; }
/* Un color por tipo de mensaje: verde para "hecho", ámbar para "ojo con esto",
rojo de marca para "aquí no hay nada". */
.estado-card--ok .estado-card-icono{ background: rgba(46,125,50,0.12); color: #2e7d32; }
.estado-card--aviso .estado-card-icono{ background: rgba(224,168,0,0.15); color: #b6862c; }
.estado-card--info .estado-card-icono{ background: rgba(225,17,18,0.10); color: var(--brand-red); }
.estado-card-titulo{
margin: 0 0 10px;
font-size: 25px;
line-height: 1.25;
color: #18181b;
}
/* El blindaje del gotcha #1: sin él, la regla legacy `.content p` le impone
14px y un padding-bottom de 12px que descuadra el hueco hasta los botones. */
.estado-card-texto, .content p.estado-card-texto{
max-width: 46ch;
margin: 0 auto 26px !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
color: #52525b;
}
.estado-card-acciones{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
@media(max-width: 560px){
.estado-card{ padding: 34px 22px 30px; margin: 18px auto 30px; border-radius: 18px; }
.estado-card-titulo{ font-size: 21px; }
.estado-card-acciones{ flex-direction: column; }
/* En columna, los botones a ancho completo: dos píldoras centradas de
distinto ancho una debajo de otra se ven descolocadas. */
.estado-card-acciones .qe-btn{ width: 100%; }
}
/* ── Cuenta: cambio de contraseña (includes/forms/editar_acceso.php) ──
Reutiliza la estructura aprobada en eventos (.ef-evt-layout + .ef-evt-campos
+ rejilla de 4 tramos), solo que la columna de apoyo es algo más ancha
porque lleva texto y no una imagen. Estas reglas van DESPUÉS de las medias
de eventos a propósito: las medias no suman especificidad, así que la única
forma de que .ef-acc-layout gane a .ef-evt-layout en móvil es el orden. */
.ef-acc-layout{ grid-template-columns: 1fr 250px; }
/* Identidad de solo lectura: el usuario no se puede cambiar, así que no se
pinta como un con line-height 1 y bajada 1px. Sin el blindaje
`.content` + !important, la regla legacy `.content span:not(...)` le mete
font-size 14px y padding-bottom 12px, y el icono queda por debajo del texto. */
.content .ef-btn-txt,
.ef-btn-txt{
display: block;
font-size: 11.5px !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
transform: translateY(1px);
}
/* Principal: rojo de marca */
.ef-btn-save{
background: var(--brand-red, #e11112);
color: #fff;
box-shadow: 0 2px 10px rgba(225,17,18,.22);
}
.ef-btn-save:hover{
background: var(--brand-red-dark, #c80e10);
box-shadow: 0 6px 18px rgba(225,17,18,.32);
transform: translateY(-1px);
}
.ef-btn-save:active{ transform: translateY(0); box-shadow: 0 2px 8px rgba(225,17,18,.25); }
/* Secundario: contorno neutro, sin peso visual que compita con Guardar */
.ef-btn-cancel{
background: #fff;
color: #52525b;
border-color: #d4d4d8;
}
.ef-btn-cancel:hover{
background: #fafafa;
border-color: #a1a1aa;
color: #27272a;
transform: translateY(-1px);
}
.ef-btn-cancel:active{ transform: translateY(0); }
/* Toast notifications */
.ef-toast{
padding: 12px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
animation: efToastIn .3s ease;
}
.ef-toast-error{
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.ef-toast-success{
background: #f0fdf4;
color: #166534;
border: 1px solid #bbf7d0;
}
@keyframes efToastIn{
from{ opacity: 0; transform: translateY(-8px); }
to{ opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media(max-width: 700px){
.ef-section{ padding: 16px; }
.ef-grid{ grid-template-columns: 1fr; }
/* Huecos aún más pequeños en móvil: caben 3-4 por fila sin scroll eterno.
(Antes forzaba 2 columnas, que con el diseño compacto quedaban enormes.) */
.ef-images-grid{ grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ef-logo-panel{ grid-template-columns: 1fr; }
.ef-actions{ flex-direction: column; }
.ef-btn{ width: 100%; justify-content: center; }
/* Visor: menos relleno y flechas más pequeñas para que la foto mande */
.eb-visor{ padding: 52px 12px; }
.eb-visor-nav{ width: 38px; height: 38px; }
.eb-visor-nav svg{ width: 20px; height: 20px; }
.eb-visor-prev{ left: 6px; }
.eb-visor-next{ right: 6px; }
.eb-visor-img{ max-height: calc(100vh - 140px); }
}
/* ═══════════════════════════════════════════════════════
QUÉ ES — Landing/funnel de captación de establecimientos
═══════════════════════════════════════════════════════ */
.qe-shell{
--qe-text: #19120e;
--qe-muted: #766655;
--qe-border: rgba(91,68,48,0.13);
--qe-card-bg: linear-gradient(180deg, #fffefc 0%, #f9f5ef 100%);
position: relative;
padding-bottom: 24px;
color: var(--qe-text);
}
.qe-shell *{box-sizing: border-box;}
.qe-shell p,
.qe-shell span,
.qe-shell li{width: auto !important; padding: 0 !important;}
.qe-shell ul{overflow: visible; list-style: none;}
.qe-shell::before{display: none;}
.qe-section{margin: 22px 0;}
.qe-card{
background: var(--qe-card-bg);
border: 1px solid var(--qe-border);
border-radius: 20px;
box-shadow: 0 4px 16px rgba(56,37,23,0.06);
padding: 30px;
}
.qe-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 26px;
border-radius: 999px;
border: none;
text-decoration: none;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.2px;
white-space: nowrap;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.qe-btn:hover{transform: translateY(-2px);}
.qe-btn:active{transform: translateY(0) scale(0.97);}
.qe-btn-primary{
background: var(--brand-red);
color: #fff;
box-shadow: 0 10px 22px rgba(225,17,18,0.26);
}
.qe-btn-primary:hover{background: var(--brand-red-dark); color: #fff;}
.qe-btn-ghost{
background: transparent;
color: #5b4430;
border: 1.5px solid rgba(91,68,48,0.22);
}
.qe-btn-ghost:hover{border-color: var(--brand-red); color: var(--brand-red);}
.qe-btn-ghost svg{width: 18px; height: 18px;}
.qe-btn-lg{height: 52px; padding: 0 32px; font-size: 15px;}
.qe-shell span.qe-section-kicker{
display: inline-flex !important;
align-items: center;
height: 28px !important;
padding: 0 13px !important;
margin: 0 0 12px !important;
border-radius: 999px;
background: rgba(91,68,48,0.06);
border: 1px solid rgba(91,68,48,0.14);
color: #5b4430;
font-size: 11px !important;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
line-height: 1.2 !important;
}
.qe-icon-chip{
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(91,68,48,0.07);
box-shadow: inset 0 0 0 1px rgba(91,68,48,0.08);
color: #6d5a48;
flex-shrink: 0;
}
/* El chip es un : la regla legacy `.content span` le mete
padding-bottom:12px, y como tiene alto fijo (46px) con box-sizing:border-box
el área útil baja a 34px — el icono se centraba en esa franja superior y
quedaba ~6px por encima del centro real del recuadro. */
.content .qe-icon-chip{padding: 0 !important;}
.qe-icon-chip svg{width: 22px; height: 22px;}
.qe-icon-chip-lg{width: 58px; height: 58px; border-radius: 17px;}
.qe-icon-chip-lg svg{width: 27px; height: 27px;}
/* ================= HERO ================= */
/* Al mismo ancho y alineación que todo lo demás. Iba centrada y estrechada a
760px: al lado de secciones que ocupan los 1200 se leía como una pieza de
otra página, y era una de las dos que rompían la columna. */
.qe-hero{
text-align: left;
margin: 0 0 22px;
padding: 40px 30px 34px;
}
.qe-shell span.qe-hero-eyebrow{
display: inline-flex !important;
align-items: center;
height: 28px !important;
padding: 0 14px !important;
margin: 0 0 18px !important;
border-radius: 999px;
background: rgba(225,17,18,0.07);
border: 1px solid rgba(225,17,18,0.16);
color: var(--brand-red-dark);
font-size: 11.5px !important;
font-weight: 700;
letter-spacing: 0.6px;
line-height: 1.2 !important;
}
.qe-hero-title{
margin: 0 0 16px;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700;
font-size: 42px;
line-height: 1.12;
letter-spacing: -0.01em;
color: #19120e;
display: block;
text-align: center;
border-bottom: none;
}
.qe-shell p.qe-hero-sub{
max-width: 560px;
margin: 0 auto 26px !important;
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--qe-muted);
}
.qe-hero-actions{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 16px;
}
.qe-shell p.qe-hero-risk{
margin: 0 !important;
font-size: 12.5px !important;
font-weight: 700;
letter-spacing: 0.3px;
color: #6d5c4a;
}
/* ---- La foto de fondo del hero (foto 2 de 7) ----------------------------
La foto es CUADRADA (1200x1200) y el hueco cambia de forma, igual que en la
ficha simulada:
ordenador 1200x383 (3,13:1) -> se ve una banda HORIZONTAL: se
conserva todo el ancho y solo el 32% del alto
movil 360 344x524 (0,66:1) -> se ve una banda VERTICAL: se conserva
todo el alto y solo el 66% del ancho (columnas 206-994)
O sea que lo unico que se ve seguro en las dos es el CUADRADO CENTRAL. Al
sustituir esta foto, el motivo tiene que ir centrado y con aire por los
cuatro lados.
⚠ EL VELO NO ES DECORACION, ES LO QUE HACE LEGIBLE EL TEXTO.
La foto es de noche y su banda central esta a luminancia 0,021 — pero tiene
bombillas encendidas a 1,000, y aqui el texto cae encima de TODA la
superficie del hero (de y=41 a y=348 en el ordenador; de y=23 a y=501 en el
movil): no hay ningun sitio donde ponerlo a salvo.
Medido pixel a pixel bajo los cinco rectangulos de texto, en los dos
recortes: con el velo al 50% todavia fallan letras sobre las bombillas
(0,25% de los pixeles del titular). Con el 55% pasan todas en blanco puro.
Se deja en el 60% porque el subtitulo y la linea de abajo van en crema
—para que los cuatro textos no griten igual— y el crema necesita ese 60%.
BAJARLO DEJA TEXTO POR DEBAJO DEL 4,5. Si se cambia la foto, hay que volver
a medir: una foto de dia necesitaria bastante mas velo, no menos.
Se pinta como fondo y no como , así que la
regla legacy `.content span` les metía font-size:14px y
padding-bottom:12px. Quedaban 34px de alto frente a los 23px de los
enlaces, inflando toda la fila (62px en vez de 51px). ---- */
.content .bar-hero-breadcrumb .bc-sep{
padding: 0 !important;
font-size: 13px !important;
}
/* ---- Alineación del bloque "Información" con la imagen de la ficha ----
La miga de pan vive dentro de la columna de contenido, así que empuja
la imagen hacia abajo mientras el sidebar arrancaba pegado al techo:
la tarjeta de Información quedaba visiblemente más alta que la foto.
CUIDADO al ajustar esto: la tarjeta blanca visible (.fsb-card) tiene
44px de margen superior PROPIO dentro del contenedor .fsb-desktop, así
que el contenedor y la tarjeta NO empiezan en el mismo sitio. Hay que
alinear la TARJETA, no el contenedor (medir .fsb-card, no .fsb-desktop).
Cuenta: hueco de la miga = 10px de padding de la columna + 51px de alto
+ 8px de margen = 69px; menos los 44px propios de la tarjeta = 25px.
Solo en escritorio: por debajo de 980px este bloque se oculta y se usa
la versión inline. ---- */
@media screen and (min-width: 981px){
body.page-locales .sidebar .fsb-desktop{margin-top: 25px;}
}
/* ---- Mapa de la ficha en móvil: altura contenida (antes ocupaba una
pantalla entera y el popup tapaba el mapa) ---- */
@media screen and (max-width: 767px){
#barmap{height: 280px !important;}
}
/* ---- Fichas de detalle (menú / evento) — modernización ---- */
.detail-card{
position: relative;
border-radius: 18px;
border: 1px solid rgba(91,68,48,0.13);
background: linear-gradient(180deg, #fffefc 0%, #f9f5ef 100%);
box-shadow: 0 4px 16px rgba(56,37,23,0.06);
}
.detail-share-floating{
position: absolute;
top: 14px;
right: 14px;
z-index: 6;
}
.detail-card-type{
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 12px;
margin-bottom: 10px;
border-radius: 999px;
background: rgba(91,68,48,0.06);
border: 1px solid rgba(91,68,48,0.14);
color: #5b4430;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
}
.detail-card-title{color: #19120e;}
.detail-card-price{color: var(--brand-red-dark);}
.detail-menu-content{
border-radius: 18px;
border: 1px solid rgba(91,68,48,0.13);
background: #fffefc;
padding: 26px 30px;
text-align: left;
}
.detail-menu-ornament{display: none;}
.detail-menu-text{font-size: 14.5px; line-height: 1.75; color: #3a2a1c;}
/* El contenedor NO pinta caja: la superficie (borde, fondo, sombra) la lleva
el propio enlace .detail-return-link. Antes ambos dibujaban su recuadro y se
veía un marco dentro de otro. */
.detail-return-card{
border: 0;
background: none;
}
/* ---- Ficha de establecimiento en móvil: menos aire muerto ---- */
@media screen and (max-width: 700px){
.bar-description{padding: 18px 16px 16px;}
.bar-desc-text{font-size: 14px; line-height: 1.6;}
.detail-card-body{padding: 16px 18px;}
.detail-menu-content{padding: 18px 16px;}
.detail-card-title{font-size: 19px;}
.detail-card-price{font-size: 20px;}
}
/* ── Reencuadre del logo (formularios del panel de cliente) ── */
/* ── Píldoras de días de cierre (formularios del panel de cliente) ── */
/* ── Contenedor de los formularios del panel (Editar local, Nuevo evento…) ──
`.greybox` es un componente global con degradado gris de 2010; se usa
también en el buscador, así que NO se toca en general: solo se moderniza
dentro del panel del cliente, donde desentonaba con las tarjetas nuevas. */
body.page-perfil div.greybox{
background: #fff;
border: 1px solid #e4e4e7;
border-radius: 14px;
padding: 26px 28px;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
body.page-perfil div.greybox > h3.helvetica{
margin: 0 0 22px !important;
padding: 0 0 16px !important;
border-bottom: 1px solid #f0f0f2;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 20px; text-transform: uppercase; letter-spacing: .4px;
color: #18181b; background: none;
}
@media screen and (max-width: 700px){
/* 28px a cada lado se comían demasiado ancho en pantallas estrechas */
body.page-perfil div.greybox{padding: 18px 14px; border-radius: 12px;}
body.page-perfil div.greybox > h3.helvetica{font-size: 17px; margin-bottom: 16px !important;}
}
/* ══ Horario: campos integrados en la rejilla, no en una caja aparte ══
Las horas son datos cortos ("07:00"): van en un par compacto que ocupa
una sola celda, en vez de estirarse a media pantalla cada una. */
.ef-horas-par{
display:flex; align-items:center; gap:8px;
}
.ef-field.ef-horas input[type="time"]{
width:auto; flex:1 1 0; min-width:0;
text-align:center; padding-left:8px; padding-right:8px;
/* Los ), así que se veían más grandes que el resto
de campos de la fila. Se fija la misma caja que los demás. */
height:38px; line-height:1; box-sizing:border-box;
-webkit-appearance:none; appearance:none;
}
/* El icono nativo del reloj se queda pegado al borde y descuadra el interior */
.ef-field.ef-horas input[type="time"]::-webkit-calendar-picker-indicator{
margin:0; padding:0; opacity:.55; cursor:pointer;
}
.content .ef-horas-sep{
padding:0 !important; margin:0 !important;
font-size:15px !important; line-height:1 !important; color:#a1a1aa; flex-shrink:0;
}
/* Los días ocupan 2 columnas: 7 píldoras necesitan sitio para no partirse */
.ef-field.ef-dias-field{grid-column:span 2;}
.content .ef-hint-inline{
padding:0 !important; margin:0 0 0 4px !important;
font-size:11.5px !important; font-weight:400; color:#a1a1aa; line-height:1.3 !important;
}
/* Vista previa: chip discreto que se coloca JUNTO a los días (ocupa las
columnas que estos dejan libres) en vez de gastar una fila entera. */
.ef-field.ef-horario-preview{
grid-column:span 2;
flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap;
align-self:end;
padding:9px 12px; border-radius:8px;
background:#eef7f0; border:1px solid #cfe8d6;
}
.ef-field.ef-horario-preview[hidden]{display:none;}
.content .ef-horario-preview-tag{
display:inline-flex !important; align-items:center; padding:0 9px !important; margin:0 !important;
height:19px; border-radius:999px; background:#15803d; color:#fff;
font-size:9.5px !important; font-weight:700; text-transform:uppercase; letter-spacing:.5px; line-height:1 !important;
flex-shrink:0;
}
.content .ef-horario-preview-txt{
display:inline !important; padding:0 !important; margin:0 !important;
font-size:13px !important; font-weight:600; color:#14532d; line-height:1.4 !important;
}
@media screen and (max-width: 620px){
/* En móvil la rejilla es de 1 columna: si un elemento conserva `span 2`
el navegador crea una SEGUNDA columna implícita y todo se estrecha
(las horas quedaban en 31px y las píldoras de días en 7 filas de una).
Por eso hay que devolver a fila completa TODOS los que expanden. */
.ef-field.ef-dias-field,
.ef-field.ef-horario-preview{grid-column:1 / -1;}
.ef-field.ef-horas input[type="time"]{max-width:none;}
}
.ef-dias-cierre{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 2px;}
/* La regla `.ef-field label` (0,1,1) le gana a `.ef-dia-pill` (0,1,0) y le
imponía `padding:0`: las píldoras colapsaban a 25px de ancho y el texto
de los días se salía. Se sube la especificidad con label.ef-dia-pill. */
label.ef-dia-pill,
.ef-field label.ef-dia-pill{
display:inline-flex;align-items:center;justify-content:center;gap:0;
min-width:52px;height:36px;padding:0 15px !important;border-radius:999px;
border:1.5px solid #d4d4d8;background:#fff;
font-size:12.5px;font-weight:600;color:#3f3f46;
cursor:pointer;user-select:none;-webkit-user-select:none;
transition:border-color .15s,background .15s,color .15s,transform .15s;
line-height:1;
}
/* El interior también cae en el gotcha `.content span`
(font-size:14px + padding-bottom:12px), que descuadraba la píldora. */
.content .ef-dia-pill span{
font-size:12.5px !important;line-height:1 !important;
padding:0 !important;margin:0 !important;display:block;
transform:translateY(1px);
}
/* El checkbox nativo del navegador queda oculto (visualmente) porque la
propia píldora ya indica el estado marcado con su relleno rojo; el
cuadrado del checkbox encima de la píldora se veía descuadrado y
redundante. Sigue siendo funcional y accesible (clip, no display:none). */
.ef-dia-pill input{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
label.ef-dia-pill:hover{border-color:#E11112;color:#E11112;transform:translateY(-1px);}
/* Estado marcado: se usa la clase `is-checked` (la pinta el PHP al cargar y
el JS al hacer clic) además de :has(), que no existe en navegadores algo
antiguos — así el día de cierre se ve marcado en cualquier caso. */
label.ef-dia-pill.is-checked,
.ef-field label.ef-dia-pill.is-checked{background:#E11112;border-color:#E11112;color:#fff;}
label.ef-dia-pill:has(input:checked){background:#E11112;border-color:#E11112;color:#fff;}
label.ef-dia-pill:has(input:focus-visible){outline:2px solid #E11112;outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
label.ef-dia-pill{transition:none;}
label.ef-dia-pill:hover{transform:none;}
}
/* ══════════════════════════════════════════════════════════════════════════
BANNER DE CONSENTIMIENTO
Lo pinta includes/consentimiento.php. Dos vistas: el aviso y "Más opciones",
con un desplegable por grupo.
Barra INFERIOR y ancha (1180px), no un cuadro centrado: así no tapa el
contenido, que es lo que el visitante ha venido a ver, y sobra ancho para
poner los dos bloques de texto uno al lado del otro en vez de apilados.
Texto corrido con punto y seguido — en lista, cada frase gastaba una línea
entera y la barra salía el doble de alta para decir lo mismo.
Aceptar y rechazar miden lo mismo y ninguna casilla viene marcada: eso no es
estética, es lo que hace válido el consentimiento (art. 7.4 RGPD). El de
aceptar lleva el color de marca, que sí es legítimo.
══════════════════════════════════════════════════════════════════════════ */
.eb-consent{
display: none;
position: fixed; inset: 0; z-index: 99999;
/* ⚠ El velo NO se traga los clics: ver la nota de includes/consentimiento.php */
pointer-events: none;
align-items: flex-end; justify-content: center;
padding: 0; overflow-y: auto;
background: rgba(15,17,21,.5);
font-family: Arial, Helvetica, sans-serif;
animation: eb-consent-fondo .18s ease both;
}
.eb-consent.is-abierto{ display: flex; }
@keyframes eb-consent-fondo{ from{ opacity: 0; } to{ opacity: 1; } }
/* Bloqueo de scroll retirado: el banner ya no es modal. La clase la sigue
poniendo/quitando el JS, pero no hace nada. */
.eb-consent-caja{ pointer-events: auto;
width: 100%; max-width: 1180px;
max-height: 92vh; overflow-y: auto;
background: #fff;
border-radius: 14px 14px 0 0;
padding: 22px 28px 18px;
box-shadow: 0 -6px 34px rgba(0,0,0,.28);
text-align: left;
animation: eb-consent-sube .22s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes eb-consent-sube{ from{ transform: translateY(24px); } to{ transform: none; } }
.eb-consent-tit{
margin: 0 0 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px; font-weight: 400; line-height: 1.3;
color: #202124;
}
.content .eb-consent-txt,
.eb-consent-txt{
margin: 0 !important; padding: 0 !important;
font-size: 13px !important; line-height: 1.55; color: #3c4043; text-align: left;
}
/* Los dos bloques del aviso, uno debajo del otro y a todo el ancho. En dos
columnas de 545px cada bloque partia en tres lineas; a 1124px la primera
frase entra entera en una y la barra solo crece 10px. */
.eb-consent-cols{
display: grid; grid-template-columns: 1fr; gap: 7px;
margin: 0 0 16px;
}
/* Última frase a la izquierda, botones a la derecha: una sola fila, sin
desperdiciar el alto de la barra. */
.eb-consent-final{
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
padding-top: 14px; border-top: 1px solid #e8eaed;
}
.eb-consent-txt-fin{ flex: 1 1 320px; min-width: 0; }
.eb-consent-acciones{ display: flex; gap: 10px; flex: 0 0 auto; }
.eb-consent-btn{
display: inline-flex; align-items: center; justify-content: center;
min-width: 168px; min-height: 38px; padding: 0 20px;
border: 1px solid var(--brand-red,#E11112); border-radius: 999px;
background: #fff; color: var(--brand-red,#E11112);
font-family: Arial, Helvetica, sans-serif;
font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap;
cursor: pointer; -webkit-appearance: none; appearance: none;
transition: background .15s, color .15s;
}
.eb-consent-btn:hover{ background: #fff5f5; }
.eb-consent-btn:disabled{ opacity: .55; cursor: default; }
.eb-consent-btn-si{
background: var(--brand-red,#E11112); border-color: var(--brand-red,#E11112); color: #fff;
}
.eb-consent-btn-si:hover{ background: #c40e0f; border-color: #c40e0f; }
/* "Más opciones" a la izquierda y los enlaces legales a la derecha. */
.eb-consent-barra{
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin: 10px 0 0;
}
.eb-consent-enlace{
background: none; border: none; padding: 4px 0;
color: var(--brand-red,#E11112);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; font-weight: 700; cursor: pointer;
}
.eb-consent-enlace:hover{ text-decoration: underline; }
.content .eb-consent-pie,
.eb-consent-pie{
margin: 0 !important; padding: 0 !important;
font-size: 11px !important; line-height: 1.5; color: #70757a;
}
.eb-consent-pie a{ color: #70757a; text-decoration: none; }
.eb-consent-pie a:hover{ text-decoration: underline; }
/* ── Más opciones: un desplegable por grupo, plegados de partida ─────────── */
.eb-consent-grupos{ margin: 12px 0 0; text-align: left; }
.eb-consent-grupo{ border-top: 1px solid #e8eaed; }
.eb-consent-grupo-cab{
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.eb-consent-desp{
display: flex; align-items: center; gap: 8px;
flex: 1 1 auto; min-width: 0;
padding: 10px 0; background: none; border: none; cursor: pointer;
text-align: left; font-family: Arial, Helvetica, sans-serif;
}
.eb-consent-chevron{ flex: 0 0 16px; color: #5f6368; transition: transform .18s; }
.eb-consent-chevron svg{ width: 16px; height: 16px; display: block; }
.eb-consent-desp[aria-expanded="true"] .eb-consent-chevron{ transform: rotate(180deg); }
.eb-consent-grupo-nom{ font-size: 13.5px !important; font-weight: 700; color: #202124; }
.content .eb-consent-grupo-cuerpo p,
.eb-consent-grupo-cuerpo p{
margin: 0 !important; padding: 0 0 11px 24px !important;
font-size: 12.5px !important; line-height: 1.55; color: #5f6368;
}
.eb-consent-fijo{ flex: 0 0 auto; font-size: 11.5px !important; color: #70757a; }
/* Blindaje del gotcha #1: los span dentro de .content heredan
padding-bottom:12px de la regla legacy y descuadran las filas. */
.content .eb-consent-grupo-nom, .content .eb-consent-fijo,
.content .eb-consent-chevron{ padding: 0 !important; }
/* Interruptor. Ninguno viene marcado de fábrica: premarcarlos invalidaría el
consentimiento (art. 4.11 RGPD, sentencia Planet49). */
.eb-consent-sw{ position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 38px; }
.eb-consent-sw input{
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.eb-consent-sw-pista{
position: absolute; inset: 0;
background: #bdc1c6; border-radius: 999px; transition: background .18s;
}
.eb-consent-sw-bola{
position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
background: #fff; border-radius: 50%;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
transition: transform .18s;
}
.eb-consent-sw input:checked + .eb-consent-sw-pista{ background: var(--brand-red,#E11112); }
.eb-consent-sw input:checked + .eb-consent-sw-pista .eb-consent-sw-bola{ transform: translateX(16px); }
.eb-consent-sw input:focus-visible + .eb-consent-sw-pista{ outline: 2px solid var(--brand-red,#E11112); outline-offset: 2px; }
/* Por debajo de 860px ya no caben dos columnas de texto sin partir palabras. */
@media (max-width: 860px){
.eb-consent-final{ gap: 14px; }
.eb-consent-acciones{ flex: 1 1 100%; }
/* 44px, y los DOS iguales. Este banner se lee sobre todo en el móvil —la
carta digital se abre escaneando un QR en una mesa— y con 38px se falla
el dedo. Si «Rechazar» quedara más pequeño que «Aceptar», el
consentimiento sería nulo (art. 7.4 RGPD): comparten clase justamente
para que no pueda pasar. */
.eb-consent-btn{ flex: 1 1 0; min-width: 0; padding: 0 10px; min-height: 44px; }
}
@media (max-width: 560px){
.eb-consent-caja{ padding: 18px 16px 14px; max-height: 90vh; }
.eb-consent-tit{ font-size: 18px; }
.eb-consent-btn{ font-size: 13px; }
}
@media (prefers-reduced-motion: reduce){
.eb-consent, .eb-consent-caja{ animation: none; }
.eb-consent-chevron, .eb-consent-sw-pista, .eb-consent-sw-bola{ transition: none; }
}
/* Acceso permanente a las preferencias de cookies. Es obligatorio que retirar
el permiso sea tan fácil como darlo, así que va en el pie de todas las
páginas y en el menú móvil. */
.footer-cookies{ margin: 6px 0 0; text-align: center; }
.footer-cookies a{
font-size: 11.5px; color: #8a8a93; text-decoration: underline;
}
.footer-cookies a:hover{ color: var(--brand-red,#E11112); }
/* ══════════════════════════════════════════════════════════════════════════
ÁREA DEL COMENSAL (.hdr-cuenta / .uc-*)
La segunda puerta. Lo del hostelero (.cpanel-*, .pnl-*) no se toca.
Todo lleva prefijo propio y, donde cae dentro de `.content`, el blindaje
del gotcha #1 (`!important` en padding y font-size), o la regla legacy
`.content span` les mete 12px de relleno inferior fantasma.
══════════════════════════════════════════════════════════════════════════ */
/* ── Píldora de acceso, arriba a la derecha ──────────────────────────────
Va en la cabecera y no dentro del menú porque es la única forma de que
alguien descubra que puede registrarse. Es el patrón de TripAdvisor,
Booking y compañía: la puerta del visitante siempre visible. */
.hdr-cuenta{
position: absolute; top: 50%; right: 74px; transform: translateY(-50%);
display: inline-flex; align-items: center; gap: 8px;
height: 38px; padding: 0 20px;
border: 1px solid var(--brand-red,#E11112); border-radius: 999px;
background: var(--brand-red,#E11112); color: #fff;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px;
text-decoration: none; white-space: nowrap; z-index: 6;
transition: background .15s, border-color .15s, transform .15s;
}
.hdr-cuenta:hover{ background: #c40e0f; border-color: #c40e0f; color: #fff; transform: translateY(-50%) translateY(-1px); }
/* Ya dentro: se cambia por su nombre y su avatar, en contorno para no competir
con la llamada a la acción de cada página. */
.hdr-cuenta-dentro{
background: #fff; color: #3f3f46; border-color: #d4d4d8; padding: 0 14px 0 6px;
}
.hdr-cuenta-dentro:hover{ background: #fafafa; border-color: #a1a1aa; color: #0f1115; }
.hdr-cuenta-av{
width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.hdr-cuenta-ini{
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand-red,#E11112); color: #fff;
font-size: 13px; line-height: 1; padding: 0 !important;
}
.content .hdr-cuenta-txt, .hdr-cuenta-txt{
padding: 0 !important; font-size: 12.5px !important; line-height: 1;
transform: translateY(1px); text-transform: none; letter-spacing: 0;
}
.hdr-cuenta-ico{ display: none; padding: 0 !important; }
.hdr-cuenta-ico svg{ width: 19px; height: 19px; display: block; }
@media (max-width: 900px){
.hdr-cuenta{ right: 62px; padding: 0 13px; font-size: 11.5px; height: 34px; }
}
/* Por debajo de 700px la cabecera es solo idioma + logotipo centrado y no hay
sitio para una píldora con texto: se solapaba con el logotipo y encima
quedaba por debajo, sin poder pulsarse. Ahí pasa a ser un círculo con el
icono de persona, pegado al borde derecho, que es lo que hace cualquier
aplicación cuando se queda sin ancho. */
@media (max-width: 700px){
.hdr-cuenta{
right: 8px; width: 36px; height: 36px; padding: 0;
justify-content: center; gap: 0;
}
.hdr-cuenta .hdr-cuenta-txt{ display: none; } /* movil-ok: el texto «Iniciar sesion» de la cabecera; queda el icono de cuenta, con su aria-label */
.hdr-cuenta .hdr-cuenta-ico{ display: inline-flex; }
.hdr-cuenta-dentro{ padding: 0; }
.hdr-cuenta-dentro .hdr-cuenta-av{ width: 34px; height: 34px; }
}
/* ══════════════════════════════════════════════════════════════════════════
LAS DOS PUERTAS · `.eb-puerta` y `.eb-puente` (2026-09-05)
El componente lo monta `ebDistintivoPuerta()` / `ebPuenteOtraPuerta()` en
funciones.php. Sale en las TRES pantallas de acceso —la del comensal, el
alta de establecimiento y el acceso de hosteleros— y tiene que verse igual
en las tres: es lo que permite saber en cuál estás sin leer nada.
══════════════════════════════════════════════════════════════════════════ */
/* ── El distintivo: de quién es esta pantalla ───────────────────────────── */
.eb-puerta{
display: flex; align-items: center; gap: 11px;
margin: 0 0 18px; padding: 11px 14px;
border: 1px solid #e4e4e7; border-radius: 12px;
background: #fafafa;
}
.eb-puerta-ico{
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
padding: 0 !important;
}
.eb-puerta-ico svg{ width: 19px; height: 19px; display: block; }
/* ⚠ Gotcha #1: sin nombrar el span y sin !important, `.content span` le mete
12px de relleno por debajo y el rótulo se descuelga del icono. */
.content span.eb-puerta-txt, .eb-puerta-txt{
display: block; min-width: 0; padding: 0 !important;
}
.eb-puerta-txt strong{
display: block; font-size: 14px; line-height: 1.25; color: #0f1115;
padding: 0 !important;
}
.eb-puerta-txt small{
display: block; font-size: 11.5px; line-height: 1.35; color: #6b6b73;
margin-top: 2px; padding: 0 !important;
}
/* Cada puerta con su color, el mismo par que las dos píldoras de la cabecera:
el establecimiento en el rojo de marca, la personal en gris neutro. Así el
color dice lo mismo que el icono y que el texto — tres señales, no una. */
.eb-puerta--negocio{ border-color: rgba(225,17,18,.28); background: #fff5f5; }
.eb-puerta--negocio .eb-puerta-ico{ background: var(--brand-red,#E11112); color: #fff; }
.eb-puerta--personal .eb-puerta-ico{ background: #3f3f46; color: #fff; }
/* ── El puente a la otra puerta ──────────────────────────────────────────
Va donde se duda: al pie de la columna de argumentos, y otra vez JUNTO AL
BOTÓN DE ENVIAR, que es donde alguien se da cuenta de que se ha equivocado
medio segundo antes de crear la cuenta que no era. */
.eb-puente{
margin: 18px 0 0; padding: 13px 15px;
border: 1px dashed #d4d4d8; border-radius: 12px;
background: #fff;
}
.content p.eb-puente-t, .eb-puente-t{
margin: 0 0 8px; padding: 0 !important;
font-size: 13px !important; line-height: 1.4; color: #52525b;
}
.eb-puente-b{
display: inline-flex; align-items: center; gap: 7px;
min-height: 44px; padding: 0 16px;
border: 1px solid var(--brand-red,#E11112); border-radius: 999px;
background: #fff; color: var(--brand-red,#E11112);
font-size: 13.5px; font-weight: 600; text-decoration: none;
transition: background .15s, color .15s;
}
.eb-puente-b:hover, .eb-puente-b:focus-visible{
background: var(--brand-red,#E11112); color: #fff;
}
.content span.eb-puente-f, .eb-puente-f{
padding: 0 !important; font-size: 17px !important; line-height: 1;
}
/* Dentro de la columna oscura de argumentos el mismo bloque se invierte, o el
recuadro blanco se lee como un parche pegado encima. */
.ctc-info .eb-puente{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); }
.ctc-info .eb-puente-t{ color: rgba(255,255,255,.86) !important; }
.ctc-info .eb-puente-b{ background: #fff; border-color: #fff; color: var(--brand-red,#E11112); }
.ctc-info .eb-puente-b:hover, .ctc-info .eb-puente-b:focus-visible{ background: #ffe9e9; color: #a80d0e; }
/* ── Píldora del HOSTELERO, arriba a la IZQUIERDA ────────────────────────
La gemela de `.hdr-cuenta`, en el lado contrario. Las dos puertas del sitio
a la misma altura y a la vista: la personal a la derecha, la del negocio a
la izquierda. Antes solo se veía una y el hostelero tenía que ir a buscarse
la vida en el menú.
⚠ VA EN CONTORNO Y NO EN ROJO MACIZO A PROPÓSITO. Dos píldoras rojas
rellenas en la misma barra compiten y no gana ninguna; en contorno se lee
igual de bien, se distingue de un vistazo y deja la jerarquía clara.
⚠ SOLO DESDE 981px. Medido el 2026-09-05 sobre la web en marcha: el hueco
entre las banderas y el logotipo es de 394px a 1280, 287px a 1000 y
**4px a 900**, porque por debajo de 981 la barra interior se queda en
344px. No es que quede apretada: es que no cabe. En móvil la puerta del
hostelero va la primera del menú, que es donde hay sitio.
`left: 106px` sale de que las banderas terminan a 94px del borde interior
en todos los anchos ≥981 (llevan `margin-left:-4px`), más el aire. */
.hdr-negocio{ display: none; }
@media (min-width: 981px){
.hdr-negocio{
position: absolute; top: 50%; left: 106px; transform: translateY(-50%);
display: inline-flex; align-items: center; gap: 7px;
height: 38px; padding: 0 16px;
border: 1px solid var(--brand-red,#E11112); border-radius: 999px;
background: #fff; color: var(--brand-red,#E11112);
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px;
text-decoration: none; white-space: nowrap; z-index: 6;
transition: background .15s, color .15s, transform .15s;
}
.hdr-negocio:hover{
background: var(--brand-red,#E11112); color: #fff; border-color: var(--brand-red,#E11112);
transform: translateY(-50%) translateY(-1px);
}
.hdr-negocio:focus-visible{ outline: 2px solid var(--brand-red,#E11112); outline-offset: 3px; }
.hdr-negocio-ico{ padding: 0 !important; display: inline-flex; flex: 0 0 auto; }
/* 16px, no 18: con 18 el dibujo pesaba tanto como el texto y la píldora se
veía cargada. El icono aquí acompaña, no manda. */
.hdr-negocio-ico svg{ width: 16px; height: 16px; display: block; }
/* ⚠ SIN el `translateY(1px)` que lleva `.hdr-cuenta-txt`, y no es un olvido.
Ese píxel es la receta del gotcha #4 para la HelveticaCondensed, que
dibuja las MAYÚSCULAS algo por encima del centro de su caja. Aquí el
texto va en caja normal (`text-transform:none`), así que esa corrección
no toca — y con el «GRATIS» al lado lo que hacía era dejar la palabra un
píxel por debajo del badge, que es parte de lo que se veía torcido. */
.content .hdr-negocio-txt, .hdr-negocio-txt{
padding: 0 !important; font-size: 12.5px !important; line-height: 1;
align-self: center; text-transform: none; letter-spacing: 0;
}
/* ⚠ EL «GRATIS» ES UNA PÍLDORA DENTRO DE OTRA PÍLDORA, y eso a esta escala
se descuadra solo. La primera versión lo puso a 10,5px con relleno de
2×7: salía de **14,5px de alto, el 38% de los 38 de la píldora**, un
bloque macizo pegado a la curva de la derecha. Medido y corregido el
2026-09-05 después de que él lo viera en la barra:
antes badge 14,5 alto (38%) · ancho total 209px · aire dcha 19
ahora badge 13 alto (34%) · ancho total ~190px · aire dcha 18
Las tres cosas que lo encajan, y las tres hacen falta:
· letra más pequeña (9,5) y relleno más ajustado en vertical;
· `align-self:center` EXPLÍCITO — dentro de un flex con textos de
tamaños distintos, dejarlo al `align-items` del padre lo apoya en la
línea del texto grande y se descuelga medio píxel;
· `flex:0 0 auto`, para que no se estire ni se encoja con el texto de
al lado y el aire de la derecha sea siempre el mismo.
Se cae por debajo de 1150px: ahí el hueco baja de 337px y prefiero perder
el adorno antes que arrimar la píldora al logotipo. */
.content .hdr-negocio-gratis, .hdr-negocio-gratis{
display: none; align-self: center; flex: 0 0 auto;
/* ⚠ EL RELLENO ES ASIMÉTRICO (2 arriba, 1 abajo) Y NO ES UNA ERRATA.
Es la receta del gotcha #4 para píldoras con el texto en MAYÚSCULAS:
la HelveticaCondensed dibuja las versales por encima del centro de su
caja —el hueco de abajo es para las colas de las g y las p, que aquí
no existen—, así que con relleno igual arriba y abajo la palabra se ve
alta dentro de su propio recuadro. El total (12px) no cambia.
⚠ Y OJO CON «BAJAR LA LETRA» A SECAS: el primer intento pasó de 10,5
a 9,5 pero subió el relleno de 2 a 2,5, así que el alto se quedó
EXACTAMENTE igual —14,5px, el 38% de la píldora— y no se arregló
nada. Lo que cuenta es el alto resultante, no el tamaño de letra. */
padding: 2px 6px 1px !important; border-radius: 999px;
background: var(--brand-red,#E11112); color: #fff;
font-size: 9px !important; line-height: 1;
text-transform: uppercase; letter-spacing: .3px;
}
.hdr-negocio:hover .hdr-negocio-gratis{ background: #fff; color: var(--brand-red,#E11112); }
}
@media (min-width: 1150px){
.content .hdr-negocio-gratis, .hdr-negocio-gratis{ display: inline-block; }
}
/* ── Pestañas Entrar / Crear cuenta ──────────────────────────────────────── */
.uc-tabs{ display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid #e4e4e7; }
.uc-tab{
flex: 1 1 0; text-align: center;
padding: 10px 8px; border-bottom: 2px solid transparent;
color: #71717a; text-decoration: none;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
margin-bottom: -1px;
}
.uc-tab:hover{ color: #0f1115; }
.uc-tab.is-on{ color: var(--brand-red,#E11112); border-bottom-color: var(--brand-red,#E11112); }
.uc-aviso{
margin: 0 0 16px !important; padding: 10px 13px !important;
border: 1px solid #fbdcdc; border-radius: 9px; background: #fff8f8;
color: #7f1d1d; font-size: 13px !important; line-height: 1.5;
}
/* ── Botón de Google ─────────────────────────────────────────────────────
Blanco, con el logotipo a color y el texto en negro: son las condiciones de
marca de Google, no una decisión estética. */
.uc-google{
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; min-height: 44px; padding: 0 18px; margin: 0 0 14px;
border: 1px solid #dadce0; border-radius: 999px;
background: #fff; color: #3c4043;
font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700;
text-decoration: none;
transition: background .15s, box-shadow .15s;
}
.uc-google:hover{ background: #f8f9fa; box-shadow: 0 1px 3px rgba(60,64,67,.2); color: #3c4043; }
.uc-google-ico{ display: inline-flex; padding: 0 !important; }
.uc-google-ico svg{ width: 18px; height: 18px; display: block; }
.uc-o{ position: relative; text-align: center; margin: 0 0 16px; }
.uc-o::before{ content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e4e4e7; }
.content .uc-o span, .uc-o span{
position: relative; padding: 0 12px !important; background: #fff;
color: #a1a1aa; font-size: 12px !important;
}
/* ── Formulario ──────────────────────────────────────────────────────────── */
.content p.uc-pista, .uc-pista{
margin: 5px 0 0 !important; padding: 0 !important;
font-size: 11.5px !important; line-height: 1.5; color: #8a8a93;
}
.uc-check{
display: flex; align-items: flex-start; gap: 9px;
margin: 0 0 11px; cursor: pointer;
}
.uc-check input{ margin: 2px 0 0; flex-shrink: 0; }
.content .uc-check span, .uc-check span{
padding: 0 !important; font-size: 12.5px !important; line-height: 1.5; color: #52525b;
}
/* `.ctc-submit` estaba escrito solo para `input[type=submit]` dentro de
`fieldset.largo`; aquí es un ``, así que necesita su propia regla. */
button.ctc-submit{
display: block; width: 100%; min-height: 44px; margin: 16px 0 0; padding: 0 20px;
border: none; border-radius: 999px;
background: var(--brand-red,#E11112); color: #fff;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
cursor: pointer; -webkit-appearance: none; appearance: none;
transition: background .15s, transform .15s;
}
button.ctc-submit:hover{ background: #c40e0f; transform: translateY(-1px); }
.content p.uc-pie, .uc-pie{
margin: 14px 0 0 !important; padding: 0 !important;
font-size: 12.5px !important; line-height: 1.5; color: #71717a; text-align: center;
}
/* ── El área ya con sesión ───────────────────────────────────────────────── */
.uc-shell{
display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px;
margin: 0 0 34px;
}
.uc-lateral{ min-width: 0; }
.uc-panel{ min-width: 0; }
.uc-yo{
display: flex; align-items: center; gap: 11px;
padding: 15px; margin: 0 0 12px;
border: 1px solid #e4e4e7; border-radius: 13px; background: #fff;
}
.uc-avatar{ width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.uc-avatar-ini{
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand-red,#E11112); color: #fff;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 18px; padding: 0 !important;
}
.uc-yo-txt{ min-width: 0; }
.uc-yo-txt strong{ display: block; font-size: 14px; color: #0f1115; }
.content .uc-yo-txt span, .uc-yo-txt span{
display: block; padding: 0 !important;
font-size: 11.5px !important; color: #8a8a93;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc-nav{ display: flex; flex-direction: column; gap: 2px; }
.uc-nav-item{
display: flex; align-items: center; gap: 10px;
padding: 10px 13px; border-radius: 10px;
color: #3f3f46; text-decoration: none; font-size: 13.5px;
background: none; border: none; width: 100%; text-align: left; cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
.uc-nav-item:hover{ background: #fafafa; color: #0f1115; }
.uc-nav-item.is-on{ background: #fff5f5; color: var(--brand-red,#E11112); font-weight: 700; }
.uc-nav-ico{ display: inline-flex; flex: 0 0 18px; padding: 0 !important; color: currentColor; }
.uc-nav-ico svg{ width: 18px; height: 18px; display: block; }
.uc-nav-salir{ margin-top: 6px; color: #8a8a93; }
.uc-tit{
margin: 0 0 5px;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700; font-size: 26px; line-height: 1.2; color: #0f1115;
}
.content p.uc-sub, .uc-sub{
margin: 0 0 22px !important; padding: 0 !important;
font-size: 13.5px !important; line-height: 1.55; color: #71717a;
}
.uc-sub-tit{
margin: 26px 0 12px;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #52525b;
}
.uc-cifras{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.uc-cifra{
display: block; padding: 16px 18px;
border: 1px solid #e4e4e7; border-radius: 13px; background: #fff;
text-decoration: none; transition: border-color .15s, transform .15s;
}
.uc-cifra:hover{ border-color: var(--brand-red,#E11112); transform: translateY(-2px); }
.uc-cifra-ico{ display: inline-flex; padding: 0 !important; color: var(--brand-red,#E11112); }
.uc-cifra-ico svg{ width: 20px; height: 20px; display: block; }
.uc-cifra b{ display: block; margin: 8px 0 1px; font-size: 27px; line-height: 1; color: #0f1115; }
.content .uc-cifra span:not(.uc-cifra-ico), .uc-cifra span:not(.uc-cifra-ico){
display: block; padding: 0 !important; font-size: 12px !important; color: #71717a;
}
.uc-vacio{
margin: 8px 0 0; padding: 26px 22px;
border: 1px dashed #d4d4d8; border-radius: 13px; background: #fafafa; text-align: center;
}
.content .uc-vacio p, .uc-vacio p{
margin: 0 0 7px !important; padding: 0 !important;
font-size: 13.5px !important; line-height: 1.6; color: #71717a;
}
.uc-btn{
display: inline-block; margin: 12px 0 0; padding: 10px 24px;
border-radius: 999px; background: var(--brand-red,#E11112); color: #fff;
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 13px; text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
}
.uc-btn:hover{ background: #c40e0f; color: #fff; }
/* ── Tarjetas de las listas ──────────────────────────────────────────────── */
.uc-lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.content .uc-lista li, .uc-lista li{ padding: 0 !important; font-size: inherit !important; }
.uc-card{
display: flex; align-items: center; gap: 10px;
border: 1px solid #e4e4e7; border-radius: 13px; background: #fff;
transition: border-color .15s, opacity .18s, transform .18s;
}
.uc-card:hover{ border-color: #a1a1aa; }
.uc-card.is-fuera{ opacity: 0; transform: translateX(-10px); }
.uc-card-link{
display: flex; align-items: center; gap: 13px;
flex: 1 1 auto; min-width: 0; padding: 12px 4px 12px 13px; text-decoration: none;
}
.uc-card-logo{
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; flex-shrink: 0; padding: 0 !important;
border-radius: 10px; background: #f4f4f5; overflow: hidden;
}
.uc-card-logo img{ width: 100%; height: 100%; object-fit: cover; }
.uc-card-ini{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 18px !important; color: #a1a1aa; padding: 0 !important;
}
.uc-card-txt{ min-width: 0; padding: 0 !important; }
.uc-card-txt strong{ display: block; font-size: 14.5px; color: #0f1115; }
.content .uc-card-donde, .uc-card-donde{
display: block; padding: 2px 0 0 !important;
font-size: 12px !important; color: #71717a;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.content .uc-card-veces, .uc-card-veces{
display: inline-block; margin: 5px 0 0; padding: 2px 9px !important;
border-radius: 999px; background: #fff5f5; color: var(--brand-red,#E11112);
font-size: 11px !important; line-height: 1.5;
}
.uc-card-quitar{
flex: 0 0 auto; width: 40px; height: 40px; margin-right: 6px;
border: none; border-radius: 50%; background: none;
color: #a1a1aa; font-size: 22px; line-height: 1; cursor: pointer;
}
.uc-card-quitar:hover{ background: #fff5f5; color: var(--brand-red,#E11112); }
.content p.uc-nota, .uc-nota{
margin: 26px 0 0 !important; padding: 12px 14px !important;
border: 1px solid #f0f0f2; border-radius: 10px; background: #fafafa;
font-size: 12px !important; line-height: 1.6; color: #71717a;
}
@media (max-width: 820px){
.uc-shell{ grid-template-columns: 1fr; gap: 18px; }
/* ⚠ REJILLA, no `flex-wrap`. Con flex cada pestaña medía lo que medía su
texto y el salto de línea caía donde cabía: en un móvil salían tres
arriba, una en medio y dos abajo, y en otro de otro ancho, distinto.
Con dos columnas iguales son SIEMPRE tres filas de dos, en cualquier
ancho y en los tres idiomas.
⚠ `minmax(0, 1fr)` y no `1fr`: una columna de rejilla no baja de lo que
mide su contenido, y «Datenschutzeinstellungen» (una sola palabra) se
llevaría por delante el ancho de la página. */
.uc-nav{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.uc-nav-item{
width: auto;
border: 1px solid #e4e4e7;
min-width: 0;
overflow-wrap: anywhere;
}
/* Se pinta apagada, pero ocupa su hueco como una más: es la sexta y cierra
la tercera fila. Sin esto volvía a quedar suelta debajo. */
.uc-nav-salir{ margin-top: 0; }
.uc-tit{ font-size: 22px; }
}
/* ── Los dos botones en la ficha del establecimiento ─────────────────────── */
/* Gotcha #1: sin esto, la regla legacy `.content span` les mete 12px de relleno
inferior y quedan 13px más altos que el botón «Compartir» de al lado.
⚠ `.bar-hero-cta-txt` (el texto de «Reservar mesa» / «Llamar ahora») cayó en
la MISMA trampa en cuanto se metió dentro de un : la caja del texto
quedaba de 26px —14 de letra y 12 de relleno abajo—, así que las palabras se
pintaban en la mitad de arriba de la píldora y con letra de 14px en vez de
los 12 que pide el botón. Se veía el texto subido y apretado.
Cualquier nuevo que se meta dentro de un botón va aquí. */
.content .uc-fav-txt, .content .uc-visitado-txt, .content .bar-hero-cta-txt,
.uc-fav-txt, .uc-visitado-txt, .bar-hero-cta-txt{
padding: 0 !important;
font-size: inherit !important;
line-height: inherit !important;
}
.bar-share-btn.uc-fav.is-on,
.bar-share-btn.uc-visitado.is-on{
background: var(--brand-red,#E11112); border-color: var(--brand-red,#E11112); color: #fff;
}
.bar-share-btn.uc-fav.is-on svg{ fill: currentColor; }
.bar-share-btn:disabled{ opacity: .55; cursor: default; }
/* ══ PUBLICIDAD ═══════════════════════════════════════════════════════════
Los huecos de banner. Tres cosas importan aquí, y las tres son para que un
anuncio no descoloque la página:
1. La ALTURA ESTÁ RESERVADA antes de que la imagen llegue. El `` de móvil: con ellos el navegador ya reserva el sitio, y lo
reserva **para la imagen que de verdad va a servir**. Imponerla desde el CSS
parece lo mismo y no lo es: cuando un anunciante manda solo la de ordenador
(928×116, 8:1) y el CSS le metía la proporción de móvil (3,19:1),
`object-fit: cover` le cortaba los dos lados — se perdían el logotipo y el
teléfono, que es justo lo que ha pagado por enseñar. Así se ve entera
siempre: más pequeña en el teléfono si no mandan la versión de móvil, pero
completa. Medido: 8,00 contra 3,19 de proporción en un S23. */
/* Separador entre secciones de la portada: un poco más de aire arriba y abajo,
que es lo que le da el papel de separador y no el de «otro bloque más». */
.eb-banner-separador{ margin: 26px auto 26px; }
/* Dentro de la lista de resultados. La lista es flexible en columna con 16px de
separación, así que la banda entra como una fila más sin tocar la rejilla. */
.content ul.bares li.rc-anuncio,
ul.bares li.rc-anuncio{
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
height: auto !important;
line-height: normal !important;
}
.eb-banner-en-lista{ margin-bottom: 0; }
@media (max-width: 760px){
/* En el móvil no hay columna derecha: el lateral pasa debajo. Si el
anunciante ha mandado la versión de móvil se sirve esa (344×287 y
344×108); si no, la de ordenador reducida — entera, sin recortar. */
.eb-banner-lateral{ max-width: 344px; }
.eb-banner-banda{ max-width: 344px; }
.eb-banner-separador{ margin: 18px auto; }
}
/* ══ PÁGINAS DE CONTENIDO ══════════════════════════════════════════════════
Los bloques que se escriben en el panel → Páginas y pinta `empresa.php`
(«Quiénes somos»). Antes salían con marcado de 2012 —un y un
sueltos— mientras el resto del sitio ya usaba tarjetas: era el gotcha #3,
una ruta que se quedó atrás. Se usan los mismos tokens que la página «Qué
es» (--qe-*) para que las dos se lean como el mismo sitio.
⚠ Los `!important` y la especificidad con `.content` no son manía: la regla
`.content ul li,.content p,.content span:not(...)` de más arriba en esta
misma hoja mete `padding-bottom:12px` y `font-size:14px` a cualquier párrafo
nuevo (gotcha #1). Sin blindaje, los textos salen con un hueco fantasma
debajo de cada línea. */
.pag-wrap{ display: block; max-width: 760px; padding: 4px 0 30px; }
.pag-head{ margin: 0 0 6px; padding: 0 0 16px; border-bottom: 1px solid var(--qe-border); }
.content h1.pag-title{
margin: 0 !important; padding: 0 !important;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700; font-size: 30px; line-height: 1.2;
letter-spacing: -0.01em; color: var(--qe-text);
}
.pag-bloque{ display: block; margin: 26px 0 0; }
.content h2.pag-bloque-tit{
margin: 0 0 10px !important; padding: 0 !important;
font-family: Georgia, 'Times New Roman', serif;
font-weight: 700; font-size: 21px; line-height: 1.3;
color: var(--qe-text);
/* Un filete rojo corto delante: es el mismo recurso que separa secciones en
el resto del sitio, y aquí distingue un bloque del siguiente sin meter
una caja por cada uno. */
position: relative; padding-left: 14px !important;
}
.content h2.pag-bloque-tit:before{
content: ''; position: absolute; left: 0; top: 5px; bottom: 5px;
width: 3px; border-radius: 2px; background: #E11112;
}
.pag-bloque-txt{ display: block; }
.content .pag-bloque-txt p{
margin: 0 0 13px !important; padding: 0 !important;
font-size: 15px !important; line-height: 1.68 !important; color: #3d3229 !important;
}
.content .pag-bloque-txt p:last-child{ margin-bottom: 0 !important; }
.content .pag-bloque-txt strong{ color: var(--qe-text); font-weight: 700; }
.content .pag-bloque-txt ul, .content .pag-bloque-txt ol{
margin: 0 0 13px !important; padding-left: 20px !important;
}
.content .pag-bloque-txt ul li, .content .pag-bloque-txt ol li{
margin: 0 0 5px !important; padding: 0 !important;
font-size: 15px !important; line-height: 1.6 !important; color: #3d3229 !important;
background: none !important; list-style: inherit;
}
.content .pag-bloque-txt a{ color: #E11112; text-decoration: underline; }
.content .pag-bloque-txt a:hover{ text-decoration: none; }
/* La imagen del bloque: proporción respetada y sitio reservado por width/height,
así que la página no salta al cargarla. Antes se «centraba» con un margen
superior negativo y una foto alta se recortaba por arriba. */
.pag-img{ display: block; margin: 0 0 14px; }
.pag-img img{
display: block; max-width: 100%; height: auto;
border-radius: 12px; border: 1px solid var(--qe-border);
}
.pag-vacio{
margin: 22px 0 0; padding: 26px 22px; text-align: center;
border: 1px dashed var(--qe-border); border-radius: 14px; background: #fbf9f6;
}
.content .pag-vacio p{
margin: 0 !important; padding: 0 !important;
font-size: 14.5px !important; line-height: 1.6 !important; color: var(--qe-muted) !important;
}
.content .pag-vacio p.pag-vacio-adm{
margin-top: 8px !important; font-size: 13px !important; color: #8a7a68 !important;
}
@media (max-width: 640px){
.content h1.pag-title{ font-size: 25px; }
.content h2.pag-bloque-tit{ font-size: 19px; }
.pag-bloque{ margin-top: 22px; }
.content .pag-bloque-txt p, .content .pag-bloque-txt ul li{ font-size: 14.5px !important; }
}
/* ── El corazón de «guardar este sitio» en las tarjetas de listado ─────────
Guardar un local solo se podía hacer entrando en su ficha. Quien recorre
treinta resultados no entra y vuelve treinta veces: o lo guarda ahí mismo o
no lo guarda.
Va a la derecha de la fila de acciones, separado de «Llamar» y «Reservar»:
esos dos son del negocio, el corazón es del visitante. Silueta cuando no
está guardado, relleno cuando sí — el estado se ve sin leer nada. */
.rc-card-actions .rc-fav{ margin-left: auto; }
.rc-fav{
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0;
border: 1px solid #e6e0d6; border-radius: 999px;
background: #fff; color: #9a9186; cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rc-fav svg{ width: 19px; height: 19px; fill: none; }
.rc-fav:hover{ color: #E11112; border-color: #f0c4c4; background: #fff7f7; }
.rc-fav:focus-visible{ outline: 2px solid #E11112; outline-offset: 2px; }
/* Guardado: relleno. El color de marca es el mismo que el del resto del sitio,
no un rojo distinto solo para esto. */
.rc-fav.is-on{ color: #E11112; border-color: #f3bcbc; background: #fff5f5; }
.rc-fav.is-on svg{ fill: currentColor; }
/* Un golpe corto al pulsar: sin esto no se sabe si el clic ha entrado, y la
respuesta del servidor tarda lo que tarde. */
@keyframes ucLate{ 0%{transform:scale(1)} 40%{transform:scale(1.28)} 100%{transform:scale(1)} }
.rc-fav.uc-late svg{ animation: ucLate .28s ease; }
@media (prefers-reduced-motion: reduce){ .rc-fav.uc-late svg{ animation: none; } }
/* En el teléfono, objetivo táctil completo. */
@media (max-width: 760px){ .rc-fav{ width: 44px; height: 44px; } }
/* ═══════════════════════════════════════════════════════════════════════════
LISTAS, COMPARTIR, MAPA Y BÚSQUEDAS GUARDADAS
═══════════════════════════════════════════════════════════════════════════
Todo lo de aquí abajo se apoya en piezas que ya existían: la pestaña es la
misma `.uc-tab` de Entrar/Crear cuenta, el botón rojo el mismo `.uc-btn`, y
la altura de los controles los 38px que ya usan los dos buscadores. No hay
ni una familia nueva: es la regla de sincronía visual del proyecto.
⚠ Gotcha #1: cualquier
nuevo dentro de `.content` hereda
`padding-bottom:12px` de la regla legacy de 2009. Por eso casi todos los
`span` de aquí llevan `padding:0 !important` y su `font-size` con
`!important`; sin eso se ven descolgados y 12px más altos de la cuenta.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Pestañas de listas ──────────────────────────────────────────────────── */
/* Las de Entrar/Crear cuenta son dos y se reparten el ancho (`flex:1 1 0`).
Aquí son «Todos» más una por lista, así que cada una ocupa lo suyo y la
fila se desplaza si no caben — repartir el ancho entre siete listas dejaría
los nombres cortados. */
.uc-tabs-listas{
gap: 2px; overflow-x: auto; overflow-y: hidden;
flex-wrap: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.uc-tabs-listas .uc-tab{
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
padding: 10px 13px; white-space: nowrap;
}
.content .uc-tabs-listas .uc-tab span, .uc-tabs-listas .uc-tab span{
display: inline-block; min-width: 18px; padding: 1px 6px !important;
border-radius: 999px; background: #f4f4f5; color: #63636b;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px !important; line-height: 1.5; text-transform: none; letter-spacing: 0;
}
/* El rosa es el MISMO de `.uc-nuevo-carta` y no otro parecido: con `#fff0f0`
el rojo de marca encima daba 4,42 y la WCAG pide 4,5. Medido, no estimado. */
.uc-tabs-listas .uc-tab.is-on span{ background: #fff5f5; color: var(--brand-red,#E11112); }
/* ⚠ `#main button` no existe aquí, pero `input`/`button` del front sí traen
estilos legacy: la pestaña «Crear lista» es un y hay que dejarlo
plano a mano o sale con el fondo y el borde del navegador. */
.uc-tab-nueva{
background: none !important; border: none !important;
border-bottom: 2px solid transparent !important;
color: #71717a; cursor: pointer;
height: auto !important; box-shadow: none !important;
}
.uc-tab-nueva:hover{ color: var(--brand-red,#E11112); }
/* ── La barra de encima de la lista ──────────────────────────────────────── */
.uc-barra{
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
.content p.uc-barra .uc-sub, .uc-barra .uc-sub{ margin: 0 !important; }
.uc-barra-acciones{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc-orden{
display: inline-flex; align-items: center; gap: 7px;
font-size: 12px; color: #71717a;
}
.uc-orden select{
height: 38px !important; min-height: 38px !important;
padding: 0 30px 0 13px !important; margin: 0 !important;
border-radius: 999px; border: 1px solid #e4e4e7; background: #fff
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E")
no-repeat right 12px center;
-webkit-appearance: none; appearance: none;
font-size: 13px !important; color: #0f1115; cursor: pointer; box-sizing: border-box;
}
/* El botón secundario: misma píldora que `.uc-btn`, en contorno. */
.uc-btn-sec{
display: inline-flex; align-items: center; gap: 7px;
height: 38px; padding: 0 16px; margin: 0;
border: 1px solid #e4e4e7; border-radius: 999px; background: #fff;
color: #3f3f46; font-family: Arial, Helvetica, sans-serif;
font-size: 13px; line-height: 1; cursor: pointer; box-sizing: border-box;
transition: border-color .15s, background .15s, color .15s;
}
.uc-btn-sec:hover{ border-color: #a1a1aa; color: #0f1115; }
.uc-btn-sec svg{ width: 15px; height: 15px; flex-shrink: 0; }
.uc-btn-sec.is-on{
border-color: var(--brand-red,#E11112); background: #fff5f5; color: var(--brand-red,#E11112);
}
.uc-btn-sec:disabled{ opacity: .55; cursor: default; }
.uc-borrar-lista:hover{ border-color: #fbdcdc; background: #fff5f5; color: var(--brand-red,#E11112); }
/* ── El enlace para compartir ────────────────────────────────────────────── */
.uc-compartir-caja{
margin: 0 0 16px; padding: 14px 15px;
border: 1px solid #e4e4e7; border-radius: 13px; background: #fafafa;
}
.content .uc-compartir-caja p, .uc-compartir-caja p{
margin: 0 0 10px !important; padding: 0 !important;
font-size: 13px !important; line-height: 1.6; color: #52525b;
}
.uc-compartir-fila{ display: flex; gap: 8px; align-items: center; }
.uc-compartir-fila input{
flex: 1 1 auto; min-width: 0;
height: 38px !important; min-height: 38px !important;
padding: 0 13px !important; margin: 0 !important;
border: 1px solid #e4e4e7; border-radius: 999px; background: #fff;
font-size: 13px !important; color: #52525b; box-sizing: border-box;
}
.uc-compartir-fila .uc-btn{ margin: 0 !important; flex: 0 0 auto; padding: 0 20px; line-height: 38px; }
/* ── El mapa ─────────────────────────────────────────────────────────────── */
/* ⚠ Sin `display`: la caja se abre y se cierra con el atributo `hidden`, y
cualquier `display` escrito aquí se lo comería. */
.uc-mapa{
height: 340px; margin: 0 0 16px;
border: 1px solid #e4e4e7; border-radius: 13px; overflow: hidden; background: #f4f4f5;
}
.content p.uc-mapa-vacio, .uc-mapa-vacio{
margin: 0 !important; padding: 24px 16px !important;
font-size: 13px !important; color: #71717a; text-align: center;
}
/* ── Lo que ha cambiado desde que lo guardaste ───────────────────────────── */
.content .uc-card-avisos, .uc-card-avisos{
display: flex; gap: 5px; flex-wrap: wrap;
padding: 5px 0 0 !important; font-size: 0 !important;
}
.content .uc-nuevo, .uc-nuevo{
display: inline-block; padding: 2px 9px !important;
border-radius: 999px; font-size: 11px !important; line-height: 1.5;
}
.content .uc-nuevo-carta, .uc-nuevo-carta{ background: #fff5f5; color: var(--brand-red,#E11112); }
.content .uc-nuevo-evento, .uc-nuevo-evento{ background: #eef6ff; color: #1d4ed8; }
/* ── Mover de lista ──────────────────────────────────────────────────────── */
.uc-card-tools{ display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.uc-mover{
height: 34px !important; min-height: 34px !important; max-width: 148px;
padding: 0 26px 0 11px !important; margin: 0 !important;
border: 1px solid #e4e4e7; border-radius: 999px; background: #fff
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E")
no-repeat right 10px center;
-webkit-appearance: none; appearance: none;
font-size: 12px !important; color: #52525b; cursor: pointer; box-sizing: border-box;
text-overflow: ellipsis;
}
.uc-mover:disabled{ opacity: .5; }
/* Confirmación de que se ha movido: no hay recarga, así que sin esto no se
sabe si el desplegable ha hecho algo. */
.uc-card.uc-movido{ animation: ucMovido 1.1s ease; }
@keyframes ucMovido{
0%{ border-color: var(--brand-red,#E11112); background: #fff8f8; }
100%{ border-color: #e4e4e7; background: #fff; }
}
/* ── Búsquedas guardadas ─────────────────────────────────────────────────── */
.content p.uc-aviso-correo, .uc-aviso-correo{
margin: 0 0 16px !important; padding: 11px 14px !important;
border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb;
font-size: 12.5px !important; line-height: 1.6; color: #78350f;
}
.uc-busquedas{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.content .uc-busquedas li, .uc-busquedas li{ padding: 0 !important; font-size: inherit !important; }
.uc-busqueda{
display: flex; align-items: center; gap: 12px;
padding: 12px 8px 12px 15px;
border: 1px solid #e4e4e7; border-radius: 13px; background: #fff;
}
.uc-busqueda-txt{ flex: 1 1 auto; min-width: 0; }
.uc-busqueda-txt > a{ text-decoration: none; }
.uc-busqueda-txt strong{ display: block; font-size: 14.5px; color: #0f1115; }
.content .uc-busqueda-filtros, .uc-busqueda-filtros{
display: block; padding: 2px 0 0 !important;
font-size: 12px !important; color: #8a8a93; line-height: 1.5;
}
.content .uc-busqueda-nuevo, .uc-busqueda-nuevo{
display: inline-block; margin: 6px 0 0; padding: 2px 9px !important;
border-radius: 999px; background: #fff5f5; color: var(--brand-red,#E11112);
font-size: 11px !important; line-height: 1.5; text-decoration: none;
}
.content .uc-busqueda-nada, .uc-busqueda-nada{
display: inline-block; padding: 6px 0 0 !important;
font-size: 11.5px !important; color: #a1a1aa;
}
.uc-busqueda-acciones{ display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* El interruptor de avisos. Es una casilla de verdad debajo — así funciona
con el teclado y la lee un lector de pantalla sin tener que fingir nada. */
.uc-switch{
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 4px; cursor: pointer;
}
.uc-switch input{
-webkit-appearance: none; appearance: none;
width: 38px; height: 22px; margin: 0 !important; padding: 0 !important;
flex-shrink: 0; border: none; border-radius: 999px; background: #d4d4d8;
position: relative; cursor: pointer; transition: background .18s;
}
.uc-switch input::after{
content: ''; position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%; background: #fff;
transition: transform .18s;
}
.uc-switch input:checked{ background: var(--brand-red,#E11112); }
.uc-switch input:checked::after{ transform: translateX(16px); }
.uc-switch input:focus-visible{ outline: 2px solid var(--brand-red,#E11112); outline-offset: 2px; }
.content .uc-switch span, .uc-switch span{
padding: 0 !important; font-size: 12px !important; color: #71717a;
}
@media (max-width: 640px){
.uc-barra{ align-items: stretch; }
.uc-barra-acciones{ width: 100%; }
.uc-orden, .uc-orden select, .uc-btn-sec{ flex: 1 1 auto; }
.uc-btn-sec{ justify-content: center; min-height: 44px; height: 44px; }
.uc-orden select{ height: 44px !important; min-height: 44px !important; }
.uc-compartir-fila{ flex-direction: column; align-items: stretch; }
.uc-compartir-fila input{ height: 44px !important; min-height: 44px !important; }
.uc-compartir-fila .uc-btn{ line-height: 44px; text-align: center; }
.uc-mapa{ height: 280px; }
/* La tarjeta pasa a dos filas: con el desplegable al lado, el nombre del
sitio se quedaba en 90px y no se leía ninguno. */
.uc-card{ flex-wrap: wrap; }
.uc-card-link{ flex: 1 1 100%; padding-right: 13px; }
.uc-card-tools{
flex: 1 1 100%; justify-content: space-between;
padding: 0 8px 10px 13px; margin-top: -4px;
}
.uc-mover{ flex: 1 1 auto; max-width: none; height: 40px !important; min-height: 40px !important; }
.uc-switch span{ display: none; } /* movil-ok: MEDIDO Y PENDIENTE DE SU DECISION (2026-09-03): deja la casilla de «Avisarme» SIN rotulo, y el title de la etiqueta no se ve con el dedo */
.uc-busqueda{ padding: 12px 6px 12px 13px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
LISTA COMPARTIDA · /es|en|de/lista/{token}.html
═══════════════════════════════════════════════════════════════════════════
La abre gente que no tiene cuenta y casi siempre desde el móvil, con el
enlace recibido por WhatsApp. Así que: sin barra lateral, medida de lectura
corta y las dos acciones que se buscan de verdad —llamar y ver la carta—
dentro de cada línea.
═══════════════════════════════════════════════════════════════════════════ */
.lc-pagina{ max-width: 760px; margin: 0 auto; }
.lc-cab{ padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid #e4e4e7; }
.content .lc-kicker, .lc-kicker{
display: inline-block; padding: 3px 11px !important;
border-radius: 999px; background: #fff5f5; color: var(--brand-red,#E11112);
font-size: 11px !important; line-height: 1.5; text-transform: uppercase; letter-spacing: .5px;
}
.lc-tit{
margin: 11px 0 0; padding: 0; border: none; background: none;
font-family: Georgia, 'Times New Roman', serif;
font-size: 30px; line-height: 1.2; color: #0f1115;
}
.content p.lc-de, .lc-de{ margin: 8px 0 0 !important; padding: 0 !important; font-size: 14px !important; color: #52525b; }
.content p.lc-cuantos, .lc-cuantos{ margin: 3px 0 0 !important; padding: 0 !important; font-size: 12.5px !important; color: #8a8a93; }
.content p.lc-vacio, .lc-vacio{ padding: 30px 0 !important; font-size: 14px !important; color: #71717a; text-align: center; }
.lc-lista{ list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.content .lc-lista li, .lc-lista li{ padding: 0 !important; font-size: inherit !important; }
.lc-item{
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 11px 13px;
border: 1px solid #e4e4e7; border-radius: 13px; background: #fff;
}
.lc-item-link{ display: flex; align-items: center; gap: 13px; flex: 1 1 260px; min-width: 0; text-decoration: none; }
.lc-logo{
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; flex-shrink: 0; padding: 0 !important;
border-radius: 10px; background: #f4f4f5; overflow: hidden;
}
.lc-logo img{ width: 100%; height: 100%; object-fit: cover; }
.content .lc-ini, .lc-ini{
font-family: 'HelveticaCondensedBoldRegular', Arial, sans-serif;
font-size: 18px !important; color: #a1a1aa; padding: 0 !important;
}
.lc-txt{ min-width: 0; padding: 0 !important; }
.lc-txt strong{ display: block; font-size: 14.5px; color: #0f1115; }
.content .lc-donde, .lc-donde{
display: block; padding: 2px 0 0 !important; font-size: 12px !important; color: #71717a;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.content .lc-nuevo, .lc-nuevo{
display: inline-block; margin: 5px 0 0; padding: 2px 9px !important;
border-radius: 999px; background: #eef6ff; color: #1d4ed8;
font-size: 11px !important; line-height: 1.5;
}
.lc-acciones{ display: flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 0 !important; }
.lc-btn{
display: inline-flex; align-items: center; justify-content: center;
height: 38px; padding: 0 17px;
border-radius: 999px; background: var(--brand-red,#E11112); color: #fff;
font-size: 13px; line-height: 1; text-decoration: none; box-sizing: border-box;
}
.lc-btn:hover{ background: #c40e0f; color: #fff; }
.lc-btn-sec{ background: #fff; border: 1px solid #e4e4e7; color: #3f3f46; }
.lc-btn-sec:hover{ background: #fafafa; border-color: #a1a1aa; color: #0f1115; }
.lc-mapa{ height: 340px; margin: 0 0 22px; border: 1px solid #e4e4e7; border-radius: 13px; overflow: hidden; }
.lc-pie{ padding: 18px 0 0; border-top: 1px solid #e4e4e7; text-align: center; }
.content .lc-pie p, .lc-pie p{ margin: 0 0 11px !important; padding: 0 !important; font-size: 13.5px !important; color: #71717a; }
@media (max-width: 640px){
.lc-tit{ font-size: 24px; }
.lc-item-link{ flex: 1 1 100%; }
.lc-acciones{ width: 100%; }
.lc-btn{ flex: 1 1 auto; height: 44px; }
.lc-mapa{ height: 280px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
DIÁLOGOS DEL SITIO · style/js/dialogo.js
═══════════════════════════════════════════════════════════════════════════
Sustituyen a `confirm()`, `alert()` y `prompt()`. Aquellos salen con la
dirección del servidor de cabecera —«194.163.172.46 dice»— y se leen como un
aviso del navegador, no como el sitio. El usuario lo pidió expresamente y ya
estaba resuelto en el panel; esto es lo mismo con la ropa del front.
═══════════════════════════════════════════════════════════════════════════ */
.ebdlg{
position: fixed; inset: 0; z-index: 9999;
display: none; align-items: center; justify-content: center;
padding: 20px; background: rgba(24,16,12,.55);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ebdlg.is-abierto{ display: flex; animation: ebdlgFondo .16s ease; }
@keyframes ebdlgFondo{ from{ opacity: 0 } to{ opacity: 1 } }
/* Con el diálogo abierto, el fondo no se mueve: en el móvil, si se desplaza,
parece que el diálogo se va de la pantalla. */
html.ebdlg-abierto, html.ebdlg-abierto body{ overflow: hidden; }
.ebdlg-caja{
width: 100%; max-width: 430px;
/* Acotado y con desplazamiento propio: un diálogo más alto que la pantalla
deja los botones fuera, y son justo lo que hay que pulsar. */
max-height: 88vh; overflow-y: auto;
padding: 24px; border-radius: 16px; background: #fff;
box-shadow: 0 18px 50px rgba(24,16,12,.28);
}
/* ⚠ La animación va en `.is-abierto`, NO en la clase base. Declarada en la
base se dispara al crear el elemento —que nace oculto— y dejaba pegado el
`translateY(10px)` del fotograma inicial: la caja quedaba diez píxeles más
abajo de su sitio para siempre. */
.ebdlg.is-abierto .ebdlg-caja{ animation: ebdlgEntra .18s ease; }
@keyframes ebdlgEntra{ from{ opacity: 0; transform: translateY(10px) } to{ opacity: 1; transform: none } }
.content h2.ebdlg-tit, .ebdlg-tit{
margin: 0 0 8px !important; padding: 0 !important; border: none; background: none;
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px !important; line-height: 1.3; color: #0f1115;
}
.content p.ebdlg-txt, .ebdlg-txt{
margin: 0 0 16px !important; padding: 0 !important;
font-size: 14px !important; line-height: 1.6; color: #52525b;
}
.ebdlg-campo{ display: block; margin: 0 0 18px; }
.content .ebdlg-etq, .ebdlg-etq{
display: block; padding: 0 0 6px !important;
font-size: 12px !important; font-weight: 700; color: #52525b;
}
.ebdlg-input{
width: 100%; height: 46px !important; min-height: 46px !important;
padding: 0 14px !important; margin: 0 !important;
border: 1px solid #d4d4d8; border-radius: 10px; background: #fff;
font-size: 15px !important; color: #0f1115; box-sizing: border-box;
}
.ebdlg-input:focus{ border-color: var(--brand-red,#E11112); outline: none;
box-shadow: 0 0 0 3px rgba(225,17,18,.13); }
/* Un nombre vacío no cierra el diálogo: se señala el campo y se vuelve a pedir. */
.ebdlg-input.es-mal{ border-color: var(--brand-red,#E11112); animation: ebdlgMal .3s ease; }
@keyframes ebdlgMal{ 25%{ transform: translateX(-5px) } 75%{ transform: translateX(5px) } }
.ebdlg-btns{ display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.ebdlg-btns button{
height: 44px; padding: 0 20px; margin: 0;
border-radius: 999px; border: 1px solid transparent;
font-family: Arial, Helvetica, sans-serif;
font-size: 13.5px; font-weight: 700; line-height: 1; cursor: pointer;
box-sizing: border-box; transition: background .15s, border-color .15s, color .15s;
}
.ebdlg-no{ background: #fff; border-color: #e4e4e7 !important; color: #3f3f46; }
.ebdlg-no:hover{ border-color: #a1a1aa !important; color: #0f1115; }
.ebdlg-si{ background: var(--brand-red,#E11112); color: #fff; }
.ebdlg-si:hover{ background: #c40e0f; }
.ebdlg-si.es-peligro{ background: #b00d0e; }
.ebdlg-si.es-peligro:hover{ background: #920b0c; }
@media (max-width: 480px){
.ebdlg{ padding: 0; align-items: flex-end; }
/* Pegado abajo: es donde llega el pulgar. */
.ebdlg-caja{ max-width: none; border-radius: 18px 18px 0 0; padding: 20px 18px 22px; }
.ebdlg-btns{ flex-direction: column-reverse; }
.ebdlg-btns button{ width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
COMPARTIR UNA LISTA
═══════════════════════════════════════════════════════════════════════════
Tres caminos, porque una lista se pasa de tres maneras: por WhatsApp desde
la calle, copiando el enlace, o enseñando el código para que lo escanee el
de enfrente. El «Compartir» del propio móvil solo aparece si el aparato lo
tiene (`navigator.share`, que además pide HTTPS).
═══════════════════════════════════════════════════════════════════════════ */
.uc-comp-cab{ display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.uc-comp-ico{
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex-shrink: 0; padding: 0 !important;
border-radius: 50%; background: #fff5f5; color: var(--brand-red,#E11112);
}
.uc-comp-ico svg{ width: 18px; height: 18px; }
.uc-comp-cab strong{ display: block; font-size: 14.5px; color: #0f1115; }
.content .uc-comp-sub, .uc-comp-sub{
display: block; padding: 3px 0 0 !important;
font-size: 12.5px !important; line-height: 1.55; color: #71717a;
}
.uc-comp-acciones{ display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.uc-comp-wa, .uc-comp-btn{
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; padding: 0 16px; margin: 0;
border: 1px solid #e4e4e7; border-radius: 999px; background: #fff;
color: #3f3f46; font-family: Arial, Helvetica, sans-serif;
font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none;
cursor: pointer; box-sizing: border-box;
transition: border-color .15s, background .15s, color .15s;
}
.uc-comp-wa svg, .uc-comp-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }
.uc-comp-btn:hover{ border-color: #a1a1aa; color: #0f1115; }
/* El verde de WhatsApp de marca no llega a 4,5 con texto blanco: se usa el
oscuro que ya se midió para la carta digital (5,22). */
.uc-comp-wa{ background: #0e7a6d; border-color: #0e7a6d; color: #fff; }
.uc-comp-wa:hover{ background: #0b665b; border-color: #0b665b; color: #fff; }
.uc-comp-btn.es-hecho{ border-color: #0e7a6d; background: #f0faf8; color: #0b5f55; }
.content .uc-comp-btn span, .uc-comp-btn span{ padding: 0 !important; font-size: 13px !important; }
.uc-comp-qr{
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 0 0 12px; padding: 14px;
border: 1px solid #e4e4e7; border-radius: 12px; background: #fff;
}
.uc-comp-qr img{ width: 148px; height: 148px; flex-shrink: 0; }
.content .uc-comp-qr p, .uc-comp-qr p{
margin: 0 !important; padding: 0 !important; flex: 1 1 170px;
font-size: 13px !important; line-height: 1.6; color: #52525b;
}
@media (max-width: 640px){
.uc-comp-acciones{ flex-direction: column; }
.uc-comp-wa, .uc-comp-btn{ width: 100%; }
.uc-comp-qr{ justify-content: center; }
}
/* ════════════════════════════════════════════════════════════════════════
* LA BARRA DE ABAJO SE QUEDA VISIBLE CON EL MENÚ ABIERTO (2026-08-08)
* ════════════════════════════════════════════════════════════════════════
* Pedido: «pulsas en el menú, ves lo que tiene, pero decides seguir donde
* estás, lo vuelves a pulsar y se pliega» — manteniendo también la X.
*
* El JS YA alternaba (`expanded ? closeMobileMenu() : openMobileMenu()`). Lo
* que fallaba era la geometría, y se ve midiendo:
*
* barra de abajo z-index 9998 · botón «Menú» en x 270→360
* panel lateral z-index 9999 · 280px pegado a la derecha
*
* Al abrirse, el panel pasa POR ENCIMA y tapa el botón entero. El segundo
* toque nunca le llegaba, así que la única salida era la X.
*
* Ahora la barra va por encima del panel y se queda siempre a la vista, que
* es como funcionan estos menús hoy: la barra fija manda, la hoja se abre por
* encima del contenido pero por debajo de ella, y el mismo botón que abre,
* cierra. La X se mantiene.
*
* ⚠ Solo móvil: la barra únicamente existe por debajo de 980px (`display:block`
* en responsive.css), así que estas reglas no pueden alcanzar al escritorio.
*/
@media screen and (max-width: 980px) {
.mobile-dock {
z-index: 10001;
}
/* El pie del panel («EspañaBares © 2026») quedaba detrás de la barra:
se le deja el hueco justo para que se pueda leer y desplazar. */
.mobile-menu {
padding-bottom: 96px !important;
}
/* Con el menú abierto, el botón se ve encendido: así se entiende que
volver a pulsarlo es lo que lo cierra. Reutiliza el mismo rojo de marca
que el resto de la barra, no un color nuevo. */
.mobile-dock-toggle[aria-expanded="true"] {
color: #c6281a;
}
.mobile-dock-toggle[aria-expanded="true"] svg {
color: #c6281a;
}
.mobile-dock-toggle[aria-expanded="true"]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: #c6281a;
}
}
/* ── Punto de aterrizaje de una búsqueda ──────────────────────────────────
Quien viene de buscar («Tapeo cerca de mí», el buscador de la portada, el
botón Buscar del propio formulario) cae aquí, sobre los resultados, en vez
de arriba del todo en el formulario que ya ha rellenado.
`scroll-margin-top` es imprescindible: la cabecera es `position: fixed`
(61px en escritorio, 45 en móvil) y sin margen el anclaje deja el título
«Establecimientos» justo debajo del borde, tapado por ella. 76px dejan la
cabecera fuera y además un poco de aire para que se vea que hay algo más
arriba y se puede subir.
El div en sí no ocupa: es solo la diana. */
.ancla-resultados{
display: block;
height: 0;
margin: 0;
padding: 0;
scroll-margin-top: 76px;
}
/* ══════════════════════════════════════════════════════════════════════
IMPORTAR LA CARTA · la pantalla del hostelero (.imp-*)
══════════════════════════════════════════════════════════════════════
⚠ TODOS los `` de aquí llevan su blindaje contra la regla legacy
`.content span:not(...)` — el gotcha nº 1 del proyecto. Sin él heredan
`padding-bottom:12px` y `font-size:14px`, y una píldora de alérgeno sale
con doce píxeles de color colgando por debajo. Ya ha mordido seis veces.
⚠ Y no se inventa ningún botón: los de acción son los `.ef-btn` que ya
usan los formularios del panel, y el de entrada el `.cpanel-btn-outline`
que ya existía. Un control nuevo con su propio estilo se lee como una
pieza pegada de otro sitio.
══════════════════════════════════════════════════════════════════════ */
.imp-intro{ margin: 0 0 18px; }
.imp-titulo{ margin: 0 0 6px !important; font-size: 19px; color: #2d2416; }
.imp-sub{ margin: 0 !important; font-size: 14px !important; color: #6b6156; line-height: 1.5; }
.imp-aviso-num, .content span.imp-aviso-num{
display: inline-block; padding: 2px 9px 3px !important; margin-left: 6px;
font-size: 11.5px !important; font-weight: 700; line-height: 1 !important;
border-radius: 999px; background: #fff3e0; color: #8a5a00;
}
/* ── Las puertas de entrada ─────────────────────────────────────────── */
.imp-puertas{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr)); gap: 10px; margin: 0 0 16px; }
.imp-puerta{
display: block; position: relative; cursor: pointer;
padding: 13px 14px 12px 38px; border: 1.5px solid #e4ddd4; border-radius: 12px;
background: #fffdfa; transition: border-color .15s ease, background .15s ease;
}
.imp-puerta:hover{ border-color: #d4a574; }
.imp-puerta.es-on{ border-color: #9e7126; background: #fdf8f0; }
.imp-puerta input{ position: absolute; left: 13px; top: 16px; margin: 0; }
.imp-puerta-tit, .content span.imp-puerta-tit{
display: block; font-size: 13.5px !important; font-weight: 700;
color: #2d2416; padding: 0 !important; margin: 0 0 3px !important; line-height: 1.25 !important;
}
.imp-puerta-des, .content span.imp-puerta-des{
display: block; font-size: 12px !important; color: #7a6f63;
padding: 0 !important; margin: 0 !important; line-height: 1.4 !important;
}
.imp-caja{ margin: 0 0 16px; }
.imp-caja > label{ display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #4a4034; }
.imp-textarea{
width: 100%; box-sizing: border-box; padding: 12px 14px;
border: 1.5px solid #e4ddd4; border-radius: 12px; background: #fff;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 13px; line-height: 1.55; resize: vertical;
}
.imp-textarea:focus{ border-color: #9e7126; outline: none; }
.imp-ayuda{ margin: 7px 0 0 !important; font-size: 12px !important; color: #7a6f63; line-height: 1.45; }
.imp-ayuda-aviso{ color: #8a2b2b; }
/* ── La rejilla de revisión ─────────────────────────────────────────── */
.imp-legal{ margin: 0 0 16px; }
.ef-alert-imp{
padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
background: #fdf8ec; border: 1px solid #e8d5a8; color: #5c4a20;
}
/* ⚠ «Adónde va esto» NO puede vestirse igual que el aviso de alérgenos, que
va justo encima: el legal es el que tiene consecuencias y si los dos gritan
en ámbar, ninguno de los dos se lee. Este va en gris, informativo. */
.imp-destino, .ef-alert.ef-alert-imp.imp-destino{
margin: 0 0 16px;
background: #f7f5f1;
border: 1px solid #e4ddd4;
color: #5c5348;
font-size: 12.5px;
line-height: 1.55;
}
.imp-tabla-wrap{ overflow-x: auto; border: 1px solid #e4ddd4; border-radius: 12px; background: #fff; }
.imp-tabla{ width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-tabla th{
text-align: left; padding: 10px 10px 9px; background: #faf7f2;
border-bottom: 1px solid #e4ddd4; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; color: #8a7d6d; white-space: nowrap;
}
.imp-th-sub, .content span.imp-th-sub{
font-size: 10px !important; font-weight: 400; text-transform: none;
letter-spacing: 0; color: #a99b88; padding: 0 !important; margin: 0 0 0 4px !important;
}
.imp-tabla td{ padding: 7px 10px; border-bottom: 1px solid #f2ece3; vertical-align: top; }
.imp-tabla tbody tr:last-child td{ border-bottom: none; }
.imp-fila.es-aviso{ background: #fffaf2; }
.imp-c-sec{ width: 17%; } .imp-c-pre{ width: 90px; } .imp-c-alg{ width: 34%; } .imp-c-qui{ width: 38px; }
.imp-in{
width: 100%; box-sizing: border-box; padding: 7px 9px;
border: 1px solid #e4ddd4; border-radius: 7px; background: #fff;
font-size: 13px; font-family: inherit; color: #2d2416;
}
.imp-in:focus{ border-color: #9e7126; outline: none; }
.imp-in-nom{ font-weight: 600; }
.imp-in-desc{ margin-top: 5px; font-size: 12px; color: #6b6156; }
.imp-in-pre{ text-align: right; }
.imp-marca, .content span.imp-marca{
display: inline-block; margin: 5px 0 0 !important; padding: 2px 8px 3px !important;
font-size: 10.5px !important; line-height: 1 !important; border-radius: 999px;
background: #fff3e0; color: #8a5a00;
}
/* Las píldoras de alérgeno: se pulsan para poner y quitar */
.imp-alg{ display: flex; flex-wrap: wrap; gap: 4px; }
.imp-pil{
padding: 3px 9px 4px; border: 1px solid #e4ddd4; border-radius: 999px;
background: #fff; color: #a99b88; font-size: 11px; line-height: 1;
font-family: inherit; cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.imp-pil:hover{ border-color: #d4a574; color: #7a6f63; }
.imp-pil.es-on{ background: #96690f; border-color: #96690f; color: #fff; font-weight: 600; }
.imp-quitar{
width: 28px; height: 28px; padding: 0; border: 1px solid #e4ddd4;
border-radius: 8px; background: #fff; color: #a08d7a;
font-size: 17px; line-height: 1; cursor: pointer;
}
.imp-quitar:hover{ border-color: #c0392b; color: #c0392b; background: #fdf3f2; }
.imp-acciones{ margin-top: 18px; }
/* ── Móvil: cada fila una tarjeta, como en el panel de administración ── */
@media screen and (max-width: 760px){
.imp-tabla, .imp-tabla tbody, .imp-tabla tr, .imp-tabla td{ display: block; width: auto; }
.imp-tabla thead{ display: none; } /* movil-ok: la cabecera de la tabla del importador de carta; en movil cada fila es una tarjeta con sus rotulos */
.imp-tabla-wrap{ overflow-x: visible; border: none; background: transparent; }
.imp-tabla tr{
border: 1px solid #e4ddd4; border-radius: 12px; background: #fff;
padding: 10px 12px; margin-bottom: 10px; position: relative;
}
.imp-tabla td{ border: none; padding: 6px 0; }
.imp-tabla td[data-label]:before{
content: attr(data-label); display: block; margin-bottom: 4px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: #a99b88;
}
.imp-tabla td[data-label=""]:before{ content: none; }
.imp-c-qui{ position: absolute; top: 8px; right: 8px; width: auto; padding: 0 !important; }
/* ⚠ El botón de quitar va FUERA del flujo, arriba a la derecha: la celda
de la sección tiene que dejarle el hueco a mano o se lo come. Al subir
el botón de 34 a 44 se puso encima del campo en las seis tarjetas.
⚠ Y el hueco NO se puede pedir con `.imp-c-sec`: esa clase solo la
llevan los de la cabecera, que en móvil está oculta — los
del cuerpo van sin clase. Se pide por el campo que hay dentro. */
.imp-tabla td:has(> .imp-in-sec){ padding-right: 60px; }
.imp-in-sec{ max-width: calc(100% - 56px); } /* red, por si no hay :has() */
.imp-in-pre{ text-align: left; }
/* ── Objetivo táctil ────────────────────────────────────────────────
⚠ Medido a 360 y a 320: con 30px había 108 controles por debajo de
los 44 que pide el panel — las 14 píldoras de cada plato y todos los
campos. Y aquí fallar el dedo no es una molestia: marcar o desmarcar
un alérgeno sin querer es lo que este proyecto no se puede permitir.
Las píldoras van en rejilla de tres, no envolviendo a lo que salga:
así la altura es la misma que con el envolver ragged, se leen en
columna y no bailan de sitio al cambiar de plato. */
.imp-alg{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.imp-pil{
min-height: 44px; padding: 6px 6px; width: 100%;
display: flex; align-items: center; justify-content: center;
text-align: center; line-height: 1.15;
}
.imp-in{ min-height: 44px; }
.imp-in-desc{ min-height: 44px; }
.imp-quitar{ width: 44px; height: 44px; font-size: 19px; }
.imp-puerta{ padding: 14px 14px 13px 40px; }
.imp-textarea{ font-size: 16px; } /* por debajo de 16 el móvil hace zoom al escribir */
}
/* ═══════════════════════════════════════════════════════════════════════════
PREGUNTAS FRECUENTES · .eb-faq (2026-09-01)
═══════════════════════════════════════════════════════════════════════════
Bloque de la ficha y de la carta digital. Reutiliza el lenguaje de
`.ficha-panel` —radio 18, borde #e4ddd4, filete de color arriba, sombra
larga— para que NO se lea como una pieza pegada de otro sitio: es la regla
de sincronia visual del proyecto.
⚠⚠ GOTCHA Nº 1. `style.css` tiene la regla legacy
`.content ul li, .content ol li, .content p, .content span:not(...)`
con `padding-bottom:12px` y `font-size:14px`, especificidad (0,17,1) y
SIN `!important`. Cualquier `` o `` nuevo dentro de `.content`
la hereda y sale con doce pixeles de aire fantasma debajo. Aqui la
respuesta es un `` justo por eso — pero se blinda igual el caso de
que alguien meta un `
` dentro el dia de mañana.
⚠ El `` NO lleva JavaScript. Es nativo, funciona sin guiones, es
accesible con teclado y Google acepta el contenido plegado para el
resultado enriquecido de `FAQPage`.
⚠ CONTRASTE MEDIDO sobre el fondo real, no elegido a ojo:
pregunta #2b211a sobre #ffffff → 13,3
respuesta #4a3f35 sobre #fbfaf8 → 8,2
filete/marcador dorado #96690f → el accesible, NO el de marca
(#b6862c da 2,76 con blanco encima y la WCAG pide 4,5).
═══════════════════════════════════════════════════════════════════════════ */
.eb-faq{
margin: 26px 0 10px;
background: linear-gradient(180deg, #ffffff 0%, #f7f5f2 100%);
border: 1px solid #e4ddd4;
border-radius: 18px;
box-shadow: 0 18px 34px rgba(35,24,16,0.08);
overflow: hidden;
position: relative;
}
/* El mismo filete superior que los paneles de la ficha, en dorado accesible. */
.eb-faq:before{
content: '';
position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: linear-gradient(90deg, #222222 0%, #96690f 54%, #dfc291 100%);
}
.eb-faq-tit,
.content .eb-faq-tit{
margin: 0 !important;
padding: 18px 22px 14px !important;
background: linear-gradient(180deg, #fafafa 0%, #ebebeb 48%, #e0e0e0 100%);
border-bottom: 1px solid #d6d0c8;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
color: #232323 !important;
font-size: 14px !important;
font-weight: 800;
letter-spacing: 0.55px;
text-transform: uppercase;
text-align: center;
line-height: 1.3 !important;
}
.eb-faq-lista{ padding: 6px 10px 10px; }
.eb-faq-item{
border-bottom: 1px solid #efe9e0;
background: transparent;
}
.eb-faq-item:last-child{ border-bottom: 0; }
/* ⚠ La pregunta es el mando: 44px de alto util para el dedo, que es el minimo
que exige este proyecto en movil. */
.eb-faq-p,
.content .eb-faq-p{
display: block;
list-style: none;
cursor: pointer;
padding: 15px 40px 15px 14px !important;
margin: 0 !important;
min-height: 44px;
position: relative;
color: #2b211a !important;
font-size: 15px !important;
font-weight: 700;
line-height: 1.45 !important;
border-radius: 10px;
transition: background-color .18s ease, color .18s ease;
}
.eb-faq-p::-webkit-details-marker{ display: none; }
.eb-faq-p::marker{ content: ''; }
.eb-faq-p:hover{ background: #faf6ee; color: #7a5409 !important; }
.eb-faq-p:focus-visible{ outline: 2px solid #96690f; outline-offset: 2px; }
/* El signo se DIBUJA, no es un glifo de texto: un caracter dentro de un mando
nunca se asienta en la linea base y se ve descolgado (ya paso con el
triangulo de «Desplegar todo» del panel). */
.eb-faq-p:after{
content: '';
position: absolute; right: 15px; top: 50%;
width: 9px; height: 9px; margin-top: -6px;
border-right: 2px solid #96690f;
border-bottom: 2px solid #96690f;
transform: rotate(45deg);
transition: transform .2s ease;
}
.eb-faq-item[open] > .eb-faq-p:after{ transform: rotate(-135deg); margin-top: -2px; }
.eb-faq-r,
.content .eb-faq-r{
padding: 0 14px 16px !important;
margin: 0 !important;
color: #4a3f35 !important;
font-size: 14.5px !important;
line-height: 1.62 !important;
max-width: 68ch;
}
/* Blindaje del gotcha nº 1 por si algun dia entra un o un dentro. */
.eb-faq-r p,
.content .eb-faq-r p,
.eb-faq-r span,
.content .eb-faq-r span{
padding: 0 !important;
margin: 0 0 8px !important;
font-size: inherit !important;
line-height: inherit !important;
}
/* ── Movil ─────────────────────────────────────────────────────────────── */
@media screen and (max-width: 640px){
.eb-faq{ margin: 20px 0 8px; border-radius: 14px; }
.eb-faq-tit, .content .eb-faq-tit{ padding: 16px 16px 13px !important; font-size: 13px !important; }
.eb-faq-lista{ padding: 4px 6px 8px; }
.eb-faq-p, .content .eb-faq-p{ padding: 14px 38px 14px 10px !important; font-size: 14.5px !important; }
.eb-faq-r, .content .eb-faq-r{ padding: 0 10px 14px !important; font-size: 14px !important; }
}
/* ── Carta digital: la misma pieza, con SU papel y SU serifa ────────────── */
/* La carta no carga `style.css` (es la pagina del QR y va con su propia hoja),
asi que este bloque vive tambien en `carta-digital.css`. Aqui solo queda la
nota para que nadie lo busque y crea que falta. */