/* =============== TEMA LATINBIKE — PALETA + COMPONENTES =============== - Tema claro por defecto - Tema oscuro activable con - Botones rediseñados (ver sección "BOTONES") ====================================================================== */ /* --------- BASE LAYOUT --------- */ html, body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); } .content-wrap { max-width: 1200px; margin: 0 auto; padding: var(--space-6); } .themed-banner { padding: var(--space-6) 0; } .themed-title { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-4); } /* Tarjetas / tablas / inputs */ .themed-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-6); } .themed-table { width: 100%; border-collapse: collapse; } .themed-table th, .themed-table td { border-bottom: 1px solid var(--color-border); padding: 10px; text-align: left; } label { display:block; margin: 10px 0 6px; font-weight:600; color: var(--color-text); } input, select, textarea { width:100%; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--color-border); background: var(--color-elevated); color: var(--color-text); font-size: var(--text-base); transition: border-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent); } .text-muted { color: var(--color-text-muted); } /* --------- PALETA — TEMA CLARO (por defecto) --------- */ :root { --color-bg: #f3f4f6; /* gris claro, descansa la vista */ --color-surface: #ffffff; /* tarjetas, formularios */ --color-elevated: #ffffff; /* elementos elevados */ --color-text: #1f2937; /* gris oscuro */ --color-text-muted: #6b7280; /* gris medio */ --color-border: #e5e7eb; /* gris claro */ --ring: color-mix(in oklab, #ff512f 25%, transparent); /* halo accesible */ /* Acentos */ --color-primary: #ff512f; /* naranja vibrante */ --color-primary-600: #e64a2a; --color-primary-700: #cc4225; --color-accent: #00c9ff; /* celeste fresco */ --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #2563eb; /* Superficies semánticas suaves (para outline/ghost hovers) */ --surface-primary-weak: color-mix(in oklab, var(--color-primary) 10%, #ffffff); --surface-accent-weak: color-mix(in oklab, var(--color-accent) 12%, #ffffff); --surface-success-weak: color-mix(in oklab, var(--color-success) 10%, #ffffff); --surface-warning-weak: color-mix(in oklab, var(--color-warning) 10%, #ffffff); --surface-danger-weak: color-mix(in oklab, var(--color-danger) 10%, #ffffff); } /* --------- PALETA — TEMA OSCURO (activar con ) --------- */ html.dark { --color-bg: #0f1220; --color-surface: #11162a; --color-elevated: #141b33; --color-text: #e6e8ef; --color-text-muted: #a6adbb; --color-border: #27304b; --ring: color-mix(in oklab, #00c9ff 25%, transparent); --color-primary: #ff6b3d; --color-primary-600: #f2572a; --color-primary-700: #d94414; --color-accent: #24d3ee; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #38bdf8; --surface-primary-weak: color-mix(in oklab, var(--color-primary) 18%, #0f1220); --surface-accent-weak: color-mix(in oklab, var(--color-accent) 18%, #0f1220); --surface-success-weak: color-mix(in oklab, var(--color-success) 18%, #0f1220); --surface-warning-weak: color-mix(in oklab, var(--color-warning) 18%, #0f1220); --surface-danger-weak: color-mix(in oklab, var(--color-danger) 18%, #0f1220); } /* ======================================================================= BOTONES — rediseño - Variantes: .primary .secondary .accent .success .warning .danger .outline .ghost - Tamaños: .sm .md .lg - Estados: :hover :active :disabled :focus-visible - Extras: .icon (solo ícono), [data-loading="true"] (spinner) ======================================================================= */ .themed-btn { --btn-bg: var(--color-elevated); --btn-fg: var(--color-text); --btn-bd: var(--color-border); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font: 600 var(--text-sm)/1 var(--font-sans); cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .04s ease; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; } .themed-btn:hover { transform: translateY(-1px); } .themed-btn:active { transform: translateY(0); } .themed-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); } /* Tamaños */ .themed-btn.sm { padding: 8px 12px; font-size: var(--text-sm); } .themed-btn.md { padding: 10px 16px; font-size: var(--text-sm); } /* default */ .themed-btn.lg { padding: 12px 18px; font-size: var(--text-base); } /* Disabled */ .themed-btn:disabled, .themed-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } /* Variantes rellenas */ .themed-btn.primary { --btn-bg: var(--color-primary); --btn-fg: #fff; --btn-bd: transparent; } .themed-btn.accent { --btn-bg: var(--color-accent); --btn-fg: #0a0a0a; --btn-bd: transparent; } .themed-btn.success { --btn-bg: var(--color-success); --btn-fg: #fff; --btn-bd: transparent; } .themed-btn.warning { --btn-bg: var(--color-warning); --btn-fg: #fff; --btn-bd: transparent; } .themed-btn.danger { --btn-bg: var(--color-danger); --btn-fg: #fff; --btn-bd: transparent; } .themed-btn.secondary{ --btn-bg: var(--color-elevated); --btn-fg: var(--color-text); --btn-bd: var(--color-border); } /* Hover / Active para rellenos */ .themed-btn.primary:hover { background: var(--color-primary-600); } .themed-btn.primary:active { background: var(--color-primary-700); } html.dark .themed-btn.accent { color:#0a0a0a; } /* contraste en oscuro */ /* Variantes outline (borde + fondo débil según semántica) */ .themed-btn.outline { background: transparent; } .themed-btn.outline.primary { border-color: var(--color-primary); color: var(--color-primary); } .themed-btn.outline.primary:hover { background: var(--surface-primary-weak); } .themed-btn.outline.accent { border-color: var(--color-accent); color: var(--color-accent); } .themed-btn.outline.accent:hover { background: var(--surface-accent-weak); } .themed-btn.outline.success { border-color: var(--color-success); color: var(--color-success); } .themed-btn.outline.success:hover { background: var(--surface-success-weak); } .themed-btn.outline.warning { border-color: var(--color-warning); color: var(--color-warning); } .themed-btn.outline.warning:hover { background: var(--surface-warning-weak); } .themed-btn.outline.danger { border-color: var(--color-danger); color: var(--color-danger); } .themed-btn.outline.danger:hover { background: var(--surface-danger-weak); } /* Variante ghost (sin borde; solo feedback visual sutil) */ .themed-btn.ghost { background: transparent; border-color: transparent; } .themed-btn.ghost:hover { background: color-mix(in oklab, var(--color-text) 6%, transparent); } /* Botón solo ícono (circular) */ .themed-btn.icon { width: 40px; height: 40px; padding: 0; border-radius: 999px; } .themed-btn.icon.lg { width: 48px; height: 48px; } .themed-btn.icon.sm { width: 32px; height: 32px; } /* Estado loading: agrega atributo data-loading="true" */ .themed-btn[data-loading="true"] { position: relative; pointer-events: none; } .themed-btn[data-loading="true"]::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, currentColor 0 1px, transparent 2px) center/14px 14px no-repeat; animation: spin 1s linear infinite; mask: radial-gradient(circle at center, transparent 40%, black 41%); } @keyframes spin { to { transform: rotate(1turn); } } /* ===== Chips / alertas (ligeras) ===== */ .themed-chip { display:inline-block; padding:4px 10px; border-radius:999px; font-size:var(--text-sm); border:1px solid var(--color-border); color: var(--color-text); } .alert { padding: var(--space-4); border-radius: var(--radius-md); border:1px solid; margin: var(--space-4) 0; } .alert.success { background: color-mix(in oklab, var(--color-success) 10%, transparent); border-color: var(--color-success); } .alert.warning { background: color-mix(in oklab, var(--color-warning) 10%, transparent); border-color: var(--color-warning); } .alert.danger { background: color-mix(in oklab, var(--color-danger) 10%, transparent); border-color: var(--color-danger); } /* --------- UTILIDADES --------- */ .btn-row{ display:flex; gap: var(--space-3); align-items:center; flex-wrap: wrap; } .link-card{ display:block; text-decoration:none; color:inherit; transition: transform .12s ease, box-shadow .18s ease; } .link-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); } /* reservas: asegurar z-index correcto */ #grid-horario { position: relative; z-index: 1; } #lista-clientes { z-index: 50; } #slot-modal, #historial-modal { z-index: 999; } #sms-popout { z-index: 998; } /* ===== KPIs — Fila horizontal ===== */ .kpi-row{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; /* scroll cómodo */ scroll-snap-type: x proximity; } .kpi-row::-webkit-scrollbar { height: 8px; } .kpi-row::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } .kpi-card{ scroll-snap-align: start; border: 1px solid var(--color-border); border-radius: 12px; padding: 10px; background: var(--color-bg); min-width: 240px; } .kpi-card .kpi-head{ font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: .35rem; } .kpi-card .kpi-metrics{ display: grid; grid-template-columns: repeat(4, minmax(60px,1fr)); gap: 6px 8px; align-items: center; } .kpi-card .kpi-metrics .lbl{ display: block; font-size: 12px; color: var(--color-muted, #667); } .kpi-card .kpi-metrics .val{ display: block; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 720px){ .kpi-row{ grid-auto-columns: 80%; } .kpi-card .kpi-metrics{ grid-template-columns: repeat(2, minmax(80px,1fr)); } } /* ===== Corrección visual: filtros Sala / Semana (reservas.php) ===== */ #tab-crear .themed-card.filtros-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; align-items: start !important; /* <-- clave */ } #tab-crear .themed-card.filtros-grid label { display: block; margin-bottom: 6px; } #tab-crear .themed-card.filtros-grid select { width: 100%; min-width: 240px; } /* ===== Horario denso (≈40% más pequeño) ===== */ #grid-horario.dense { --col-min: 140px; max-height: 60vh; } #grid-horario.dense .day-head { padding: 6px 8px; font-size: 13px; } #grid-horario.dense .slot { padding: 5px 6px; grid-template-columns: 22px 1fr auto; gap: 6px; } #grid-horario.dense .slot .ph { width: 22px; height: 22px; border-radius: 5px; } #grid-horario.dense .slot .txt { gap: 1px; } #grid-horario.dense .slot .txt .hora { font-size: 12px; } #grid-horario.dense .slot .txt .prod { font-size: 11px; } #grid-horario.dense .slot .txt .ent { font-size: 10.5px; } #grid-horario.dense .slot .cap { font-size: 10.5px; padding: 2px 6px; border-radius: 7px; } /* Un pelín más compacto aún (opcional) */ #grid-horario.dense.xs .slot { padding: 4px 5px; grid-template-columns: 20px 1fr auto; gap: 5px; } #grid-horario.dense.xs .slot .ph { width: 20px; height: 20px; } #grid-horario.dense.xs .slot .txt .hora { font-size: 11.5px; } #grid-horario.dense.xs .slot .txt .prod, #grid-horario.dense.xs .slot .txt .ent { font-size: 10.5px; } #grid-horario.dense.xs .slot .cap { font-size: 10px; padding: 2px 5px; } /* ==== Fix: tamaño fijo para la foto del entrenador en el horario ==== */ #grid-horario .slot img.ph, #grid-horario .slot .ph { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; display: block; border-radius: 6px; border: 1px solid var(--color-border); flex: 0 0 28px; } /* Tamaños para vistas densas */ #grid-horario.dense img.ph, #grid-horario.dense .ph { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; border-radius: 5px; } #grid-horario.dense.xs img.ph, #grid-horario.dense.xs .ph { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; border-radius: 5px; } /* Asegura las columnas del slot para que la imagen no se estire */ #grid-horario .slot { display: grid; grid-template-columns: 28px 1fr auto; /* avatar | texto | cupos */ gap: 8px; align-items: center; } #grid-horario.dense .slot { grid-template-columns: 22px 1fr auto; gap: 6px; } #grid-horario.dense.xs .slot { grid-template-columns: 20px 1fr auto; gap: 5px; } /* ===== MATRIZ DE HORARIO (estable y compacta) ===== */ #grid-horario { max-height: 62vh; overflow:auto; padding:10px; } /* Contenedor matriz (grid CSS con primera columna "Hora") */ #grid-horario .matrix { display: grid; gap: 8px; } /* Fila de cabecera (días) y filas de hora */ #grid-horario .mx-row { display: contents; /* las celdas se colocan en la grilla del contenedor */ } /* Celda genérica */ #grid-horario .mx-cell { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); padding: 8px; min-height: 46px; display: flex; align-items: center; gap: 8px; } /* Cabecera de días */ #grid-horario .mx-head { position: sticky; top: 0; z-index: 1; background: color-mix(in oklab, var(--color-bg) 98%, var(--color-border)); font-weight: 600; } /* Columna "Hora" (pegada) */ #grid-horario .mx-time { position: sticky; left: 0; z-index: 2; background: color-mix(in oklab, var(--color-bg) 98%, var(--color-border)); font-weight: 700; font-variant-numeric: tabular-nums; } /* Slot dentro de celda */ #grid-horario .slot-card { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; width: 100%; } /* Avatar fijo (evita problemas con reglas globales de ) */ #grid-horario .slot-card .ph { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--color-border); object-fit: cover; display:block; } /* Textos del slot */ #grid-horario .slot-card .txt { min-width:0; display:grid; gap:2px; } #grid-horario .slot-card .hora { font-weight:700; font-size:12px; } #grid-horario .slot-card .prod { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #grid-horario .slot-card .ent { font-size:11.5px; color: var(--color-muted, #667); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Cupos */ #grid-horario .slot-card .cap { font-variant-numeric: tabular-nums; font-weight:700; font-size:12px; padding:3px 6px; border-radius:8px; background:#eef5ff; } /* Estados */ #grid-horario .slot-card.lock { background: color-mix(in oklab, var(--color-warning) 15%, transparent); border-radius:8px; padding:4px; } #grid-horario .slot-card.full { opacity:.8; } /* Móvil: columnas más anchas */ @media (max-width:720px){ #grid-horario { max-height: 56vh; } } /* ==== MATRIZ SIMPLE Y ESTABLE PARA EL HORARIO (OVERRIDE FINAL) ==== */ #grid-horario { max-height: 62vh; overflow: auto; padding: 10px; position: relative; } /* Contenedor de grilla con 1 columna "Hora" + N columnas (días activos) */ #grid-horario .matrix { display: grid; gap: 8px; } /* Fila virtual (usamos display:contents para que las celdas sigan la grilla del padre) */ #grid-horario .mx-row { display: contents; } /* Celdas */ #grid-horario .mx-cell { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); min-height: 46px; padding: 8px; display: flex; align-items: center; } /* Cabeceras pegadas */ #grid-horario .mx-head { position: sticky; top: 0; z-index: 1; background: color-mix(in oklab, var(--color-bg) 98%, var(--color-border)); font-weight: 600; } #grid-horario .mx-time { position: sticky; left: 0; z-index: 2; background: color-mix(in oklab, var(--color-bg) 98%, var(--color-border)); font-weight: 700; font-variant-numeric: tabular-nums; } /* Contenido del slot (única clase válida) */ #grid-horario .slot-card { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; width: 100%; } /* Avatar fijo (IMG con tamaño forzado) */ #grid-horario .slot-card .ph { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: cover !important; display: block !important; border-radius: 6px; border: 1px solid var(--color-border); } /* Textos del slot */ #grid-horario .slot-card .txt { min-width: 0; display: grid; gap: 2px; } #grid-horario .slot-card .hora { font-weight: 700; font-size: 12px; } #grid-horario .slot-card .prod { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #grid-horario .slot-card .ent { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cupos */ #grid-horario .slot-card .cap { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; padding: 3px 6px; border-radius: 8px; background: #eef5ff; } /* Estados */ #grid-horario .slot-card.full { opacity: .8; } #grid-horario .slot-card.lock { background: color-mix(in oklab, var(--color-warning) 15%, transparent); border-radius: 8px; padding: 4px; } /* Móvil */ @media (max-width: 720px){ #grid-horario { max-height: 56vh; } } /* ===== Filtros: Sala / Semana — alineados arriba ===== */ #tab-crear .themed-card.filtros-grid{ display: grid; grid-template-columns: repeat(2, minmax(260px,1fr)); gap: 12px; align-items: start; /* clave: etiquetas a la misma línea de base */ } #tab-crear .filtros-grid .field{ display:flex; flex-direction:column; } #tab-crear .filtros-grid .field label{ margin-bottom:6px; } #tab-crear .filtros-grid .field select{ min-width: 240px; } #tab-crear .filtros-grid .help{ margin-top:6px; font-size:12px; color: var(--color-text-muted); } /* ==== OVERRIDES FINALES (RESERVAS) — filtros alineados + slot vertical exacto ==== */ /* 1) Filtros: Sala / Semana a la misma altura */ #tab-crear .themed-card.filtros-grid{ display: grid !important; grid-template-columns: repeat(2, minmax(260px,1fr)) !important; gap: 12px !important; align-items: start !important; } #tab-crear .filtros-grid .field{ display:flex !important; flex-direction:column !important; } #tab-crear .filtros-grid .field label{ margin-bottom:6px !important; } #tab-crear .filtros-grid .field select{ min-width:240px !important; } #tab-crear .filtros-grid .help{ margin-top:6px !important; font-size:12px !important; color: var(--color-text-muted) !important; } /* 2) MATRIZ: celdas un poco más altas (más alto que ancho) */ #grid-horario .mx-cell{ min-height: 92px !important; /* sube altura para que quepa todo cómodo */ padding: 10px !important; background: var(--color-surface) !important; } /* 3) SLOT VERTICAL - Fila 1: TÍTULO (nombre de la clase) centrado rojo - Fila 2: IZQ avatar + nombre del entrenador - Final: disponibilidad centrada en azul */ #grid-horario .slot-card{ display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 100% !important; background: transparent !important; /* la celda ya tiene fondo */ } /* Título rojo, centrado, sin espacio desperdiciado */ #grid-horario .slot-card .titulo{ margin: 0 !important; padding: 0 !important; text-align: center !important; color: var(--color-primary) !important; /* rojo paleta */ font-weight: 700 !important; font-size: 13.5px !important; line-height: 1.2 !important; } /* Fila de entrenador (avatar + nombre) a la izquierda */ #grid-horario .slot-card .row-ent{ display: grid !important; grid-template-columns: 32px 1fr !important; /* avatar | texto */ align-items: center !important; gap: 8px !important; } /* Avatar fijo */ #grid-horario .slot-card .ph{ width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; object-fit: cover !important; display: block !important; border-radius: 6px !important; border: 1px solid var(--color-border) !important; } /* Nombre del entrenador SIEMPRE visible (máx 2 líneas) */ #grid-horario .slot-card .ent{ white-space: normal !important; display: -webkit-box !important; display: box !important; /* fallback */ line-clamp: 2 !important; /* estándar (avisa al editor) */ -webkit-line-clamp: 2 !important; /* soporte real */ -webkit-box-orient: vertical !important; overflow: hidden !important; line-height: 1.25 !important; font-size: 13px !important; color: var(--color-text) !important; } /* Oculta hora y producto dentro del slot (la hora ya va en la columna de la matriz) */ #grid-horario .slot-card .hora, #grid-horario .slot-card .prod{ display: none !important; } /* Disponibilidad al final (centrada y azul) */ #grid-horario .slot-card .cap{ margin-top: auto !important; /* empuja hacia el fondo del slot */ align-self: center !important; /* centrado horizontal */ color: var(--color-info) !important; /* azul */ background: transparent !important; border: 1px solid var(--color-info) !important; border-radius: 10px !important; padding: 4px 10px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; } /* Estados visuales (compatibles con tu paleta) */ #grid-horario .slot-card.full{ opacity: .85 !important; } #grid-horario .slot-card.lock{ background: color-mix(in oklab, var(--color-warning) 12%, transparent) !important; border-radius: 8px !important; padding: 4px !important; } /* Móvil: un pelín menos alto */ @media (max-width:720px){ #grid-horario .mx-cell{ min-height: 86px !important; } }