/* ============================================================================= BarberLinker - Sistema de diseño (capa de tema sobre Bootstrap 5.3) ----------------------------------------------------------------------------- Bootstrap se carga por CDN ANTES de este archivo. Aquí solo re-tematizamos Bootstrap con la paleta industrial y definimos los pocos componentes propios (band-dark, card-barbero, chip, badge, panel, sidebar). Dos temas por clase en : industrial premium (público) sobrio y denso (backend) Iconos: Bootstrap Icons (bi bi-*). Mapa desde los antiguos Tabler (ti-*): alert-circle→exclamation-circle arrow-left→arrow-left award→award building-store→shop calendar→calendar3 check→check-lg chevron-right→chevron-right circle-check→check-circle clock→clock crown→gem current-location→geo-alt-fill database-import→database-down edit→pencil-square eraser→eraser inbox→inbox list→list-ul lock→lock logout→box-arrow-right mail→envelope mail-forward→send map-2→map map-pin→geo-alt map-pin-filled→geo-alt-fill map-pin-plus→pin-map mood-empty→emoji-neutral photo→image plus→plus-lg report-analytics→graph-up search→search share→share star→star-fill trash→trash upload→upload user→person x→x-lg ============================================================================= */ :root { /* --- Paleta base (industrial) --- */ --carbon: #1C1C1A; --concreto: #44443F; --acero: #B4B2A9; --acero-50: #F1EFE8; --cobre: #BA7517; --cobre-50: #FAEEDA; --cobre-900: #633806; /* --- Estados semánticos --- */ --exito: #1D9E75; --exito-50: #E1F5EE; --peligro: #E24B4A; --peligro-50:#FCEBEB; --aviso: #EF9F27; /* --- Tipografía --- */ --font-display: "Bebas Neue", "Oswald", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* --- Escala / radios / sombras (compat. con vistas) --- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(28,28,26,.06); --shadow-md: 0 4px 16px rgba(28,28,26,.10); --transition: 160ms ease; /* --- Alias de superficies/borde (usados por componentes propios) --- */ --surface: #FFFFFF; --surface-2: #FAF9F5; --text: var(--carbon); --text-soft: #5F5E5A; --border: rgba(28,28,26,.12); /* --- Overrides globales de Bootstrap (paleta de marca) --- */ --bs-primary: #1C1C1A; /* CTA principal = carbón */ --bs-primary-rgb: 28,28,26; --bs-success: #1D9E75; --bs-success-rgb: 29,158,117; --bs-danger: #E24B4A; --bs-danger-rgb: 226,75,74; --bs-warning: #EF9F27; --bs-warning-rgb: 239,159,39; --bs-body-font-family: var(--font-body); --bs-link-color: #A5670F; /* cobre un poco más oscuro para contraste AA */ --bs-link-color-rgb: 165,103,15; --bs-link-hover-color: #633806; --bs-border-radius: .5rem; --bs-border-radius-sm: .375rem; --bs-border-radius-lg: .75rem; } /* Anillo de foco de marca (cobre) para toda la app */ .btn:focus-visible, .form-control:focus, .form-select:focus, a:focus-visible, button:focus-visible { border-color: var(--cobre) !important; box-shadow: 0 0 0 .2rem rgba(186,117,23,.25) !important; outline: 0; } /* ============================================================================= TEMA PÚBLICO — industrial moderno / premium ============================================================================= */ .theme-public { --bs-body-bg: var(--acero-50); --bs-body-color: var(--carbon); --bs-secondary-color: var(--text-soft); --bs-tertiary-bg: var(--surface-2); --bs-emphasis-color: var(--carbon); line-height: 1.6; } .theme-public h1, .theme-public h2, .theme-public h3, .theme-public .display-1, .theme-public .display-2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: 1.05; } /* Banda oscura de contraste (hero / header / footer) */ .band-dark { background: var(--carbon); color: var(--acero-50); } .band-dark h1, .band-dark h2, .band-dark h3 { color: var(--acero-50); } .band-dark a { color: var(--acero); } .band-dark a:hover { color: var(--acero-50); } /* Sin azul stock: Bootstrap hornea su azul dentro de cada componente (cambiar --bs-primary no basta). En claro todo control "primary" va en carbón. */ .btn-primary { --bs-btn-bg: #1C1C1A; --bs-btn-border-color: #1C1C1A; --bs-btn-color: #FFFFFF; --bs-btn-hover-bg: #333230; --bs-btn-hover-border-color: #333230; --bs-btn-hover-color: #FFFFFF; --bs-btn-active-bg: #000000; --bs-btn-active-border-color: #000000; --bs-btn-active-color: #FFFFFF; --bs-btn-disabled-bg: #8A8884; --bs-btn-disabled-border-color: #8A8884; --bs-btn-disabled-color: #E9E5DC; --bs-btn-focus-shadow-rgb: 28,28,26; } .nav-pills { --bs-nav-pills-link-active-bg: #1C1C1A; --bs-nav-pills-link-active-color: #FFFFFF; } .form-check-input:checked { background-color: #1C1C1A; border-color: #1C1C1A; } /* Botón acento (cobre, contorno) — complementa .btn-primary (carbón) */ .btn-accent { --bs-btn-color: var(--cobre); --bs-btn-border-color: var(--cobre); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--cobre-900); --bs-btn-hover-bg: var(--cobre-50); --bs-btn-hover-border-color: var(--cobre); --bs-btn-active-bg: var(--cobre-50); --bs-btn-active-border-color: var(--cobre); --bs-btn-focus-shadow-rgb: 186,117,23; font-weight: 500; } /* Botón cobre relleno (CTA de acento fuerte, p. ej. buscador del hero) */ .btn-cobre { --bs-btn-color: var(--acero-50); --bs-btn-bg: var(--cobre); --bs-btn-border-color: var(--cobre); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cobre-900); --bs-btn-hover-border-color: var(--cobre-900); --bs-btn-active-bg: var(--cobre-900); --bs-btn-active-border-color: var(--cobre-900); --bs-btn-focus-shadow-rgb: 186,117,23; font-weight: 500; } /* Realce cobre para textos/iconos de acento */ .text-cobre { color: var(--cobre) !important; } /* Tarjeta de barbero (hover elevado) */ .card-barbero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .card-barbero:hover { border-color: var(--acero); box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Etiqueta de servicio */ .chip { display: inline-block; border: 1px solid var(--border); color: var(--text-soft); font-size: 12px; padding: 4px 10px; border-radius: var(--radius-md); } .badge-disponible { background: var(--cobre-50); color: var(--cobre-900); font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-md); } /* ============================================================================= TEMA ADMIN / BACKEND — sobrio y funcional ============================================================================= */ .theme-admin { --bs-body-bg: #F5F5F2; --bs-body-color: #2C2C2A; --bs-secondary-color: #6B6B66; --bs-tertiary-bg: #FAFAF8; --bs-body-font-size: .9rem; line-height: 1.5; --text-soft: #6B6B66; --border: rgba(28,28,26,.14); } .theme-admin h1, .theme-admin h2, .theme-admin h3 { font-family: var(--font-body); font-weight: 500; } /* Panel/tarjeta densa del backend (equivale a .card, se conserva la clase) */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } /* Indicadores de acento funcional */ .is-selected { border-left: 2px solid var(--cobre); } .dot-nuevo { background: var(--cobre); color: #2C2C2A; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; } /* Tabla densa de catálogos/listados (clase .data conservada) */ table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th { text-align: left; color: var(--text-soft); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--border); } table.data td { padding: 8px 12px; border-bottom: 1px solid var(--border); } table.data tr:hover td { background: var(--surface-2); } /* ============================================================================= LAYOUT DE BACKEND — sidebar responsivo (offcanvas en móvil) ============================================================================= */ .app-shell { min-height: 100vh; } .app-sidebar { background: var(--surface); border-right: 1px solid var(--border); width: 220px; } .app-brand { font-weight: 500; font-size: 15px; } .app-brand .cobre { color: var(--cobre); } .app-nav .nav-link { color: var(--text-soft); padding: 9px 16px; border-left: 2px solid transparent; border-radius: 0; } .app-nav .nav-link:hover { color: var(--carbon); background: var(--surface-2); } .app-nav .nav-link.active { color: var(--carbon); font-weight: 500; border-left-color: var(--cobre); background: transparent; } .app-nav .nav-link i { margin-right: 8px; } @media (min-width: 992px) { /* En escritorio el offcanvas se muestra fijo como columna */ .app-sidebar.offcanvas-lg { visibility: visible !important; transform: none !important; } } /* ============================================================================= MODO OSCURO (F4) — solo para la app autenticada (_AppShell pone data-bs-theme según prefers-color-scheme). El sitio público conserva su identidad clara a propósito. Bootstrap oscurece sus componentes; aquí se re-mapean los tokens propios (paneles, chips, hojas, barra inferior). ============================================================================= */ [data-bs-theme="dark"] .theme-admin { --bs-body-bg: #161512; --bs-body-color: #E9E5DC; --bs-secondary-color: #A6A199; --bs-tertiary-bg: #24221E; --text: #E9E5DC; /* sin esto, --text hereda el carbón (casi negro) */ --text-soft: #A6A199; --surface: #201E1A; --surface-2: #2A2722; --border: rgba(233,229,220,.15); --carbon: #0F0E0C; /* bandas y header aún más oscuros */ --acero-50: #ECE8E0; --cobre-50: #3A2E1B; /* fondos suaves cobre, versión nocturna */ --cobre-900: #E0A55B; /* texto/acento sobre esos fondos */ } /* Controles "primary" en oscuro: cobre (el carbón se perdería sobre fondo oscuro). Selector sin .theme-admin por si el tema oscuro se extiende. */ [data-bs-theme="dark"] .btn-primary { --bs-btn-bg: var(--cobre); --bs-btn-border-color: var(--cobre); --bs-btn-color: #FFFFFF; --bs-btn-hover-bg: var(--cobre-900); --bs-btn-hover-border-color: var(--cobre-900); --bs-btn-hover-color: #1C1C1A; --bs-btn-active-bg: var(--cobre-900); --bs-btn-active-border-color: var(--cobre-900); --bs-btn-active-color: #1C1C1A; --bs-btn-disabled-bg: #55524B; --bs-btn-disabled-border-color: #55524B; --bs-btn-disabled-color: #24221E; --bs-btn-focus-shadow-rgb: 186,117,23; } [data-bs-theme="dark"] .nav-pills { --bs-nav-pills-link-active-bg: var(--cobre); --bs-nav-pills-link-active-color: #FFFFFF; } [data-bs-theme="dark"] .form-check-input:checked { background-color: var(--cobre); border-color: var(--cobre); } [data-bs-theme="dark"] .theme-admin .chip-barbero.active, [data-bs-theme="dark"] .theme-admin .slot-chip input:checked + span { background: #E9E5DC; border-color: #E9E5DC; color: #1C1C1A; } [data-bs-theme="dark"] .theme-admin .fab { box-shadow: 0 6px 16px rgba(0,0,0,.5); } /* ============================================================================= APP SHELL v2 — navegación unificada por rol Móvil (< lg): header compacto + BARRA INFERIOR de 3-5 destinos ("zona del pulgar") con hoja "Más" para el resto. Escritorio (≥ lg): mismo menú como sidebar fija. Un solo layout (_AppShell) para barbero, barbería, recepcionista y cliente. ============================================================================= */ /* Header superior compacto (móvil y escritorio) */ .appbar-top { position: sticky; top: 0; z-index: 1030; background: var(--carbon); color: var(--acero-50); padding-top: env(safe-area-inset-top); } .appbar-top .brand { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; color: var(--acero-50); text-decoration: none; } .appbar-top .brand .cobre { color: var(--cobre); } /* Barra inferior móvil */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 12px rgba(28,28,26,.06); } .tabbar .tab-item { flex: 1; min-width: 0; min-height: 54px; /* target táctil ≥ 44px */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px 8px; color: var(--text-soft); font-size: 10.5px; line-height: 1.1; text-decoration: none; position: relative; border: 0; background: transparent; } .tabbar .tab-item i { font-size: 20px; line-height: 1; } .tabbar .tab-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar .tab-item.active { color: var(--cobre); font-weight: 600; } .tabbar .tab-item.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 2px; background: var(--cobre); border-radius: 0 0 2px 2px; } .tab-badge { position: absolute; top: 3px; right: calc(50% - 20px); background: var(--peligro); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; min-width: 15px; padding: 0 4px; border-radius: 999px; text-align: center; } /* El contenido deja sitio a la barra inferior en móvil */ .main-shell { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } @media (min-width: 992px) { .tabbar { display: none; } .main-shell { padding-bottom: 1.5rem; } } /* Donde hay FAB (agenda del día), holgura extra para que no tape lo último */ @media (max-width: 991.98px) { .dia-scroll { padding-bottom: 4.5rem; } } /* Hoja "Más" (offcanvas inferior) */ .sheet-mas { --bs-offcanvas-height: auto; max-height: 75vh; border-radius: 14px 14px 0 0; } .sheet-mas .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 10px auto 2px; } .sheet-mas .mas-item { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.25rem; min-height: 48px; color: var(--bs-body-color); text-decoration: none; font-size: .95rem; border: 0; background: transparent; width: 100%; text-align: left; } .sheet-mas .mas-item:active, .sheet-mas .mas-item:hover { background: var(--surface-2); } .sheet-mas .mas-item i { font-size: 18px; color: var(--text-soft); width: 22px; text-align: center; } .sheet-mas .mas-item.active { color: var(--cobre); font-weight: 600; } .sheet-mas .mas-item.active i { color: var(--cobre); } /* Hijo flex que SÍ puede encogerse (Bootstrap no trae min-width:0; "min-vw-0" no existe y era la causa del desbordamiento horizontal en móvil). */ .minw-0 { min-width: 0; } /* Chips de horario del wizard de reserva (radio oculto + pastilla táctil) */ .slot-chip { position: relative; display: inline-block; } .slot-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .slot-chip span { display: inline-block; min-width: 74px; text-align: center; border: 1px solid var(--border); border-radius: 999px; padding: 9px 12px; font-size: 14px; background: var(--surface); color: var(--bs-body-color); transition: var(--transition); } .slot-chip input:focus-visible + span { border-color: var(--cobre); box-shadow: 0 0 0 .2rem rgba(186,117,23,.25); } .slot-chip input:checked + span { background: var(--carbon); border-color: var(--carbon); color: var(--acero-50); font-weight: 600; } .slot-franja { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin: .75rem 0 .35rem; } .slot-franja:first-child { margin-top: 0; } /* ============================================================================= AGENDA DEL DÍA (F3) — un barbero por pantalla con swipe en móvil, columnas comparativas en escritorio; acciones de cita en bottom-sheet y walk-in como botón flotante. ============================================================================= */ .chips-scroll { display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; scrollbar-width: none; } .chips-scroll::-webkit-scrollbar { display: none; } .chip-barbero { white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; background: var(--surface); font-size: .85rem; color: var(--text-soft); cursor: pointer; flex-shrink: 0; min-height: 36px; } .chip-barbero.active { background: var(--carbon); color: var(--acero-50); border-color: var(--carbon); font-weight: 600; } .dia-scroll { display: flex; gap: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; scroll-snap-type: x mandatory; } .dia-col { scroll-snap-align: center; flex: 0 0 100%; min-width: 0; } @media (min-width: 576px) { .dia-scroll { scroll-snap-type: none; } .dia-col { flex: 0 0 340px; } } /* Tarjeta de cita operable (toda la fila es legible; la acción es el botón ⋯) */ .cita-card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: .6rem .75rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .6rem; } .cita-card .cc-info { flex: 1; min-width: 0; } .cita-card .cc-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-soft); font-size: 18px; } .cita-card .cc-btn:active { background: var(--border); } /* Botón flotante (walk-in) — sobre la barra inferior en móvil */ .fab { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1029; width: 56px; height: 56px; border-radius: 50%; background: var(--cobre); color: #fff; border: 0; font-size: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(28,28,26,.3); } .fab:active { background: var(--cobre-900); } @media (min-width: 992px) { .fab { bottom: 24px; } } /* Hoja inferior de acciones (reusa la estética de sheet-mas) */ .sheet-cita { --bs-offcanvas-height: auto; max-height: 80vh; border-radius: 14px 14px 0 0; } @media (min-width: 576px) { /* offcanvas-bottom es left/right:0; margen auto lo centra sin tocar el transform */ .sheet-cita { max-width: 480px; margin-inline: auto; } } /* ============================================================================= TABLAS → TARJETAS (F4) — en móvil cada fila se apila como tarjeta con la etiqueta de su columna (data-label); en ≥ md la tabla es normal. ============================================================================= */ @media (max-width: 767.98px) { .table-cards thead { display: none; } .table-cards tbody tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: .6rem; overflow: hidden; } .table-cards tbody tr:last-child { margin-bottom: 0; } .table-cards tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0 !important; padding: .4rem .8rem; text-align: right; } .table-cards tbody td:first-child { padding-top: .65rem; } .table-cards tbody td:last-child { padding-bottom: .65rem; } .table-cards tbody td[data-label]::before { content: attr(data-label); color: var(--text-soft); font-size: .75rem; text-align: left; flex-shrink: 0; } .table-cards tbody td.tc-full { display: block; text-align: left; } } /* Galería del panel del barbero: dropzone, previas y reordenamiento */ .dz { border: 2px dashed var(--cobre); border-radius: .75rem; cursor: pointer; background: var(--cobre-50, rgba(186,117,23,.08)); color: var(--text); padding: 1.4rem 1rem; text-align: center; transition: background .15s ease; } .dz.encima, .dz:hover { background: rgba(186, 117, 23, .16); } .dz-item { position: relative; width: 84px; } .dz-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: .5rem; display: block; } .dz-titulo { margin-top: .25rem; font-size: .72rem !important; padding: .15rem .4rem; } .dz-quitar { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--peligro); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; } .dz-fallida .dz-thumb { outline: 2px solid var(--peligro); } .g-adm-handle { position: absolute; top: .4rem; right: .4rem; z-index: 2; border: 0; background: rgba(0,0,0,.5); color: #fff; border-radius: .4rem; padding: .15rem .3rem; cursor: grab; touch-action: none; } .g-adm-handle:active { cursor: grabbing; } .g-adm-portada { display: none; position: absolute; top: .4rem; left: .4rem; z-index: 2; background: var(--cobre); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .04em; padding: .18rem .5rem; border-radius: 99px; } #galeriaAdmin > .col:first-child .g-adm-portada, #galeriaAdmin > [data-imagen-id]:first-child .g-adm-portada { display: block; } .g-adm-arrastrando { opacity: .55; } .g-adm-hueco-caja { height: 100%; border: 2px dashed var(--cobre); border-radius: var(--radius-md, .5rem); background: var(--cobre-50, rgba(186,117,23,.08)); } /* Semáforo de estado de cita (Mis citas del cliente): punto de color junto al estado; en móvil (modo tarjeta) se ancla a la esquina superior derecha. */ .cita-semaforo { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .35rem; vertical-align: baseline; flex-shrink: 0; } .cita-semaforo-ok { background: var(--exito); } /* confirmada */ .cita-semaforo-espera { background: #E3A008; } /* solicitada: ámbar */ .cita-semaforo-alto { background: var(--peligro); } /* cancelada/rechazada/no-show */ .cita-semaforo-fin { background: var(--text-soft); } /* completada */ @media (max-width: 767.98px) { .table-cards tbody tr { position: relative; } .table-cards .cita-semaforo { position: absolute; top: .7rem; right: .8rem; margin: 0; width: .8rem; height: .8rem; } } /* Formularios en móvil: 16px evita el auto-zoom de iOS */ @media (max-width: 991.98px) { .form-control, .form-select { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .card-barbero, .tabbar .tab-item { transition: none; } .card-barbero:hover { transform: none; } } /* ============================================================================= Ajustes finos compartidos ============================================================================= */ .form-label { font-size: 12px; color: var(--text-soft); margin-bottom: .25rem; } .text-soft { color: var(--text-soft) !important; } .cursor-pointer { cursor: pointer; } /* Ver contraseña: el botón se sobrepone al campo (lo agrega ver-password.js) */ .pwd-wrap { position: relative; } .pwd-wrap > .form-control { padding-right: 2.6rem; } .pwd-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; line-height: 1; color: var(--text-soft); cursor: pointer; } .pwd-toggle:hover, .pwd-toggle:focus-visible { color: var(--cobre); } .pwd-toggle:focus-visible { outline: 2px solid var(--cobre); outline-offset: -2px; border-radius: var(--radius-sm); }