/* =============================================================================
   Apoing UI — sistema de diseño común (web pública, privada y gestión)
   Base: maqueta de Reservar aprobada el 2026-10-21. Todas las pantallas nuevas o
   rediseñadas usan SOLO estas variables y clases (prefijo .ap-) para que web y
   app respiren la misma estética. No modifica nada existente: solo añade clases.
   ============================================================================= */

:root {
  /* Marca */
  --ap-brand: #F26A1B;          /* naranja Apoing: acentos, iconos, logo */
  --ap-primary: #CC4A10;        /* botones primarios (texto blanco con contraste AA) */
  --ap-primary-hover: #9A3412;
  --ap-primary-tint: #FDEDE4;   /* fondos suaves de marca */
  --ap-primary-tint-2: #FEF5F0;
  --ap-navy: #16213E;           /* hoy, avatar, cabeceras oscuras */

  /* Neutros */
  --ap-bg: #F6F7FB;
  --ap-surface: #FFFFFF;
  --ap-line: #E2E8F0;
  --ap-line-strong: #CBD5E1;
  --ap-text: #0F172A;
  --ap-text-2: #334155;
  --ap-muted: #475569;          /* texto secundario (≥4.5:1 sobre blanco) */
  --ap-faint: #94A3B8;          /* solo decorativo o deshabilitado */
  --ap-soft: #F1F5F9;
  --ap-soft-2: #F8FAFC;         /* fondos muy claros (cabeceras de tabla, cajas) */
  --ap-muted-2: #64748B;        /* texto secundario más claro (etiquetas, pies) */
  --ap-on-primary: #FFFFFF;     /* texto sobre el color primario */
  --ap-ink: #0F172A;            /* fondos oscuros (tarjeta destacada, chip activo); en modo oscuro, un gris azulado */

  /* Estados de franjas y avisos */
  --ap-free-bg: #ECFDF3;  --ap-free-line: #86D7A8;  --ap-free-text: #065F46;
  --ap-busy-bg: #F1F5F9;  --ap-busy-line: #E2E8F0;  --ap-busy-text: #64748B;
  --ap-mine-bg: #FDEDE4;  --ap-mine-line: #F26A1B;  --ap-mine-text: #9A3412;
  --ap-ok: #166534;  --ap-ok-bg: #DCFCE7;
  --ap-warn: #92400E; --ap-warn-bg: #FEF3C7;
  --ap-danger: #B91C1C; --ap-danger-bg: #FEE2E2;

  /* Forma y ritmo */
  --ap-radius-sm: 10px;
  --ap-radius: 12px;
  --ap-radius-lg: 16px;
  --ap-radius-pill: 999px;
  --ap-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --ap-shadow: 0 4px 16px rgba(15, 23, 42, .06);
  --ap-shadow-primary: 0 4px 12px rgba(204, 74, 16, .30);
  --ap-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ap-tap: 44px;               /* tamaño mínimo táctil */
}

/* ---- Modo oscuro (fase 1: opcional, se activa desde el perfil; html[data-theme="dark"]) -------------------
   Solo cambian los tokens: las pantallas rediseñadas (que usan var(--ap-…)) se adaptan; las antiguas siguen claras. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ap-primary-tint: #3A2114;
  --ap-primary-tint-2: #2A1A10;
  --ap-navy: #1E293B;
  --ap-bg: #0B1220;
  --ap-surface: #111A2E;
  --ap-line: #263247;
  --ap-line-strong: #3B4A63;
  --ap-text: #E5EAF3;
  --ap-text-2: #C7D0DD;
  --ap-muted: #A3AEC2;
  --ap-muted-2: #94A3B8;
  --ap-faint: #64748B;
  --ap-soft: #172238;
  --ap-soft-2: #141D30;
  --ap-free-bg: #0F2A1C;  --ap-free-line: #2F7A52;  --ap-free-text: #86D7A8;
  --ap-busy-bg: #172238;  --ap-busy-line: #263247;  --ap-busy-text: #94A3B8;
  --ap-mine-bg: #3A2114;  --ap-mine-line: #F26A1B;  --ap-mine-text: #F7A879;
  --ap-ok: #86EFAC;  --ap-ok-bg: #0F2A1C;
  --ap-warn: #FCD34D; --ap-warn-bg: #3A2A0A;
  --ap-danger: #FCA5A5; --ap-danger-bg: #3A1414;
  --ap-ink: #1E293B;
  --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --ap-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] body { background: var(--ap-bg); color: var(--ap-text); }
html[data-theme="dark"] .ap-side-logo-full, html[data-theme="dark"] img.logo { content: url("/img/brand/apoing-logo-horizontal-white.svg"); }

/* ---- Contenedor de pantallas rediseñadas ------------------------------------ */
.ap-ui { font-family: var(--ap-font); color: var(--ap-text); background: var(--ap-bg); }
.ap-page { max-width: 1344px; margin: 0 auto; padding: 32px 48px 48px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 767px) { .ap-page { padding: 18px 16px 24px; gap: 16px; } }

/* ---- Tipografía ------------------------------------------------------------ */
.ap-h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.3px; color: var(--ap-text); }
.ap-sub { margin: 6px 0 0; font-size: 15px; color: var(--ap-muted); }
.ap-label { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ap-muted); }
.ap-muted { color: var(--ap-muted); }
@media (max-width: 767px) { .ap-h1 { font-size: 26px; } }

/* ---- Tarjetas -------------------------------------------------------------- */
.ap-card { background: var(--ap-surface); border: 1px solid var(--ap-line); border-radius: var(--ap-radius-lg); padding: 20px 24px; }
.ap-card--tight { padding: 16px; }
.ap-card__title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ap-muted); }

/* ---- Botones --------------------------------------------------------------- */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ap-tap); padding: 0 18px;
  border-radius: var(--ap-radius); border: 1px solid var(--ap-line-strong); background: var(--ap-surface); color: var(--ap-text);
  font: 500 15px/1 var(--ap-font); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.ap-btn:hover { border-color: var(--ap-muted); color: var(--ap-text); }
.ap-btn:focus-visible { outline: 3px solid rgba(204, 74, 16, .35); outline-offset: 2px; }
.ap-btn--primary { background: var(--ap-primary); border-color: var(--ap-primary); color: #fff; font-weight: 600; }
.ap-btn--primary:hover { background: var(--ap-primary-hover); border-color: var(--ap-primary-hover); color: #fff; }
.ap-btn--ghost { border-color: transparent; background: transparent; color: var(--ap-text-2); }
.ap-btn--ghost:hover { background: var(--ap-soft); }
.ap-btn--lg { min-height: 52px; font-size: 16px; }
.ap-btn--block { width: 100%; }
.ap-btn--icon { width: var(--ap-tap); padding: 0; }
.ap-btn[disabled], .ap-btn.is-disabled { background: var(--ap-line); border-color: var(--ap-line); color: var(--ap-busy-text); cursor: default; }

/* ---- Pastillas / chips seleccionables -------------------------------------- */
.ap-chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ap-tap); padding: 0 16px; border-radius: var(--ap-radius);
  border: 1px solid var(--ap-line-strong); background: var(--ap-surface); color: var(--ap-text-2); font: 500 15px/1 var(--ap-font); cursor: pointer; white-space: nowrap; }
