/* PBC-63 PR C — estilos PROPIOS del calendario de tándems (teal). Archivo aparte: NO toca pbc-theme.css ni las reglas de booking/PBC-53 (lección hotfix #42). Reusa solo las clases de LAYOUT de la rejilla (.schedule-* de pbc-theme.css); el color/ la tarjeta son propios (.tandem-*), así que los overrides de .book-slot/.request-* nunca capturan estas marcas. Paleta CERRADA (§10): relleno #D6EFF7 · borde/acento #02A9CA · texto #0A5F73 — separada del verde/azul/amarillo de booking y del magenta de PBC-53. */ /* ── Switcher semana/mes ──────────────────────────────────────────────────── */ .tandem-view-switcher { display:inline-flex; gap:4px; background:#f3f4f6; border-radius:6px; padding:4px; } .tandem-view-btn { padding:0.45rem 1.25rem; font-size:14px; font-weight:600; border-radius:5px; color:#6b7280; text-decoration:none; transition:all .2s ease; white-space:nowrap; } .tandem-view-btn:hover { color:#111827; background:#e5e7eb; } .tandem-view-btn.active { background:#02A9CA; color:#fff; box-shadow:0 1px 3px rgba(2,169,202,.3); } /* ── Pestañas de idioma (idioma que quiero practicar) ─────────────────────── */ .tandem-lang-tab { display:inline-flex; align-items:center; padding:0.35rem 0.9rem; border-radius:9999px; font-size:13px; font-weight:600; text-decoration:none; color:#0A5F73; background:#E7F6FB; border:1px solid #CDE9F4; transition:all .15s ease; white-space:nowrap; } .tandem-lang-tab:hover { background:#D6EFF7; border-color:#02A9CA; } .tandem-lang-tab.active { background:#02A9CA; color:#fff; border-color:#02A9CA; box-shadow:0 1px 3px rgba(2,169,202,.3); } /* ── Banner de re-suscripción (solo alumno sin acceso) ────────────────────── */ .tandem-paywall-banner { background:#E7F6FB; border:1px solid #B6E3F1; } /* PBC-142: banner discreto del escaparate público (visitante sin cuenta). */ .tandem-guest-banner { background:#EEF9FD; border:1px solid #CDE9F4; } /* ── Botones ──────────────────────────────────────────────────────────────── */ .tandem-btn-primary { display:inline-flex; align-items:center; justify-content:center; padding:0.5rem 1.1rem; border-radius:0.75rem; background:#02A9CA; color:#fff; font-size:14px; font-weight:700; text-decoration:none; border:none; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.1); transition:background-color .15s ease, opacity .15s ease; } .tandem-btn-primary:hover { background:#0288A3; } .tandem-btn-primary:disabled { opacity:.6; cursor:default; } /* Botón GRANDE "Suggest a tandem" (Guille 02/07): acción protagonista de la pantalla, ancho completo, degradado teal como la cabecera del modal. Va arriba del todo; los filtros de idioma se mantienen debajo. */ /* Botón compacto (Guille 05/07): antes ocupaba todo el ancho y era enorme; ahora es un botón pequeño auto-ancho, alineado a la izquierda. Sigue teal, sigue con el mismo id/handler. */ /* CTA principal (Guille 22/07): botón GRANDE, ancho completo, AMARILLO PBC con relieve 3D inferior (misma gráfica que los botones de "join a tandem"). Es la acción clara de la pantalla, por eso amarillo y no turquesa. */ /* Botón amarillo MEDIANO (Guille 22/07): ni ancho completo en móvil ni gigante en escritorio. Se auto-ajusta al texto y se centra; en escritorio, además, se puede crear pinchando un día del calendario. Mismo amarillo PBC con relieve 3D. */ .tandem-suggest-hero { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:auto; padding:.7rem 1.4rem; border:none; border-radius:14px; cursor:pointer; background:#FFD400; color:#12232E; font-size:1rem; font-weight:800; letter-spacing:.01em; box-shadow:0 4px 0 #D9B200, 0 8px 16px rgba(217,178,0,.26); transition:transform .1s ease, filter .15s ease; } .tandem-suggest-hero i { font-size:1.1rem; } .tandem-suggest-hero:hover { filter:brightness(1.02); } .tandem-suggest-hero:active { transform:translateY(2px); box-shadow:0 3px 0 #D9B200, 0 8px 16px rgba(217,178,0,.28); } /* Ruedita mientras se abre el formulario (Guille 01/08): el ＋ se sustituye por un spinner en cuanto se pulsa, aunque el JS grande de la página siga cargando. */ .tandem-suggest-hero.is-loading { cursor:progress; } .tandem-suggest-hero.is-loading i { display:none; } .tandem-suggest-hero.is-loading::before { content:""; width:1.05rem; height:1.05rem; flex:0 0 auto; border-radius:50%; border:2px solid rgba(18,35,46,.28); border-top-color:#12232E; animation:tandemBtnSpin .6s linear infinite; } @keyframes tandemBtnSpin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .tandem-suggest-hero.is-loading::before { animation-duration:2s; } } /* Aviso corto arriba: qué es un tándem + "todo en tu zona horaria, pincha un día". Cajita suave teal, no compite con el calendario. */ .tandem-intro-note { margin:0 0 1.25rem; padding:.8rem 1rem; border-radius:.9rem; background:#EEF9FD; border:1px solid #A9E2F1; color:#0A4A5A; } .tandem-intro-note p { margin:0; font-size:.9rem; line-height:1.5; } .tandem-intro-note p + p { margin-top:.35rem; } .tandem-intro-note .tandem-intro-note__how { font-weight:600; color:#0A5F73; } .tandem-intro-note i { margin-right:.4rem; } /* La instrucción de "cómo proponer" cambia por dispositivo (Guille 11/07): móvil = pulsar el botón "Proponer un tándem"; ordenador = clic en el día. Móvil primero. 768px = md. */ .tandem-intro-note__how .tandem-how-desktop { display:none; } @media (min-width:768px) { .tandem-intro-note__how .tandem-how-mobile { display:none; } .tandem-intro-note__how .tandem-how-desktop { display:inline; } } .tandem-btn-ghost { display:inline-flex; align-items:center; justify-content:center; padding:0.5rem 1rem; border-radius:0.75rem; border:1px solid #02A9CA; color:#0A5F73; background:#fff; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; transition:background-color .15s ease; } .tandem-btn-ghost:hover { background:#E7F6FB; } .tandem-btn-danger { display:inline-flex; align-items:center; justify-content:center; padding:0.5rem 1rem; border-radius:0.75rem; border:1px solid #fecaca; color:#b91c1c; background:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:background-color .15s ease; } .tandem-btn-danger:hover { background:#fef2f2; } /* ── Opción 1 (Guille 12/07): dos botones grandes apilados, uno por idioma ───── Estilo PBC con relieve inferior (3D amable, tipo lección). El COLOR y el relieve de cada lado (turquesa/azul/amarillo PBC) los pone tandems.js en línea; aquí va la forma. */ .tandem-join3d { display:flex; align-items:center; gap:13px; width:100%; border:none; border-radius:16px; padding:14px 16px; text-align:left; cursor:pointer; font-family:inherit; transition:transform .08s ease, filter .12s ease; } .tandem-join3d:hover { filter:brightness(1.04); } .tandem-join3d:active { transform:translateY(2px); } .tandem-join3d__flag { flex-shrink:0; font-size:30px; border-radius:5px; box-shadow:0 0 0 1px rgba(0,0,0,.18); } .tandem-join3d__txt { min-width:0; } .tandem-join3d__t1 { display:block; font-size:17px; font-weight:800; line-height:1.15; } .tandem-join3d__t2 { display:block; font-size:13.5px; font-weight:700; opacity:.95; margin-top:2px; } /* Resalte de "hoy" del calendario + tira de día (móvil), en turquesa PBC. Clases propias porque los valores Tailwind arbitrarios ([#0d9488]) no se recompilan sin Node. */ .tandem-today-bg { background:#02A9CA !important; } .tandem-day-head { background:rgba(2,169,202,.05); border-bottom:1px solid rgba(2,169,202,.1); } /* Título del modal EN VERTICAL (Guille 12/07): idioma 1 / flechitas / idioma 2. Nunca se corta. */ .tandem-modal-title { display:flex; flex-direction:column; align-items:flex-start; gap:3px; font-weight:800; padding-right:6px; } /* nowrap + overflow visible: el nombre del idioma nunca se recorta ni parte la palabra. */ .tandem-modal-title__row { display:flex; align-items:center; gap:8px; font-size:19px; line-height:1.12; white-space:nowrap; overflow:visible; } .tandem-modal-title__row .fi { font-size:22px; border-radius:3px; box-shadow:0 0 0 .5px rgba(0,0,0,.16); flex-shrink:0; } /* Lista de participantes de la ficha: círculo de inicial + nombre + su bandera. OJO: NO usar "avatar" ni "image" en el nombre de la clase — una regla global de mobile-responsive.css (`[class*="avatar"], [class*="image"] { width:100%; height:auto }` en ≤768px) lo estiraría a lo ancho en móvil. Por eso la clase es "tandem-part-ini". */ .tandem-part-ini { flex-shrink:0; width:34px; height:34px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; line-height:1; background:#02A9CA; } /* Foto de perfil dentro de ese mismo círculo (quien no tiene, sigue con su inicial). "photo" y no "avatar"/"image" por lo dicho justo arriba: esos nombres los estira la regla global de móvil. object-fit:cover = la foto llena el círculo sin deformarse. */ .tandem-part-photo { width:100%; height:100%; object-fit:cover; border-radius:9999px; display:block; } .tandem-part-flag { margin-left:auto; font-size:20px; border-radius:3px; box-shadow:0 0 0 .5px rgba(0,0,0,.12); flex-shrink:0; } /* Chapa de NIVEL del participante (Guille 20/07): su nivel CEFR en el idioma que PRACTICA, con la banderita de ese idioma DENTRO — así "B1" no se lee como nivel del idioma de su bandera grande (el que habla), que era justo la confusión de PBC-122. Amarillo = el color de "nivel" en la ficha (recuadro de nivel del join). */ .tandem-part-level { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:11px; font-weight:800; line-height:1; color:#12232E; background:#FFF3B0; border-radius:9999px; padding:3px 8px; } .tandem-part-level .fi { font-size:12px; border-radius:2px; box-shadow:0 0 0 .5px rgba(0,0,0,.12); } /* En pantallas estrechas, si no cabe todo, que se acorte el NOMBRE con "…" — la bandera y la chapa de nivel (la información nueva) no se recortan nunca. */ .tandem-part-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ── Tarjeta de tándem (marca del grid) ─────────────────────────────────────── PBC-126 — el PAR de idiomas (.tandem-slot__codes) es el HERO; nivel/plazas/hora van en líneas secundarias atenuadas (.tandem-slot__meta). Tamaño base = roomy (~28px), usado en la agenda móvil y la lista del día; la rejilla densa de la semana lo reduce a ~16px más abajo (override en .schedule-calendar-container). */ .tandem-slot { display:flex; flex-direction:column; gap:2px; cursor:pointer; border:1.5px solid #02A9CA; border-left:4px solid #02A9CA; background-color:#D6EFF7; color:#0A5F73; border-radius:10px; font-weight:500; padding:8px 12px; -webkit-tap-highlight-color:rgba(2,169,202,.15); touch-action:manipulation; transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } .tandem-slot:hover { background-color:#BFE6F2; } /* La tuya YA se distingue con la chapa "Yours"; NO la oscurecemos, así todas las tarjetas tienen el MISMO color/jerarquía (feedback Guille 02/07: "¿por qué esta sale más oscura?"). */ .tandem-slot.is-mine { background-color:#D6EFF7; } .tandem-slot.is-full { opacity:.55; } /* completo = atenuado (no desaparece) */ .tandem-slot.is-link-pending { border-left-color:#d97706; } /* esperando enlace del anfitrión */ /* Pasada (su hora ya quedó atrás): GRIS, pero AHORA SÍ se abre (solo lectura, feedback Guille 11/07). Se despinta a gris —no turquesa apagado— para distinguirse de un tándem VIVO de un vistazo, PERO invita a tocarla: cursor:pointer + un hover MUY leve (se aclara un pelín). No inerte. grayscale(1) apaga banderas/chapa. Un FUTURO lleno NO cae aquí (usa .is-full). */ .tandem-slot.is-past { background-color:#f3f4f6; color:#9ca3af; border-color:#d1d5db; border-left-color:#d1d5db; border-style:dashed; filter:grayscale(1); opacity:.75; cursor:pointer; } .tandem-slot.is-past:hover, .schedule-calendar-container .tandem-slot.is-past:hover { background-color:#eceef1; opacity:.9; transform:none; box-shadow:none; } /* Hero: el par de idiomas en BANDERAS grandes (feedback Guille 05/07: más imagen, menos letra). Fila flex para centrar banderas + flecha a cualquier tamaño. */ .tandem-slot__pair { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; } .tandem-slot__codes { display:flex; align-items:center; gap:7px; min-width:0; font-weight:500; } /* Bandera del idioma (flag-icons): protagonista. flag-icons pone ancho/alto por su cuenta (proporción 4:3); font-size fija la altura. No se recorta (flex-shrink:0). */ .tandem-lang-flag { font-size:26px; border-radius:3px; box-shadow:0 0 0 0.5px rgba(0,0,0,.14); flex-shrink:0; } /* Flecha de intercambio, discreta entre las dos banderas. */ .tandem-slot__swap { font-size:18px; font-weight:500; opacity:.5; flex-shrink:0; } /* Respaldo cuando un idioma no tiene bandera conocida: sus iniciales de 2 letras. */ .tandem-slot__code-txt { font-size:20px; font-weight:500; letter-spacing:.02em; } /* Pista de estado (tuya / enlace pendiente / hueco) — pequeña, no compite con el par. */ .tandem-slot__flag { flex-shrink:0; font-size:11px; font-weight:700; line-height:1; padding:2px 7px; border-radius:9999px; background:rgba(10,95,115,.10); color:#0A5F73; } .tandem-slot__flag--join { background:#02A9CA; color:#fff; } /* Líneas secundarias: hora/tipo ("09:00 CEST · 1:1"). Atenuadas. */ .tandem-slot__meta { font-size:12px; line-height:1.3; font-weight:600; color:#0A5F73; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Disponibilidad (feedback Guille 05/07): SIEMPRE apuntados/cupo, también en 1:1. Con hueco → chapa teal + BANDERA de quien falta. Lleno → chapa gris + "full". align-self:flex-start para que la chapa se ajuste al contenido (no a todo el ancho). */ .tandem-slot__avail { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; max-width:100%; font-size:12px; font-weight:700; line-height:1; padding:2px 8px; border-radius:9999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tandem-slot__avail.is-open { background:#02A9CA; color:#fff; } .tandem-slot__avail.is-full { background:rgba(10,95,115,.14); color:#0A5F73; } .tandem-slot__avail-sep { opacity:.6; } .tandem-slot__needs { display:inline-flex; align-items:center; gap:4px; min-width:0; } .tandem-avail-flag { font-size:13px; border-radius:2px; box-shadow:0 0 0 0.5px rgba(255,255,255,.5); flex-shrink:0; } .tandem-slot__needs-n { font-size:11px; font-weight:600; opacity:.85; margin-left:-1px; } /* Tick de éxito "de marca" (feedback Guille 05/07: el tick por defecto de SweetAlert salía fino y a veces roto). Círculo verde macizo + palomita blanca gruesa (iconHtml), igual que el de reserva (gb-success-ico) pero aquí SIEMPRE cargado (tandems.css no va tras el flag), para que se vea a todos. Uso: customClass:{icon:'tandem-success-ico'}. */ .swal2-icon.tandem-success-ico { border-color:transparent !important; background:#22c55e !important; box-shadow:0 8px 24px rgba(34,197,94,.30); } .swal2-icon.tandem-success-ico .swal2-success-ring, .swal2-icon.tandem-success-ico [class^="swal2-success-line"], .swal2-icon.tandem-success-ico [class*=" swal2-success-line"], .swal2-icon.tandem-success-ico .swal2-success-fix, .swal2-icon.tandem-success-ico .swal2-success-circular-line-left, .swal2-icon.tandem-success-ico .swal2-success-circular-line-right { display:none !important; } .swal2-icon.tandem-success-ico .swal2-icon-content { display:flex !important; align-items:center; justify-content:center; width:100%; height:100%; } /* Lista con puntos de los avisos (¡Estás dentro! / Intercambio propuesto). El reset global pone list-style:none en todo ul, así que aquí se fuerza el punto y se cuadra la tarjeta: lista alineada a la izquierda y centrada. */ .tandem-modal-bullets { list-style:disc outside !important; text-align:left; margin:.6rem auto 0; max-width:23rem; padding-left:1.35rem; line-height:1.5; } .tandem-modal-bullets li { list-style:disc !important; margin:.3rem 0; } /* Frase de arriba (qué hay que aceptar) y de abajo (qué pasa si no lo pulsas): van FUERA de la lista para que los puntos sean solo la cuenta de mensajes. El veterano no acepta nada, así que sale solo con esto y sin ningún punto. */ .tandem-modal-note { margin:.6rem auto 0; max-width:23rem; text-align:left; line-height:1.5; } /* ── Hueco clicable (proponer) ────────────────────────────────────────────── */ .tandem-gap { cursor:pointer; border:1.5px dashed #cbd5e1; color:#94a3b8; background:transparent; border-radius:8px; display:flex; align-items:center; justify-content:center; opacity:.4; transition:opacity .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease; -webkit-tap-highlight-color:rgba(2,169,202,.15); touch-action:manipulation; } .tandem-gap:hover { border-color:#02A9CA; color:#02A9CA; background-color:rgba(214,239,247,.5); } .tandem-gap--slim { opacity:0; } #tandemGrid .schedule-slot:hover .tandem-gap { opacity:1; } #tandemGrid .schedule-slot:hover .tandem-gap--slim { opacity:1; } /* PBC-114 (afinado) — DÍA FUTURO VACÍO del MES: la franja .tandem-gap--month reusa el patrón de la semana pero queda LIMPIA en reposo (sin ＋ de esquina, sin borde propio) y revela "＋ Propose" centrado al pasar el ratón; el resalte teal lo pone TODA la celda (.tandem-cell--propose:hover, regla ya compartida con la semana). En foco por teclado se revela igual (accesible) con contorno. En táctil queda tenue (regla de abajo, junto al --slim) para que haya affordance visible en iPad, como la franja de la semana. */ #tandemGrid .tandem-gap--month, #tandemGrid .tandem-gap--month:hover { border:none; background:transparent; } #tandemGrid .tandem-gap--month { opacity:0; } #tandemGrid .tandem-cell--propose:hover .tandem-gap--month, #tandemGrid .tandem-cell--propose:focus-within .tandem-gap--month { opacity:1; color:#02A9CA; } #tandemGrid .tandem-gap--month:focus-visible { outline:2px solid #02A9CA; outline-offset:-2px; border-radius:4px; } /* BUG B — toda la celda futura es clicable para proponer (no solo el ＋), espejo ampliado de PBC-53. La desambiguación (click en tarjeta = abrir ficha; click en zona vacía = proponer) la hace tandems.js; el ＋ queda como pista visual. */ #tandemGrid .tandem-cell--propose { cursor:pointer; } /* Resalte teal suave al hover → se ve que TODA la celda es el botón de proponer. Con #id gana al `.schedule-slot:hover` gris de booking (mayor especificidad). */ #tandemGrid .tandem-cell--propose:hover { background-color:rgba(214,239,247,.5); } /* PBC-142: misma pista visual para el invitado (su clic dispara el aviso). */ #tandemGrid .tandem-cell--guest { cursor:pointer; } #tandemGrid .tandem-cell--guest:hover { background-color:rgba(214,239,247,.5); } /* En táctil (sin hover) el ＋ "slim"/"month" se muestra tenue: es solo pista, se toca toda la celda (en móvil-mes proponer va por el botón global; en iPad la rejilla sí se ve). */ @media (hover: none) { #tandemGrid .tandem-gap--slim, #tandemGrid .tandem-gap--month { opacity:.45; } } /* Desktop SEMANA (rejilla densa): el par sigue siendo el protagonista pero compacto (~16px) y las secundarias muy pequeñas (~10px), para que quepan VARIOS tándems por celda sin disparar la altura (PBC-126). El hero grande (~28px) se reserva para la agenda móvil y la lista del día, que viven fuera de .schedule-calendar-container. */ .schedule-calendar-container .tandem-slot { padding:5px 8px !important; margin:2px 0; gap:1px; border-radius:6px; border-left-width:3px; box-shadow:0 1px 2px rgba(0,0,0,.1); } .schedule-calendar-container .tandem-slot:hover { transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.15); } /* Rejilla de semana (desktop, densa): banderas algo menores para que quepan varios tándems por celda (con flecha y chapa de estado) sin disparar la altura. */ .schedule-calendar-container .tandem-slot__codes { gap:5px; } .schedule-calendar-container .tandem-lang-flag { font-size:21px; } .schedule-calendar-container .tandem-slot__swap { font-size:14px; } .schedule-calendar-container .tandem-slot__code-txt { font-size:15px; } .schedule-calendar-container .tandem-slot__meta { font-size:10px; } .schedule-calendar-container .tandem-slot__flag { font-size:9px; padding:1px 5px; } .schedule-calendar-container .tandem-slot__avail { font-size:10px; padding:2px 7px; gap:4px; } .schedule-calendar-container .tandem-avail-flag { font-size:11px; } .schedule-calendar-container .tandem-gap { font-size:12px !important; padding:6px 8px !important; margin:1px 0; border-radius:4px; min-height:26px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .schedule-calendar-container .tandem-gap--slim { min-height:0 !important; padding:2px 8px !important; } /* ── PBC-121 — scroll del grid (paridad con booking) ────────────────────────── El grid reusa el layout .schedule-* de booking pero con un id PROPIO para el contenedor scrollable: #tandemScroll. El scroll vertical de booking está ligado POR ID a #scheduleScrollContainer (pbc-theme.css), así que #tandemScroll heredaba el CAP de altura (.schedule-calendar-inner — regla por CLASE, compartida) pero NO el overflow-y:auto (regla por ID, solo booking) → en escritorio/iPad con puntero fino el grid se recortaba a la altura del cap SIN poder hacer scroll: no se llegaba a las últimas franjas (PBC-121; reportado en Apple/iOS y en husos con más horas). Replicamos el patrón EXACTO y probado de booking (PBC-9/PBC-95), SOLO en este archivo de tándems (lección hotfix #42 — no se toca booking ni pbc-theme): · Táctil (iPad/móvil, sin puntero fino): el contenedor NO scrollea en NINGÚN eje → scrollea la PÁGINA entera como una unidad. Evita el "pan-y trap" de iOS Safari (que ata el gesto al scroller interno e impide mover la página). Ambos ejes en `visible` explícito y con !important (paridad exacta con #scheduleScrollContainer): si un eje quedara en auto/hidden el spec promueve el otro a auto y reaparece la trampa; el !important neutraliza el `div{overflow-x:hidden !important}` genérico de viewport-fix.css (que en el borde exacto de 768px casaría este div y, sin el !important, promovería overflow-y a auto recreando un scroller interno). · Escritorio real (≥1024px, hover + puntero fino): el cap deja la cabecera fija y #tandemScroll scrollea por dentro. Altura en 100dvh (no 100vh) por la barra dinámica de Safari iOS; se deja 100vh como fallback para navegadores sin dvh. */ #tandemScroll { overflow-x: visible !important; overflow-y: visible !important; } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { #tandemGrid .schedule-calendar-inner { max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); } #tandemScroll { overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; } } /* ── Mes: bloque de conteo + "＋" por día (PBC-114) ─────────────────────────── .tandem-month-block: bloque RELLENO por día, paridad visual con el "SESSIONS · N" azul de booking (relleno teal claro, conteo prominente). Click → abre el día (ficha si 1, lista si varios) en tandems.js; NO navega. Va arriba (mt-1), dejando el resto de la celda como hueco clicable para proponer otro horario. */ .tandem-month-block { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 6px; border-radius:8px; background:#D6EFF7; border:1px solid #B6E3F1; color:#0A5F73; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06); transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease; } .tandem-month-block:hover { background:#BFE6F2; transform:scale(1.02); box-shadow:0 2px 4px rgba(2,169,202,.18); } .tandem-month-block__n { font-size:1.125rem; line-height:1; font-weight:900; } .tandem-month-block__label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.75; margin-top:2px; } .tandem-month-add { width:20px; height:20px; line-height:18px; text-align:center; border-radius:6px; border:1px dashed #cbd5e1; color:#94a3b8; background:transparent; font-weight:700; cursor:pointer; font-size:13px; transition:all .15s ease; } .tandem-month-add:hover { border-color:#02A9CA; color:#02A9CA; background:rgba(214,239,247,.5); } /* Fila del modal "lista del día": la tarjeta real del tándem a ancho completo. Las tarjetas viven fuera de .schedule-calendar-container → conservan su hero legible (~28px). La hora ya la lleva la propia tarjeta (.tandem-slot__meta, PBC-126), así que aquí NO se repite en un gutter aparte. */ .tandem-day-row { display:flex; } .tandem-day-row .tandem-slot { flex:1; min-width:0; } /* ── Modales (ficha ampliada + proponer) ──────────────────────────────────── */ /* Patrón de enrollModal/requestModal (booking/PBC-53): PANTALLA COMPLETA en móvil y modal CENTRADO en ≥640px. CLAVE: en móvil la altura es DEFINIDA (100dvh), así el cuerpo (`flex-1 min-h-0 overflow-y-auto`) tiene alto real y hace SCROLL en vez de colapsar. Sin esto, con solo `max-height` y `height:auto` el se dimensiona al contenido y el cuerpo `flex-basis:0` se aplasta a 0 px (en móvil solo se veían "DATE" + los botones). El display va SOLO en [open] (lo pone .showModal()): cerrado=oculto (regla UA dialog:not([open])), abierto=flex. */ .tandem-modal-dialog, .tandem-modal-dialog:modal { border:none !important; padding:0 !important; margin:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; max-width:100vw !important; max-height:100dvh !important; min-width:100vw !important; min-height:100dvh !important; position:fixed !important; inset:0 !important; display:none; flex-direction:column; background:#fff; border-radius:0; } .tandem-modal-dialog[open], .tandem-modal-dialog[open]:modal { display:flex !important; } /* SweetAlert2 montado DENTRO de la ficha (target = el abierto): un dialog con .showModal() vive en el top layer del navegador y cualquier Swal suelto se pinta DEBAJO, invisible (incidencia "compartir en los grupos sale por detrás del ticket"). Al colgarlo del propio dialog comparte top layer; aquí se le devuelve el centrado a pantalla completa para que no quede como un hijo flex de la ficha. */ .tandem-modal-dialog > .swal2-container { position:fixed !important; inset:0 !important; } /* Fondo de la ficha OPACO: al abrir un tándem NO se debe ver el calendario detrás (feedback Guille 02/07). En móvil la ficha ya es pantalla completa; en tablet/escritorio va centrada, así que el fondo casi sólido + blur borra la página anterior. */ .tandem-modal-dialog::backdrop { background:rgba(4,20,24,.98); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .tandem-modal-header { background:linear-gradient(135deg, #02A9CA 0%, #0A5F73 100%); } /* Tooltip de los 4 botones de la cabecera (Guille 06/08): el `title` nativo tarda ~1s y es feo. Solo con ratón de verdad (@media hover:hover): en táctil no hay :hover real y se quedaría "pegado" pintado tras el toque. Ancla a izquierda o derecha según el botón para que el texto largo (p.ej. "compartir en el chat") no se salga del ancho de la ficha en escritorio. */ @media (hover: hover) { .tandem-modal-header button[data-tip] { position: relative; } .tandem-modal-header button[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); background: #04342C; color: #E1F5EE; font-size: 12px; padding: 7px 11px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 20; } .tandem-modal-header button[data-tip]:hover::after, .tandem-modal-header button[data-tip]:focus-visible::after { opacity: 1; visibility: visible; } #tdShareChat[data-tip]::after, #tdCopyLink[data-tip]::after { left: 0; } #tdShare[data-tip]::after, #tdClose[data-tip]::after { right: 0; } } /* Scroll suave del cuerpo en móvil (sin "rubber-band" que arrastre la página). */ .tandem-modal-dialog .overflow-y-auto { -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; } @media (min-width:640px) { .tandem-modal-dialog, .tandem-modal-dialog:modal { width:92vw !important; max-width:520px !important; min-width:0 !important; height:auto !important; max-height:calc(100vh - 4rem) !important; min-height:0 !important; inset:0 !important; margin:auto !important; border-radius:1rem; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.25); } } /* ROBUSTEZ: la ficha usa clases de Tailwind (grid-cols-2 para las dos columnas, .hidden para mostrar/ocultar secciones). Tailwind se sirve por un