/* ============================================================ Gestión — Design System & Styles The Candle Shop - Sistema de Gestion Interna Brand: Pardo/Ivory/Ocre palette, Montagu Slab + Red Hat Display ============================================================ */ /* ── 1. Design Tokens ── */ :root { /* Brand Colors */ --tcs-pardo: #382E2C; --tcs-pardo-claro: #756662; --tcs-ocre: #B1A77E; --tcs-ivory: #E6E0D7; /* page bg — warmer + more contrast vs white cards */ --tcs-gris: #A9A89E; --tcs-white: #FFFFFF; /* Derived (opacity variants for UI states) */ --tcs-ivory-warm: #EFEBE3; /* used inside cards / hover surfaces */ --tcs-ocre-10: rgba(177,167,126,0.1); --tcs-ocre-20: rgba(177,167,126,0.2); --tcs-pardo-05: rgba(56,46,44,0.09); /* borders/separators — bumped from 0.05 for visibility */ --tcs-pardo-80: rgba(56,46,44,0.8); /* Semantic (earthy, desaturated — harmonize with brand) */ --tcs-success: #5A7A5A; --tcs-success-bg: rgba(90,122,90,0.1); --tcs-warning: #B8943E; --tcs-warning-bg: rgba(184,148,62,0.1); --tcs-danger: #9E4B4B; --tcs-danger-bg: rgba(158,75,75,0.1); --tcs-info: #6B7FA3; --tcs-info-bg: rgba(107,127,163,0.1); /* Typography */ --font-display: 'Montagu Slab', Georgia, 'Times New Roman', serif; --font-body: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-condensed: 'Roboto Condensed', 'Arial Narrow', sans-serif; /* Spacing (8px grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Border Radius */ --radius-sm: 6px; --radius-base: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 9999px; /* Shadows — bumped for better card definition on store PC display */ --shadow-card: 0 1px 3px rgba(56,46,44,0.10), 0 1px 2px rgba(56,46,44,0.06); --shadow-hover: 0 8px 20px rgba(56,46,44,0.14), 0 2px 6px rgba(56,46,44,0.08); --shadow-modal: 0 16px 48px rgba(56,46,44,0.22); --shadow-topbar: 0 1px 4px rgba(56,46,44,0.10); /* Hover state colors */ --tcs-ocre-dark: #9E9A72; --tcs-danger-dark: #8A3F3F; /* Z-index layers */ --z-schedule-now: 2; --z-login-error: 10; --z-topbar: 100; --z-mobile-nav: 999; --z-modal: 1000; --z-toast: 2000; --z-skip-link: 9999; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease-out; } /* ── 2. Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; touch-action: manipulation; /* En iOS PWA, el rubber-band overscroll arriba/abajo muestra el bg del . Lo ponemos pardo para que matchee con topbar y bottom nav. */ background: var(--tcs-pardo); } /* Mata zoom por doble-tap en iOS Safari sin perder pinch-zoom */ button, input, select, textarea, a, label, [role="button"] { touch-action: manipulation; } body { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--tcs-pardo); background: var(--tcs-ivory); min-height: 100vh; } h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.25; color: var(--tcs-pardo); } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; font-weight: 400; } a { color: var(--tcs-ocre); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--tcs-pardo); } img { max-width: 100%; height: auto; } /* ── 3. Layout ── */ /* Topbar (not sidebar — this is a kiosk/shared PC app) */ .topbar { background: var(--tcs-pardo); color: var(--tcs-ivory); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-6); height: 56px; position: sticky; top: 0; z-index: var(--z-topbar); /* Pinta el área de overscroll/rubber-band arriba con el mismo pardo */ box-shadow: 0 -50vh 0 50vh var(--tcs-pardo), var(--shadow-topbar); } .topbar-brand { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--tcs-ivory); display: flex; align-items: center; gap: var(--space-3); } .topbar-brand small { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--tcs-ocre); } .topbar-right { display: flex; align-items: center; gap: var(--space-4); } .topbar-user { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; } .topbar-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--tcs-ocre); color: var(--tcs-pardo); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; } .topbar-time { font-family: var(--font-condensed); font-size: 0.85rem; color: var(--tcs-gris); } /* ── Admin desktop nav: agrupada con dropdowns ── */ .adm-nav { display: flex; align-items: center; gap: var(--space-4); font-size: 0.85rem; font-family: var(--font-body); } .adm-link { color: var(--tcs-gris); text-decoration: none; padding: 4px 0; background: none; border: none; font: inherit; cursor: pointer; transition: color 0.12s; white-space: nowrap; } .adm-link:hover { color: var(--tcs-ivory); } .adm-link.is-active { color: var(--tcs-ocre); } .adm-dropdown { position: relative; } .adm-toggle { display: inline-flex; align-items: center; gap: 3px; } .adm-toggle::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.55; margin-left: 2px; transition: transform 0.15s; } .adm-dropdown:hover .adm-toggle::after, .adm-dropdown:focus-within .adm-toggle::after { transform: rotate(180deg); opacity: 0.9; } .adm-menu { position: absolute; top: 100%; left: -8px; margin-top: 6px; background: var(--tcs-pardo); border: 1px solid rgba(237,234,230,0.12); border-radius: var(--radius-sm); padding: 6px 0; min-width: 200px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; box-shadow: 0 12px 28px rgba(0,0,0,0.35); z-index: var(--z-topbar); } .adm-dropdown:hover .adm-menu, .adm-dropdown:focus-within .adm-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Buffer invisible para que el menú no se cierre al cruzar el gap */ .adm-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .adm-menu a { display: block; padding: 9px 16px; color: var(--tcs-ivory); text-decoration: none; font-size: 0.86rem; transition: background 0.1s, color 0.1s; white-space: nowrap; } .adm-menu a:hover { background: rgba(255,255,255,0.07); color: var(--tcs-ocre); } .adm-menu a.is-active { color: var(--tcs-ocre); background: rgba(177,167,126,0.14); } /* En pantallas más angostas el desktop nav se oculta (bottom nav móvil toma el control) */ @media (max-width: 900px) { .adm-nav { display: none; } } /* Main content area */ .main { margin: 0 auto; padding: var(--space-8) var(--space-6); } .main-wide { max-width: 1200px; } /* Page header */ .page-header { margin-bottom: var(--space-8); } .page-header h1 { margin-bottom: var(--space-1); } .page-header .page-subtitle { font-size: 0.9rem; color: var(--tcs-pardo-claro); } /* ── 4. Components ── */ /* 4.1 Cards */ .card { background: var(--tcs-white); border: 1px solid rgba(169,168,158,0.30); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); } /* Home action cards — larger, with icon */ .action-card { background: var(--tcs-white); border: 1px solid rgba(169,168,158,0.25); border-radius: var(--radius-lg); padding: var(--space-6); cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); text-decoration: none; color: inherit; display: block; } .action-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); color: inherit; } .action-card-icon { font-size: 2rem; margin-bottom: var(--space-3); color: var(--tcs-ocre); line-height: 1; } .action-card h3 { font-family: var(--font-body); font-weight: 500; font-size: 1rem; margin-bottom: var(--space-1); } .action-card p { font-size: 0.85rem; color: var(--tcs-pardo-claro); } /* ── Schedule card — shift bars ── */ .sched-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .sched-card-title { font-family: var(--font-body); font-weight: 500; font-size: 1rem; display: flex; align-items: center; gap: var(--space-2); margin: 0; } .sched-card-date { font-family: var(--font-condensed, var(--font-body)); font-size: 0.72rem; color: var(--tcs-gris); text-transform: uppercase; letter-spacing: 0.04em; } .sched-bars { display: flex; flex-direction: column; gap: 6px; position: relative; } .sched-bar-row { display: flex; align-items: center; gap: var(--space-3); } .sched-bar-name { font-size: 0.78rem; font-weight: 400; color: var(--tcs-pardo-claro); min-width: 42px; text-align: right; flex-shrink: 0; white-space: nowrap; } .sched-bar-name.is-me { color: var(--tcs-ocre); font-weight: 500; } .sched-bar-track { flex: 1; height: 22px; background: rgba(169,168,158,0.1); border-radius: 4px; position: relative; overflow: hidden; } .sched-bar-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--tcs-gris); display: flex; align-items: center; padding: 0 6px; font-family: var(--font-condensed, var(--font-body)); font-size: 0.65rem; font-weight: 500; color: var(--tcs-white); white-space: nowrap; min-width: 28px; } .sched-bar-fill.is-me { background: var(--tcs-ocre); } .sched-time-axis { display: flex; justify-content: space-between; padding: 3px 0 0 0; margin-left: 54px; } .sched-time-axis span { font-family: var(--font-condensed, var(--font-body)); font-size: 0.6rem; color: var(--tcs-gris); opacity: 0.7; } .sched-now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tcs-danger); z-index: var(--z-schedule-now); pointer-events: none; } .sched-now-dot { position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--tcs-danger); } /* Card with urgency indicator (left border) */ .card-urgency-high { border-left: 4px solid var(--tcs-danger); } .card-urgency-medium { border-left: 4px solid var(--tcs-warning); } .card-urgency-low { border-left: 4px solid var(--tcs-success); } /* 4.2 Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; min-height: 44px; /* Touch target */ } .btn-primary { background: var(--tcs-ocre); color: var(--tcs-pardo); } .btn-primary:hover { background: var(--tcs-ocre-dark); color: var(--tcs-pardo); } .btn-secondary { background: transparent; color: var(--tcs-pardo); border: 1px solid var(--tcs-gris); } .btn-secondary:hover { background: var(--tcs-pardo-05); } .btn-danger { background: var(--tcs-danger); color: var(--tcs-ivory); } .btn-danger:hover { background: var(--tcs-danger-dark); color: var(--tcs-ivory); } .btn-ghost { background: transparent; color: var(--tcs-ocre); padding: var(--space-2) var(--space-3); } .btn-ghost:hover { background: var(--tcs-ocre-10); color: var(--tcs-pardo); } .btn-lg { padding: var(--space-4) var(--space-8); font-size: 1rem; min-height: 52px; border-radius: var(--radius-md); } .btn-sm { padding: var(--space-2) var(--space-4); font-size: 0.8rem; min-height: 40px; } .btn-block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* 4.3 Forms */ .form-group { margin-bottom: var(--space-5); } .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--tcs-pardo); margin-bottom: var(--space-1); } .form-input { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--tcs-gris); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.95rem; color: var(--tcs-pardo); background: var(--tcs-white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-height: 44px; } .form-input:focus { outline: none; border-color: var(--tcs-ocre); box-shadow: 0 0 0 3px var(--tcs-ocre-20); } .form-input::placeholder { color: var(--tcs-gris); } textarea.form-input { min-height: 120px; resize: vertical; } /* 4.4 Tables */ .table-container { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid rgba(169,168,158,0.25); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--tcs-pardo); color: var(--tcs-ivory); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; } td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(169,168,158,0.15); background: var(--tcs-white); } tr:hover td { background: var(--tcs-ivory); } /* 4.5 Badges & Tags */ .badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3px; } .badge-success { background: var(--tcs-success-bg); color: var(--tcs-success); } .badge-warning { background: var(--tcs-warning-bg); color: var(--tcs-warning); } .badge-danger { background: var(--tcs-danger-bg); color: var(--tcs-danger); } .badge-info { background: var(--tcs-info-bg); color: var(--tcs-info); } .badge-neutral { background: var(--tcs-pardo-05); color: var(--tcs-pardo-claro); } /* Notification badge (count) */ .badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--tcs-danger); color: var(--tcs-white); font-size: 0.75rem; font-weight: 600; } /* 4.6 Modals */ .modal-overlay { position: fixed; inset: 0; background: var(--tcs-pardo-80); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: all var(--transition-base); } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background: var(--tcs-white); border-radius: var(--radius-lg); padding: var(--space-8); max-width: 480px; width: 90%; box-shadow: var(--shadow-modal); transform: translateY(20px); transition: transform var(--transition-slow); } .modal-overlay.active .modal { transform: translateY(0); } /* 4.7 Toast Notifications */ .toast { position: fixed; top: 72px; right: var(--space-6); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 500; color: var(--tcs-white); z-index: var(--z-toast); animation: toastIn 300ms ease-out, toastOut 200ms ease-in 2.8s forwards; max-width: 360px; } .toast-success { background: var(--tcs-success); } .toast-warning { background: var(--tcs-warning); } .toast-danger { background: var(--tcs-danger); } .toast-info { background: var(--tcs-info); } /* ── 5. Page-specific ── */ /* ── 5.1 Login: C1 Clean List ── */ .login-wrapper { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow: hidden; } /* Top: dark brand zone */ .login-top { background: var(--tcs-pardo); flex: 0 0 180px; display: flex; align-items: center; justify-content: center; position: relative; } .login-top::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 10%, var(--tcs-ocre) 50%, transparent 90%); opacity: 0.3; } .login-logo { height: 28px; width: auto; display: block; filter: brightness(0) invert(0.92); } /* Bottom: action zone */ .login-bottom { background: var(--tcs-ivory); flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); position: relative; min-height: 0; } /* Distribute vertical space: content centers, footer stays at bottom (mobile/portrait) */ .login-bottom-inner { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; } /* Select label */ .login-select-label { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--tcs-pardo-claro); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 32px; } /* User list */ .login-list { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 6px; } .login-row { display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 14px; cursor: pointer; border: none; background: transparent; font-family: var(--font-body); transition: all 200ms; text-align: left; text-decoration: none; color: inherit; } .login-row:hover { background: var(--tcs-white); box-shadow: 0 2px 10px rgba(56,46,44,0.05); } .login-row:active { background: rgba(177,167,126,0.08); } /* Avatar colors by position */ .login-row-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; letter-spacing: 1px; flex-shrink: 0; transition: transform 200ms; } .login-row:hover .login-row-avatar { transform: scale(1.06); } /* Avatar palette indexed by data-color-idx (1..6, robusto contra divisores y reorden) */ .login-row[data-color-idx="1"] .login-row-avatar { background: var(--tcs-pardo); color: var(--tcs-ivory); } .login-row[data-color-idx="2"] .login-row-avatar { background: var(--tcs-ocre); color: var(--tcs-white); } .login-row[data-color-idx="3"] .login-row-avatar { background: var(--tcs-pardo-claro); color: var(--tcs-ivory); } .login-row[data-color-idx="4"] .login-row-avatar { background: var(--tcs-info); color: var(--tcs-white); } .login-row[data-color-idx="5"] .login-row-avatar { background: var(--tcs-success); color: var(--tcs-white); } .login-row[data-color-idx="6"] .login-row-avatar { background: var(--tcs-warning); color: var(--tcs-white); } /* Separador entre empleados y admins */ .login-list-divider { height: 1px; background: var(--tcs-gris-claro); margin: 12px 22px; opacity: 0.6; } .login-row-info { flex: 1; } .login-row-name { font-weight: 500; font-size: 1.25rem; color: var(--tcs-pardo); } .login-row-role { font-size: 0.9rem; color: var(--tcs-gris); margin-top: 3px; } .login-row-arrow { font-size: 0.8rem; color: var(--tcs-ocre); opacity: 0; transform: translateX(-4px); transition: all 200ms; } .login-row:hover .login-row-arrow { opacity: 1; transform: translateX(0); } /* Last user on this device — subtle ocre accent + small "reciente" chip */ .login-row.is-last-user { background: rgba(177,167,126,0.07); box-shadow: inset 3px 0 0 var(--tcs-ocre); } .login-row.is-last-user .login-row-avatar { box-shadow: 0 0 0 3px rgba(177,167,126,0.25); } .login-row.is-last-user .login-row-info::after { content: 'Último ingreso'; display: inline-block; margin-top: 4px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; color: var(--tcs-ocre); text-transform: uppercase; } /* Footer (bottom of viewport) — login-bottom-inner already pushes the footer down via flex:1, so the spacer is just legacy markup. Keep it but inert. */ .login-spacer { flex: 0; display: none; } .login-divider { width: 100%; max-width: 420px; height: 1px; background: rgba(169,168,158,0.2); margin: 16px 0; } .login-footer { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 440px; } .login-footer-date { font-size: 0.85rem; color: var(--tcs-gris); } .login-footer-admin { font-size: 0.82rem; color: var(--tcs-gris); text-decoration: none; transition: color 200ms; letter-spacing: 0.5px; } .login-footer-admin:hover { color: var(--tcs-pardo-claro); } /* ── PIN screen (inline in flex flow) ── */ .login-pin-screen { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; } .login-back { font-size: 0.92rem; color: var(--tcs-pardo-claro); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-top: 22px; padding: 12px 18px; min-height: 44px; border-radius: 10px; transition: color 200ms, background 200ms; text-decoration: none; border: none; background: none; font-family: var(--font-body); } .login-back:active { background: rgba(56,46,44,0.04); } .login-back:hover { color: var(--tcs-pardo); } /* PIN header: name + label, centered (avatar removed for cleaner kiosk look) */ .login-pin-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; } .login-pin-name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--tcs-pardo); } .login-pin-label { font-size: 0.85rem; color: var(--tcs-pardo-claro); margin-top: 2px; } /* PIN dots */ .pin-display { display: flex; gap: 16px; margin-bottom: 28px; justify-content: center; } .pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--tcs-pardo-claro); background: transparent; transition: all 200ms; } .pin-dot.filled { background: var(--tcs-pardo); border-color: var(--tcs-pardo); box-shadow: 0 0 8px rgba(56,46,44,0.35); } .pin-dot.wrong { border-color: var(--tcs-danger); background: var(--tcs-danger); animation: loginDotShake 400ms ease; } .pin-dot.success { background: var(--tcs-success); border-color: var(--tcs-success); transform: scale(1.25); box-shadow: 0 0 12px rgba(90,122,90,0.45); transition: background 200ms ease, border-color 200ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease; } /* While the PIN is being validated by the server, gently pulse the filled dots in a wave (left → right) so the user knows something's happening. */ .pin-display.is-checking .pin-dot { animation: pinChecking 900ms ease-in-out infinite; } .pin-display.is-checking .pin-dot:nth-child(1) { animation-delay: 0ms; } .pin-display.is-checking .pin-dot:nth-child(2) { animation-delay: 110ms; } .pin-display.is-checking .pin-dot:nth-child(3) { animation-delay: 220ms; } .pin-display.is-checking .pin-dot:nth-child(4) { animation-delay: 330ms; } @keyframes pinChecking { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.78); opacity: 0.55; } } /* When PIN is verified by server, fade dots out and draw a thin checkmark */ .pin-display { position: relative; min-height: 16px; } .pin-display.to-success .pin-dot { opacity: 0; transition: opacity 200ms ease; } .pin-check-svg { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; color: var(--tcs-success); transform-origin: center; animation: pinCheckIn 380ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards; } .pin-check-svg circle { stroke-dasharray: 64; stroke-dashoffset: 64; animation: pinDraw 280ms ease-out forwards; } .pin-check-svg polyline { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pinDraw 220ms ease-out 220ms forwards; } @keyframes pinCheckIn { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } } @keyframes pinDraw { to { stroke-dashoffset: 0; } } /* Subtle "loading home" handoff after a successful PIN. The login content gently dims while a thin ocre progress bar slides across the top until the next page takes over. */ body.login-redirecting .login-top-inner, body.login-redirecting .login-top-foot, body.login-redirecting .login-bottom-inner { opacity: 0.45; transition: opacity 350ms ease; } body.login-redirecting::before { content: ''; position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--tcs-ocre); z-index: 99999; pointer-events: none; animation: loginHandoffBar 1400ms cubic-bezier(0.1, 0.7, 0.3, 0.95) forwards; } @keyframes loginHandoffBar { 0% { width: 0%; opacity: 1; } 70% { width: 70%; opacity: 1; } 100% { width: 92%; opacity: 1; } } @keyframes loginDotShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* PIN pad */ .pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; width: 100%; margin: 0 auto; } .pin-key { aspect-ratio: 1.25; border-radius: 12px; border: 1px solid rgba(56,46,44,0.06); background: var(--tcs-ivory); font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; color: var(--tcs-pardo); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 120ms; user-select: none; } .pin-key:hover { background: rgba(177,167,126,0.12); } .pin-key:active { transform: scale(0.92); background: rgba(177,167,126,0.2); } .pin-key-fn { font-family: var(--font-body); font-size: 0.62rem; font-weight: 500; color: var(--tcs-pardo-claro); background: transparent; border-color: transparent; } .pin-key-fn:hover { color: var(--tcs-pardo); background: rgba(56,46,44,0.03); } /* Error toast */ .login-error { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(158,75,75,0.95); color: var(--tcs-white); padding: 10px 24px; border-radius: var(--radius-sm); font-size: 0.82rem; text-align: center; z-index: var(--z-login-error); white-space: nowrap; animation: loginErrorIn 300ms ease, loginErrorOut 400ms ease 6s forwards; } @keyframes loginErrorIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes loginErrorOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; } } @keyframes loginSlideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Admin form */ .login-admin-form { max-width: 320px; width: 100%; animation: loginSlideUp 350ms ease forwards; } .login-admin-form .form-group { margin-bottom: 16px; } .login-admin-form label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--tcs-pardo-claro); margin-bottom: 6px; } .login-admin-form input { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(169,168,158,0.3); border-radius: var(--radius-sm); background: var(--tcs-white); font-family: var(--font-body); font-size: 0.92rem; color: var(--tcs-pardo); outline: none; transition: border-color 200ms, box-shadow 200ms; } .login-admin-form input:focus { border-color: var(--tcs-ocre); box-shadow: 0 0 0 3px var(--tcs-ocre-20); } .login-admin-form input::placeholder { color: var(--tcs-gris); } .login-admin-btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); background: var(--tcs-pardo); color: var(--tcs-ivory); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 200ms; margin-top: 8px; } .login-admin-btn:hover { background: var(--tcs-ocre); color: var(--tcs-pardo); } .login-admin-btn:active { transform: scale(0.98); } /* ── Tablet/desktop: side by side ── */ @media (min-width: 768px) { .login-wrapper { flex-direction: row; } .login-top { flex: 0 0 40%; min-height: 100vh; min-height: 100dvh; } .login-top::after { top: 10%; bottom: 10%; left: auto; right: -1px; width: 2px; height: auto; background: linear-gradient(180deg, transparent 10%, var(--tcs-ocre) 50%, transparent 90%); } .login-logo { height: 34px; } .login-bottom { justify-content: center; padding: 40px 40px 64px; } .login-bottom::before { content: ''; flex: 1; } .login-divider { max-width: 400px; } .login-footer { max-width: 400px; } } /* New elements (desktop-only by default; revealed via media query) */ .login-top-inner { display: contents; } .login-top-foot, .login-tagline, .login-heading { display: none; } /* ── Smooth transition between user list view and PIN view ── */ .login-view { width: 100%; display: flex; flex-direction: column; align-items: center; opacity: 1; transform: translateY(0); transition: opacity 180ms ease, transform 220ms ease; } .login-view[hidden] { display: none !important; } .login-view.is-out { opacity: 0; transform: translateY(8px); pointer-events: none; } .login-view.is-in { opacity: 0; transform: translateY(-8px); } /* ── Desktop ≥ 1024px (covers 1280, 1600, 1920) ── */ @media (min-width: 1024px) { .login-wrapper { flex-direction: row; min-height: 100vh; min-height: 100dvh; } /* Left dark panel: brand + tagline + footer */ .login-top { flex: 0 0 50%; max-width: none; position: relative; background: radial-gradient(circle at 30% 25%, rgba(177,167,126,0.10) 0%, transparent 55%), radial-gradient(circle at 70% 80%, rgba(177,167,126,0.06) 0%, transparent 50%), var(--tcs-pardo); padding: 36px 40px 24px; flex-direction: column; align-items: stretch; justify-content: space-between; } .login-top-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: fit-content; align-self: center; flex: 1; gap: 24px; } .login-top-foot { text-align: center; } .login-logo { height: 38px; } .login-tagline { display: block; font-family: var(--font-display); font-weight: 300; font-size: 1.05rem; color: rgba(237,234,230,0.7); letter-spacing: 0.5px; line-height: 1.3; } .login-top-foot { display: block; font-family: var(--font-body); font-size: 0.78rem; color: rgba(237,234,230,0.45); letter-spacing: 0.4px; text-transform: lowercase; } /* Right ivory panel: heading + list */ .login-bottom { flex: 1; padding: 32px 48px; align-items: center; justify-content: center; } .login-bottom::before { display: none; } .login-bottom-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: stretch; } .login-heading { display: block; margin-bottom: 18px; text-align: left; } .login-heading h1 { font-family: var(--font-display); font-weight: 300; font-size: 1.7rem; line-height: 1.1; color: var(--tcs-pardo); margin: 0 0 4px; } .login-heading p { font-size: 0.85rem; color: var(--tcs-pardo-claro); margin: 0; } /* Hide the "Seleccioná tu perfil" mini label (heading replaces it) */ .login-select-label { display: none; } /* Tighter list */ .login-list { max-width: 420px; gap: 2px; } .login-row { padding: 10px 14px; gap: 14px; border-radius: 10px; } .login-row-avatar { width: 42px; height: 42px; font-size: 0.85rem; } .login-row-name { font-size: 0.95rem; } .login-row-role { font-size: 0.78rem; } /* Hide the mobile footer (date moved to dark panel) */ .login-divider { display: none; } .login-footer { display: none; } .login-spacer { display: none; } /* PIN screen: compact polished spacing on desktop */ .login-pin-screen { max-width: 300px; } .login-pin-header { margin-bottom: 22px; gap: 12px; } .login-pin-avatar { width: 54px; height: 54px; font-size: 0.95rem; } .login-pin-name { font-size: 1.15rem; } .login-pin-label { font-size: 0.78rem; } .pin-display { gap: 12px; margin-bottom: 22px; } .pin-dot { width: 13px; height: 13px; } .pin-pad { max-width: 260px; gap: 8px; } .pin-key { font-size: 1.25rem; border-radius: 11px; } .pin-key-fn { font-size: 0.6rem; } } /* Extra polish at 1440+ */ @media (min-width: 1440px) { .login-top { padding: 48px 56px 32px; flex-basis: 50%; max-width: none; } .login-logo { height: 46px; } .login-tagline { font-size: 1.2rem; } .login-bottom { padding: 48px 64px; } .login-heading h1 { font-size: 2rem; } .login-bottom-inner { max-width: 460px; } } /* 5.2 Home */ .home-greeting { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: var(--space-1); } .home-date { color: var(--tcs-pardo-claro); font-size: 0.9rem; margin-bottom: var(--space-8); } .home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .home-grid .action-card:first-child { grid-column: 1 / -1; /* Fichaje card spans full width */ } /* 5.3 Fichaje Widget (compact, inline on Home) */ .fichaje-compact { background: var(--tcs-white); border: 1px solid rgba(169,168,158,0.25); border-radius: var(--radius-base); padding: var(--space-3) var(--space-4); } .fc-main { display: flex; align-items: center; gap: var(--space-4); } .fc-info { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; } .fc-status { font-weight: 500; font-size: 0.9rem; color: var(--tcs-pardo); white-space: nowrap; } .fc-entry { font-size: 0.8rem; color: var(--tcs-pardo-claro); white-space: nowrap; } .fc-timer { font-family: var(--font-body); font-size: 1.5rem; font-weight: 500; color: var(--tcs-pardo); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; } .fc-actions { display: flex; gap: var(--space-2); flex-shrink: 0; } .fc-done { font-size: 0.8rem; color: var(--tcs-success); font-weight: 500; white-space: nowrap; } .fc-timeline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(169,168,158,0.15); } .fc-timeline:empty { display: none; } .fc-evt { font-size: 0.75rem; color: var(--tcs-pardo-claro); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* 5.4 Clock page (standalone) */ .clock-widget { background: var(--tcs-white); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; border: 1px solid rgba(169,168,158,0.25); } .clock-time { font-family: var(--font-body); font-size: 3rem; font-weight: 500; color: var(--tcs-pardo); margin-bottom: var(--space-2); } .clock-status { font-size: 0.9rem; color: var(--tcs-pardo-claro); margin-bottom: var(--space-6); } .clock-actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } /* 5.4 Tasks */ .task-list { display: flex; flex-direction: column; gap: var(--space-4); } .task-card { background: var(--tcs-white); border-radius: var(--radius-md); padding: var(--space-5); display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(169,168,158,0.25); transition: all var(--transition-fast); } .task-card.completed { opacity: 0.5; } .task-info h4 { font-family: var(--font-body); font-weight: 500; font-size: 1rem; margin-bottom: var(--space-1); } .task-meta { font-size: 0.875rem; color: var(--tcs-pardo-claro); display: flex; gap: var(--space-4); } .task-urgency { font-family: var(--font-condensed); font-size: 0.8rem; font-weight: 600; } /* ── 5.5 SVG Icons ── */ .tcs-icon { flex-shrink: 0; vertical-align: middle; } /* ── 6. Utilities ── */ .text-muted { color: var(--tcs-pardo-claro); } .text-ocre { color: var(--tcs-ocre); } .text-sm { font-size: 0.85rem; } .text-xs { font-size: 0.75rem; } .text-center { text-align: center; } .text-right { text-align: right; } .font-display { font-family: var(--font-display); } .font-condensed { font-family: var(--font-condensed); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-center { display: flex; align-items: center; justify-content: center; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ── 7. Animations ── */ @keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } /* Staggered card entrance */ .card-grid > *, .home-grid > *, .task-list > * { animation: fadeIn var(--transition-slow) both; } .card-grid > *:nth-child(1), .home-grid > *:nth-child(1), .task-list > *:nth-child(1) { animation-delay: 0ms; } .card-grid > *:nth-child(2), .home-grid > *:nth-child(2), .task-list > *:nth-child(2) { animation-delay: 50ms; } .card-grid > *:nth-child(3), .home-grid > *:nth-child(3), .task-list > *:nth-child(3) { animation-delay: 100ms; } .card-grid > *:nth-child(4), .home-grid > *:nth-child(4), .task-list > *:nth-child(4) { animation-delay: 150ms; } .card-grid > *:nth-child(5), .home-grid > *:nth-child(5), .task-list > *:nth-child(5) { animation-delay: 200ms; } .card-grid > *:nth-child(n+6), .task-list > *:nth-child(n+6) { animation-delay: 250ms; } /* ── 7.5 Mobile Bottom Nav (admin, ≤640px only) ── */ .mobile-bottom-nav { display: none; /* Hidden on desktop */ } /* ── 8. Media Queries ── */ /* --- Safe area insets for notched phones --- */ @supports (padding-top: env(safe-area-inset-top)) { .topbar { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: max(var(--space-6), env(safe-area-inset-left)); padding-right: max(var(--space-6), env(safe-area-inset-right)); } .main { padding-left: max(var(--space-6), env(safe-area-inset-left)); padding-right: max(var(--space-6), env(safe-area-inset-right)); } @media (max-width: 1023px) { .login-top { flex-basis: calc(180px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } } /* --- Reduced motion: disable shake / pulse / handoff for users who opt out --- */ @media (prefers-reduced-motion: reduce) { .pin-dot, .pin-display.is-checking .pin-dot, .pin-display.to-success .pin-dot, .pin-check-svg, .pin-check-svg circle, .pin-check-svg polyline, body.login-redirecting::before, .login-error, .login-row, .login-row-arrow, .login-row:hover .login-row-avatar, .login-view { animation: none !important; transition: opacity 100ms ease, color 100ms ease !important; } .pin-dot.wrong { animation: none !important; } } /* --- Landscape on small phones: compress brand zone, tighten gaps --- */ @media (orientation: landscape) and (max-height: 500px) { .login-wrapper { flex-direction: row; } .login-top { flex: 0 0 35%; min-height: 100dvh; flex-basis: 35%; } .login-bottom { padding: 16px 18px; min-height: 100dvh; } .login-pin-header { margin-bottom: 14px; gap: 12px; } .login-pin-avatar { width: 48px; height: 48px; font-size: 0.95rem; } .login-pin-name { font-size: 1.1rem; } .pin-display { gap: 12px; margin-bottom: 14px; } .pin-pad { max-width: 280px; gap: 8px; } .pin-key { font-size: 1.4rem; min-height: 48px; } .login-back { margin-top: 10px; } .login-divider, .login-footer { display: none; } } /* --- Tablet (768px) --- */ @media (max-width: 768px) { .sched-bar-name { min-width: 34px; font-size: 0.72rem; } .sched-time-axis { margin-left: 46px; } .sched-card-date { display: none; } .home-grid { gap: var(--space-4); } .card { padding: var(--space-5); } .modal { max-width: 90%; padding: var(--space-6); } .fc-timer { font-size: 1.3rem; } .topbar-right nav { gap: var(--space-3) !important; font-size: 0.8rem !important; } } /* --- Mobile (640px and below) --- */ @media (max-width: 640px) { /* Topbar */ .topbar { padding: 0 var(--space-3); height: 48px; flex-wrap: wrap; } .topbar-brand { font-size: 0.95rem; } .topbar-brand small { display: none; } .topbar-right { gap: var(--space-2); } .topbar-right nav { display: none !important; /* Hide admin nav on mobile */ } .topbar-time { display: none; } .topbar-user span { display: none; /* Hide user name, keep avatar */ } .topbar-avatar { width: 28px; height: 28px; font-size: 0.65rem; } /* Main */ .main { padding: var(--space-4) var(--space-3); } /* Cards */ .home-grid { grid-template-columns: 1fr; } .card { padding: var(--space-4); } .card-grid { grid-template-columns: 1fr; gap: var(--space-4); } /* Fichaje compact widget */ .fc-main { flex-wrap: wrap; gap: var(--space-2); } .fc-info { flex: 1 1 auto; min-width: 0; } .fc-timer { font-size: 1.2rem; margin-left: 0; } .fc-actions { width: 100%; order: 3; } .fc-actions .btn { flex: 1; } /* Task cards */ .task-card { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .task-card .btn, .task-card .btn-ghost { align-self: stretch; text-align: center; } /* Tables */ .table-container { margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); border-radius: 0; border-left: none; border-right: none; } table { font-size: 0.8rem; } th, td { padding: var(--space-2) var(--space-3); } /* Clock page */ .clock-time { font-size: 2.5rem; } .clock-widget { padding: var(--space-5); } /* Modals */ .modal { width: 95%; max-width: 95%; padding: var(--space-5); } /* Forms — prevent iOS zoom on focus */ /* iOS Safari hace zoom al focusear inputs <16px. Forzamos mínimo 16px en TODOS los inputs en mobile, incluso los con clases específicas (más especificidad). */ .form-input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"], select, textarea, .stk-add-input, .stk-spotbar-i, .stk-search input, .stk-reason-sel { font-size: 16px !important; } /* Login — C1 Clean List Mobile */ .login-top { flex: 0 0 150px; } .login-logo { height: 24px; } .login-row { padding: 16px 18px; } .login-row-avatar { width: 54px; height: 54px; font-size: 0.95rem; } .pin-pad { max-width: 360px; gap: 12px; } .pin-key { font-size: 1.85rem; aspect-ratio: 1; border-radius: 14px; } .pin-key-fn { font-size: 0.78rem; } .login-pin-avatar { width: 64px; height: 64px; font-size: 1.1rem; } .login-pin-name { font-size: 1.5rem; } .login-pin-label { font-size: 0.95rem; } .pin-display { gap: 16px; margin-bottom: 28px; } .pin-dot { width: 16px; height: 16px; } /* Page header */ .page-header h1 { font-size: 1.5rem; } /* Toasts */ .toast { left: var(--space-3); right: var(--space-3); max-width: none; } /* Ensure touch targets */ .btn, .btn-ghost, .pin-key { min-height: 44px; } /* Mobile bottom nav — scrollable horizontal con items de tamaño fijo */ .mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--tcs-pardo); border-top: 1px solid rgba(255,255,255,0.08); z-index: var(--z-mobile-nav); padding: 6px 14px; padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ justify-content: space-around; /* iOS Safari: forzar capa propia para que