.ap-chip.is-active, .ap-chip[aria-pressed="true"] { border: 2px solid var(--ap-primary); background: var(--ap-primary-tint-2); color: var(--ap-mine-text); font-weight: 600; }
.ap-chip--pill { border-radius: var(--ap-radius-pill); }
.ap-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--ap-radius-pill); font-size: 12px; font-weight: 500; background: var(--ap-soft); color: var(--ap-text-2); }
.ap-tag--brand { background: var(--ap-primary-tint); color: var(--ap-mine-text); font-weight: 600; }
.ap-tag--ok { background: var(--ap-ok-bg); color: var(--ap-ok); }
.ap-tag--warn { background: var(--ap-warn-bg); color: var(--ap-warn); }

/* ---- Selector segmentado (Semana | Día) ------------------------------------ */
.ap-segment { display: inline-flex; background: var(--ap-soft); border-radius: var(--ap-radius-sm); padding: 4px; }
.ap-segment > button { height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--ap-muted); font: 500 14px/1 var(--ap-font); cursor: pointer; }
.ap-segment > button.is-active { background: var(--ap-surface); color: var(--ap-text); font-weight: 600; box-shadow: var(--ap-shadow-sm); }

/* ---- Franjas de calendario ------------------------------------------------- */
.ap-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 4px;
  border-radius: var(--ap-radius); font: 600 13px/1.2 var(--ap-font); border: 1px solid transparent; text-decoration: none; }
