/* Panel de socios (login → ficha propia / ficha de todos) — extiende las
   variables de ../css/estilo.css (que se carga antes que este fichero en
   cada página), sin nada de frontend/ ni admin-portal/.

   El sidebar de aquí abajo está calcado EN ESTRUCTURA del panel autenticado
   de lixai (frontend/css/panel.css + frontend/js/panel-nav.js: barra fija a
   la izquierda, cabecera arriba, colapsa a menú deslizante en móvil) para
   que quien ya conoce ese panel reconozca este de un vistazo — pero es CSS
   y JS propios (panel-shell.js), sin importar nada de frontend/. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --panel-topbar-h:56px;
  --panel-sidebar-w:240px;

  /* Paleta neutra del panel de gestión — DISTINTA a partir de aquí de
     ../css/estilo.css (la paleta cálida de la web pública de cada
     asociación). Motivo: este panel lo va a reusar cualquier asociación
     que entre, no solo La Gavia, así que su cuadro de mando interno no
     debe ir teñido de la identidad de marca de una asociación concreta
     (marrón/rosa/mostaza "trattoria" de La Gavia) — esa identidad se
     queda en la web pública (estilo.css), que cada asociación sí puede
     querer distinta. El panel usa los mismos NOMBRES de variable (para no
     tocar los ~20 HTML/JS que ya las consumen) pero con valores neutros +
     un único acento índigo para botones/activos/enlaces, estilo dashboard
     (Stripe/Linear), antes probado con el monocromo negro/crema exacto de
     lixai.es y con la paleta cálida de La Gavia calcada — si tampoco
     convence, el histórico de esas dos está en git. */
  --crema:#f4f5f7;
  --gris-claro:#eef0f3;
  --texto:#1f2328;
  --texto-suave:#6b7280;
  --marron:#1f2328;
  /* Azul marino: acento principal (botones, activos, foco) — con texto
     blanco encima da >10:1 de contraste, de sobra para AA. */
  --azul:#09378c;
  --azul-suave:#e7ebf3;
  /* Naranja: acento puntual (subrayados, detalles), NUNCA como fondo con
     texto blanco encima — #F58D07 con blanco da ~2.4:1, ilegible. */
  --mostaza:#F58D07;
  --mostaza-suave:#fef1e0;
  --rosa:#09378c;
  --rosa-oscuro:#072a68;
  --gris-oscuro:#111318;
  --borde:#e5e7eb;
  --sombra:0 10px 30px -12px rgba(17,24,39,.12);
  --sombra-hover:0 16px 40px -14px rgba(17,24,39,.18);
  --radio:16px;

  /* Acento decorativo (subrayado de pestaña activa): aquí sí vale el
     naranja tal cual, porque no lleva texto encima. El fondo del enlace
     activo del sidebar usa --azul directamente (ver más abajo), no este. */
  --morado:#F58D07;
  --morado-suave:#fef1e0;

  /* Nuevos, sin equivalente en estilo.css: éxito/error/aviso, antes
     escritos como hex sueltos por todo panel.css (ver más abajo). */
  --verde:#16a34a;
  --verde-suave:rgba(22,163,74,.08);
  --rojo:#e8410a;
  --rojo-suave:rgba(232,65,10,.08);
  --ambar:#854d0e;
  --ambar-suave:rgba(234,179,8,.1);
}

/* Mismo truco que frontend/css/panel.css: solo se aplica en páginas con
   #panel-header en el body (todas las de este panel), nunca en la web
   pública del micrositio, que no lleva ese div. */
body:has(#panel-header){
  font-family:'Plus Jakarta Sans','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13px;
  /* estilo.css deja el body en #fff (bien para la web pública); el panel
     necesita gris para que los bloques blancos ("etq-caja", "panel-caja",
     "lista-fila"...) se recorten de verdad en vez de fundirse. */
  background:var(--crema);
}

/* Aviso de "entrando como socio X" — fuera de #panel-header (altura fija,
   sticky) a propósito, para no tocar su layout: va en flujo normal justo
   encima, no hace falta que quede fija al hacer scroll. Mismo morado que
   el aviso equivalente del panel de lixai (frontend/css/panel.css) — mismo
   significado en toda la plataforma, se reconoce de un vistazo. */
.panel-impersonation-banner{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:6px 12px;background:#7c3aed;color:#fff;font-size:.78rem;text-align:center;
}
.panel-impersonation-banner button{
  border:none;border-radius:999px;padding:3px 12px;font-size:.72rem;font-weight:700;
  background:#fff;color:#7c3aed;cursor:pointer;
}

