/** * Área privada de la piscina (/mi-piscina/) — app de front, tema claro. * * Página autónoma (no usa el tema): sirve su propio y esta hoja. Marca * APADIS Piscina: Serotiva + azul #1B7FC4 / navy #10142F sobre fondo #F7F9FB. * Dos vistas: USUARIO (titular) y APADIS (personal), con navegación superior. * Accesible (WCAG AA), responsive por rejillas. */ @font-face { font-family: "Serotiva"; src: url( "fonts/Serotiva-Regular.ttf" ) format( "truetype" ); font-weight: 100 400; font-style: normal; font-display: swap; } @font-face { font-family: "Serotiva"; src: url( "fonts/Serotiva-Medium.ttf" ) format( "truetype" ); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Serotiva"; src: url( "fonts/Serotiva-SemiBold.ttf" ) format( "truetype" ); font-weight: 600 900; font-style: normal; font-display: swap; } :root { --apx-bg: #f7f9fb; --apx-panel: #ffffff; --apx-panel-2: #eef3f8; --apx-line: #e1e8ef; --apx-line-2: #eaeff4; --apx-ink: #0e1330; --apx-ink-2: #515a6e; --apx-ink-3: #6e7789; --apx-azul: #1b7fc4; --apx-azul-2: #35aee2; --apx-azul-soft: #e8f2fa; --apx-navy: #10142f; --apx-good: #1b7a56; --apx-good-bg: #e6f7ef; --apx-warn: #8a6410; --apx-warn-bg: #fdf3df; --apx-bad: #a03024; --apx-bad-bg: #fbeae7; --apx-info: #155e8c; --apx-info-bg: #e8f2fa; --apx-libre: #3dbe8b; --apx-ajust: #e0a33c; --apx-lleno: #c0392b; --apx-shadow: 0 1px 3px rgba(14,19,48,.05), 0 18px 40px -28px rgba(14,19,48,.28); --apx-r: 20px; --apx-r-sm: 14px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.apx { background: var(--apx-bg); color: var(--apx-ink); font-family: "Serotiva", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .apx a { color: var(--apx-azul); text-decoration: none; } /* `.apx a` (0,1,1) gana a `.apx-btn-solido` (0,1,0): los botones que son perdían su color de texto. Se recupera con selectores más específicos. */ .apx a.apx-btn-solido, .apx a.apx-btn-navy, .apx a.apx-btn-ghost { color: #fff; } .apx a.apx-btn-solido:hover, .apx a.apx-btn-navy:hover { color: #fff; } .apx a.apx-btn-linea { color: var(--apx-ink); } .apx :focus-visible { outline: 2px solid var(--apx-azul); outline-offset: 3px; border-radius: 8px; } .apx-wrap { max-width: 1180px; margin-inline: auto; padding: 0 28px; } /* ---- Cabecera superior ------------------------------------------------- */ .apx-top { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid #EAEFF4; } /* Cuando está la barra de WordPress (fixed), se reserva su alto con padding en el body y la cabecera se pega debajo de ella. Sin esto se superponen arriba. */ body.apx.admin-bar { padding-top: 32px; } body.admin-bar .apx-top { top: 32px; } @media screen and (max-width: 782px) { body.apx.admin-bar { padding-top: 46px; } body.admin-bar .apx-top { top: 46px; } } .apx-top-in { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 14px 28px; } /* Conmutador de rol (personal) */ .apx-role { display: inline-flex; background: #F1F5F9; border-radius: 999px; padding: 4px; flex: none; } .apx-role a { padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--apx-ink-2); } .apx-role a.on { background: #fff; color: var(--apx-ink); box-shadow: 0 1px 3px rgba(14,19,48,.14); } /* Shell: sidebar + contenido */ .apx-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .apx-side { padding: 26px 18px; position: sticky; top: 62px; align-self: start; } body.admin-bar .apx-side { top: 94px; } .apx-side nav { display: flex; flex-direction: column; gap: 2px; } .apx-side-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--apx-ink-3); padding: 0 16px 12px; margin: 0; } .apx-sidebtn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font-size: 15px; color: #5B6478; padding: 13px 16px; border-radius: 12px; transition: background .16s, color .16s; } .apx-sidebtn:hover { background: #EEF3F8; color: var(--apx-azul); } .apx-sidebtn.on { background: var(--apx-navy); color: #fff; font-weight: 600; } .apx-sidebtn .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .apx-brand { display: flex; align-items: center; gap: 10px; } .apx-brand img { height: 26px; width: auto; display: block; } .apx-brand .apx-logo-txt { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--apx-ink); } .apx-brand .apx-logo-txt span { color: var(--apx-azul); font-weight: 500; } .apx-brand .sep { width: 1px; height: 24px; background: var(--apx-line); } .apx-brand small { color: var(--apx-ink-3); font-size: 12.5px; } .apx-switch { display: inline-flex; background: var(--apx-panel); border: 1px solid var(--apx-line); border-radius: 999px; padding: 3px; box-shadow: 0 1px 3px rgba(14,19,48,.06); } .apx-switch a { padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--apx-ink-2); } .apx-switch a.on { background: var(--apx-navy); color: #fff; } .apx-top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .apx-user { display: flex; align-items: center; gap: 10px; } .apx-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--apx-azul-soft); color: var(--apx-azul); display: grid; place-items: center; font-weight: 700; font-size: 13px; } .apx-user b { font-size: 13.5px; } .apx-user small { display: block; color: var(--apx-ink-3); font-size: 12px; } .apx-salir { color: var(--apx-ink-2); font-weight: 600; font-size: 13.5px; } .apx-wp { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--apx-line); border-radius: 999px; color: var(--apx-ink-2); font-weight: 600; font-size: 13px; } .apx-wp:hover { border-color: var(--apx-azul); color: var(--apx-azul); } .apx-wp svg { flex: 0 0 auto; } /* ---- Navegación contextual -------------------------------------------- */ .apx-nav { border-bottom: 1px solid var(--apx-line); background: var(--apx-panel); } .apx-nav-in { display: flex; gap: 4px; flex-wrap: wrap; } .apx-nav a { position: relative; padding: 15px 4px; margin-right: 22px; color: var(--apx-ink-2); font-weight: 600; font-size: 14.5px; } .apx-nav a:hover { color: var(--apx-ink); } .apx-nav a.on { color: var(--apx-azul); } .apx-nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--apx-azul); border-radius: 2px; } /* ---- Encabezado de pantalla ------------------------------------------- */ .apx-main { padding: 34px 34px 80px; min-width: 0; } /* Resumen: rejilla de 3 tarjetas + tarjeta oscura */ .apx-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; } .apx-rcard { border: 1px solid var(--apx-line); border-radius: 20px; padding: 28px 30px; min-width: 0; background: #fff; } .apx-rcard.dark { background: var(--apx-navy); color: #fff; border: 0; } .apx-rcard .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--apx-ink-3); margin-bottom: 16px; } .apx-rcard.dark .k { color: #8FA0C4; } .apx-rcard .n { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 6px; } .apx-rcard .f { font-size: 14px; color: var(--apx-ink-2); margin-bottom: 22px; } .apx-rcard.dark .f { color: #B9C4DA; } .apx-rcard .apx-btn-ghost { border: 1px solid #2C3157; background: none; color: #fff; } .apx-rcard .apx-btn-ghost:hover { border-color: #45507e; color: #fff; } .apx-alduia { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--apx-good); background: var(--apx-good-bg); border-radius: 999px; padding: 6px 13px; margin-bottom: 22px; } @media (max-width: 900px) { .apx-shell { grid-template-columns: 1fr; } .apx-side { position: static; padding: 16px 20px; } .apx-side nav { flex-direction: row; flex-wrap: wrap; } .apx-sidebtn { width: auto; } .apx-main { padding: 24px 20px 60px; } } .apx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; } .apx-head h1 { margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -.032em; line-height: 1.1; } .apx-head .apx-sub { color: var(--apx-ink-2); margin-top: 4px; } .apx-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--apx-azul); font-weight: 600; } /* ---- Botones ----------------------------------------------------------- */ .apx-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 14.5px; padding: 12px 22px; cursor: pointer; border: 1.5px solid transparent; } .apx-btn-solido { background: var(--apx-azul); color: #fff; } .apx-btn-solido:hover { background: #15669e; color: #fff; } .apx-btn-navy { background: var(--apx-navy); color: #fff; } .apx-btn-linea { background: transparent; border-color: var(--apx-line); color: var(--apx-ink); } .apx-btn-linea:hover { border-color: var(--apx-azul); color: var(--apx-azul); } .apx-btn-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; } /* ---- Tarjetas ---------------------------------------------------------- */ .apx-cards { display: grid; gap: 16px; } .apx-card { background: var(--apx-panel); border: 1px solid var(--apx-line); border-radius: var(--apx-r); box-shadow: var(--apx-shadow); } .apx-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--apx-line); } .apx-card-h h2 { margin: 0; font-size: 17px; font-weight: 600; } .apx-card-b { padding: 10px 14px; } .apx-card-pad { padding: 22px; } /* Métricas */ .apx-stats { grid-template-columns: repeat(4, 1fr); } .apx-stat { padding: 20px 22px; } .apx-stat .k { color: var(--apx-ink-2); font-weight: 600; font-size: 13.5px; } .apx-stat .n { font-size: 40px; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; } .apx-stat .f { color: var(--apx-ink-3); font-size: 12.5px; margin-top: 6px; } /* Fila de datos */ .apx-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--apx-line); } .apx-fila:first-child { border-top: 0; } .apx-fila .lab { color: var(--apx-ink-2); } .apx-fila .val { font-weight: 600; } /* Barra de aforo por franja (Hoy) */ .apx-franja { display: grid; grid-template-columns: 96px 1fr 128px; align-items: center; gap: 16px; padding: 13px 8px; border-radius: 12px; } .apx-franja:hover { background: var(--apx-panel-2); } .apx-franja .hh { font-weight: 600; font-variant-numeric: tabular-nums; } .apx-franja .hh small { display: block; color: var(--apx-ink-3); font-weight: 400; font-size: 12px; } .apx-bar { height: 8px; border-radius: 999px; background: #eef1f7; overflow: hidden; } .apx-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--apx-libre); } .apx-bar.ajust > i { background: var(--apx-ajust); } .apx-bar.lleno > i { background: var(--apx-lleno); } .apx-franja .oc { text-align: right; font-variant-numeric: tabular-nums; color: var(--apx-ink-2); font-size: 13.5px; } .apx-franja .oc b { color: var(--apx-ink); } /* Chips de estado */ .apx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .apx-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .apx-chip.ok { color: var(--apx-good); background: var(--apx-good-bg); } .apx-chip.warn { color: var(--apx-warn); background: var(--apx-warn-bg); } .apx-chip.bad { color: var(--apx-bad); background: var(--apx-bad-bg); } .apx-chip.info { color: var(--apx-info); background: var(--apx-info-bg); } /* Tabla */ .apx-tabla { width: 100%; border-collapse: collapse; } .apx-tabla th { text-align: left; color: var(--apx-ink-3); font-weight: 600; font-size: 12.5px; padding: 12px 14px; border-bottom: 1px solid var(--apx-line); } .apx-tabla td { padding: 14px; border-bottom: 1px solid var(--apx-line); vertical-align: middle; } .apx-tabla tr:last-child td { border-bottom: 0; } .apx-persona { display: inline-flex; align-items: center; gap: 10px; } .apx-vacio { padding: 26px 22px; color: var(--apx-ink-3); } /* Aviso / placeholder de sección en preparación */ .apx-prep { background: var(--apx-panel); border: 1px dashed var(--apx-line-2); border-radius: var(--apx-r); padding: 40px 32px; text-align: center; } .apx-prep h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; } .apx-prep p { margin: 0 auto; max-width: 44ch; color: var(--apx-ink-2); } /* ---- Pantalla de acceso ------------------------------------------------ */ .apx-acceso { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; } .apx-acceso__form { order: 1; } .apx-acceso__aside { order: 2; background: var(--apx-navy); color: #eaf1fb; padding: 56px clamp(32px,5vw,72px); display: flex; flex-direction: column; justify-content: space-between; } /* align-self evita que el flex en columna estire el logo a lo ancho (se deformaba: 30px de alto por todo el ancho del panel). */ .apx-acceso__aside img { height: 32px; width: auto; align-self: flex-start; max-width: 70%; object-fit: contain; } .apx-acceso__aside .apx-logo { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #fff; } .apx-acceso__aside .apx-logo span { color: var(--apx-azul-2); font-weight: 500; } .apx-acceso__aside h1 { font-size: clamp(30px,4vw,50px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; margin: 0 0 16px; } .apx-acceso__aside p { color: #b9c4da; max-width: 40ch; } .apx-acceso__form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px clamp(24px,5vw,64px); } .apx-acceso__form form { width: 100%; max-width: 380px; } .apx-acceso__form h2 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin: 0 0 6px; } .apx-acceso__form p { color: var(--apx-ink-2); margin: 0 0 22px; } .apx-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; } .apx-input { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--apx-line); border-radius: 14px; font: inherit; font-size: 16px; color: var(--apx-ink); background: #fff; } .apx-input:focus { border-color: var(--apx-azul); box-shadow: 0 0 0 3px var(--apx-azul-soft); outline: 2px solid transparent; } .apx-acceso__form .apx-btn { width: 100%; justify-content: center; margin-top: 16px; } .apx-msg { border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-weight: 500; font-size: 14px; } .apx-msg.ok { background: var(--apx-good-bg); color: var(--apx-good); } .apx-msg.bad { background: var(--apx-bad-bg); color: var(--apx-bad); } .apx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .apx-acceso__form p.apx-acceso__alt { margin: 34px 0 0; color: var(--apx-ink-2); font-size: 14px; } .apx-acceso__alt a { font-weight: 600; } .apx a.apx-volver { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 10px 20px; border: 1px solid var(--apx-line); border-radius: 999px; color: var(--apx-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; background: #fff; } .apx a.apx-volver:hover { border-color: var(--apx-azul); color: var(--apx-azul); } /* Dos columnas (aforo+citas, calendario+cierres) */ .apx-cols2 { grid-template-columns: 1.4fr 1fr; align-items: start; } /* Calendario (Vista APADIS) */ .apx-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 18px; } .apx-dow { text-align: center; color: var(--apx-ink-3); font-size: 12px; font-weight: 600; padding: 4px 0; } .apx-diac { min-height: 76px; border-radius: 12px; background: var(--apx-panel-2); padding: 8px 10px; display: flex; flex-direction: column; color: var(--apx-ink); text-decoration: none; } .apx-diac:hover { outline: 2px solid var(--apx-azul); outline-offset: 0; } .apx-diac .n { font-weight: 600; font-size: 15px; } .apx-diac .i { margin-top: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--apx-ink-2); } .apx-diac.es-libre { background: #e8f2fa; } .apx-diac.es-libre .i { color: #155e8c; } .apx-diac.es-pocas { background: #fdf3df; } .apx-diac.es-pocas .i { color: #8a6410; } .apx-diac.es-completo { background: #fbeae7; } .apx-diac.es-completo .i { color: #a03024; } .apx-diac.es-cerrado { background: #eef0f2; } .apx-diac.es-cerrado .i { color: #6b7386; } .apx-diac.es-hoy { outline: 2px solid var(--apx-navy); } .apx-diac.es-sel { outline: 2px solid var(--apx-azul); box-shadow: 0 0 0 3px var(--apx-azul-soft); } .apx-leyenda { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--apx-ink-2); } .apx-leyenda span { display: inline-flex; align-items: center; gap: 7px; } .apx-leyenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } .apx-leyenda i.es-libre { background: #cfe4f4; } .apx-leyenda i.es-pocas { background: #f6e4bd; } .apx-leyenda i.es-completo { background: #f4d3cd; } .apx-leyenda i.es-cerrado { background: #dfe3e7; } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 900px) { .apx-stats { grid-template-columns: repeat(2, 1fr); } .apx-cols2 { grid-template-columns: 1fr; } /* En móvil, en vez de ocultar la marca, va como cabecera azul compacta encima del formulario (si no, se veía un "Entrar" flotando sin contexto). */ .apx-acceso { grid-template-columns: 1fr; min-height: 0; } .apx-acceso__aside { order: 0; padding: 30px 24px 26px; justify-content: flex-start; gap: 12px; } .apx-acceso__aside h1 { font-size: 25px; margin: 0 0 4px; } .apx-acceso__aside p { font-size: 14px; max-width: none; } .apx-acceso__aside > p:last-child { display: none; } .apx-acceso__form { order: 1; align-items: flex-start; padding: 30px 24px 46px; } .apx-top-in { height: 58px; } .apx-user b, .apx-user small { display: none; } } @media (max-width: 560px) { .apx-wrap { padding: 0 16px; } .apx-stats { grid-template-columns: 1fr; } .apx-franja { grid-template-columns: 76px 1fr; } .apx-franja .oc { grid-column: 2; text-align: left; } } @media (prefers-reduced-motion: reduce) { .apx * { transition: none !important; } }