.ap-slot--free { background: var(--ap-free-bg); border-color: var(--ap-free-line); color: var(--ap-free-text); cursor: pointer; }
.ap-slot--free:hover { box-shadow: var(--ap-shadow-sm); filter: brightness(.98); color: var(--ap-free-text); }
.ap-slot--busy { background: var(--ap-busy-bg); border-color: var(--ap-busy-line); color: var(--ap-busy-text); font-weight: 500; cursor: default; }
.ap-slot--mine { background: var(--ap-mine-bg); border-color: var(--ap-mine-line); color: var(--ap-mine-text); cursor: pointer; }
.ap-slot--selected { background: var(--ap-primary); border-color: var(--ap-primary); color: #fff; box-shadow: var(--ap-shadow-primary); }
.ap-slot--past { background: transparent; border: 1px dashed var(--ap-line); color: var(--ap-faint); font-weight: 400; cursor: default; }
.ap-slot--match { background: #EEF2FF; border-color: #A5B4FC; color: #3730A3; cursor: pointer; }
.ap-slot--match:hover { box-shadow: var(--ap-shadow-sm); color: #3730A3; }
.ap-slot--event { background: #FEF3C7; border-color: #FCD34D; color: #92400E; cursor: pointer; }
.ap-slot--special { background: #F5EDE6; border-color: #B08968; color: #5C3D2E; }
/* Reserva pendiente de aprobación (solicitada, sin confirmar): borde discontinuo */
.ap-slot--pending { background: #FFFBEB; border: 1px dashed #D97706; color: #92400E; cursor: pointer; }
.ap-slot--pending:hover { box-shadow: var(--ap-shadow-sm); color: #92400E; }
.ap-slot--minepending { background: var(--ap-mine-bg); border: 1px dashed var(--ap-mine-line); color: var(--ap-mine-text); cursor: pointer; }

/* ---- Días (cabecera de semana y carrusel móvil) ---------------------------- */
.ap-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0; border-radius: var(--ap-radius); color: var(--ap-text); }
.ap-day__dow { font-size: 12px; font-weight: 500; }
.ap-day__num { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ap-day.is-today, .ap-day.is-active { background: var(--ap-ink); color: #fff; }
.ap-day.is-past { color: var(--ap-busy-text); }

/* ---- Formularios ----------------------------------------------------------- */
.ap-input, .ap-select { width: 100%; min-height: var(--ap-tap); padding: 0 14px; border: 1px solid var(--ap-line-strong); border-radius: var(--ap-radius);
  background: var(--ap-surface); color: var(--ap-text); font: 400 15px/1.2 var(--ap-font); }
.ap-input:focus, .ap-select:focus { outline: none; border-color: var(--ap-primary); box-shadow: 0 0 0 3px rgba(204, 74, 16, .15); }
.ap-field { display: flex; flex-direction: column; gap: 6px; }

/* ---- Navegación superior y barra inferior móvil ---------------------------- */
.ap-topnav { height: 72px; background: var(--ap-surface); border-bottom: 1px solid var(--ap-line); display: flex; align-items: center; gap: 40px; padding: 0 48px; }
.ap-topnav__link { padding: 10px 16px; border-radius: var(--ap-radius-sm); font: 500 15px/1 var(--ap-font); color: var(--ap-muted); text-decoration: none; }
.ap-topnav__link:hover { background: var(--ap-soft); color: var(--ap-text); }
.ap-topnav__link.is-active { background: var(--ap-primary-tint); color: var(--ap-mine-text); font-weight: 600; }
.ap-bottombar { position: sticky; bottom: 0; background: var(--ap-surface); border-top: 1px solid var(--ap-line); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }

/* ---- Varios ---------------------------------------------------------------- */
.ap-row { display: flex; align-items: center; gap: 12px; }
.ap-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-stack { display: flex; flex-direction: column; gap: 16px; }
.ap-divider { width: 1px; align-self: stretch; background: var(--ap-line); }
.ap-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ap-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.ap-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ap-primary); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ap-legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--ap-muted); }
.ap-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.ap-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* ---- Prioridad sobre los estilos antiguos de la web (custom.css, mobile.css) ---- */
.ap-ui .ap-h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--ap-text); }
.ap-ui .ap-card__title { margin: 0 0 12px; font-size: 13px !important; font-weight: 600; line-height: 1.3; letter-spacing: .6px; text-transform: uppercase; color: var(--ap-muted); }
.ap-ui .ap-sub { margin: 6px 0 0; font-size: 15px; color: var(--ap-muted); }
.ap-ui .ap-label { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ap-muted); margin: 0; }
@media (max-width: 767px) { .ap-ui .ap-h1 { font-size: 26px; } }

/* ---- Diálogos propios (Scripts/apoing-ui.js: apConfirm / apAlert) ---- */
.ap-btn--danger { background: var(--ap-danger); border-color: var(--ap-danger); color: #fff; font-weight: 600; }
.ap-btn--danger:hover { background: #991B1B; border-color: #991B1B; color: #fff; }
.ap-modal { border: 0; padding: 0; border-radius: var(--ap-radius-lg); width: calc(100% - 32px); max-width: 420px; box-shadow: 0 20px 60px rgba(15, 23, 42, .25); font-family: var(--ap-font); color: var(--ap-text); }
.ap-modal::backdrop { background: rgba(15, 23, 42, .45); }
.ap-modal__box { padding: 24px; }
.ap-modal__title { margin: 0 0 8px; font-size: 18px !important; font-weight: 700; line-height: 1.3; color: var(--ap-text); }
.ap-modal__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ap-text-2); white-space: pre-line; }
.ap-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* Cabecera pública en el móvil: logo, Entrar, Crear cuenta e idioma en una sola fila (antes se apilaban) */
@media (max-width: 767px) {
  .row:has(> .btnAccesoAlta) { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-left: 0; margin-right: 0; }
  .row:has(> .btnAccesoAlta) > .col-8 { flex: 1 1 auto; width: auto; padding: 0; }
  .row:has(> .btnAccesoAlta) > .col-8 img { width: 128px !important; }
  .row:has(> .btnAccesoAlta) > .btnAccesoAlta { order: 2; flex: 0 0 auto; width: auto; padding: 0; }
  .row:has(> .btnAccesoAlta) > .col-4 { order: 3; flex: 0 0 auto; width: auto; padding: 0; }
  .row:has(> .btnAccesoAlta) > .col-4 .float-end, .row:has(> .btnAccesoAlta) > .btnAccesoAlta .float-end { float: none !important; padding-top: 0 !important; }
  .btnAccesoAlta ul { display: flex; gap: 6px; margin: 0; }
  .btnAccesoAlta .btn { padding: 8px 12px !important; font-size: 14px !important; white-space: nowrap; border-radius: 10px !important; }
  .btnAccesoAlta .btn-light { background: transparent !important; border: 0 !important; padding-left: 6px !important; padding-right: 6px !important; }
  /* Cabecera pública: misma altura que la privada (≈60px) */
  .row:has(> .btnAccesoAlta) { margin-top: 0 !important; padding: 8px 0; min-height: 60px; }
  .row:has(> .btnAccesoAlta) .ls-trigger { padding: 6px 8px !important; }
  .row:has(> .btnAccesoAlta) .ls-chevron { display: none; }
}

/* Barra de carga al navegar y opción pulsada (apoing-ui.js) */
.ap-loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100000; background: var(--ap-brand, #F26A1B); box-shadow: 0 0 8px rgba(242,106,27,.6); opacity: 0; pointer-events: none; }
.ap-loadbar.is-on { opacity: 1; animation: apLoad 6s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes apLoad { 0% { width: 0; } 20% { width: 45%; } 100% { width: 92%; } }
a.ap-tapped { opacity: .75; }
.navmenu a.ap-tapped, .ap-bottom-nav-item.ap-tapped, .accountwin a.ap-tapped { background: var(--ap-soft, #F1F5F9) !important; color: var(--ap-primary, #CC4A10) !important; opacity: 1; }
@keyframes apSpin { to { transform: rotate(360deg); } }
@media (hover: none) { .navmenu a:active, .ap-bottom-nav-item:active, .accountwin a:active { background: var(--ap-soft, #F1F5F9) !important; } }

@media (min-width: 768px) {
  .row:has(> .btnAccesoAlta) { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
  .row:has(> .btnAccesoAlta) > .col-8 { flex: 1 1 auto; width: auto; }
  .row:has(> .btnAccesoAlta) > .btnAccesoAlta { order: 2; flex: 0 0 auto; width: auto; }
  .row:has(> .btnAccesoAlta) > .col-4 { order: 3; flex: 0 0 auto; width: auto; }
  .row:has(> .btnAccesoAlta) .float-end { float: none !important; padding-top: 0 !important; }
  .btnAccesoAlta ul { display: flex; gap: 8px; margin: 0; }
}
/* Separador en los desplegables del menú */
.menudiv li.ap-menu-sep { height: 1px; margin: 6px 8px !important; padding: 0 !important; background: var(--ap-line, #E2E8F0) !important; pointer-events: none; }

/* ---- Editor de texto (Scripts/apoing-editor.js) -------------------------------------------- */
.ap-ed { border: 1px solid var(--ap-line-strong); border-radius: 10px; background: var(--ap-surface); overflow: visible; transition: border-color .15s, box-shadow .15s; }
.ap-ed:focus-within { border-color: var(--ap-primary, #CC4A10); box-shadow: 0 0 0 3px rgba(204, 74, 16, .14); }
.ap-ed-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--ap-line, #E2E8F0); background: var(--ap-soft, #F8FAFC); border-radius: 10px 10px 0 0; position: sticky; top: 0; z-index: 2; }
.ap-ed-group { display: flex; gap: 2px; position: relative; }
.ap-ed-group + .ap-ed-group { padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--ap-line, #E2E8F0); }
.ap-ed-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ap-text-2, #334155); font-size: 16px; cursor: pointer; }
.ap-ed-btn:hover { background: var(--ap-surface); color: var(--ap-text, #0F172A); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.ap-ed-btn.is-on { background: var(--ap-primary-tint); color: var(--ap-primary, #CC4A10); }
.ap-ed-btn:disabled { opacity: .35; cursor: default; }
.ap-ed-btn.is-busy i { animation: apSpin .8s linear infinite; }
.ap-ed-pal { position: absolute; top: 40px; left: 0; z-index: 5; display: flex; gap: 6px; padding: 8px; background: var(--ap-surface); border: 1px solid var(--ap-line, #E2E8F0); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.14); }
.ap-ed-pal button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ap-line-strong, #CBD5E1); cursor: pointer; color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ap-ed-area { padding: 14px 16px; max-height: 560px; overflow-y: auto; outline: none; font-size: 15px; line-height: 1.6; color: var(--ap-text, #0F172A); cursor: text; }
.ap-ed-area:empty::before { content: attr(data-placeholder); color: var(--ap-faint); }
.ap-ed-src { width: 100%; min-height: 240px; border: 0 !important; border-radius: 0 0 10px 10px !important; padding: 14px 16px !important; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace !important; box-shadow: none !important; }
.ap-modal__input { margin: 4px 0 16px; width: 100%; }

/* ---- Texto con formato publicado (publicaciones, normas, información de la comunidad) -------- */
.ap-prose, .feed-card-body, .pub-content, #rvReglaBody { overflow-wrap: anywhere; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) p { margin: 0 0 .75em; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody, .ap-ed-area) iframe { max-width: 100%; border: 0; border-radius: 12px; aspect-ratio: 16 / 9; height: auto; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) :is(h2, h3, h4) { margin: 1.1em 0 .5em; font-weight: 700; line-height: 1.3; color: var(--ap-text, #0F172A); }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) h2 { font-size: 1.3em; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) h3 { font-size: 1.15em; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) :is(ul, ol) { margin: 0 0 .9em; padding-left: 1.4em; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) li { margin: .25em 0; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) ul li::marker { color: var(--ap-brand, #F26A1B); }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) a { color: var(--ap-primary, #CC4A10); text-decoration: underline; text-underline-offset: 2px; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) img { max-width: 100%; height: auto; border-radius: 12px; margin: .5em 0; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) blockquote { margin: 0 0 .9em; padding: .6em 1em; border-left: 3px solid var(--ap-brand, #F26A1B); background: var(--ap-soft, #F8FAFC); border-radius: 0 8px 8px 0; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) > :first-child { margin-top: 0; }
:is(.ap-prose, .feed-card-body, .pub-content, #rvReglaBody) > :last-child { margin-bottom: 0; }

/* Pantallas táctiles: sin el "hover" que iOS deja pegado tras tocar una opción del menú */
@media (hover: none) {
  .ap-skin .navmenu li:hover > a:not(.ap-tapped), .ap-skin .navmenu li ul.menudiv li:hover:not(:has(.ap-tapped)) { background: transparent !important; }
  .ap-skin .navmenu a, .ap-skin .navmenu li { -webkit-tap-highlight-color: rgba(204, 74, 16, .12); }
}

/* ---- Cabecera pública (revisión con la competencia): menos elementos y con aire -------------- */
.row:has(> .btnAccesoAlta) > div, .row:has(> .btnAccesoAlta) .float-end, .row:has(> .btnAccesoAlta) .ls-wrap { align-self: center; margin-top: 0 !important; margin-bottom: 0 !important; }
.btnAccesoAlta ul li { display: inline-flex !important; margin: 0 !important; padding: 0 !important; }
.btnAccesoAlta .btn { display: inline-flex !important; align-items: center; height: 40px; }
@media (max-width: 767px) {
  .row:has(> .btnAccesoAlta) { gap: 10px !important; padding: 10px 0 !important; }
  .row:has(> .btnAccesoAlta) > .col-8 img { width: 116px !important; }
  .btnAccesoAlta ul { gap: 4px !important; }
  .btnAccesoAlta .btn { height: 36px; font-size: 14px !important; font-weight: 600 !important; }
  .btnAccesoAlta .btn-light { padding: 0 8px !important; color: var(--ap-text, #0F172A) !important; }
  .btnAccesoAlta .btn-accent { padding: 0 14px !important; border-radius: 999px !important; }
  /* Idioma: solo el icono en un botón redondo (el idioma se ve al abrir su menú) */
  .row:has(> .btnAccesoAlta) .ls-trigger { width: 36px; height: 36px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
  .row:has(> .btnAccesoAlta) .ls-trigger .ls-label, .row:has(> .btnAccesoAlta) .ls-trigger .ls-chevron { display: none !important; }
}
/* Migas de las páginas públicas (ayuda…): 65px de margen heredado de cuando la cabecera flotaba */
body:not(.ap-skin) #contenedorPrincipal .migas { margin-top: 28px !important; }
@media (max-width: 767px) { body:not(.ap-skin) #contenedorPrincipal .migas { margin-top: 16px !important; } }

/* Cabecera pública en ordenador: Entrar en texto y Crear cuenta en píldora, como el botón de idioma */
@media (min-width: 768px) {
  .btnAccesoAlta .btn-light { background: transparent !important; border: 0 !important; font-weight: 600 !important; color: var(--ap-text, #0F172A) !important; }
  .btnAccesoAlta .btn-light:hover { background: var(--ap-soft, #F1F5F9) !important; }
  .btnAccesoAlta .btn-accent { border-radius: 999px !important; padding: 0 18px !important; font-weight: 600 !important; }
}
/* Cabecera pública en el móvil: 16px de margen a cada lado (el logo tocaba el borde y el idioma se cortaba) */
@media (max-width: 767px) { .row:has(> .btnAccesoAlta) { padding-left: 16px !important; padding-right: 16px !important; } }


/* ======================================================================================
   Plantillas pública y de comunidad (body.corporate): misma tipografía, títulos y pie que el resto
   ====================================================================================== */
body.corporate { font-family: var(--ap-font, 'Poppins', system-ui, sans-serif) !important; color: var(--ap-text, #0F172A); background: var(--ap-surface); }
body.corporate #contenedorPrincipal :is(p, li, td, label, input, textarea, select, button, a) { font-family: inherit; }
body.corporate #contenedorPrincipal h1 { font-size: clamp(26px, 3.2vw, 34px) !important; font-weight: 800 !important; letter-spacing: -.4px; line-height: 1.2 !important; color: var(--ap-text, #0F172A) !important; }
body.corporate #contenedorPrincipal h2 { font-weight: 700; letter-spacing: -.2px; color: var(--ap-text, #0F172A); }
body.corporate .migas { font-size: 13px; color: var(--ap-muted, #64748B); }
body.corporate .migas a, body.corporate .migas .bi { color: var(--ap-muted, #64748B) !important; }

/* Ayuda: la portada está en CSS/help-home.css */

/* Ayuda: artículo legible */
body.corporate article { max-width: 760px; font-size: 16.5px; line-height: 1.75; color: var(--ap-text-2, #334155); }
body.corporate article h2 { font-size: 22px !important; margin: 1.6em 0 .6em !important; }
body.corporate article h3 { font-size: 18px; font-weight: 700; margin: 1.4em 0 .5em; color: var(--ap-text, #0F172A); }
body.corporate article :is(ul, ol) { padding-left: 1.3em; }
body.corporate article li { margin: .35em 0; }
body.corporate article ul li::marker { color: var(--ap-brand, #F26A1B); }
body.corporate article img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--ap-line, #E2E8F0); }
body.corporate article a { color: var(--ap-primary, #CC4A10); text-underline-offset: 2px; }
body.corporate article table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
body.corporate article :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--ap-line, #E2E8F0); text-align: left; }

/* Pie oscuro unificado: columnas limpias y enlaces legales dentro del mismo bloque */
body.corporate #footerBlog { margin-top: 64px !important; padding: 28px 0 8px !important; float: none !important; }
body.corporate #footerBlog h3 { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55) !important; margin: 0 0 14px !important; }
body.corporate #footerBlog ul { list-style: none; margin: 0; padding: 0; }
body.corporate #footerBlog ul li { margin: 0 0 8px; }
body.corporate #footerBlog ul li a { color: rgba(255,255,255,.78) !important; font-size: 14px; text-decoration: none; transition: color .15s; }
body.corporate #footerBlog ul li a:hover { color: #fff !important; }
body.corporate #footerBlog .row > [class*="col"] { padding: 22px 24px !important; }
body.corporate .pie_pagina { margin: 0 !important; padding: 0 0 26px !important; background: var(--ap-dark, #0F172A) !important; }
body.corporate .pie_pagina .footerDiv { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
body.corporate .pie_pagina .CondicionesLinks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
body.corporate .pie_pagina .separador { display: none !important; }
body.corporate .pie_pagina .accesoLink a, body.corporate .pie_pagina .accesoLink label { color: rgba(255,255,255,.6) !important; font-size: 13px !important; text-decoration: none; }
body.corporate .pie_pagina .accesoLink a:hover, body.corporate .pie_pagina .accesoLink a:hover label { color: #fff !important; }
@media (max-width: 767px) {
  body.corporate #footerBlog .row > [class*="col"] { padding: 16px 20px !important; }
  body.corporate .pie_pagina .CondicionesLinks { padding: 0 20px; }
}
/* Barra legal del pie: fila flexible (los float antiguos con altura fija hacían que la línea cruzara los enlaces) */
body.corporate .pie_pagina .footerDiv { height: auto !important; border-bottom: 0 !important; margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
body.corporate .pie_pagina .CondicionesLinks, body.corporate .pie_pagina .accesoLink, body.corporate .pie_pagina .socialLinks { float: none !important; height: auto !important; margin: 0 !important; position: static !important; }
body.corporate .pie_pagina .social { margin: 0; padding: 0; }
body.corporate .pie_pagina .social li.ano { width: auto; margin: 0; color: rgba(255,255,255,.5); font-size: 13px; }
/* Portada de comunidad en el móvil: la altura se adapta al contenido (el título se salía por arriba) */
@media (max-width: 767px) { .ca-hero { min-height: 0 !important; padding-top: 0; } .ca-hero-overlay { position: relative !important; inset: auto !important; padding: 72px 0 24px; } }
/* Título sobre la foto de la comunidad: blanco (la regla general de títulos lo ponía oscuro) */
body.corporate .ca-hero h1, body.corporate .ca-hero .ca-hero-content h1 { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
/* La regla general de títulos (#contenedorPrincipal h1, más específica) ponía el nombre de la página pública oscuro y pequeño */
body.corporate #contenedorPrincipal .ca-hero h1, body.corporate #contenedorPrincipal h1.ca-hero-title { color: #fff !important; font-size: clamp(22px, 5vw, 48px) !important; font-weight: 800 !important; line-height: 1.15 !important; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
/* Títulos sobre fondo oscuro (portada): blancos; la regla general de títulos los ponía oscuros */
body.corporate .ap-hero .ap-hero-title, body.corporate #contenedorPrincipal .ap-hero h1.ap-hero-title { color: #fff !important; text-align: inherit; }
body.corporate .ap-hero .ap-hero-title .ap-accent, body.corporate #contenedorPrincipal .ap-hero h1.ap-hero-title .ap-accent { color: var(--ap-brand, #F26A1B) !important; }

/* ======================================================================================
   Modales de entrar y crear cuenta (.ap-auth): estrechos, título grande, campos altos,
   ojo dentro del campo, botón principal a todo el ancho y enlace para cambiar de uno a otro
   ====================================================================================== */
.ap-auth .modal-dialog { max-width: 440px; }

/* Crear cuenta en pantallas anchas (7/11/2026): dos columnas para que quepa sin desplazar. Google y Apple a la izquierda,
   el formulario con el correo a la derecha. Solo el modal de alta (el único con la casilla de comunicaciones) y solo si hay
   botones de Google o Apple; en móvil y pantallas estrechas sigue en una columna. */
@media (min-width: 860px) {
  .ap-auth:has(input[name="cnovedades"]):has(.ap-sso--top) .modal-dialog { max-width: 860px; }
  .ap-auth:has(input[name="cnovedades"]) .modal-body:has(> .ap-sso--top) { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .ap-auth:has(input[name="cnovedades"]) .modal-body > .ap-sso--top { grid-column: 1; grid-row: 1 / span 40; align-self: stretch; margin: 14px 0 0 !important; padding: 18px 32px 0 0; border-right: 1px solid var(--ap-line, #E2E8F0); }
  .ap-auth:has(input[name="cnovedades"]) .modal-body > .ap-sso--top .ap-sso-sep { display: none; }
  .ap-auth:has(input[name="cnovedades"]) .modal-body:has(> .ap-sso--top) > :not(.ap-sso--top) { grid-column: 2; }
}

.ap-auth .modal-content { border: 0; border-radius: 22px; box-shadow: 0 30px 80px rgba(15,23,42,.28); font-family: var(--ap-font, 'Poppins', system-ui, sans-serif); overflow: hidden; }
.ap-auth .modal-header { border: 0 !important; padding: 28px 28px 6px !important; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ap-auth .modal-header > .btn-close { order: 2; margin: 2px 0 0 !important; flex: 0 0 auto; opacity: .55; }
.ap-auth .modal-title { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.4px; color: var(--ap-text, #0F172A) !important; margin: 0 0 4px !important; text-transform: none !important; }
.ap-auth .ap-auth-sub { margin: 0; color: var(--ap-muted, #64748B); font-size: 14.5px; line-height: 1.5; }
.ap-auth .modal-body { padding: 14px 28px 0 !important; }
.ap-auth .modal-body > div { margin-top: 14px !important; }
.ap-auth .modal-body label { display: block; font-size: 13px !important; font-weight: 600 !important; color: var(--ap-text-2, #334155) !important; margin: 0 0 6px !important; }
.ap-auth .modal-body .form-control { width: 100% !important; height: 48px; border-radius: 12px !important; border: 1px solid var(--ap-line-strong) !important; padding: 0 14px !important; font: 400 15px var(--ap-font, Poppins), sans-serif; box-shadow: none !important; background: var(--ap-surface) !important; }
.ap-auth .modal-body .form-control:focus { border-color: #CC4A10 !important; box-shadow: 0 0 0 3px rgba(204,74,16,.14) !important; }
.ap-auth .input-group { position: relative; flex-wrap: nowrap; }
.ap-auth .input-group > .form-control { padding-right: 50px !important; border-radius: 12px !important; }
.ap-auth .input-group > .btn { position: absolute; right: 4px; top: 4px; height: 40px; width: 42px; z-index: 5; border: 0 !important; background: transparent !important; color: var(--ap-muted, #64748B) !important; border-radius: 10px !important; padding: 0; box-shadow: none !important; }
.ap-auth .input-group > .btn:hover { background: var(--ap-soft) !important; color: var(--ap-text, #0F172A) !important; }
.ap-auth .modal-body a { color: #CC4A10 !important; font-weight: 500; text-decoration: none; }
.ap-auth .modal-body a:hover { text-decoration: underline; }
.ap-auth .check_form input[type=checkbox], .ap-auth .modal-body input[type=checkbox] { width: 18px; height: 18px; accent-color: #CC4A10; vertical-align: -4px; margin-right: 6px; }
.ap-auth .modal-body > div:has(input[type=checkbox]) { font-size: 13.5px; line-height: 1.55; color: var(--ap-text-2, #475569); }
.ap-auth .modal-footer { border: 0 !important; padding: 22px 28px 26px !important; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ap-auth .modal-footer > button.btn-light { display: none !important; }
.ap-auth .modal-footer .btn-primary { width: 100%; height: 50px; margin: 0 !important; border-radius: 12px !important; border: 0 !important; background: #CC4A10 !important; color: #fff !important; font: 600 16px var(--ap-font, Poppins), sans-serif !important; }
.ap-auth .modal-footer .btn-primary:hover { background: #9A3412 !important; }
.ap-auth .modal-footer .btn-primary:disabled { opacity: .45; }
.ap-auth .ap-auth-switch { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ap-muted, #64748B); }
.ap-auth .ap-auth-switch a { color: #CC4A10 !important; font-weight: 600; text-decoration: none; }
@media (max-width: 575px) {
  .ap-auth .modal-dialog { margin: 12px; }
  .ap-auth .modal-header { padding: 24px 22px 4px !important; }
  .ap-auth .modal-body { padding: 12px 22px 0 !important; }
  .ap-auth .modal-footer { padding: 20px 22px 22px !important; }
}
/* Diálogo de unirse a una comunidad: mismo aspecto que entrar/crear cuenta */
.ap-join .modal-header { padding-bottom: 0 !important; }
.ap-join .modal-body { font-size: 15px; line-height: 1.6; color: var(--ap-text-2, #475569); }
.ap-join .modal-footer .btn-secondary { width: 100%; height: 46px; margin: 8px 0 0 !important; border-radius: 12px !important; background: var(--ap-surface) !important; color: var(--ap-text, #0F172A) !important; border: 1px solid var(--ap-line-strong) !important; font: 600 15px var(--ap-font, Poppins), sans-serif; }
.ap-join .modal-footer .btn-secondary:hover { background: var(--ap-soft) !important; }

/* Los emails se guardan en mayúsculas (histórico): en las listas se muestran en minúsculas */
.ap-mail { text-transform: lowercase; }
/* Muro: cuándo se juega cada partido abierto */
.match-sidebar-when { font-size: 13px; font-weight: 600; color: var(--ap-text, #0F172A); margin: 2px 0 6px; }
.match-sidebar-when .bi { color: var(--ap-primary, #CC4A10); }
/* Perfil: aceptar y guardar justo bajo el formulario */
.ap-profile-save { margin: 4px 0 28px; }
.ap-profile-save .consentimiento { font-size: 13.5px; color: var(--ap-text-2, #475569); margin-bottom: 12px; }
.ap-profile-save .consentimiento a { color: var(--ap-primary, #CC4A10) !important; }
/* Móvil: si una tabla se convierte en tarjetas, la caja que la envuelve sobra (evita "caja dentro de caja") */
@media (max-width: 767px) {
  .ap-card:has(> .table-card-mobile), .ap-card:has(> div > .table-card-mobile) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
}

/* Muro: tarjeta "Tu próxima reserva" */
.nb-card { display: flex; align-items: center; gap: 18px; background: var(--ap-dark, #0F172A); color: #fff; border-radius: 20px; padding: 18px 20px; margin: 0 0 22px; box-shadow: 0 12px 30px rgba(15,23,42,.18); }
.nb-date { flex: 0 0 auto; width: 62px; height: 66px; border-radius: 16px; background: rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.nb-date span { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #F7A879; }
.nb-date b { font-size: 28px; font-weight: 800; margin-top: 4px; }
.nb-main { flex: 1; min-width: 0; }
.nb-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F7A879; }
.nb-when { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 2px 0; }
.nb-where { font-size: 14px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.nb-link { color: rgba(255,255,255,.85) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; }
.nb-link:hover { color: #fff !important; }
.nb-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; background: #CC4A10; color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none !important; }
.nb-btn:hover { background: #9A3412; }
.nb-btn--ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.nb-btn--ghost:hover { background: rgba(255,255,255,.18); }
.nb-card--empty { background: var(--ap-surface); color: var(--ap-text, #0F172A); border: 1px solid var(--ap-line, #E2E8F0); box-shadow: none; justify-content: space-between; }
.nb-card--foto { background-size: cover; background-position: center; }
.nb-empty-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ap-muted, #64748B); }
.nb-empty-txt b { font-size: 16px; color: var(--ap-text, #0F172A); }
@media (max-width: 767px) {
  .nb-card { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .nb-when { font-size: 18px; }
  .nb-actions { width: 100%; justify-content: space-between; }
  .nb-btn { height: 42px; }
  .nb-card--empty .nb-actions, .nb-card--empty .nb-btn { width: 100%; justify-content: center; }
}
/* Portada: en el ordenador el eslogan va alineado a la izquierda como el resto del bloque */
@media (min-width: 992px) { body.corporate #contenedorPrincipal .ap-hero h1.ap-hero-title { text-align: left !important; } }

/* ======================================================================================
   Inicio (antes "Mi muro"): saludo + accesos rápidos, próxima reserva, huecos libres
   ====================================================================================== */
.ini-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px !important; }
.ini-head h1 { margin: 0 !important; }
.ini-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.ini-quick a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ap-line, #E2E8F0); background: var(--ap-surface); color: var(--ap-text, #0F172A) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: border-color .15s, background .15s; }
.ini-quick a:hover { border-color: #CC4A10; background: var(--ap-primary-tint-2); }
.ini-quick a .bi { color: #CC4A10; font-size: 16px; }
.ini-com { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--ap-surface); border: 1px solid var(--ap-line, #E2E8F0); font-size: 14px; color: var(--ap-text-2, #334155); }
.ini-com[hidden] { display: none; }
.ini-com .bi { color: #B45309; }
.ini-com a { color: var(--ap-primary, #CC4A10) !important; font-weight: 600; text-decoration: none !important; }
.hl-card { background: var(--ap-surface); border: 1px solid var(--ap-line, #E2E8F0); border-radius: 18px; padding: 16px 18px; margin: -6px 0 22px; }
.hl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hl-head b { font-size: 16px; color: var(--ap-text, #0F172A); }
.hl-sub { display: block; font-size: 13px; color: var(--ap-muted, #64748B); margin-top: 1px; }
.hl-why { display: block; font-size: 12px; color: var(--ap-muted, #64748B); margin-top: 2px; }
.hl-change { border: 0; background: none; padding: 0; color: var(--ap-primary, #CC4A10); font-weight: 600; font-size: 12px; cursor: pointer; }
.hl-change:hover { text-decoration: underline; }
.hl-pick { margin-top: 8px; max-width: 320px; min-height: 38px; }
.hl-all { font-size: 14px; font-weight: 600; color: #CC4A10 !important; text-decoration: none !important; white-space: nowrap; }
.hl-times { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  /* Hueco para que la hora con el ratón encima (sube 1 px y lleva sombra) no se corte: la tira recorta lo que se sale */
  padding: 4px 4px 22px; margin: -4px -4px -20px; }
.hl-times::-webkit-scrollbar { display: none; }
.hl-times a { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; height: 58px; padding: 0 12px; border-radius: 14px; border: 1.5px solid #86EFAC; background: #F0FDF4; color: #14532D !important; text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.hl-times a:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22,101,52,.15); }
.hl-times a b { font-size: 17px; font-weight: 800; line-height: 1.1; }
.hl-times a span { font-size: 11.5px; opacity: .8; }
.hl-times > i { flex: 0 0 84px; height: 58px; border-radius: 14px; background: linear-gradient(90deg, var(--ap-soft), var(--ap-line), var(--ap-soft)); background-size: 200% 100%; animation: hlsk 1.2s infinite linear; }
@keyframes hlsk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .hl-times > i { animation: none; } }
.hl-empty { margin: 0; font-size: 14px; color: var(--ap-muted, #64748B); }
@media (max-width: 767px) {
  .ini-quick { display: none; } /* en el móvil ya están en la barra de abajo */
  .hl-card { padding: 14px; margin-top: -8px; }
}

/* Gestionar comunidad: "Necesita tu atención" */
.att { background: var(--ap-surface); border: 1px solid var(--ap-line, #E2E8F0); border-radius: 18px; padding: 14px 16px 6px; margin: 0 0 18px; }
.att-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; color: var(--ap-text, #0F172A); margin-bottom: 6px; }
.att-head .bi { color: #CC4A10; }
.att-head .att-ok { color: #16A34A; }
.att-list { display: flex; flex-direction: column; }
.att-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--ap-soft); text-decoration: none !important; color: var(--ap-text, #0F172A) !important; border-radius: 10px; }
.att-row:first-child { border-top: 0; }
.att-row:hover { background: var(--ap-soft-2); }
.att-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--ap-soft); color: var(--ap-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.att-row.is-warn .att-ico { background: var(--ap-primary-tint); color: #CC4A10; }
.att-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-txt b { font-size: 15px; }
.att-txt span { font-size: 13px; color: var(--ap-muted, #64748B); }
.att-go { color: var(--ap-line-strong); }

/* Móvil: tablas anchas (ranking, cookies…) se desplazan dentro de su caja en vez de salirse de la pantalla;
   y los modos de administrador de Reservar bajan de línea */
@media (max-width: 767px) {
  #contenedorPrincipal table.table:not(.gridViewGlobal), body.corporate article table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #rvModes { flex-wrap: wrap; }
}

/* ---- Botones de acción con icono (mismo estilo que «Mis reservas»): cuadrado redondeado, borde suave, icono de color ----
   .ap-ic = solo icono (40x40); .ap-ic.has-txt = icono + texto. Variantes: --ok (verde), --del (rojo), --info (azul). */
.ap-ic { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--ap-line, #E2E8F0); background: var(--ap-surface);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--ap-text-2, #334155) !important;
  font: 600 14px/1 var(--ap-font, 'Poppins', sans-serif); cursor: pointer; text-decoration: none !important; transition: background .15s, border-color .15s; }
.ap-ic .bi { font-size: 17px; color: inherit !important; }
.ap-ic:hover { background: var(--ap-soft-2); }
.ap-ic.has-txt { padding: 0 14px; }
.ap-ic--ok { color: #15803D !important; } .ap-ic--ok:hover { background: #F0FDF4; border-color: #BBF7D0; }
.ap-ic--del { color: #B91C1C !important; } .ap-ic--del:hover { background: #FEF2F2; border-color: #FECACA; }
.ap-ic--info { color: #1D4ED8 !important; } .ap-ic--info:hover { background: #EFF6FF; border-color: #BFDBFE; }
.ap-ic-row { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Pie de botones de una tarjeta (el de «Mis comunidades»): separado por una línea, botones .ap-ic del mismo alto
   y el principal relleno (.ap-ic--go). La tarjeta lleva padding 0 y overflow hidden; en el móvil ocupan todo el ancho. */
.ap-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--ap-soft); background: #FCFCFD; }
.ap-foot__info { font-size: 12px; color: var(--ap-faint); min-width: 0; }
.ap-foot .ap-ic { height: 36px; font-size: 13px; text-decoration: none; }
.ap-ic--go { background: var(--ap-primary, #F26A1B); border-color: var(--ap-primary, #F26A1B); color: #fff !important; }
.ap-ic--go:hover { filter: brightness(.95); background: var(--ap-primary, #F26A1B); }
/* Acciones de una fila de lista (calendarios, publicaciones, roles…): siempre la papelera a la izquierda como icono
   y «Editar» visible a la derecha; en el móvil (tablas en modo tarjeta) ocupan el ancho de la tarjeta. */
.ap-acciones { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; }
.ap-acciones .ap-ic { height: 36px; font-size: 13px; text-decoration: none; }
@media (max-width: 767px) {
  .table-card-mobile .ap-acciones, .gridViewGlobal .ap-acciones { display: flex; width: 100%; flex-wrap: nowrap; }
  .table-card-mobile .ap-acciones .ap-ic, .gridViewGlobal .ap-acciones .ap-ic { flex: 1; }
  .table-card-mobile .ap-acciones .ap-ic.ap-ic--solo, .gridViewGlobal .ap-acciones .ap-ic.ap-ic--solo { flex: 0 0 40px; }
}
@media (max-width: 560px) {
  .ap-foot { padding: 10px 14px; }
  .ap-foot__info { display: none; }
  .ap-foot .ap-ic-row { width: 100%; flex-wrap: nowrap; }
  .ap-foot .ap-ic-row .ap-ic { flex: 1; }
  .ap-foot .ap-ic-row .ap-ic.ap-ic--solo { flex: 0 0 40px; }
}

/* Pie de los formularios: Guardar (principal) y Cancelar juntos, mismo tamaño en todas las páginas */
.ap-form-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.ap-form-acciones .ap-btn { min-width: 120px; }

/* Diálogos: los saltos de línea del texto se respetan; el HTML de las páginas antiguas, alineado a la izquierda */
p.ap-modal__text { white-space: pre-line; }
.ap-modal__html { text-align: left; }

/* Contraseña con el ojo dentro del campo (como en Entrar): <div class="input-group ap-pass"><input/><button onclick="togglePassVis(this)"> */
.ap-pass { position: relative; flex-wrap: nowrap; }
.ap-pass > input, .ap-pass > .form-control { width: 100% !important; padding-right: 48px !important; border-radius: 10px !important; }
.ap-pass > .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 36px; width: 40px; z-index: 5; padding: 0;
  border: 0 !important; background: transparent !important; color: var(--ap-muted, #64748B) !important; border-radius: 8px !important; box-shadow: none !important; }
.ap-pass > .btn:hover { background: var(--ap-soft) !important; color: var(--ap-text, #0F172A) !important; }

/* Pestañas de página (Solicitudes…): píldoras con contador */
.ap-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--ap-line, #E2E8F0); padding-bottom: 10px; }
.ap-tabs__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ap-line, #E2E8F0);
  background: var(--ap-surface); color: var(--ap-muted, #475569) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.ap-tabs__tab:hover { border-color: var(--ap-muted, #94A3B8); color: var(--ap-text, #0F172A) !important; }
.ap-tabs__tab.is-on { background: var(--ap-primary-tint, #FDEDE4); border-color: var(--ap-primary, #CC4A10); color: var(--ap-primary-hover, #9A3412) !important; }
.ap-tabs__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ap-primary, #CC4A10); color: #fff; font-size: 11.5px;
  display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) { .ap-tabs { flex-wrap: nowrap; overflow-x: auto; } .ap-tabs__tab { flex: none; } }

/* Inicio: arriba, próxima reserva + huecos (izquierda) y «Necesita tu atención» (derecha); en el móvil, uno debajo de otro con la atención primero */
.ini-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "main side"; gap: 16px; align-items: start; margin: 0 0 18px; }
.ini-top--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
.ini-top__main { grid-area: main; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ini-top__side { grid-area: side; min-width: 0; }
.ini-top .nb-card, .ini-top .hl-card, .ini-top .att { margin: 0; }
@media (max-width: 1100px) {
  .ini-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; }
  .ini-top--solo { grid-template-areas: "main"; }
}

/* «Apoing te escucha» */
.ap-modal.ap-esc { max-width: 620px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* en el móvil (iPhone con teclado) se desplaza por dentro hasta «Enviar» */
.ap-esc .ap-modal__box { text-align: left; padding: 26px 28px; }
@media (max-width: 600px) { .ap-esc .ap-modal__box { padding: 20px 18px; } }
.ap-esc__kicker { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ap-primary, #CC4A10); }
.ap-esc .ap-modal__title, .ap-esc .ap-modal__text { text-align: left; }
.ap-esc__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.ap-esc__tab { border: 1px solid var(--ap-line, #E2E8F0); background: var(--ap-surface); border-radius: 999px; padding: 6px 14px; font: 600 13px var(--ap-font, Poppins), sans-serif; color: var(--ap-muted, #475569); cursor: pointer; }
.ap-esc__tab.is-on { border-color: var(--ap-primary, #CC4A10); background: var(--ap-primary-tint, #FDEDE4); color: var(--ap-primary-hover, #9A3412); }
.ap-esc__f { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ap-text, #0F172A); }
.ap-esc__f .ap-input { width: 100%; font-weight: 400; }
.ap-esc__txt { min-height: 150px; padding: 10px 12px; resize: vertical; line-height: 1.5; font-size: 15px; }
/* Escritorio (30/10/2026): más grande para que se explayen y cuenten bien el problema o la idea */
@media (min-width: 992px) { .ap-modal.ap-esc { max-width: 860px; } .ap-esc .ap-modal__box { padding: 32px 36px; } .ap-esc__txt { min-height: 300px; } }
.ap-esc__f .ap-input:not(textarea) { min-height: 44px; font-size: 15px; }
.ap-esc__legal { font-size: 12px; color: var(--ap-muted, #64748B); margin: 0 0 6px; }
.ap-esc__err { color: var(--ap-danger, #B91C1C); font-size: 13px; margin: 0 0 6px; }
/* «¿Sobre qué es?»: dos opciones grandes y, si es de la comunidad, sus botones */
.ap-esc__tri { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ap-esc__tri[hidden], .ap-esc__cuerpo[hidden] { display: none; }
.ap-esc__op { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--ap-line, #E2E8F0); border-radius: 14px;
  background: var(--ap-surface); text-align: left; cursor: pointer; font-family: var(--ap-font, Poppins), sans-serif; color: var(--ap-text, #0F172A); }
.ap-esc__op:hover, .ap-esc__op:focus-visible { border-color: var(--ap-primary, #CC4A10); background: var(--ap-primary-tint-2, #FEF5F0); }
.ap-esc__op > i { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ap-primary-tint, #FDEDE4); color: var(--ap-primary, #CC4A10); font-size: 21px; }
.ap-esc__op-tx { display: flex; flex-direction: column; gap: 2px; }
.ap-esc__op-tx strong { font-size: 15.5px; font-weight: 600; }
.ap-esc__op-tx small { font-size: 13px; color: var(--ap-muted, #475569); line-height: 1.4; }
.ap-esc__com { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--ap-line, #E2E8F0); }
.ap-esc__com:first-child { border-top: 0; padding-top: 0; }
.ap-esc__com .ap-esc__f { margin: 0 0 4px; }
.ap-esc__sel { min-height: 46px; font-size: 15px; font-weight: 600; }
.ap-esc__com-n { font-size: 14.5px; }
.ap-esc__com-b { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-esc__com-b .ap-btn { flex: 1 1 200px; justify-content: center; text-decoration: none !important; }
.ap-esc__com-b .ap-btn--primary, .ap-esc__com-b .ap-btn--primary:hover { color: #fff !important; }
.ap-esc__com-b .ap-btn:not(.ap-btn--primary) { color: var(--ap-text, #0F172A) !important; }
.ap-esc__nota { margin: 0; font-size: 12.5px; color: var(--ap-muted, #64748B); }

/* «Apoing te escucha» en páginas: aviso en línea y bloque */
.esc-inline { margin: 10px 0 0; font-size: 13.5px; color: var(--ap-muted, #475569); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.esc-inline i { color: var(--ap-primary, #CC4A10); }
.esc-inline a { color: var(--ap-primary, #CC4A10); font-weight: 600; }
.esc-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 0; padding: 16px 18px; border-radius: 16px;
  background: var(--ap-primary-tint-2, #FEF5F0); border: 1px solid #FBD5C0; }
.esc-banner > i { font-size: 26px; color: var(--ap-primary, #CC4A10); }
.esc-banner p { flex: 1 1 260px; margin: 0; color: var(--ap-text, #0F172A); font-size: 14.5px; line-height: 1.5; }
.esc-banner .ap-btn { background: var(--ap-surface); }

/* Solicitudes: Aceptar y Rechazar en línea, iguales en «Para entrar» y «Mis invitaciones» */
.sol-acc, .sol-acc-td { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.sol-acc .ap-btn, .sol-acc-td .ap-btn { min-height: 38px; padding: 0 16px; white-space: nowrap; }
td.sol-acc-td { display: table-cell; } td.sol-acc-td .ap-btn + .ap-btn { margin-left: 8px; }

/* Pestañas con texto corto en el móvil: todas a la vista, sin desplazamiento */
.ap-tabs__s { display: none; }
@media (max-width: 600px) {
  .ap-tabs { flex-wrap: nowrap; overflow: visible; gap: 6px; }
  .ap-tabs__tab { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 10px; gap: 6px; font-size: 13px; }
  .ap-tabs__tab:has(.ap-tabs__s) .ap-tabs__l { display: none; }
  .ap-tabs__tab:has(.ap-tabs__s) .ap-tabs__s { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ap-tabs__tab .bi { display: none; }
  /* Pestañas sin texto corto (p. ej. Bots): texto en una línea y la fila se desliza, en vez de partir las palabras */
  .ap-tabs:not(:has(.ap-tabs__s)) { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ap-tabs:not(:has(.ap-tabs__s))::-webkit-scrollbar { display: none; }
  .ap-tabs__tab:not(:has(.ap-tabs__s)) { flex: none; white-space: nowrap; }
  /* Cuatro o más pestañas (p. ej. Solicitudes con «Viviendas»): no caben enteras; la fila se desliza con el texto corto completo */
  .ap-tabs:has(> .ap-tabs__tab:nth-child(4)) { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ap-tabs:has(> .ap-tabs__tab:nth-child(4))::-webkit-scrollbar { display: none; }
  .ap-tabs:has(> .ap-tabs__tab:nth-child(4)) > .ap-tabs__tab { flex: none; }
  .ap-tabs:has(> .ap-tabs__tab:nth-child(4)) .ap-tabs__s { overflow: visible; }
}

/* Apoing te escucha: en el móvil, los cuatro modos en dos filas */
@media (max-width: 600px) { .ap-esc__tabs { display: grid; grid-template-columns: 1fr 1fr; } .ap-esc__tab { padding: 8px 10px; text-align: center; } }

/* Globos de los menús antiguos (.bell-badge): número centrado igual en todos (flex en vez de line-height, que con Poppins lo desplaza) */
.bell-badge { box-sizing: border-box; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 1;
  align-items: center; justify-content: center; top: 0; background-color: var(--ap-primary, #CC4A10); font-variant-numeric: tabular-nums; }
.bell-badge[style*="inline-block"], .bell-badge.is-on { display: inline-flex !important; }

/* iPhone: un campo con letra de menos de 16 px hace zoom al escribir y la página se queda ensanchada al cerrar (p. ej. «Apoing te escucha») */
@media (max-width: 767px) {
  .ap-input, .ap-select, .ap-esc__txt, .ap-esc__f .ap-input:not(textarea), .ap-modal input, .ap-modal textarea, .ap-modal select { font-size: 16px !important; }
}

/* ---- Aviso breve (toast) y botón en estado «guardando» ---------------------------------------------------- */
.ap-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 9800; display: inline-flex; align-items: center; gap: 10px;
  background: var(--ap-ink, #0F172A); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 11px 16px; font: 500 14px var(--ap-font, Poppins), sans-serif; box-shadow: 0 8px 24px rgba(15,23,42,.22); max-width: calc(100vw - 32px); transition: transform .25s ease, opacity .25s ease; }
.ap-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.ap-toast i { color: #86EFAC; font-size: 18px; } .ap-toast--err i { color: #FCA5A5; }
.ap-toast__undo { border: 0; background: none; color: #F7A879; font: 600 14px var(--ap-font, Poppins), sans-serif; cursor: pointer; margin-left: 4px; padding: 0; }
@media (max-width: 767px) { .ap-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
.ap-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; margin-right: 8px; vertical-align: -2px; animation: ap-spin .8s linear infinite; }
.is-busy { opacity: .85; cursor: progress !important; }
@keyframes ap-spin { to { transform: rotate(360deg); } }
/* Nivel por deporte: las 3 preguntas */
.ap-niv .ap-modal__box { max-width: 520px; }
.ap-niv__q { border: 0; margin: 0 0 6px; padding: 0; }
.ap-niv__q legend { font-size: 14px; font-weight: 600; color: var(--ap-text, #0F172A); margin: 0 0 6px; padding: 0; }
.ap-niv__ops { margin: 0 0 8px; }
.ap-niv__prev { min-height: 20px; margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--ap-primary-hover, #9A3412); }
/* Nivel de un jugador en un deporte (NivelService.Insignia) */
.ap-nivel { display: inline-block; min-width: 26px; padding: 0 6px; border-radius: 999px; background: var(--ap-primary-tint, #FDEDE4); color: var(--ap-primary-hover, #9A3412); font: 600 11px/18px var(--ap-font, Poppins), sans-serif; text-align: center; white-space: nowrap; vertical-align: middle; }
.ap-nivel--prov { background: transparent; box-shadow: inset 0 0 0 1px var(--ap-primary-tint, #FDEDE4); }

/* Etiqueta «Pro · gratis por ahora» (calendarios suscritos, reglas automáticas…): la misma en todas las funciones Pro */
.ap-pro { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ap-mine-text, #9A3412); background: var(--ap-primary-tint, #FDEDE4); border-radius: 999px; padding: 3px 10px; vertical-align: middle; white-space: nowrap; }
.ap-pro i { font-size: 12px; color: inherit; }

/* Notas antiguas (.legend-callout: Usuarios, Publicaciones…) con el aspecto de las nuevas: fondo suave, borde fino e icono naranja */
.legend-callout { background: var(--ap-soft-2, #F8FAFC) !important; border: 1px solid var(--ap-line, #E2E8F0) !important; border-radius: 12px !important; padding: 12px 14px !important; gap: 10px !important; margin-top: 20px !important; }
.legend-callout-icon { color: var(--ap-brand, #F26A1B) !important; font-size: 17px !important; }
.legend-callout-title { font-size: 13.5px !important; color: var(--ap-text, #0F172A) !important; }
.legend-callout-text { font-size: 13px !important; color: var(--ap-text-2, #334155) !important; }