#panel-header{
  position:sticky;top:0;z-index:340;height:var(--panel-topbar-h);
  background:#fff;
  border-bottom:1px solid var(--borde);
}
.panel-header-inner{height:100%;display:flex;align-items:center;gap:12px;padding:0 18px;}
#panel-hamburger{
  display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--borde);
  background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;
}
#panel-hamburger span{display:block;width:16px;height:2px;background:var(--marron);border-radius:2px;}
.panel-brand-logo{width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.panel-brand-nombre{font-weight:700;font-size:.85rem;color:var(--marron);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Nombre del negocio + enlace a su catálogo público — mismo sitio y mismo
   patrón que #nav-merchant-name/#panel-view-store en el panel de lixai
   (frontend/js/panel-nav.js): el enlace nace oculto y solo se muestra si
   el negocio tiene tienda pública real (ver _initMerchantHeaderExtras en
   panel-shell.js). Sustituye al nombre de la asociación cuando quien ha
   entrado es un negocio, no la propia asociación. */
.panel-merchant-name{color:var(--texto-suave);font-size:.8rem;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.panel-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.panel-view-store{
  display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--borde);
  border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:600;color:var(--marron);
  text-decoration:none;white-space:nowrap;
}
.panel-view-store:hover{border-color:var(--marron);}
@media(max-width:640px){
  .panel-merchant-name{display:none;}
  .panel-view-store-label{display:none;}
}

/* Menú de "Cuenta" (Perfil / Cerrar sesión) — mismo sitio y misma idea que
   el desplegable de Cuenta en el panel de lixai (frontend/js/panel-nav.js). */
.panel-dropdown{position:relative;flex-shrink:0;}
.panel-cuenta-btn{
  background:none;border:1.5px solid var(--borde);border-radius:999px;
  padding:8px 16px;font-size:.8rem;font-weight:600;color:var(--marron);cursor:pointer;font-family:inherit;
}
.panel-cuenta-btn:hover{border-color:var(--rosa);color:var(--rosa-oscuro);}
.panel-dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--borde);
  border-radius:14px;box-shadow:var(--sombra);min-width:170px;padding:6px;z-index:400;
}
.panel-dropdown-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:.86rem;font-weight:600;color:var(--marron);}
.panel-dropdown-menu a:hover{background:var(--gris-claro);}
.panel-dropdown-menu hr{border:none;border-top:1px solid var(--borde);margin:4px 2px;}

#panel-sidebar{
  position:fixed;top:var(--panel-topbar-h);left:0;bottom:0;width:var(--panel-sidebar-w);
  background:#fff;border-right:1px solid var(--borde);z-index:330;overflow-y:auto;padding:12px 0;
  transition:transform .25s;
}
.panel-nav-link{
  display:flex;align-items:center;gap:10px;padding:10px 16px;margin:2px 10px;border-radius:10px;
  color:var(--texto-suave);font-weight:600;font-size:.86rem;text-decoration:none;
}
.panel-nav-link:hover{background:var(--gris-claro);color:var(--marron);}
/* Fondo azul marino, no el naranja de --morado (que es solo para
   detalles sin texto encima, ver el bloque de variables). */
.panel-nav-link.active{background:var(--azul);color:#fff;}
.panel-nav-icon{font-size:1rem;flex-shrink:0;width:18px;text-align:center;}
.panel-nav-label{flex:1;}
.panel-nav-badge{
  background:var(--rojo);color:#fff;font-size:.66rem;font-weight:700;border-radius:999px;
  padding:1px 7px;flex-shrink:0;
}
/* Contador neutro (cuántos hay), no una notificación (algo nuevo que ver) —
   a propósito sin color de alarma, para que Socios/Suspendidos no se lean
   como "tienes algo pendiente" igual que Solicitudes. */
.panel-nav-count{
  background:var(--gris-claro);color:var(--texto-suave);font-size:.7rem;font-weight:700;
  border-radius:999px;padding:1px 8px;flex-shrink:0;min-width:10px;text-align:center;
}
.panel-nav-link.active .panel-nav-count{background:rgba(255,255,255,.3);color:#fff;}
.d-none{display:none !important;}

.panel-sb-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:325;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.panel-sb-overlay.on{opacity:1;pointer-events:auto;}

.panel-main{padding:28px 0 60px;}
@media(min-width:769px){
  .panel-main{margin-left:var(--panel-sidebar-w);}
}
@media(max-width:768px){
  #panel-hamburger{display:flex;}
  #panel-sidebar{transform:translateX(-100%);box-shadow:4px 0 32px rgba(0,0,0,.2);}
  #panel-sidebar.open{transform:translateX(0);}
  .panel-main{margin-left:0;}
}

.panel-main .contenedor{max-width:640px;}
/* Pantallas con tabla densa (Catálogo y similares) necesitan mucho más
   ancho que una ficha o un listado de tarjetas — mismo criterio que el
   panel de lixai, que no limita el ancho de sus tablas a una columna de
   lectura. */
.panel-main .contenedor.ancho{max-width:1180px;}
.panel-main h1{text-align:left;font-size:1.4rem;margin-bottom:4px;}
.panel-subtitulo{color:var(--texto-suave);font-size:.9rem;margin-bottom:24px;}

.panel-volver{
  display:inline-flex;align-items:center;gap:6px;color:var(--texto-suave);
  font-size:.82rem;font-weight:600;margin-bottom:18px;
}
.panel-volver:hover{color:var(--rosa-oscuro);}

/* Login */
.panel-login-caja{
  max-width:400px;margin:60px auto;background:#fff;border:1px solid var(--borde);
  border-radius:var(--radio);box-shadow:var(--sombra);padding:32px 26px;
}
.panel-login-caja .marca-login{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;text-align:center;}
.panel-login-caja .marca-login img{width:52px;height:52px;border-radius:12px;}
.panel-login-caja h1{font-size:1.2rem;text-align:center;margin-bottom:2px;}
.panel-login-caja .panel-subtitulo{text-align:center;margin-bottom:22px;}

/* Guardar */
.panel-guardar-barra{
  position:sticky;bottom:0;background:#fff;border-top:1px solid var(--borde);
  padding:14px 0;margin-top:8px;display:flex;align-items:center;gap:14px;
}
.panel-guardar-ok{color:var(--verde);font-size:.85rem;font-weight:600;}
.panel-guardar-ok.oculto, .panel-error.oculto{display:none;}

/* Lista de miembros (vista de la asociación) */
.miembros-lista{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.miembro-fila{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--borde);
  border-radius:14px;padding:12px 16px;text-decoration:none;color:inherit;
  transition:box-shadow .15s, transform .15s;
}
.miembro-fila:hover{box-shadow:var(--sombra);transform:translateY(-1px);}
.miembro-fila-link{display:flex;align-items:center;gap:14px;flex:1;min-width:0;text-decoration:none;color:inherit;cursor:pointer;}
.socios-tabla-negocio{cursor:pointer;}
.socios-tabla-negocio:hover .miembro-nombre{text-decoration:underline;}
.miembro-avatar{
  width:44px;height:44px;border-radius:11px;object-fit:cover;background:var(--gris-claro);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--azul);font-weight:700;
}
.miembro-info{flex:1;min-width:0;}
.miembro-nombre{font-weight:700;color:var(--marron);font-size:.94rem;}
.miembro-meta{font-size:.76rem;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.03em;}
.miembro-flecha{color:var(--texto-suave);flex-shrink:0;}
.badge-suspendido{
  display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--rojo);background:var(--rojo-suave);padding:2px 8px;border-radius:999px;margin-left:8px;
}

