/* JL -- 23/10/2026 -- APP DE SOCIO v2 ("Mi cuenta" como app): sistema visual propio, mobile-first.
Se activa con empresa.c_cuenta_grid=1 (misma flag que la v1). Todo cuelga de html.ca-mode / #ca-app. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
:root {
--ca-brand: #2f3887;
--ca-brand-ink: #ffffff;
--ca-bg: #f3f4f8;
--ca-surface: #ffffff;
--ca-surface-2: #f7f8fb;
--ca-ink: #111827;
--ca-ink-2: #4b5563;
--ca-ink-3: #8a93a6;
--ca-line: #e6e8ef;
--ca-ok: #1e8e4b;
--ca-ok-bg: #e7f6ec;
--ca-warn: #b7791f;
--ca-warn-bg: #fdf3e1;
--ca-bad: #c0392b;
--ca-bad-bg: #fbe9e7;
--ca-radius: 18px;
--ca-radius-s: 12px;
--ca-shadow: 0 10px 30px -18px rgba(23, 31, 70, .35);
--ca-shadow-s: 0 4px 14px -10px rgba(23, 31, 70, .35);
--ca-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ca-tabbar-h: 66px;
--ca-safe-b: env(safe-area-inset-bottom, 0px);
}
html.ca-mode, html.ca-mode body { background: var(--ca-bg) !important; }
html.ca-mode body { padding-bottom: calc(var(--ca-tabbar-h) + var(--ca-safe-b) + 16px); }
html.ca-mode .ca-legacy { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
html.ca-mode footer, html.ca-mode .footer-area, html.ca-mode .footer-bottom { display: none !important; }
html.ca-mode .product-area > .container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; } /* JL 23/10 bootstrap metia 15px por lado encima de los 8 de la app */
#ca-app { font-family: var(--ca-font); color: var(--ca-ink); max-width: 640px; margin: 0 auto; padding: 0 10px; -webkit-font-smoothing: antialiased; }
#ca-app * { box-sizing: border-box; }
#ca-app a { text-decoration: none; }
#ca-app a:not([class]) { color: inherit; }
#ca-app button, .ca-tabbar, .ca-tabbar button, .ca-sheet, .ca-qr-full, .ca-toast { font-family: var(--ca-font); }
#ca-app h1, #ca-app h2, #ca-app h3 { margin: 0; font-family: var(--ca-font); color: var(--ca-ink); letter-spacing: -.01em; }
html.ca-mode svg.i, #ca-app svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
/* ---------- Barra superior ---------- */
.ca-top { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
/* JL -- 25/10/2026 -- selector de idiomas (GTranslate) en la fila Hola, pegado a la derecha y con el estilo de la app (pildora + lista); fuera del inicio no se pinta (no se monte sobre Chat) */
html.ca-mode .gtranslate_wrapper, html.ca-mode #gt_float_wrapper { display: none; }
html.ca-mode .ca-top-lang .gtranslate_wrapper, html.ca-mode .ca-top-lang #gt_float_wrapper { display: block; }
.ca-top-lang { flex: 0 0 auto; margin-left: auto; display: flex; justify-content: flex-end; }
.ca-top-lang #gt_float_wrapper { position: static !important; top: auto !important; right: auto !important; margin: 0 !important; z-index: 30 !important; }
.ca-top-lang .gt_float_switcher { position: relative !important; top: auto !important; right: auto !important; margin: 0 !important; width: auto !important; overflow: visible !important; font-family: var(--ca-font) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; color: var(--ca-ink-2) !important; background: var(--ca-surface) !important; border: 1px solid var(--ca-line) !important; border-radius: 999px !important; box-shadow: var(--ca-shadow-s) !important; line-height: 1 !important; }
.ca-top-lang .gt_float_switcher .gt-selected { background: transparent !important; border-radius: 999px !important; cursor: pointer; }
.ca-top-lang .gt_float_switcher .gt-selected .gt-current-lang { display: flex !important; align-items: center; gap: 6px; padding: 7px 10px 7px 8px !important; text-transform: uppercase; color: var(--ca-ink-2) !important; }
.ca-top-lang .gt_float_switcher img { width: 18px !important; height: 18px !important; border-radius: 50% !important; object-fit: cover; margin: 0 !important; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.ca-top-lang .gt_float_switcher .gt_options { position: absolute !important; right: 0; left: auto !important; top: calc(100% + 6px) !important; min-width: 160px; max-height: 60vh; overflow: auto; background: var(--ca-surface) !important; border: 1px solid var(--ca-line) !important; border-radius: 14px !important; box-shadow: var(--ca-shadow) !important; padding: 6px !important; z-index: 60 !important; }
.ca-top-lang .gt_float_switcher .gt_options a { display: flex !important; align-items: center; gap: 10px; padding: 9px 10px !important; border-radius: 10px !important; font-family: var(--ca-font) !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none; letter-spacing: 0; color: var(--ca-ink) !important; background: transparent !important; text-decoration: none !important; }
.ca-top-lang .gt_float_switcher .gt_options a:hover, .ca-top-lang .gt_float_switcher .gt_options a.gt-current { background: var(--ca-surface-2) !important; }
html.ca-mode .ca-top-lang #gt_float_wrapper, html.ca-mode .ca-top-lang #gt_float_wrapper .gt_float_switcher, html.ca-mode .ca-top-lang #gt_float_wrapper .gt-selected { transform: none !important; zoom: 1 !important; scale: none !important; } /* float.js lo encoge a scale(.5) en movil: se ve diminuto y descuadrado */
html.ca-mode .ca-top-lang #gt_float_wrapper .gt_float_switcher-arrow { width: 10px !important; height: 10px !important; margin-left: 2px; opacity: .7; }
html.ca-mode .ca-top-lang #gt_float_wrapper .gt_options { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* float.js la deja a opacity 0 */
.ca-avatar { width: 46px; height: 46px; border-radius: 16px; background: var(--ca-brand); color: var(--ca-brand-ink); display: grid; place-items: center; font-weight: 700; font-size: 18px; overflow: hidden; flex: 0 0 auto; }
.ca-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ca-top-txt { flex: 1; min-width: 0; }
.ca-top-txt .hi { font-size: 13px; color: var(--ca-ink-3); line-height: 1.1; }
.ca-top-txt .name { font-size: 22px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-iconbtn { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--ca-line); background: var(--ca-surface); color: var(--ca-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ca-shadow-s); transition: transform .12s ease, background .15s ease; }
.ca-iconbtn:active { transform: scale(.96); }
.ca-iconbtn.brand { background: var(--ca-brand); color: var(--ca-brand-ink); border-color: transparent; }
/* ---------- Tira de acciones (deslizable con el dedo) ---------- */
.ca-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 10px 14px; margin: 0 -10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ca-strip::-webkit-scrollbar { display: none; }
.ca-strip-item { scroll-snap-align: start; flex: 0 0 auto; min-width: 126px; padding: 12px 12px 11px; border-radius: 16px; background: var(--ca-surface); border: 1px solid var(--ca-line); box-shadow: var(--ca-shadow-s); display: flex; flex-direction: column; gap: 10px; transition: transform .12s ease; }
.ca-strip-item:active { transform: scale(.97); }
.ca-strip-item .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--ca-brand); color: var(--ca-brand-ink); display: grid; place-items: center; }
.ca-strip-item .ic svg.i { width: 20px; height: 20px; }
.ca-strip-item .t { font-size: 14px; font-weight: 600; line-height: 1.15; }
.ca-strip-item .s { font-size: 12px; color: var(--ca-ink-3); line-height: 1.15; margin-top: -6px; }
.ca-strip-item.alt .ic { background: var(--ca-surface-2); color: var(--ca-brand); }
/* ---------- Secciones y tarjetas ---------- */
.ca-sec { margin: 6px 0 18px; }
.ca-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.ca-sec-h h2 { font-size: 17px; font-weight: 700; }
.ca-sec-h a, .ca-sec-h button { font-size: 13px; font-weight: 600; color: var(--ca-brand); background: none; border: 0; padding: 0; cursor: pointer; }
.ca-card { background: var(--ca-surface); border-radius: var(--ca-radius); padding: 12px; box-shadow: var(--ca-shadow); border: 1px solid rgba(230, 232, 239, .7); }
.ca-card + .ca-card { margin-top: 10px; }
.ca-card.brand { background: var(--ca-brand); color: var(--ca-brand-ink); border: 0; }
.ca-card.brand h2, .ca-card.brand h3 { color: inherit; }
.ca-row { display: flex; align-items: center; gap: 12px; }
.ca-row .grow { flex: 1; min-width: 0; }
.ca-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ca-ink-3); }
.ca-card.brand .ca-kicker { color: rgba(255, 255, 255, .75); }
.ca-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.ca-sub { font-size: 13px; color: var(--ca-ink-2); line-height: 1.35; }
.ca-card.brand .ca-sub { color: rgba(255, 255, 255, .85); }
.ca-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ca-ink-2); margin-top: 6px; }
.ca-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ca-meta svg.i { width: 15px; height: 15px; }
.ca-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 8px; background: var(--ca-surface-2); color: var(--ca-ink-2); }
.ca-chip.c-ok { background: var(--ca-ok-bg); color: var(--ca-ok); }
.ca-chip.c-warn { background: var(--ca-warn-bg); color: var(--ca-warn); }
.ca-chip.c-bad { background: var(--ca-bad-bg); color: var(--ca-bad); }
.ca-chip.c-brand { background: var(--ca-brand); color: var(--ca-brand-ink); }
.ca-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 13px; font-size: 14px; font-weight: 600; border: 1px solid var(--ca-line); background: var(--ca-surface); color: var(--ca-ink); cursor: pointer; transition: transform .12s ease, filter .15s ease, background .15s ease; }
.ca-btn:active { transform: translateY(1px) scale(.99); }
.ca-btn.primary { background: var(--ca-brand); color: var(--ca-brand-ink); border-color: transparent; box-shadow: 0 10px 22px -12px var(--ca-brand); }
.ca-btn.primary:hover { filter: brightness(1.06); }
.ca-btn.ghost { background: transparent; border-color: transparent; color: var(--ca-brand); padding: 0 8px; }
.ca-btn.danger { color: var(--ca-bad); border-color: rgba(192, 57, 43, .35); background: transparent; }
.ca-btn.block { width: 100%; }
.ca-btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.ca-btn svg.i { width: 18px; height: 18px; }
.ca-card.brand .ca-btn { background: rgba(255, 255, 255, .14); color: var(--ca-brand-ink); border-color: rgba(255, 255, 255, .25); }
.ca-card.brand .ca-btn.primary { background: var(--ca-surface); color: var(--ca-brand); }
/* ---------- Rejilla de accesos (Mi cuenta) ---------- */
.ca-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ca-tile { background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 16px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: var(--ca-shadow-s); cursor: pointer; transition: transform .12s ease; position: relative; }
.ca-tile:active { transform: scale(.96); }
.ca-tile .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--ca-surface-2); color: var(--ca-brand); display: grid; place-items: center; }
.ca-tile .t { font-size: 12px; font-weight: 600; line-height: 1.15; color: var(--ca-ink-2); }
.ca-tile .badge { position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ca-brand); color: var(--ca-brand-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
/* ---------- Listas ---------- */
.ca-list { background: var(--ca-surface); border-radius: var(--ca-radius); box-shadow: var(--ca-shadow); border: 1px solid rgba(230, 232, 239, .7); overflow: hidden; }
.ca-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--ca-line); }
.ca-item:first-child { border-top: 0; }
.ca-item .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--ca-surface-2); color: var(--ca-brand); display: grid; place-items: center; flex: 0 0 auto; }
.ca-item .grow { flex: 1; min-width: 0; }
.ca-item .t { font-size: 15px; font-weight: 600; line-height: 1.2; }
.ca-item .s { font-size: 12.5px; color: var(--ca-ink-3); margin-top: 2px; }
.ca-item .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-item .v.c-neg { color: var(--ca-bad); }
.ca-item .v.c-pos { color: var(--ca-ok); }
.ca-item .chev { color: var(--ca-ink-3); }
.ca-item.link { cursor: pointer; }
.ca-item.link:active { background: var(--ca-surface-2); }
/* ---------- Segmentado ---------- */
.ca-seg { display: flex; background: #e9ebf2; border-radius: 12px; padding: 3px; margin: 0 0 12px; }
.ca-seg button { flex: 1; min-height: 36px; border: 0; background: transparent; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ca-ink-2); cursor: pointer; transition: background .15s ease, color .15s ease; }
.ca-seg button.on { background: var(--ca-surface); color: var(--ca-ink); box-shadow: var(--ca-shadow-s); }
/* ---------- Estado vacío ---------- */
.ca-empty { text-align: center; padding: 34px 18px 26px; }
.ca-empty .ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; background: var(--ca-surface-2); color: var(--ca-brand); display: grid; place-items: center; }
.ca-empty .ic svg.i { width: 30px; height: 30px; }
.ca-empty h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.ca-empty p { font-size: 14px; color: var(--ca-ink-2); margin: 0 auto 16px; max-width: 32ch; line-height: 1.4; }
/* ---------- Vista de sección ---------- */
.ca-view-h { display: flex; align-items: center; gap: 10px; padding: 12px 0 10px; position: sticky; top: 0; background: var(--ca-bg); z-index: 5; }
.ca-view-h h1 { font-size: 22px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-back { width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--ca-line); background: var(--ca-surface); display: grid; place-items: center; cursor: pointer; }
.ca-view-h .ca-btn.sm { margin-left: auto; }
/* ---------- Skeletons ---------- */
.ca-sk { background: linear-gradient(90deg, #e9ebf2 25%, #f3f4f8 50%, #e9ebf2 75%); background-size: 200% 100%; animation: ca-sk 1.2s infinite; border-radius: 10px; }
@keyframes ca-sk { to { background-position: -200% 0; } }
.ca-sk.line { height: 14px; margin: 8px 0; }
.ca-sk.card { height: 110px; border-radius: var(--ca-radius); }
/* ---------- QR ---------- */
.ca-qr-wrap { display: flex; align-items: center; gap: 14px; }
.ca-qr-wrap .qr { width: 104px; height: 104px; border-radius: 14px; background: #fff; padding: 6px; border: 1px solid var(--ca-line); flex: 0 0 auto; }
.ca-qr-wrap .qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ca-qr-full { position: fixed; inset: 0; z-index: 100001; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.ca-qr-full img { width: min(78vw, 360px); height: auto; image-rendering: pixelated; }
.ca-qr-full .name { font-size: 20px; font-weight: 700; }
.ca-qr-full .sub { font-size: 14px; color: var(--ca-ink-2); text-align: center; }
.ca-qr-full .close { position: absolute; top: 14px; right: 14px; }
.ca-qr-full .volver { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--ca-safe-b)); width: min(420px, calc(100% - 32px)); }
/* ---------- Hoja inferior ---------- */
.ca-sheet { position: fixed; inset: 0; z-index: 100000; background: rgba(17, 24, 39, .45); display: flex; align-items: flex-end; animation: ca-fade .15s ease; }
.ca-sheet-box { width: 100%; max-width: 560px; margin: 0 auto; background: var(--ca-surface); border-radius: 22px 22px 0 0; padding: 10px 16px calc(16px + var(--ca-safe-b)); animation: ca-up .2s ease; max-height: 86vh; overflow: auto; }
.ca-sheet-box:before { content: ''; display: block; width: 42px; height: 5px; border-radius: 3px; background: var(--ca-line); margin: 0 auto 12px; }
.ca-sheet-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.ca-sheet-item { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-top: 1px solid var(--ca-line); font-size: 15px; font-weight: 500; }
.ca-sheet-item .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--ca-surface-2); color: var(--ca-brand); display: grid; place-items: center; }
.ca-sheet-close { width: 100%; margin-top: 10px; }
@keyframes ca-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes ca-fade { from { opacity: 0; } to { opacity: 1; } }
/* ---------- Barra de pestañas inferior ---------- */
.ca-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--ca-line); box-shadow: 0 -8px 24px -18px rgba(23, 31, 70, .35); padding: 6px 6px calc(10px + var(--ca-safe-b)); /* JL 25/10 un poco mas de aire bajo el menu (PWA iPhone) */ display: flex; justify-content: space-around; align-items: flex-end; height: calc(var(--ca-tabbar-h) + var(--ca-safe-b)); }
.ca-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ca-ink-3); padding: 6px 0 2px; border: 0; background: none; cursor: pointer; }
.ca-tab svg.i { width: 24px; height: 24px; }
.ca-tab.on { color: var(--ca-brand); }
.ca-tab.center .bub { width: 54px; height: 54px; border-radius: 18px; background: var(--ca-brand); color: var(--ca-brand-ink); display: grid; place-items: center; margin-top: -26px; box-shadow: 0 12px 24px -10px var(--ca-brand); }
.ca-tab.center .bub svg.i { width: 26px; height: 26px; }
html.ca-mode .ias-fab { bottom: calc(var(--ca-tabbar-h) + var(--ca-safe-b) + 12px) !important; }
@media (min-width: 992px) { html.ca-mode .ias-fab { bottom: 20px !important; } }
/* ---------- Toast ---------- */
.ca-toast { z-index: 100002; position: fixed; left: 50%; bottom: calc(var(--ca-tabbar-h) + var(--ca-safe-b) + 18px); transform: translateX(-50%); background: var(--ca-ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; box-shadow: var(--ca-shadow); max-width: 90vw; }
/* ---------- Escritorio ---------- */
@media (min-width: 992px) {
html.ca-mode body { padding-bottom: 32px; }
.ca-tabbar { display: none; }
#ca-app { max-width: 1180px; padding: 0 24px; }
.ca-tabbar { position: static; height: auto; background: transparent; border: 0; backdrop-filter: none; justify-content: flex-start; gap: 6px; padding: 10px 0 0; }
.ca-tab { flex: 0 0 auto; flex-direction: row; gap: 8px; font-size: 14px; padding: 9px 14px; border-radius: 12px; }
.ca-tab.on { background: var(--ca-surface); box-shadow: var(--ca-shadow-s); }
.ca-tab.center .bub { width: auto; height: auto; margin: 0; background: transparent; color: inherit; box-shadow: none; }
.ca-tab.center .bub svg.i { width: 24px; height: 24px; }
.ca-strip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 12px 0; }
.ca-strip-item { min-width: 170px; }
.ca-grid { grid-template-columns: repeat(6, 1fr); }
.ca-home-2col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
.ca-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ca-cards-2 .ca-card + .ca-card { margin-top: 0; }
.ca-toast { bottom: 24px; }
}
/* ---------- Bloques antiguos reutilizados dentro de la app (formularios/listas que no se han reescrito) ---------- */
html.ca-mode .cg-hola, html.ca-mode .checkout-wrapper > h3 { display: none !important; }
.ca-legacy-block { font-family: var(--ca-font); }
.ca-legacy-block .panel-title, .ca-legacy-block h3.panel-title, .ca-legacy-block .my-account-title { display: none !important; }
.ca-legacy-block .product-wrap { border: 1px solid var(--ca-line) !important; border-radius: 16px !important; padding: 14px !important; background: var(--ca-surface) !important; margin-bottom: 12px !important; box-shadow: var(--ca-shadow-s) !important; transform: none !important; }
.ca-legacy-block .product-wrap > p[style*="absolute"] { position: static !important; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px !important; border-radius: 8px; margin: 0 6px 8px 0; background: var(--ca-surface-2) !important; color: var(--ca-ink-2) !important; }
.ca-legacy-block .product-wrap > p.cancelarReserva, .ca-legacy-block .product-wrap > p.cancelarActividad { background: var(--ca-bad-bg) !important; color: var(--ca-bad) !important; cursor: pointer; float: right; }
.ca-legacy-block .product-img h2, .ca-legacy-block .product-img h3, .ca-legacy-block .personaUso { text-align: left !important; font-size: 17px !important; font-weight: 700 !important; margin: 4px 0 !important; color: var(--ca-ink) !important; background: none !important; text-transform: none !important; }
.ca-legacy-block .product-img h3 small { font-size: 13px; color: var(--ca-ink-2); font-weight: 500; }
.ca-legacy-block .product-img img.default-img, .ca-legacy-block img.default-img { width: 140px !important; height: auto !important; margin: 8px auto; display: block; }
.ca-legacy-block .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 14px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; border: 1px solid var(--ca-line) !important; background: var(--ca-surface) !important; color: var(--ca-ink) !important; margin: 4px 4px 4px 0 !important; transform: none !important; width: auto !important; text-transform: none !important; box-shadow: none !important; }
.ca-legacy-block .btn-primary, .ca-legacy-block .btn-info, .ca-legacy-block .btn-warning, .ca-legacy-block .btn-success { background: var(--ca-brand) !important; color: var(--ca-brand-ink) !important; border-color: transparent !important; }
.ca-legacy-block .btn-danger { background: transparent !important; color: var(--ca-bad) !important; border-color: rgba(192, 57, 43, .35) !important; }
.ca-legacy-block .btn-block { width: 100% !important; }
.ca-legacy-block .form-control, .ca-legacy-block input[type=text], .ca-legacy-block input[type=password], .ca-legacy-block input[type=email], .ca-legacy-block input[type=tel], .ca-legacy-block input[type=date], .ca-legacy-block select, .ca-legacy-block textarea { width: 100%; min-height: 46px; border: 1px solid var(--ca-line) !important; border-radius: 12px !important; padding: 10px 12px !important; font-size: 15px !important; background: var(--ca-surface-2) !important; color: var(--ca-ink) !important; box-shadow: none !important; margin-bottom: 10px; }
.ca-legacy-block label { font-size: 12px; font-weight: 600; color: var(--ca-ink-3); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 4px; display: block; }
.ca-legacy-block table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ca-legacy-block table th { display: none; }
.ca-legacy-block table td { display: block; padding: 2px 0; border: 0; }
.ca-legacy-block table td:before { content: attr(data-label) ": "; color: var(--ca-ink-3); font-size: 12px; }
.ca-legacy-block table tr { display: block; padding: 10px 0; border-top: 1px solid var(--ca-line); }
.ca-legacy-block .row { margin: 0; }
.ca-legacy-block [class*="col-"] { padding: 0; width: 100%; max-width: 100%; flex: 0 0 100%; }
.ca-legacy-block .dataTables_wrapper .dataTables_length, .ca-legacy-block .dataTables_wrapper .dataTables_filter { display: none; }
.ca-legacy-block .billing-info-wrap, .ca-legacy-block .billing-info { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.ca-legacy-block .billing-info-wrap h3, .ca-legacy-block h3.panel-title { display: none; }
.ca-legacy-block .btn.btn-block.btn-danger.mb-3 { display: none !important; }
@media (min-width: 992px) { .ca-legacy-block table th { display: table-cell; font-size: 12px; color: var(--ca-ink-3); text-align: left; padding: 6px 8px; } .ca-legacy-block table td { display: table-cell; padding: 8px; } .ca-legacy-block table td:before { content: none; } .ca-legacy-block table tr { display: table-row; } }
/* En la app, los accesos rápidos del header público sobran en móvil (la tira deslizable los sustituye). */
@media (max-width: 991px) { html.ca-mode .header-shortcuts, html.ca-mode .header-top-area .header-shortcuts { display: none !important; } }
/* Títulos: el tema público pinta h1/h2 con bordes/decoraciones; dentro de la app, limpios. */
#ca-app h1, #ca-app h2, #ca-app h3 { border: 0 !important; padding: 0 !important; background: none !important; text-transform: none !important; }
#ca-app h1:before, #ca-app h1:after, #ca-app h2:before, #ca-app h2:after, #ca-app h3:before, #ca-app h3:after { content: none !important; display: none !important; }
.ca-legacy-block .containerEntradas { width: 100% !important; margin: 0 0 12px !important; padding: 14px !important; border-radius: 16px !important; box-shadow: none !important; border: 1px solid var(--ca-line) !important; }
.ca-legacy-block .ticket-details h1, .ca-legacy-block .ticket-details h2, .ca-legacy-block .containerEntradas h1, .ca-legacy-block .containerEntradas h2 { font-size: 18px !important; font-weight: 700 !important; margin: 0 0 8px !important; line-height: 1.25 !important; }
.ca-legacy-block .containerEntradas p { font-size: 14px !important; margin: 2px 0 !important; }
/* Chat de ayuda (IA): botón flotante visible, con texto, encima de la barra de pestañas. */
html.ca-mode .ias-fab { width: auto !important; height: 48px !important; border-radius: 24px !important; padding: 0 16px 0 12px !important; display: inline-flex !important; align-items: center; gap: 8px; font-family: var(--ca-font) !important; font-weight: 700; font-size: 14px; right: 14px !important; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45) !important; }
html.ca-mode .ias-fab svg { width: 22px !important; height: 22px !important; }
html.ca-mode .ias-fab:after { content: 'Ayuda'; letter-spacing: .01em; }
html.ca-mode .ias-panel { z-index: 100003 !important; }
.ca-help { display: flex; align-items: center; gap: 12px; }
.ca-help .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--ca-brand); color: var(--ca-brand-ink); display: grid; place-items: center; flex: 0 0 auto; }
.ca-help .ca-btn { white-space: nowrap; }
/* Vista 'Más': lista completa de secciones como página (no hoja), con la ayuda arriba. */
.ca-mas .ca-item { padding: 15px 16px; }
.ca-mas .ca-item .t { font-size: 16px; }
/* Móvil: la franja blanca del header público (hamburguesa + accesos) sobra dentro de la app; queda solo la barra de marca. */
@media (max-width: 991px) { html.ca-mode .header-area1 .header-top-area { display: none !important; } }
/* Tarjeta de bono con contexto: banda de color por tipo, lugares y descripción. */
.ca-bono { border-left: 5px solid var(--ca-brand); }
.ca-bono.t-sus { border-left-color: #1e8e4b; }
.ca-bono.t-res { border-left-color: #b7791f; }
.ca-bono.t-dia { border-left-color: #6b7280; }
.ca-bono.t-act { border-left-color: #0e7490; }
.ca-bono.t-eve { border-left-color: #7c3aed; }
.ca-bono.caducado { opacity: .75; border-left-color: #c8ccd6; }
.ca-bono .ca-desc { font-size: 13px; color: var(--ca-ink-2); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ca-bono .lugares { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ca-bono .lugares span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; background: var(--ca-surface-2); color: var(--ca-ink-2); }
/* ===== Cabecera propia de la app (sustituye al header público y a la barra inferior) ===== */
html.ca-mode header.header-area1, html.ca-mode .header-area1 { display: none !important; }
html.ca-mode body { padding-top: 0 !important; }
/* JL 24/10 la franja superior (logo + ayto + carrito + avatar) con fondo propio para que se lea como otra seccion; la nav queda sobre el fondo de la pagina */
.ca-appbar { position: sticky; top: 0; z-index: 40; background: var(--ca-bg); margin: 0 -10px; padding: 0; border-bottom: 1px solid var(--ca-line); }
.ca-appbar-row { display: flex; align-items: center; gap: 10px; background: var(--ca-surface); padding: 10px 16px; /* JL 25/10 PWA iPhone: logo y Chat pegados al borde; mismo margen lateral que el contenido */ border-bottom: 1px solid var(--ca-line); box-shadow: 0 6px 16px -14px rgba(20, 30, 60, .35); }
.ca-appbar .ca-nav { padding: 10px 20px; } /* JL -- 25/10/2026 -- la appbar sangra 10px fuera del contenedor: 20px deja 'Inicio' alineado con el contenido */
.ca-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ca-brand img { height: 30px; width: auto; max-width: 90px; object-fit: contain; }
.ca-iconbtn { position: relative; text-decoration: none; }
.ca-iconbtn .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ca-bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--ca-bg); }
.ca-brand .n { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-avatar.sm { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; cursor: pointer; }
.ca-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 10px; }
.ca-nav::-webkit-scrollbar { display: none; }
.ca-nav-item { transition: none !important; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 8px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ca-ink-2); background: transparent; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.ca-nav-item svg.i { width: 18px; height: 18px; }
.ca-nav-item .caret { width: 14px; height: 14px; opacity: .6; }
.ca-nav-item:hover { background: var(--ca-surface); }
.ca-nav-item.on { background: var(--ca-brand); color: var(--ca-brand-ink); box-shadow: 0 8px 18px -10px var(--ca-brand); }
.ca-nav-item.open { background: var(--ca-surface); border-color: var(--ca-line); color: var(--ca-ink); }
.ca-pop { position: absolute; left: 8px; right: 8px; top: 100%; margin-top: 4px; max-height: calc(100vh - 140px); overflow-y: auto; -webkit-overflow-scrolling: touch; /* JL 25/10 PC: el desplegable Mi cuenta es mas alto que la pantalla y se cortaba */ background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 16px; box-shadow: var(--ca-shadow); padding: 6px; z-index: 45; animation: ca-up .15s ease; }
.ca-pop a, .ca-pop button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; background: none; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ca-ink); text-align: left; cursor: pointer; }
.ca-pop a:hover, .ca-pop button:hover { background: var(--ca-surface-2); }
.ca-pop .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--ca-surface-2); color: var(--ca-brand); display: grid; place-items: center; flex: 0 0 auto; }
.ca-pop .s { font-size: 12px; color: var(--ca-ink-3); font-weight: 500; }
.ca-pop .grow { flex: 1; min-width: 0; }
.ca-pop-bg { position: fixed; inset: 0; z-index: 39; }
@media (min-width: 992px) {
.ca-appbar { margin: 0 -24px; padding: 0; }
.ca-appbar-row { padding: 12px 24px; }
.ca-appbar .ca-nav { padding: 10px 24px; }
.ca-pop { left: auto; right: auto; width: 320px; }
.ca-brand img { height: 36px; max-width: 160px; }
.ca-nav { gap: 8px; }
.ca-nav-item { min-height: 40px; font-size: 15px; }
}
/* Detalle de factura en hoja */
.ca-fac-lineas { margin: 10px 0; }
.ca-fac-lineas .ln { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ca-line); font-size: 14px; }
.ca-fac-lineas .ln:first-child { border-top: 0; }
.ca-fac-lineas .ln .d { flex: 1; min-width: 0; color: var(--ca-ink-2); }
.ca-fac-lineas .ln .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ca-fac-tot { display: flex; justify-content: space-between; padding: 10px 0 4px; border-top: 2px solid var(--ca-ink); font-weight: 700; font-size: 16px; }
.ca-sheet .ca-actions { margin-top: 12px; }
/* ===== Flujos: reservar, comprar, actividad, recarga, datos ===== */
.ca-pasos { display: flex; gap: 6px; margin: 0 0 14px; }
.ca-pasos .p { cursor: pointer; flex: 1; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ca-ink-3); padding: 6px 8px; border-radius: 10px; background: var(--ca-surface); border: 1px solid var(--ca-line); white-space: nowrap; overflow: hidden; }
.ca-pasos .p i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--ca-surface-2); display: grid; place-items: center; font-size: 11px; flex: 0 0 auto; }
.ca-pasos .p.on { color: var(--ca-ink); border-color: var(--ca-brand); }
.ca-pasos .p.on i, .ca-pasos .p.done i { background: var(--ca-brand); color: var(--ca-brand-ink); }
.ca-pista .ic, .ca-act .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--ca-surface-2); color: var(--ca-brand); display: grid; place-items: center; flex: 0 0 auto; }
.ca-pista { cursor: pointer; }
.ca-pista:active { transform: scale(.99); }
.ca-pista.con-bono { border-left: 5px solid var(--ca-ok); }
.ca-dias { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 12px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; scroll-snap-type: x mandatory; }
.ca-dias::-webkit-scrollbar { display: none; }
.ca-dia { scroll-snap-align: start; flex: 0 0 auto; width: 58px; padding: 8px 0 7px; border-radius: 14px; border: 1px solid var(--ca-line); background: var(--ca-surface); display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; font-family: inherit; color: var(--ca-ink); }
.ca-dia .d { font-size: 11px; font-weight: 600; color: var(--ca-ink-3); text-transform: uppercase; }
.ca-dia .n { font-size: 20px; font-weight: 700; line-height: 1.1; }
.ca-dia .m { font-size: 11px; color: var(--ca-ink-3); }
.ca-dia.on { background: var(--ca-brand); border-color: transparent; color: var(--ca-brand-ink); box-shadow: 0 8px 18px -10px var(--ca-brand); }
.ca-dia.on .d, .ca-dia.on .m { color: rgba(255, 255, 255, .8); }
.ca-dia.off { opacity: .35; cursor: not-allowed; }
.ca-horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ca-hora { border: 1px solid var(--ca-line); background: var(--ca-surface); border-radius: 14px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-family: inherit; color: var(--ca-ink); box-shadow: var(--ca-shadow-s); }
.ca-hora .h { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ca-hora .s { font-size: 11px; color: var(--ca-ok); font-weight: 600; }
.ca-hora.off { opacity: .45; cursor: not-allowed; box-shadow: none; background: var(--ca-surface-2); }
.ca-hora.off .s { color: var(--ca-ink-3); }
.ca-hora.carrito { border-color: var(--ca-warn); }
.ca-hora.carrito .s { color: var(--ca-warn); }
.ca-hora:not(.off):active { transform: scale(.97); }
.ca-dur { margin: 4px 0 10px; }
.ca-dur .ca-seg { margin-top: 6px; }
.ca-supl { margin: 4px 0 8px; }
.ca-check { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ca-line); font-size: 14px; cursor: pointer; }
.ca-check input { width: 20px; height: 20px; accent-color: var(--ca-brand); }
.ca-check .v { font-weight: 600; color: var(--ca-ink-2); }
.ca-input { width: 100%; min-height: 46px; border: 1px solid var(--ca-line); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 15px; background: var(--ca-surface-2); color: var(--ca-ink); outline: none; }
.ca-input:focus { border-color: var(--ca-brand); background: var(--ca-surface); }
.ca-input.ro { color: var(--ca-ink-3); }
.ca-field { margin: 0 0 12px; }
.ca-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ca-ink-3); margin: 0 0 5px 2px; }
.ca-form { margin-top: 14px; }
.ca-details { margin: 6px 0 12px; }
.ca-details summary { cursor: pointer; font-weight: 600; color: var(--ca-brand); padding: 8px 0; list-style: none; }
.ca-details summary::-webkit-details-marker { display: none; }
.ca-details summary:before { content: '+ '; }
.ca-details[open] summary:before { content: '− '; }
.ca-montos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 10px; }
.ca-monto { min-height: 46px; border-radius: 12px; border: 1px solid var(--ca-line); background: var(--ca-surface); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; color: var(--ca-ink); }
.ca-monto.on { background: var(--ca-brand); color: var(--ca-brand-ink); border-color: transparent; }
.ca-sheet .ca-kicker { margin-top: 12px; }
.ca-tarifa .ca-tarifa-img { margin: -14px -14px 12px; height: 120px; overflow: hidden; border-radius: var(--ca-radius) var(--ca-radius) 0 0; background: var(--ca-surface-2); }
.ca-tarifa .ca-tarifa-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-tarifa .ca-precio { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ca-tarifa .lugares { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ca-tarifa .lugares span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; background: var(--ca-surface-2); color: var(--ca-ink-2); }
.ca-tarifa .ca-desc { font-size: 13px; color: var(--ca-ink-2); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ca-tarifa .ca-actions { flex-direction: column; align-items: stretch; }
.ca-act .thumb { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.ca-act .ca-row { cursor: pointer; }
@media (min-width: 992px) { .ca-horas { grid-template-columns: repeat(6, 1fr); } .ca-dias { margin: 0; padding-left: 0; padding-right: 0; } }
/* Modal centrado (facturas y confirmaciones): en vez de hoja pegada abajo */
.ca-sheet.modal { align-items: center; justify-content: center; padding: 16px; }
.ca-sheet.modal .ca-sheet-box { border-radius: 20px; max-width: 520px; max-height: 90vh; padding: 18px 18px calc(16px + var(--ca-safe-b)); animation: ca-up .18s ease; }
.ca-sheet.modal .ca-sheet-box:before { display: none; }
.ca-sheet.modal .ca-sheet-title { font-size: 18px; margin-bottom: 4px; }
/* Filtros en chips */
.ca-filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.ca-filtros::-webkit-scrollbar { display: none; }
.ca-filtro { flex: 0 0 auto; min-height: 34px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--ca-line); background: var(--ca-surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--ca-ink-2); cursor: pointer; }
.ca-filtro.on { background: var(--ca-ink); color: #fff; border-color: transparent; }
/* Bono: dónde vale, destacado */
.ca-bono .donde { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ca-surface-2); font-size: 13px; line-height: 1.4; }
.ca-bono .donde svg.i { width: 18px; height: 18px; margin-top: 1px; color: var(--ca-brand); }
.ca-bono .donde b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ca-ink-3); margin-bottom: 2px; }
@media (min-width: 992px) { .ca-filtros { margin: 0; padding-left: 0; padding-right: 0; } }
/* Ventanas antiguas (Bootstrap) abiertas desde la app: mismo aire que el resto */
html.ca-mode .modal { z-index: 100010 !important; }
html.ca-mode .modal-backdrop { z-index: 100005 !important; }
html.ca-mode .modal-content { border-radius: 18px; border: 0; font-family: var(--ca-font); }
html.ca-mode .modal-content .btn { border-radius: 12px; font-weight: 600; }
/* Móvil: en la cabecera solo los desplegables (Inicio va en la barra de abajo y Ayuda en la pastilla) */
@media (max-width: 991px) { .ca-nav-item[data-id="cuenta"], .ca-nav-item[data-id="ayuda"] { display: none; } .ca-nav { justify-content: space-between; } .ca-nav-item { flex: 1 1 0; justify-content: center; padding: 0 4px; } }
/* Entradas / eventos */
.ca-entrada { border-left: 5px solid #7c3aed; }
.ca-entrada.t-dia { border-left-color: #6b7280; }
.ca-evento .ca-evento-img { margin: -12px -12px 12px; height: 150px; overflow: hidden; border-radius: var(--ca-radius) var(--ca-radius) 0 0; background: var(--ca-surface-2); }
.ca-evento .ca-evento-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-evento .ses { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ca-line); font-size: 14px; }
.ca-evento .ses .grow { flex: 1; min-width: 0; }
.ca-evento .ses .s { font-size: 12px; color: var(--ca-ink-3); }
/* Perfiles */
.ca-perfil .tramo { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--ca-ink-2); padding: 8px 0; border-top: 1px solid var(--ca-line); }
.ca-perfil .dias span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ca-surface-2); color: var(--ca-ink-3); font-size: 11px; font-weight: 700; margin-right: 2px; }
.ca-perfil .dias span.on { background: var(--ca-brand); color: var(--ca-brand-ink); }
/* Reserva: acciones en una sola fila, compactas; cancelar como enlace debajo */
.ca-res .ca-actions, .ca-card.brand .ca-actions { flex-wrap: nowrap; gap: 6px; }
.ca-res .ca-actions .ca-btn, .ca-card.brand .ca-actions .ca-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13px; min-height: 40px; white-space: nowrap; }
.ca-res .ca-actions .ca-btn svg.i, .ca-card.brand .ca-actions .ca-btn svg.i { width: 16px; height: 16px; }
.ca-res .ca-cancel { margin-top: 6px; font-size: 13px; min-height: 32px; }
@media (max-width: 991px) { .ca-nav-item { font-size: 13px; gap: 4px; padding: 0 2px; } .ca-nav-item .caret { width: 12px; height: 12px; } .ca-nav-item svg.i { width: 17px; height: 17px; } }
.ca-personas { margin: 8px 0 4px; }
.ca-personas .ca-field { position: relative; margin-bottom: 8px; }
.ca-personas .ca-btn.ghost.sm { margin-top: 2px; }
.ca-sug { position: absolute; left: 0; right: 0; top: 48px; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 12px; box-shadow: var(--ca-shadow); z-index: 5; max-height: 220px; overflow: auto; }
.ca-sug:empty { display: none; }
.ca-sug-item { padding: 10px 12px; font-size: 14px; cursor: pointer; border-top: 1px solid var(--ca-line); }
.ca-sug-item .ca-sub { font-size: 12px; }
.ca-sug.static { position: static; margin-top: 8px; max-height: 50vh; overflow: auto; }
.ca-sug-item:first-child { border-top: 0; }
.ca-sug-item:hover { background: var(--ca-surface-2); }
.ca-bono .lugar-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 55%; }
.ca-bono .lugar-chips .ca-chip { border-radius: 999px; }
.ca-filtrobar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 0 12px; }
.ca-filtro-grupo { margin: 6px 0 10px; }
.ca-filtro-opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ca-seg.ca-seg-scroll { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.ca-seg.ca-seg-scroll::-webkit-scrollbar { display: none; }
.ca-seg.ca-seg-scroll button { flex: 0 0 auto; padding: 0 14px; }
.ca-chip.chip-varios { border: 0; cursor: pointer; font-family: inherit; }
/* Bonos: acciones en una sola fila compacta (QR · Opciones · Cancelar) */
.ca-bono .ca-actions { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ca-bono .ca-actions::-webkit-scrollbar { display: none; }
.ca-bono .ca-actions .ca-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13px; min-height: 40px; white-space: nowrap; }
.ca-bono .ca-actions .ca-btn svg.i { width: 16px; height: 16px; }
.ca-eleccion { display: grid; gap: 12px; }
.ca-eleccion-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; font-family: inherit; padding: 18px 14px; }
.ca-eleccion-item .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--ca-brand); color: var(--ca-brand-ink); display: grid; place-items: center; flex: 0 0 auto; }
.ca-eleccion-item .ic svg.i { width: 26px; height: 26px; }
.ca-eleccion-item .ca-title { font-size: 18px; }
.ca-eleccion-item:active { transform: scale(.99); }
.ca-pdf { margin: 10px 0 0; border: 1px solid var(--ca-line); border-radius: 12px; overflow: hidden; background: var(--ca-surface-2); }
.ca-pdf iframe { display: block; width: 100%; height: 52vh; border: 0; }
.ca-sheet.modal .ca-sheet-box { max-height: 94vh; }
.ca-entrada .ca-actions { flex-wrap: nowrap; gap: 6px; }
.ca-entrada .ca-actions .ca-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13px; min-height: 40px; white-space: nowrap; }
/* JL 24/10 chip 'Más días' de la tira de reservas */
.ca-dia.mas { border-style: dashed; color: var(--ca-brand); }
.ca-dia.mas .n { font-size: 0; height: 22px; display: grid; place-items: center; }
.ca-dia.mas .n svg { width: 20px; height: 20px; }
/* JL 24/10 Ayuda en la cabecera; el FAB flotante de chat se oculta en la app (sigue en carrito/eventos) */
.ca-iconbtn.ca-ayuda { width: auto; padding: 0 12px 0 10px; gap: 6px; display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; font-family: inherit; }
.ca-iconbtn.ca-ayuda svg.i { width: 20px; height: 20px; }
html.ca-mode:not(.ca-checkout) .ias-fab { opacity: 0 !important; pointer-events: none !important; }
html.ca-mode:not(.ca-checkout) .ias-panel { bottom: calc(var(--ca-tabbar-h) + var(--ca-safe-b) + 8px) !important; }
/* JL 24/10 filas de filtros segmentados */
.ca-segrows { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.ca-segrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ca-segrow .lbl { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--ca-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.ca-segrow .ca-seg { flex: 1; min-width: 0; }
/* JL 24/10 avatar junto al saludo */
.ca-avatar.hola { width: 52px; height: 52px; border-radius: 16px; font-size: 18px; cursor: pointer; flex: 0 0 auto; }
.ca-avatar.hola img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* JL 24/10 buscador con lupa */
.ca-buscar { display: flex; align-items: center; gap: 8px; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 14px; padding: 0 10px 0 12px; min-height: 46px; margin: 0 0 10px; box-shadow: var(--ca-shadow-s); }
.ca-buscar svg.i { width: 20px; height: 20px; color: var(--ca-ink-3); flex: 0 0 auto; }
.ca-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; outline: none; min-height: 44px; }
.ca-buscar .x { border: 0; background: var(--ca-surface-2); color: var(--ca-ink-2); width: 26px; height: 26px; border-radius: 13px; font-size: 16px; line-height: 1; cursor: pointer; }
.ca-sheet .res .ca-kicker { margin: 12px 0 6px; }
.ca-sheet .ca-buscar { margin-top: 8px; }
/* JL 24/10 lupa compacta + linea desplegable */
.ca-lupa { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ca-line); background: var(--ca-surface); color: var(--ca-ink-2); display: grid; place-items: center; cursor: pointer; }
.ca-lupa.on { background: var(--ca-brand); color: var(--ca-brand-ink); border-color: transparent; }
.ca-lupa svg.i { width: 20px; height: 20px; }
.ca-buscar.oculto { display: none; }
.ca-segrow .ca-seg { margin: 0; }
/* JL 24/10 TOP APP (novedades del ayuntamiento) */
/* JL -- 25/10/2026 -- Novedades: la 1a tarjeta alineada con el contenido (antes pegada al borde) y la siguiente asoma hasta el borde de la pantalla */
.ca-top-tira { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 10px; padding: 2px 10px 8px; margin: 0 -10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ca-top-tira::-webkit-scrollbar { display: none; }
.ca-topcard { scroll-snap-align: start; flex: 0 0 82%; max-width: 340px; display: flex; flex-direction: column; background: var(--ca-surface); border-radius: var(--ca-radius); border: 1px solid rgba(230, 232, 239, .7); box-shadow: var(--ca-shadow); overflow: hidden; text-decoration: none !important; color: var(--ca-ink); }
.ca-top-tira.una .ca-topcard { flex: 1 1 100%; max-width: none; }
.ca-topcard .img { height: 120px; background: var(--ca-surface-2); } .ca-topcard .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-topcard .body { padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ca-topcard .t { font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.ca-topcard .d { font-size: 13px; color: var(--ca-ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ca-topcard .ca-btn { margin-top: auto; align-self: flex-start; pointer-events: none; }
.ca-chip.c-brand { background: var(--ca-brand); color: var(--ca-brand-ink); }
@media (min-width: 992px) { .ca-top-tira { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0 0 6px; } .ca-topcard { flex: 1 1 280px; max-width: none; } }
.ca-topcard .body .ca-chip { align-self: flex-start; }
/* JL 24/10 filtros en una linea con desplegables (eventos) */
.ca-selrow { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; min-width: 0; }
.ca-selrow .ca-buscar { flex: 1 1 100%; }
.ca-sel { flex: 1 1 0; min-width: 0; min-height: 40px; border: 1px solid var(--ca-line); border-radius: 12px; background: var(--ca-surface) url("data:image/svg+xml;utf8,") no-repeat right 8px center/16px; padding: 0 28px 0 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ca-ink); -webkit-appearance: none; appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-sel.on { border-color: var(--ca-brand); color: var(--ca-brand); background-color: color-mix(in srgb, var(--ca-brand) 8%, var(--ca-surface)); }
.ca-selrow { flex-wrap: wrap; } .ca-selrow .ca-lupa { flex: 0 0 40px; } .ca-selrow .ca-sel { flex: 1 1 0; width: 0; min-width: 0; } .ca-selrow .ca-buscar { order: 9; flex: 1 1 100%; margin: 4px 0 0; }
/* JL 24/10 saludo en UNA linea pequeña (un tercio de alto) */
#ca-app .ca-top { padding: 8px 0 2px; gap: 8px; }
#ca-app .ca-top .ca-avatar.hola { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
#ca-app .ca-top-txt { display: flex; align-items: baseline; gap: 5px; }
#ca-app .ca-top-txt .hi { font-size: 14px; line-height: 1; }
#ca-app .ca-top-txt .name { font-size: 14px; font-weight: 700; line-height: 1; }
/* //JL -- 24/10/2026 -- personal: hoja "Opciones de personal" con la tarjeta ANTIGUA real dentro (sus inputs y handlers) */
.ca-btn.ca-staff-btn, .ca-staff-btn { border-style: dashed !important; }
.ca-staff-sheet .ca-sheet-title .i { width: 18px; height: 18px; vertical-align: -3px; color: var(--ca-brand); }
.ca-staff-holder { margin-top: 10px; display: block !important; position: static !important; width: auto !important; height: auto !important; overflow: visible !important; left: auto !important; }
.ca-staff-holder .product-wrap, .ca-staff-holder .product-content, .ca-staff-holder form, .ca-staff-holder .col-md-6 { display: block !important; visibility: visible !important; opacity: 1 !important; }
.ca-staff-holder .product-wrap { margin: 0 !important; }
.ca-staff-holder .createUser { width: 100%; min-height: 46px; border: 1px solid var(--ca-line); border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--ca-surface-2); margin: 4px 0 8px; }
.ca-staff-holder .createUser.error { border-color: var(--ca-bad); }
.ca-staff-holder .ntarjeta { margin: 8px 0; }
.ca-staff-holder .ntarjeta.success { border-color: #1e9e5a !important; box-shadow: 0 0 0 2px rgba(30, 158, 90, .25); }
.ca-staff-holder .btnBorrar { cursor: pointer; }
.ca-staff-holder #monForm { max-width: none !important; }
.ca-staff-holder h1 { font-size: 30px; font-weight: 700; margin: 4px 0 10px; text-align: center; }
.ca-staff-card .ca-kicker .i { width: 14px; height: 14px; vertical-align: -2px; }
/* una ventana antigua (Bootstrap) abierta desde la hoja de personal debe quedar POR ENCIMA de la hoja */
body.modal-open .ca-sheet.ca-staff-sheet { z-index: 100004 !important; }
/*JL -- 24/10/2026 -- aviso en rojo dentro de un sheet (QR personal no compartible)*/
.ca-sheet-aviso{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:#fdecec;color:#b42318;font-size:13px;line-height:1.4;font-weight:500}
/*JL -- 24/10/2026 -- comprar entrada: dia + cantidad en una linea, compacto*/
.ca-ent-opts{display:flex;gap:10px;align-items:flex-end;margin:4px 0 10px;width:100%}
.ca-ent-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.ca-ent-cant{flex:0 0 auto}
.ca-ent-lab{font-size:12px;font-weight:600;color:var(--ca-ink-3);margin:0}
.ca-ent-in{height:42px;padding:6px 10px;font-size:15px;width:100%;box-sizing:border-box}
.ca-stepper{display:flex;align-items:center;height:42px;border:1px solid var(--ca-line);border-radius:12px;overflow:hidden;background:var(--ca-surface,#fff)}
.ca-stepper button{width:38px;height:100%;border:0;background:none;font-size:20px;line-height:1;color:var(--ca-brand);cursor:pointer}
.ca-stepper button:active{background:rgba(0,0,0,.05)}
.ca-stepper input{width:38px;height:100%;border:0;text-align:center;font-size:15px;font-weight:600;padding:0;-moz-appearance:textfield;background:none}
.ca-stepper input::-webkit-outer-spin-button,.ca-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/*JL -- 24/10/2026 -- MONITOR: pasar lista, chat monitor<->alumno, perfiles*/
.ca-mon-cnt{margin:12px 2px 8px;font-weight:600;color:var(--ca-ink-2)}
.ca-mon-lista .ca-item{gap:10px}
.ca-mon-lista .ca-item.on{background:rgba(31,157,85,.07)}
.ca-avatar.sm{width:38px;height:38px;font-size:15px;flex:0 0 38px;overflow:hidden}
.ca-avatar.sm img{width:100%;height:100%;object-fit:cover}
.ca-mon-sw{border:1px solid var(--ca-line);background:var(--ca-surface,#fff);color:var(--ca-ink-2);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px;cursor:pointer;min-width:92px;justify-content:center}
.ca-mon-sw svg{width:15px;height:15px}
.ca-mon-lista .ca-item.on .ca-mon-sw{background:#1f9d55;border-color:#1f9d55;color:#fff}
.ca-mon-sw:disabled{opacity:.55;cursor:default}
.ca-iconbtn.sm{width:36px;height:36px;flex:0 0 36px}
.ca-mon-hora{font-size:12px;color:var(--ca-ink-3);margin-left:6px;white-space:nowrap}
.ca-mon-badge,.ca-monmsg-badge{background:#25d366;color:#fff;border-radius:999px;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;margin-left:6px}
.ca-ayuda .ca-monmsg-badge{position:absolute;top:-6px;right:-6px;margin:0}
.ca-item.unread .t{font-weight:700}
.ca-mon-chat{display:flex;flex-direction:column;height:calc(100dvh - 300px - env(safe-area-inset-bottom));min-height:300px;margin-bottom:12px;background:#efeae2;border-radius:16px;overflow:hidden}
.ca-mon-msgs{flex:1 1 auto;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.ca-mon-vacio{margin:auto;text-align:center;max-width:260px}
.ca-mon-msg{max-width:80%;align-self:flex-start;background:#fff;border-radius:12px 12px 12px 4px;padding:7px 10px 4px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.ca-mon-msg.mio{align-self:flex-end;background:#d9fdd3;border-radius:12px 12px 4px 12px}
.ca-mon-msg .tx{white-space:pre-wrap;word-wrap:break-word;font-size:15px;line-height:1.35}
.ca-mon-msg .hr{font-size:11px;color:#667781;text-align:right;margin-top:2px}
.ca-mon-form{display:flex;gap:8px;padding:8px;background:#f0f2f5;align-items:flex-end}
.ca-mon-form textarea{flex:1 1 auto;border:0;border-radius:20px;padding:10px 14px;font-size:16px;resize:none;max-height:120px;background:#fff;font-family:inherit}
.ca-mon-form .ca-btn{border-radius:50%;width:44px;height:44px;padding:0;flex:0 0 44px;justify-content:center}
.ca-mon-franjas{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.ca-mon-chk{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid var(--ca-line);border-radius:12px;font-size:14px;cursor:pointer}
.ca-mon-chk input{margin-top:3px;width:18px;height:18px;flex:0 0 18px}
.ca-mon-home{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-bottom:12px;border-left:4px solid #1f9d55}
.ca-mon-home .ic{color:#1f9d55}
/*JL -- 24/10/2026 -- fichas de actividad / evento y noticias (Top App)*/
.ca-tap{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.ca-tap:active{transform:scale(.99)}
.ca-ficha{overflow:hidden}
.ca-ficha-img{margin:-12px -12px 12px;max-height:260px;overflow:hidden;background:var(--ca-surface-2)}
.ca-ficha-img img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.ca-ficha-t{font-size:21px;line-height:1.2;font-weight:800;margin:10px 0 6px;color:var(--ca-ink);text-wrap:balance}
.ca-ficha-d{margin-bottom:8px}
.ca-ficha-obs{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--ca-surface-2)}
.ca-html{font-size:15px;line-height:1.55;color:var(--ca-ink-2);margin-top:10px;overflow-wrap:anywhere}
.ca-html h2{font-size:18px;font-weight:800;margin:14px 0 6px;color:var(--ca-ink)}
.ca-html h3,.ca-html h4{font-size:16px;font-weight:700;margin:12px 0 6px;color:var(--ca-ink)}
.ca-html p{margin:0 0 10px}
.ca-html ul,.ca-html ol{margin:0 0 10px;padding-left:22px}.ca-html ul{list-style:disc}.ca-html ol{list-style:decimal}.ca-html li{display:list-item}
.ca-html li{margin:2px 0}
.ca-html img{max-width:100%;height:auto;border-radius:12px;display:block;margin:8px 0}
.ca-html a{color:var(--ca-brand);text-decoration:underline}
.ca-html blockquote{margin:8px 0;padding:6px 12px;border-left:3px solid var(--ca-brand);background:var(--ca-surface-2);border-radius:0 10px 10px 0}
/*JL -- 24/10/2026 -- comprar entrada: en Safari el input date tiene ancho minimo propio y montaba encima del selector. Rejilla
dia | entradas: el dia ocupa la mitad libre (puede encogerse) y el selector su ancho fijo*/
.ca-ent-opts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.ca-ent-col{min-width:0}
.ca-ent-in{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;display:block}
.ca-ent-in::-webkit-date-and-time-value{text-align:left}
.ca-ent-opts .ca-ent-in{height:42px;min-height:42px;line-height:28px;padding:6px 12px;box-sizing:border-box}
/*JL -- 24/10/2026 -- monitor v2: pasar lista con check (nadie marcado de inicio), buscador, badge rojo, perfiles como backoffice*/
.ca-mon-cnt b{font-size:18px;color:var(--ca-ink)}
.ca-mon-buscar{margin:0 0 10px}
.ca-mon-fila{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.ca-mon-fila .s.st{font-size:12px;color:var(--ca-ink-3)}
.ca-mon-fila.on .s.st{color:#1f7a3a;font-weight:600}
.ca-mon-ok{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:2px solid var(--ca-line);display:inline-flex;align-items:center;justify-content:center;background:var(--ca-surface,#fff);transition:all .15s}
.ca-mon-ok svg{width:20px;height:20px;color:#fff}
.ca-mon-fila.on .ca-mon-ok{background:#1f9d55;border-color:#1f9d55}
.ca-mon-av{position:relative;flex:0 0 auto;display:inline-flex}
.ca-mon-rojo{position:absolute;top:-5px;left:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e5322d;color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 0 2px var(--ca-surface,#fff)}
.ca-mon-linea{margin:10px 0;padding:12px}
.ca-mon-linea .ca-kicker{margin-top:8px}
.ca-mon-dias{display:flex;gap:6px;flex-wrap:wrap}
.ca-mon-dias button{width:38px;height:38px;border-radius:50%;border:1px solid var(--ca-line);background:var(--ca-surface,#fff);font-weight:700;color:var(--ca-ink-2);cursor:pointer}
.ca-mon-dias button.on{background:var(--ca-brand);border-color:var(--ca-brand);color:#fff}
.ca-mon-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.ca-mon-2col .ca-input{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
/*JL -- 24/10/2026 -- MI EVOLUCION (peso, IMC, medidas) + aviso "Te toca pesarte" en el inicio*/
.ca-pesate{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;border:1px solid #f3d7a3;background:#fffaf0;margin-bottom:12px}
.ca-pesate .ic{width:40px;height:40px;border-radius:12px;background:#fdf3e1;color:#b7791f;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ca-pesate .ic svg{width:22px;height:22px}
.ca-pesate b{font-size:15px}
.ca-evo-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ca-evo-kpis>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ca-evo-kpis .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ca-ink-3,#6b7686)}
.ca-evo-kpis b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.ca-evo-kpis .s{font-size:12px;color:var(--ca-ink-3,#6b7686)}
/*JL -- 24/10/2026 -- clases propias: .ok/.warn sueltas chocan con estilos globales de la app (borde verde de 18px)*/
.ca-evo-kpis .ev-ok b{color:#1f9d55}.ca-evo-kpis .ev-warn b{color:#b7791f}.ca-evo-kpis .ev-bad b{color:#c0392b}
.ca-evo-toca{margin-top:10px;padding:8px 10px;border-radius:10px;background:#fdf3e1;color:#8a5a0b;font-weight:700;font-size:13px}
.ca-evo-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 12px}
.ca-evo-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--ca-ink-3,#6b7686)}
.ca-evo-form .ca-input{font-size:16px}
.ca-evo-msg{margin-top:6px;color:#c0392b}
.ca-evo-chart svg{width:100%;height:auto;display:block;margin:8px 0 4px}
.ca-evo-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--ca-line,#e6e8ef);font-size:14px}
.ca-evo-row b{font-variant-numeric:tabular-nums}
.ca-evo-res{margin-bottom:12px}
/*JL -- 24/10/2026 -- selector visual de peso (js/peso-picker.js): "Mi evolucion" y "Mi alimentacion"*/
.pp{text-align:center}
.pp-t{font-size:20px;font-weight:800;color:var(--ca-ink,#1d2433);margin:2px 0 4px}
.pp-last{font-size:14px;color:var(--ca-ink-3,#5b6475);margin-bottom:14px;line-height:1.4}
.pp-chip{display:inline-block;margin-top:4px;background:#eef0f6;border-radius:999px;padding:2px 8px;font-size:12px}
.pp-lab{font-size:13px;font-weight:700;color:var(--ca-ink-3,#5b6475);margin:10px 0 6px}
.pp-dial{display:flex;align-items:center;justify-content:center;gap:14px}
.pp-menos,.pp-mas{width:56px;height:56px;border-radius:50%;border:1px solid var(--ca-line,#e3e6ee);background:#fff;font-size:28px;font-weight:600;color:var(--ca-brand,#2f3887);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;flex:0 0 auto}
.pp-menos:active,.pp-mas:active{transform:scale(.94);background:#f2f4fb}
.pp-num{border:0;background:none;cursor:text;padding:4px 6px;min-width:150px;color:var(--ca-ink,#1d2433);font-variant-numeric:tabular-nums}
.pp-num b{font-size:52px;font-weight:800;letter-spacing:-1px;line-height:1}
.pp-num small{font-size:18px;font-weight:700;color:var(--ca-ink-3,#5b6475);margin-left:6px}
.pp-in{width:160px;height:64px;font-size:40px;font-weight:800;text-align:center;border:2px solid var(--ca-brand,#2f3887);border-radius:14px;outline:none}
.pp-imc{margin:12px auto 4px;display:inline-block;border-radius:999px;padding:6px 14px;font-size:14px;background:#eef0f6;color:#1d2433;min-height:1em}
.pp-imc:empty{display:none}
.pp-imc.pp-l-ok{background:#e7f6ec;color:#1a6b38}.pp-imc.pp-l-warn{background:#fff4e0;color:#8a5a00}.pp-imc.pp-l-bad{background:#fdecec;color:#b42318}
.pp-imc,.pp-ok,.pp-err{border:0!important;box-shadow:none!important;outline:0!important}
.pp-chip{margin-left:6px}
.pp-alt{margin-top:6px}
.pp-med{margin:14px 0 4px;text-align:left;border:1px solid var(--ca-line,#e3e6ee);border-radius:14px;padding:10px 12px}
.pp-med summary{font-weight:700;font-size:14px;cursor:pointer;color:var(--ca-brand,#2f3887);list-style:none}
.pp-med summary::-webkit-details-marker{display:none}
.pp-med summary::before{content:'+ '}
.pp-med[open] summary::before{content:'− '}
.pp-med .pp-num b{font-size:34px}
.pp-med .pp-menos,.pp-med .pp-mas{width:46px;height:46px;font-size:22px}
.pp-med .pp-lab{text-align:center}
.pp-hint{font-size:12px;color:#8a93a6;text-align:center;margin-top:6px}
.pp-save{display:block;width:100%;margin-top:14px;height:52px;border:0;border-radius:14px;background:var(--ca-brand,#2f3887);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.pp-save:disabled{opacity:.6}
.pp-ok{margin-top:10px;background:#e7f6ec;color:#1a6b38;border-radius:12px;padding:10px;font-size:14px;font-weight:600}
.pp-err{margin-top:10px;background:#fdecec;color:#b42318;border-radius:12px;padding:10px;font-size:14px}
/*JL -- 24/10/2026 -- bono de eventos: "Que eventos incluye"*/
.ca-incluye{margin-top:10px;border:1px solid var(--ca-line);border-radius:12px;background:var(--ca-surface,#fff)}
.ca-incluye>summary{cursor:pointer;padding:10px 12px;font-weight:700;font-size:14px;color:var(--ca-brand);list-style:none}
.ca-incluye>summary::-webkit-details-marker{display:none}
.ca-incluye>summary::after{content:'▾';float:right;color:var(--ca-ink-3)}
.ca-incluye[open]>summary::after{content:'▴'}
.ca-inc-b{padding:0 12px 12px}
.ca-inc-reglas{margin:0 0 8px;padding-left:18px;font-size:13px;color:var(--ca-ink-2);line-height:1.45}
.ca-inc-usos{font-size:13px;margin:4px 0 8px;color:var(--ca-ink-2)}
.ca-inc-ev{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--ca-line)}
.ca-inc-ev .t{font-weight:700;font-size:14px}.ca-inc-ev .s{font-size:12.5px;color:var(--ca-ink-3)}
.ca-inc-ev .ca-btn{white-space:nowrap}
.ca-inc-reglas li{list-style:disc}
/* JL -- 25/10/2026 -- tarjeta 'Tienes novedades de tu entrenador' (inicio) */
.ca-novent{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;border:1px solid #c9cff0;background:#f3f5ff;margin-bottom:12px}
.ca-novent .ic{width:40px;height:40px;border-radius:12px;background:#e3e7fb;color:var(--ca-brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ca-novent .ic svg{width:22px;height:22px}
.ca-novent .grow{min-width:0}
.ca-novent-n{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:#e5484d;color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
/* JL -- 25/10/2026 -- spinner de carga (horarios de actividades) */
.ca-loading { display: flex; align-items: center; gap: 10px; padding: 12px 4px; color: var(--ca-ink-3); font-size: 13px; font-weight: 600; }
.ca-loading .sp { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid var(--ca-line); border-top-color: var(--ca-brand); border-radius: 50%; animation: caSpin .8s linear infinite; }
@keyframes caSpin { to { transform: rotate(360deg); } }
.cko-top .ca-top-lang { margin-left: 0; }
/* JL -- 25/10/2026 -- PWA: tarjeta de inicio + sheet Instalar app */
.ca-pwa-card { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ca-pwa-card > .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--ca-brand); color: var(--ca-brand-ink); display: grid; place-items: center; flex: 0 0 auto; }
.ca-pwa-card > .ic svg { width: 20px; height: 20px; }
.ca-pwa-card .grow { flex: 1; min-width: 160px; }
.ca-pwa-card .ca-actions { width: 100%; margin-top: 2px; }
.ca-pwa p.ca-sub { margin: 6px 0 10px; line-height: 1.45; }
.ca-pwa-ok, .ca-pwa-notif { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ca-surface-2, #f1f2f7); font-size: 14px; margin-bottom: 10px; }
.ca-pwa-ok svg, .ca-pwa-notif svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ca-brand); }
.ca-item.sesion { flex-wrap: wrap; row-gap: 6px; } .ca-item.sesion .grow { flex: 1 1 0; min-width: 0; } .ca-item.sesion .foot { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; padding-left: 50px; min-height: 0; } .ca-item.sesion .foot:empty { display: none; } .ca-item.sesion .foot .ca-desde { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ca-ink-3); } .ca-item.sesion .foot > .ca-chip, .ca-item.sesion .foot > .ca-btn { margin-left: auto; } /* JL 25/10 sesiones: fecha a todo el ancho; abajo 'Disponible a partir' (izq) y chip/boton (dcha) */ /* JL 25/10 'Disponible a partir del…' bajo la sesion */
/* //JL -- 26/10/2026 -- boton Ver archivo (adjunto de novedad) en la tarjeta */
.ca-topcard .ca-arch { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--ca-surface-2); color: var(--ca-ink); border: 1px solid rgba(230, 232, 239, .9); } .ca-topcard .ca-arch svg { width: 16px; height: 16px; }
/* JL -- 26/10/2026 -- franja de mensajes sin leer al entrar (inicio) */
.ca-unreadbar{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;margin:0 0 12px;border-radius:14px;border:1px solid #c9cff0;background:#f3f5ff;color:var(--ca-text,inherit)}
.ca-unreadbar .ic{width:32px;height:32px;border-radius:10px;background:#e3e7fb;color:var(--ca-brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ca-unreadbar .ic svg{width:18px;height:18px}
.ca-unreadbar .tx{flex:1;min-width:0;font-weight:600;font-size:14px}
.ca-unreadbar .x{border:0;background:transparent;font-size:24px;line-height:1;width:32px;height:32px;color:inherit;opacity:.6;cursor:pointer;flex:0 0 auto}
/* JL -- 26/10/2026 -- rejilla del Monitor: 2 columnas en movil, 4 en escritorio */
.ca-grid.ca-grid-mon { grid-template-columns: repeat(2, 1fr); }
.ca-grid.ca-grid-mon .ca-tile { padding: 18px 8px 14px; }
.ca-grid.ca-grid-mon .ca-tile .t { font-size: 13px; }
@media (min-width: 900px) { .ca-grid.ca-grid-mon { grid-template-columns: repeat(4, 1fr); } }
/* JL -- 26/10/2026 -- alta de perfil monitor: tarjetas de franja + interruptores */
.ca-mon-fcards{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.ca-mon-fcard{padding:12px}
.ca-mon-dias.mini{gap:4px;margin:6px 0}
.ca-mon-dias.mini span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;border:1px solid var(--ca-line);color:var(--ca-ink-3)}
.ca-mon-dias.mini span.on{background:var(--ca-brand);border-color:var(--ca-brand);color:#fff}
.ca-mon-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ca-mon-big{font-size:16px;padding:12px}
.ca-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--ca-line);font-size:14px;cursor:pointer}
.ca-sw input{position:absolute;opacity:0;pointer-events:none}
.ca-sw .sl{flex:0 0 46px;height:28px;border-radius:999px;background:var(--ca-line);position:relative;transition:background .15s}
.ca-sw .sl::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.ca-sw input:checked~.sl{background:var(--ca-brand)}
.ca-sw input:checked~.sl::after{transform:translateX(18px)}
/*JL -- 26/10/2026 -- video de novedades (YouTube a toque /