/* Igual que .alta-aviso-error de ../css/estilo.css pero con los tokens del
   panel (rojo monocromo, no el rojo cálido de la web pública) — se
   redeclara aquí porque panel.css carga después y gana el empate de
   especificidad, sin tocar el fichero compartido con la parte pública. */
.alta-aviso-error{background:var(--rojo-suave);color:var(--rojo);border:1px solid rgba(232,65,10,.25);}
.alta-aviso-ok{background:var(--verde-suave);color:var(--verde);border:1px solid rgba(22,163,74,.25);}

/* Solo el div (bloque suelto sobre el fondo gris): las variantes <td>
   (dentro de catalogo-tabla/socios-tabla, que ya son blancas) se quedan
   sin tarjeta propia — un borde redondeado dentro de una celda de tabla
   quedaría roto. */
div.panel-vacio{background:#fff;border:1px solid var(--borde);border-radius:14px;}
.panel-vacio{color:var(--texto-suave);font-size:.9rem;text-align:center;padding:40px 20px;}

/* ../css/estilo.css pone la sombra de .boton en rgba fijo (color de la
   web pública, no de las variables) — se redeclara aquí con el tono del
   panel por el mismo motivo que .alta-aviso-error más abajo. */
.boton{box-shadow:0 10px 22px -8px rgba(9,55,140,.35);}
.boton:hover{box-shadow:0 14px 28px -8px rgba(9,55,140,.45);}

.miembro-editar-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.miembro-editar-cabecera h1{margin-bottom:0;flex:1;min-width:0;}

/* Detalle de solicitud (solo lectura) — foto + avatar + tabla, en vez del
   formulario con inputs deshabilitados que quedaba soso. */
.detalle-cover{
  width:100%;height:160px;border-radius:var(--radio);background:var(--gris-claro) center/cover no-repeat;
  border:1px solid var(--borde);margin-bottom:16px;
}
.detalle-cabecera{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.detalle-avatar,.detalle-avatar-inicial{width:52px;height:52px;border-radius:14px;flex-shrink:0;}
.detalle-avatar{object-fit:cover;background:var(--gris-claro);border:1px solid var(--borde);}
.detalle-avatar-inicial{background:var(--azul-suave);color:var(--azul);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;}
.detalle-nombre{font-weight:700;font-size:1.05rem;color:var(--marron);}
.detalle-subtitulo{font-size:.8rem;color:var(--texto-suave);}
.detalle-tabla{width:100%;border-collapse:collapse;font-size:.88rem;}
.detalle-tabla tr{border-bottom:1px solid var(--borde);}
.detalle-tabla tr:last-child{border-bottom:none;}
.detalle-tabla td{padding:11px 4px;vertical-align:top;}
.detalle-tabla td:first-child{color:var(--texto-suave);font-weight:600;width:120px;white-space:nowrap;}
.detalle-tabla td:last-child{color:var(--texto);word-break:break-word;}
.detalle-tabla a{color:var(--azul);text-decoration:underline;}

/* Soporte */
.badge-pill{
  display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 9px;border-radius:999px;
}
.badge-tipo-problema{background:var(--rojo-suave);color:var(--rojo);}
.badge-tipo-mejora{background:var(--azul-suave);color:var(--azul);}
.badge-tipo-idea{background:var(--ambar-suave);color:var(--ambar);}
.badge-tipo-otro{background:var(--gris-claro);color:var(--texto-suave);}
.badge-estado-abierto{background:var(--verde-suave);color:var(--verde);}
.badge-estado-en_proceso{background:var(--ambar-suave);color:var(--ambar);}
.badge-estado-cerrado{background:var(--gris-claro);color:var(--texto-suave);}

.ticket-fila{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--borde);
  border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;
  transition:box-shadow .15s, transform .15s;
}
.ticket-fila:hover{box-shadow:var(--sombra);transform:translateY(-1px);}
.ticket-info{flex:1;min-width:0;}
.ticket-asunto{font-weight:700;color:var(--marron);font-size:.94rem;margin-bottom:4px;}
.ticket-meta{font-size:.76rem;color:var(--texto-suave);display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.ticket-sin-leer{
  background:var(--rojo);color:#fff;font-size:.68rem;font-weight:700;border-radius:999px;
  padding:1px 8px;flex-shrink:0;
}

.hilo-mensajes{display:flex;flex-direction:column;gap:12px;margin:18px 0;}
.mensaje{max-width:82%;}
.mensaje-otro{align-self:flex-start;}
.mensaje-mio{align-self:flex-end;}
.mensaje-quien{font-size:.72rem;color:var(--texto-suave);margin-bottom:3px;}
.mensaje-mio .mensaje-quien{text-align:right;}
.mensaje-burbuja{
  padding:11px 14px;border-radius:14px;font-size:.9rem;white-space:pre-wrap;word-break:break-word;
  border:1px solid var(--borde);background:#fff;
}
.mensaje-mio .mensaje-burbuja{background:var(--rosa);color:#fff;border-color:transparent;}
.mensaje-adjuntos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.mensaje-adjuntos img{width:70px;height:70px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.5);}

/* Diálogos propios (panel-ui.js) — sustituyen confirm()/prompt()/alert(). */
.panel-ui-fondo{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .15s;
}
.panel-ui-fondo.abierto{opacity:1;pointer-events:auto;}
.panel-ui-caja{
  background:#fff;border-radius:var(--radio);box-shadow:var(--sombra-hover);
  max-width:420px;width:100%;padding:24px;
  max-height:calc(100vh - 40px);display:flex;flex-direction:column;
}
.panel-ui-titulo{font-size:1.1rem;color:var(--marron);margin-bottom:10px;flex-shrink:0;}
.panel-ui-cuerpo{font-size:.92rem;color:var(--texto);margin-bottom:20px;overflow-y:auto;flex:1 1 auto;min-height:0;}
.panel-ui-cuerpo p{margin:0;line-height:1.5;}
.panel-ui-cuerpo label{display:block;font-weight:700;font-size:.86rem;color:var(--marron);margin:10px 0 6px;}
.panel-ui-cuerpo input,
.panel-ui-cuerpo textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--borde);border-radius:12px;
  font-family:inherit;font-size:.92rem;color:var(--texto);
}
.panel-ui-cuerpo input:focus,
.panel-ui-cuerpo textarea:focus{outline:none;border-color:var(--azul);}
.panel-ui-aviso{color:var(--rojo);font-size:.8rem;margin-top:6px;}
.panel-ui-aviso.oculto{display:none;}
.panel-ui-acciones{display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;}
.panel-ui-acciones .boton{padding:11px 20px;font-size:.82rem;}
.boton-peligro{background:var(--rojo) !important;box-shadow:none !important;}
.boton-peligro:hover{background:#c23a0d !important;}

#panel-ui-avisos{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:520;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
@media(min-width:576px){
  #panel-ui-avisos{left:auto;right:16px;bottom:16px;max-width:min(24rem,calc(100vw - 2rem));}
}
.panel-ui-toast{
  pointer-events:auto;padding:12px 16px;border-radius:12px;border:1px solid var(--borde);
  border-left-width:3px;background:#fff;box-shadow:var(--sombra);font-size:.88rem;color:var(--texto);
  cursor:pointer;animation:panel-ui-toast-entra .18s ease-out;
}
.panel-ui-toast-ok{border-left-color:var(--verde);}
.panel-ui-toast-fallo{border-left-color:var(--rojo);}
.panel-ui-toast.saliendo{animation:panel-ui-toast-sale .16s ease-in forwards;}
@keyframes panel-ui-toast-entra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes panel-ui-toast-sale{to{opacity:0;transform:translateY(6px);}}
@media(prefers-reduced-motion: reduce){
  .panel-ui-toast, .panel-ui-toast.saliendo{animation:none;}
}

.panel-paginacion{display:flex;justify-content:center;gap:10px;margin-top:20px;}
.panel-paginacion button{
  background:#fff;border:1px solid var(--borde);border-radius:999px;padding:8px 16px;
  font-size:.82rem;font-weight:600;color:var(--marron);cursor:pointer;
}
.panel-paginacion button:disabled{opacity:.4;cursor:default;}

/* --- Servicios / Personal / Agenda --- */

/* Control segmentado (pista gris + píldora blanca activa), no el navy
   sólido de antes — con relleno oscuro y texto blanco quedaba más
   "botón de acción" que pestaña. display:inline-flex y overflow-x:auto
   porque en Fidelización son 5 pestañas y en móvil no caben en una fila. */
.panel-tabs{
  display:inline-flex;gap:2px;max-width:100%;overflow-x:auto;
  background:var(--gris-claro);border:1px solid var(--borde);border-radius:12px;padding:4px;margin-bottom:22px;
}
.panel-tabs a{
  padding:8px 16px;border-radius:9px;font-size:.85rem;font-weight:600;color:var(--texto-suave);
  white-space:nowrap;
}
.panel-tabs a.active{background:#fff;color:var(--marron);box-shadow:0 1px 3px rgba(17,24,39,.1);}
.panel-tabs a:hover:not(.active){color:var(--marron);}

.svc-img-wrap{width:84px;height:84px;border-radius:14px;overflow:hidden;background:var(--gris-claro);border:1px solid var(--borde);display:flex;align-items:center;justify-content:center;}
.svc-img-wrap img{width:100%;height:100%;object-fit:cover;}
.svc-img-placeholder{width:100%;height:100%;display:flex;}
.svc-img-placeholder svg{width:100%;height:100%;display:block;}

/* Bug real (no cosmético): ../css/estilo.css trae reglas de autor con
   `display` fijo (`img{display:block}`, `.boton{display:inline-flex}`...).
   Por origen en la cascada CSS, una regla de autor normal GANA a la regla
   por defecto del navegador `[hidden]{display:none}`, aunque esta última
   sea más específica — así que un `<img hidden>` o un `<button hidden
   class="boton">` seguían ocupando su sitio y visibles. Se vio primero como
   la miniatura de "Quitar imagen" mostrando mitad la foto vieja, mitad el
   placeholder "Sin imagen" superpuestos, y otra vez como el botón "Quitar"
   visible en un servicio nuevo sin imagen todavía. Regla general con
   `!important` para no tener que ir cazando cada clase suelta que aparezca
   con `display` propio. */
[hidden]{display:none!important;}

.panel-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.panel-toolbar h1{margin-bottom:0;}
.panel-acciones{display:flex;gap:10px;flex-wrap:wrap;}
.panel-acciones-fila{display:flex;justify-content:flex-end;margin-bottom:18px;}

.lista-fila{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--borde);
  border-radius:14px;padding:14px 16px;box-shadow:var(--sombra);cursor:pointer;margin-bottom:10px;
}
.lista-fila:hover{transform:translateY(-1px);}
.lista-fila-miniatura{width:44px;height:44px;object-fit:cover;border-radius:10px;flex-shrink:0;background:var(--gris-claro);overflow:hidden;}
.lista-fila-miniatura-vacia{display:flex;}
.lista-fila-miniatura-vacia svg{width:100%;height:100%;display:block;}
.lista-fila-info{flex:1;min-width:0;}
.lista-fila-nombre{font-weight:700;color:var(--marron);font-size:.94rem;}
.lista-fila-meta{font-size:.78rem;color:var(--texto-suave);margin-top:2px;}

.pill-estado{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:700;flex-shrink:0;}
.pill-activo{background:var(--verde-suave);color:var(--verde);}
.pill-inactivo{background:var(--rojo-suave);color:var(--rojo);}

.alta-aviso-info{background:var(--ambar-suave);color:var(--ambar);border:1px solid rgba(133,77,14,.2);}
.alta-aviso-info a{color:var(--ambar);font-weight:700;}

.panel-seccion{margin-top:36px;}
.panel-seccion h2{font-size:1.05rem;color:var(--marron);margin-bottom:4px;}

/* Caja neutra con borde — mismo aspecto que .etq-caja/.salud-panel, aquí con
   nombre genérico para reusar en cualquier bloque suelto de configuración. */
.panel-caja{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px;}

/* Diálogo de servicio/personal: mismo campo que alta-socio, dentro del modal propio de este panel. */
.panel-ui-cuerpo .alta-campo{margin-bottom:14px;}
.panel-ui-cuerpo .alta-fila{grid-template-columns:1fr 1fr;}
@media(max-width:480px){ .panel-ui-cuerpo .alta-fila{grid-template-columns:1fr;} }
.panel-ui-cuerpo .check-linea{display:flex;align-items:center;gap:8px;margin-top:4px;}
.panel-ui-cuerpo .check-linea input{width:18px;height:18px;accent-color:var(--rosa);}
.panel-ui-cuerpo .check-linea label{margin:0;font-weight:400;font-size:.86rem;color:var(--texto);}

/* Tabla de Socios con interruptores de apps por fila */
.socios-tabla-wrap{overflow-x:auto;margin-top:18px;}
.socios-tabla{width:100%;border-collapse:separate;border-spacing:0 10px;min-width:680px;}
.socios-tabla thead th{
  background:#fff;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--texto-suave);padding:0 16px 6px;font-weight:700;
}
.socios-tabla thead th.socios-tabla-check-col{text-align:center;}
.socios-tabla td{background:#fff;padding:12px 16px;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);}
.socios-tabla td:first-child{border-left:1px solid var(--borde);border-radius:14px 0 0 14px;}
.socios-tabla td:last-child{border-right:1px solid var(--borde);border-radius:0 14px 14px 0;}
.socios-tabla-check{text-align:center;width:90px;}
.socios-tabla-negocio{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;}
.miembro-email{font-size:.78rem;color:var(--texto-suave);margin:1px 0;}

/* QR de Reseñas/Catálogo (pestaña QR de Mi ficha) — cada tarjeta junta el
   enlace y su QR (antes vivían en dos bloques separados, uno con los dos
   enlaces y otro más abajo con los dos QR, sin relación visual directa entre
   un enlace y su código). Una franja de color arriba (distinta por tipo)
   para que las dos tarjetas se distingan de un vistazo antes de imprimirlas.
   El bloque de enlace queda alineado a la izquierda (mismo criterio que
   cualquier .alta-campo); el QR, centrado. Columna flex con el botón de
   descarga empujado al fondo (`margin-top:auto`) para que las dos tarjetas
   -de alto distinto, porque la de Reseñas lleva dos líneas más (Google +
   estrellas)- terminen su botón a la misma altura en vez de quedar cada una
   a la altura que le tocase según su propio contenido. */
.qr-columnas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px;align-items:stretch;}
@media(max-width:600px){.qr-columnas{grid-template-columns:1fr;gap:20px;}}
.qr-caja{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--borde);border-radius:16px;padding:26px 20px 22px;
  text-align:center;box-shadow:var(--sombra);border-top:4px solid var(--borde);
}
.qr-caja-resenas{border-top-color:var(--azul);}
.qr-caja-catalogo{border-top-color:var(--rosa);}
.qr-caja h2{font-size:1.05rem;margin:0 0 18px;}
.qr-caja .alta-campo{text-align:left;margin-bottom:14px;}
.qr-caja-guardar-fila{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.qr-imagen{margin-bottom:16px;max-width:220px;width:100%;margin-left:auto;margin-right:auto;}
.qr-imagen svg{max-width:100%;height:auto;display:block;}
.qr-caja .lista-fila-meta{margin-bottom:10px;}
.qr-caja button:disabled{opacity:.5;cursor:default;}
/* Botón de descarga: siempre el último elemento visual de la tarjeta. */
.qr-caja > button{margin-top:auto;}

/* Interruptor on/off — usado en la tabla de Socios (un check por app y fila) */
.switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch-slider{position:absolute;inset:0;background:#ccc;border-radius:999px;transition:.15s;cursor:pointer;}
.switch-slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;}
.switch input:checked + .switch-slider{background:var(--rosa);}
.switch input:checked + .switch-slider::before{transform:translateX(18px);}
.switch input:disabled + .switch-slider{opacity:.5;cursor:default;}

/* Excel/import: lista de errores por fila */
.import-resultado{font-size:.86rem;margin-top:12px;}
.import-errores{margin:8px 0 0;padding-left:18px;color:var(--rojo);font-size:.82rem;}

/* Calendario mensual de Agenda */
.agenda-layout{display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:860px){ .agenda-layout{grid-template-columns:300px 1fr;} }
.agenda-cal-cabecera{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.agenda-cal-cabecera strong{color:var(--marron);text-transform:capitalize;}
.agenda-cal-cabecera button{
  background:#fff;border:1px solid var(--borde);border-radius:10px;width:32px;height:32px;
  font-size:1rem;color:var(--marron);cursor:pointer;
}
.agenda-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.agenda-cal-dow{text-align:center;font-size:.68rem;color:var(--texto-suave);font-weight:700;padding:2px 0;}
.agenda-cal-day{
  position:relative;aspect-ratio:1;border:1.5px solid var(--borde);border-radius:8px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:.8rem;cursor:pointer;padding:0;color:var(--texto);
}
.agenda-cal-day.is-today{font-weight:700;border-color:var(--marron);}
.agenda-cal-day.has-bookings{background:var(--verde);border-color:var(--verde);color:#fff;font-weight:700;}
.agenda-cal-day.has-blocks-only{background:var(--texto-suave);border-color:var(--texto-suave);color:#fff;}
.agenda-cal-day.is-selected{outline:2.5px solid var(--rosa);outline-offset:1px;}
.agenda-cal-day.is-empty{visibility:hidden;cursor:default;}
.agenda-cal-count{
  font-size:.6rem;font-weight:700;line-height:1;padding:1px 5px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--verde);
}

.agenda-tabla{width:100%;border-collapse:collapse;font-size:.86rem;background:#fff;border:1px solid var(--borde);border-radius:14px;overflow:hidden;}
.agenda-tabla th{text-align:left;padding:10px 12px;background:#fff;border-bottom:2px solid var(--borde);color:var(--texto-suave);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;}
.agenda-tabla td{padding:10px 12px;border-top:1px solid var(--borde);vertical-align:middle;}
.agenda-tabla tr.es-bloqueo{background:var(--gris-claro);color:var(--texto-suave);}
.agenda-tabla tr[data-clicable]{cursor:pointer;}

.slot-btn{
  display:inline-block;margin:3px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--borde);
  background:#fff;font-size:.82rem;font-weight:600;color:var(--marron);cursor:pointer;
}
.slot-btn:hover{border-color:var(--rosa);}
.slot-btn.is-elegido{background:var(--rosa);border-color:var(--rosa);color:#fff;}
.slot-btn:disabled{color:var(--texto-suave);text-decoration:line-through;cursor:default;background:var(--gris-claro);}

.status-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;}
.status-scheduled{background:var(--azul-suave);color:var(--azul);}
.status-completed{background:var(--verde-suave);color:var(--verde);}
.status-cancelled{background:var(--gris-claro);color:var(--texto-suave);text-decoration:line-through;}
.status-no_show{background:var(--ambar-suave);color:var(--ambar);}

/* ===== Clon estructural del Catálogo de lixai (Productos, y reusado por
   Categorías/Salud/Etiquetas/Descuentos: chips, filtros, tabla densa con
   edición en línea, paginación con números) — ver frontend/js/catalog.js
   y frontend/css/bootstrap-reskin.css, portado a componentes propios (sin
   Bootstrap). ===== */

.catalogo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.catalogo-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  border:1.5px solid var(--borde);background:#fff;color:var(--texto-suave);
  font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;
}
.catalogo-chip.activo{background:var(--rosa);border-color:var(--rosa);color:#fff;}
.catalogo-chip .badge-num{
  font-size:.68rem;font-weight:700;border-radius:999px;padding:1px 7px;
  background:var(--gris-claro);color:var(--texto-suave);
}
.catalogo-chip.activo .badge-num{background:rgba(255,255,255,.25);color:#fff;}

.catalogo-filtros{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px;}
@media(min-width:700px){.catalogo-filtros{grid-template-columns:1fr auto auto;}}
.catalogo-filtros input[type=search],
.catalogo-filtros select,
.tabla-select{
  padding:9px 12px;border:1.5px solid var(--borde);border-radius:8px;
  font-family:inherit;font-size:.82rem;color:var(--texto);background:#fff;
}
.catalogo-filtros input[type=search]:focus,
.catalogo-filtros select:focus{outline:none;border-color:var(--marron);}

.catalogo-bulk{background:var(--gris-claro);border:1px solid var(--borde);border-radius:10px;padding:12px 14px;margin-bottom:14px;}
.catalogo-bulk-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;}
.catalogo-bulk-vacio{font-size:.78rem;color:var(--texto-suave);margin-top:8px;}
.catalogo-tipos{font-size:.78rem;color:var(--texto-suave);margin-top:8px;}
.catalogo-tipo-chip{
  display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--borde);
  border-radius:999px;padding:3px 4px 3px 10px;margin:2px 4px 2px 0;font-size:.76rem;
}
.catalogo-tipo-chip button{background:none;border:none;color:var(--texto-suave);cursor:pointer;font-family:inherit;padding:2px 4px;}
.catalogo-tipo-chip button.borrar{color:var(--rojo);font-weight:700;}

.catalogo-banner{
  background:var(--ambar-suave);color:var(--ambar);border:1px solid rgba(133,77,14,.2);
  border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.82rem;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
.catalogo-banner button{
  background:none;border:1.5px solid rgba(133,77,14,.35);color:var(--ambar);
  border-radius:999px;padding:5px 12px;font-size:.76rem;font-weight:600;cursor:pointer;font-family:inherit;
}

.catalogo-tabla-wrap{overflow-x:auto;border:1px solid var(--borde);border-radius:10px;background:#fff;}
.catalogo-tabla{width:100%;border-collapse:collapse;font-size:.8rem;min-width:900px;}
.catalogo-tabla thead th{
  font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave);
  background:#fff;border-bottom:2px solid var(--borde);padding:9px 10px;text-align:left;white-space:nowrap;
}
.catalogo-tabla thead th.sortable{cursor:pointer;user-select:none;}
.catalogo-tabla thead th.sortable:hover{color:var(--texto);}
.catalogo-tabla thead th .sort-arrow{font-size:.62rem;opacity:.4;margin-left:3px;}
.catalogo-tabla thead th.active .sort-arrow{opacity:1;}
.catalogo-tabla td{padding:8px 10px;border-bottom:1px solid var(--borde);vertical-align:middle;}
.catalogo-tabla tbody tr:hover{background:var(--gris-claro);}
.catalogo-tabla .celda-abre{cursor:pointer;}
.catalogo-tabla .miniatura{width:32px;height:32px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.catalogo-tabla .producto-nombre{font-weight:600;color:var(--texto);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.catalogo-tabla .producto-ean{font-size:.72rem;color:var(--texto-suave);}

.tabla-input{
  width:80px;padding:5px 7px;border:1.5px solid var(--borde);border-radius:6px;
  font-family:inherit;font-size:.8rem;text-align:right;color:var(--texto);
}
.tabla-input.valido{border-color:var(--verde);}
.tabla-input.invalido{border-color:var(--rojo);}
.tabla-select{padding:5px 7px;font-size:.78rem;max-width:150px;}

/* Insignias de estado (badges) — variantes de color reusadas en Catálogo,
   Salud, Sellos... mismo criterio de color que el reskin de lixai. */
.badge-chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:700;white-space:nowrap;}
.badge-verde{background:var(--verde-suave);color:var(--verde);}
.badge-rojo{background:var(--rojo-suave);color:var(--rojo);}
.badge-ambar{background:var(--ambar-suave);color:var(--ambar);}
.badge-azul{background:rgba(59,130,246,.1);color:var(--azul);}
.badge-gris{background:var(--gris-claro);color:var(--texto-suave);}
.badge-claro{background:#fff;color:var(--texto-suave);border:1px solid var(--borde);}

/* Botón "✓ Ubicado" de la columna Ubicación (Socios) — mismo verde que
   badge-verde pero es un botón real (reabre el diálogo de pin), no un
   badge inerte. */
.ubicacion-btn-ok{background:var(--verde-suave);color:var(--verde);border-color:transparent;box-shadow:none;}
.ubicacion-btn-ok:hover{border-color:var(--verde);color:var(--verde);box-shadow:none;}

/* Sugerencias de dirección del diálogo "Ubicación de..." (Socios) — mismo
   patrón que .bs-input-wrap del buscador público, con las variables de
   color de este panel. */
.pin-direccion-wrap{position:relative;}
.pin-direccion-sugerencias{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;
  background:#fff;border:1px solid var(--borde);border-radius:8px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.2);
  max-height:180px;overflow-y:auto;list-style:none;margin:0;padding:4px;
}
.pin-direccion-sugerencias.oculto{display:none;}
.pin-direccion-sugerencias li{padding:8px 10px;border-radius:6px;font-size:.82rem;cursor:pointer;}
.pin-direccion-sugerencias li:hover{background:var(--gris-claro);}

/* Paginación con números — calco de frontend/js/pagination.js */
.pag-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--borde);flex-wrap:wrap;gap:8px;}
.pag-info{font-size:.72rem;color:var(--texto-suave);}
.pag-controls{display:flex;align-items:center;gap:2px;}
.pag-btn{
  height:28px;min-width:28px;padding:0 8px;border-radius:6px;border:1.5px solid var(--borde);
  background:none;font-size:.72rem;font-weight:600;color:var(--texto-suave);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.pag-btn:hover:not(:disabled){border-color:var(--marron);color:var(--texto);background:var(--gris-claro);}
.pag-btn.active{background:var(--rosa);border-color:var(--rosa);color:#fff;}
.pag-btn:disabled{opacity:.3;cursor:default;}
.pag-dots{padding:0 3px;color:var(--texto-suave);font-size:.72rem;}

/* Capa de "cargando…" a pantalla completa (panel-ui.js::ocupado) */
.panel-ocupado{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;}
.panel-ocupado-caja{background:#fff;border-radius:14px;box-shadow:var(--sombra-hover);padding:20px 24px;display:flex;align-items:center;gap:14px;max-width:min(90vw,26rem);}
.panel-ocupado-spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--borde);border-top-color:var(--marron);flex-shrink:0;animation:panel-ocupado-girar .7s linear infinite;}
@keyframes panel-ocupado-girar{to{transform:rotate(360deg);}}
.panel-ocupado-texto{font-weight:700;color:var(--texto);font-size:.9rem;}
.panel-ocupado-nota{font-size:.78rem;color:var(--texto-suave);margin-top:2px;}

.panel-ui-cuerpo .imagen-preview{width:100%;max-height:180px;object-fit:contain;border-radius:8px;border:1px solid var(--borde);background:var(--gris-claro);margin-bottom:12px;}
.panel-ui-cuerpo .aviso-descuento{background:var(--ambar-suave);color:var(--ambar);border-radius:8px;padding:8px 10px;font-size:.8rem;margin-top:6px;}
.panel-ui-cuerpo .aviso-descuento a{color:var(--ambar);font-weight:700;text-decoration:underline;}

/* ===== Salud del catálogo — clon de frontend/salud-catalogo.html:
   diagnóstico (tarjetas por hueco) + tratamiento (rellenar por EAN) en la
   misma pantalla. ===== */
.salud-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px;}
@media(min-width:700px){.salud-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1050px){.salud-grid{grid-template-columns:1fr 1fr 1fr;}}
.salud-card{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px;}
.salud-card-cabecera{font-weight:700;color:var(--marron);font-size:.9rem;}
.salud-card-numero{font-size:1.3rem;font-weight:700;color:var(--texto);margin-top:2px;}
.salud-card-numero span{font-size:.78rem;font-weight:400;color:var(--texto-suave);}
.salud-barra{height:6px;border-radius:999px;background:var(--gris-claro);margin-top:10px;overflow:hidden;}
.salud-barra-fill{height:100%;border-radius:999px;}
.salud-muestras{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.salud-muestra{
  display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--gris-claro);border:1px solid var(--borde);border-radius:999px;padding:3px 10px;
  font-size:.72rem;color:var(--texto-suave);text-decoration:none;
}
.salud-muestra:hover{border-color:var(--marron);color:var(--texto);}
.salud-ok{color:var(--verde);font-size:.82rem;margin-top:10px;}

.salud-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;}
@media(min-width:700px){.salud-stats{grid-template-columns:repeat(4,1fr);}}
.salud-stat{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:12px 14px;}
.salud-stat-label{font-size:.74rem;color:var(--texto-suave);}
.salud-stat-numero{font-size:1.2rem;font-weight:700;color:var(--marron);}
.salud-stat-nota{font-size:.72rem;color:var(--texto-suave);margin-top:2px;}

.salud-rellenar{display:grid;grid-template-columns:1fr;gap:16px;margin-top:6px;}
@media(min-width:860px){.salud-rellenar{grid-template-columns:1.4fr 1fr;}}
.salud-panel{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px;display:flex;flex-direction:column;}
.salud-check-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--borde);}
.salud-check-fila:last-of-type{border-bottom:none;}
.salud-check-fila label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.86rem;color:var(--texto);margin:0;}
.salud-check-fila input{width:18px;height:18px;accent-color:var(--rosa);flex-shrink:0;}

/* Selector manual de productos/servicios (Descuentos) — picker dentro del
   diálogo propio de panel-ui.js. */
.dc-picker-lista{max-height:220px;overflow-y:auto;border:1px solid var(--borde);border-radius:10px;padding:4px;}
.dc-picker-fila{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;font-size:.85rem;color:var(--texto);}
.dc-picker-fila:hover{background:var(--gris-claro);}
.dc-picker-fila input[type=checkbox]{width:16px;height:16px;accent-color:var(--rosa);flex-shrink:0;}
.dc-picker-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}