/**
 * SoloFichar — Public Styles
 * ═══════════════════════════
 * Dark, modern aesthetic with glassmorphism.
 * Plus Jakarta Sans · #fbbf24 accent · #0f172a dark · #1e293b surface
 *
 * Sections:
 *  1. Variables
 *  2. Theme Hiding (WP overrides)
 *  3. Navbar
 *  4. Full Page Container
 *  5. Blobs
 *  6. Background
 *  7. Glass Card
 *  8. Buttons
 *  9. Fichar Page
 * 10. Circular Button
 * 11. Status Pill
 * 12. Timer
 * 13. Notes Section
 * 14. Feedback Message
 * 15. Login Page
 * 16. Registration Page
 * 17. Home Page
 * 18. Panel Page
 * 19. Data Table
 * 20. Historial Page
 * 21. Utilities
 * 22. Animations
 * 23. Responsive
 */


/* ═══════════════════════════════════════════════════════════
   1. VARIABLES
   ═══════════════════════════════════════════════════════════ */

:root {
    --ch-accent:      #fbbf24;
    --ch-accent-rgb:  251, 191, 36;
    --ch-dark:        #0f172a;
    --ch-dark-rgb:    15, 23, 42;
    --ch-surface:     #1e293b;
    --ch-surface-rgb: 30, 41, 59;
    --ch-white:       #ffffff;
    --ch-slate-300:   #cbd5e1;
    --ch-slate-400:   #94a3b8;
    --ch-slate-500:   #64748b;
    --ch-slate-700:   #334155;
    --ch-slate-800:   #1e293b;
    --ch-slate-900:   #0f172a;
    --ch-emerald:     #10b981;
    --ch-red:         #ef4444;
    --ch-amber:       #f59e0b;
    --ch-purple:      #a855f7;
    --ch-font:        'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ch-radius-xl:   1.5rem;
    --ch-radius-2xl:  2rem;
    --ch-radius-3xl:  3rem;
}


/* ═══════════════════════════════════════════════════════════
   2. THEME HIDING — WordPress override on plugin pages
   (body.ch-fullpage is added to all plugin pages)
   ═══════════════════════════════════════════════════════════ */

html:has(body.ch-fullpage),
body.ch-fullpage {
    overflow-x: clip;
}

body.ch-fullpage {
    background: var(--ch-dark) !important;
}

/* Hide ALL theme headers — pero NO los del plugin (.ch-site-header) */
body.ch-fullpage header:not(.ch-site-header),
body.ch-fullpage .wp-site-blocks > header,
body.ch-fullpage .wp-block-template-part[data-tag="header"],
body.ch-fullpage .site-header:not(.ch-site-header),
body.ch-fullpage #masthead,
body.ch-fullpage .ast-header-markup,
body.ch-fullpage .wp-block-template-part.site-header {
    display: none !important;
}

/* Hide ALL theme footers — pero NO los del plugin (.ch-site-footer) */
body.ch-fullpage footer:not(.ch-site-footer),
body.ch-fullpage .wp-site-blocks > footer,
body.ch-fullpage .wp-block-template-part[data-tag="footer"],
body.ch-fullpage .site-footer:not(.ch-site-footer),
body.ch-fullpage #colophon,
body.ch-fullpage .ast-footer-markup,
body.ch-fullpage .wp-block-template-part.site-footer {
    display: none !important;
}

/* Forzar visibilidad de header/footer del plugin */
.ch-site-header {
    display: block !important;
}

.ch-site-footer {
    display: block !important;
}

/* Hide WP page titles */
body.ch-fullpage .entry-title,
body.ch-fullpage .page-title,
body.ch-fullpage .wp-block-post-title,
body.ch-fullpage .ast-archive-title,
body.ch-fullpage h1.wp-block-post-title {
    display: none !important;
}

/* Reset WP layout constraints */
body.ch-fullpage .wp-site-blocks {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

body.ch-fullpage .is-layout-constrained,
body.ch-fullpage .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.ch-fullpage .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.ch-fullpage .entry-content,
body.ch-fullpage .wp-block-group,
body.ch-fullpage .wp-block-post-content {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.ch-fullpage .wp-site-blocks > main,
body.ch-fullpage .wp-site-blocks > .wp-block-group {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   3. NAVBAR (.ch-nav)
   ═══════════════════════════════════════════════════════════ */

.ch-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
    background: rgba(var(--ch-dark-rgb), 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    will-change: transform;
}

.ch-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.ch-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ch-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: var(--ch-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--ch-slate-400);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
}

.ch-nav-link:hover {
    color: var(--ch-white);
    background: rgba(255, 255, 255, 0.06);
}

.ch-nav-link-active,
.ch-nav-link-active:hover {
    color: var(--ch-accent);
    background: rgba(var(--ch-accent-rgb), 0.1);
}

.ch-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ch-nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ch-nav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.ch-nav-avatar-placeholder {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(var(--ch-accent-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ch-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--ch-accent);
}

.ch-nav-logout {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--ch-slate-400);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ch-nav-logout:hover {
    color: var(--ch-red);
    background: rgba(239, 68, 68, 0.1);
}

.ch-nav-logout i,
.ch-nav-logout svg {
    width: 18px;
    height: 18px;
}

/* Site logo */
.ch-site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ch-site-logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(var(--ch-accent-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ch-accent);
    flex-shrink: 0;
}

.ch-site-logo-icon i,
.ch-site-logo-icon svg {
    width: 20px;
    height: 20px;
}

.ch-site-logo-text {
    font-family: var(--ch-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--ch-white);
    letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════════════
   4. FULL PAGE CONTAINER (.ch-fichar-page)
   Used by fichar, historial, panel, registro, login, home
   ═══════════════════════════════════════════════════════════ */

.ch-fichar-page {
    min-height: 100vh;
    font-family: var(--ch-font);
    color: var(--ch-white);
    background: var(--ch-dark);
    /* Nav ahora es sticky y ocupa espacio propio → sin padding-top extra. */
    padding-top: 0;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════════════════════
   5. BLOBS (decorative background elements)
   ═══════════════════════════════════════════════════════════ */

.ch-blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.ch-blob-accent {
    background: radial-gradient(circle, rgba(var(--ch-accent-rgb), 0.18) 0%, transparent 70%);
}

.ch-blob-purple {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 70%);
}

@keyframes ch-float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}


/* ═══════════════════════════════════════════════════════════
   6. BACKGROUND (login / auth pages)
   ═══════════════════════════════════════════════════════════ */

.ch-login-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ch-login-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ch-login-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--ch-dark-rgb), 0.85);
}

.ch-login-bg-noise {
    display: none;
}


/* ═══════════════════════════════════════════════════════════
   7. GLASS CARD (.ch-glass-card)
   ═══════════════════════════════════════════════════════════ */

.ch-glass-card {
    background: rgba(var(--ch-surface-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ch-radius-xl);
    padding: 24px;
}


/* ═══════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════ */

.ch-btn-accent,
.ch-btn-outline,
.ch-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ch-font);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

/* Accent (primary) */
.ch-btn-accent {
    background: var(--ch-accent);
    color: var(--ch-dark);
    font-weight: 700;
    box-shadow: 0 0 20px rgba(var(--ch-accent-rgb), 0.2);
}

.ch-btn-accent:hover {
    background: var(--ch-white);
    color: var(--ch-dark);
    box-shadow: 0 0 15px rgba(var(--ch-accent-rgb), 0.2);
}

/* Outline */
.ch-btn-outline {
    background: transparent;
    border: 1px solid rgba(var(--ch-accent-rgb), 0.3);
    color: var(--ch-accent);
}

.ch-btn-outline:hover {
    background: rgba(var(--ch-accent-rgb), 0.1);
    border-color: rgba(var(--ch-accent-rgb), 0.5);
}

/* Ghost */
.ch-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ch-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ch-btn-ghost:hover {
    color: var(--ch-white);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Sizes */
.ch-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 12px;
}

.ch-btn-lg {
    padding: 16px 32px;
    font-size: 17px;
    border-radius: 18px;
}


/* ═══════════════════════════════════════════════════════════
   9. FICHAR PAGE
   ═══════════════════════════════════════════════════════════ */

.ch-fichar-content {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 20px 40px;
    position: relative;
    z-index: 1;
}

/* Greeting */
.ch-fichar-greeting h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--ch-white);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.ch-fichar-greeting p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Widget card */
.ch-fichar-widget-card {
    background: rgba(var(--ch-surface-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ch-radius-xl);
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Info row (2-col grid) */
.ch-fichar-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

/* Stat items */
.ch-fichar-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
}

.ch-fichar-stat i,
.ch-fichar-stat svg {
    color: var(--ch-accent);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ch-fichar-stat-info {
    display: flex;
    flex-direction: column;
}

.ch-fichar-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--ch-white);
}

.ch-fichar-stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Today's log */
.ch-fichar-log {
    background: rgba(var(--ch-surface-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ch-radius-xl);
    padding: 20px 24px;
}

.ch-fichar-log-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 14px;
}

.ch-today-log-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ch-today-log-row:last-child {
    border-bottom: none;
}

.ch-log-entrada {
    color: var(--ch-emerald);
    font-weight: 600;
}

.ch-log-separator {
    color: var(--ch-slate-500);
    font-size: 11px;
}

.ch-log-salida {
    color: var(--ch-red);
    font-weight: 600;
}

.ch-log-total {
    margin-left: auto;
    color: var(--ch-slate-400);
    font-size: 12px;
    font-weight: 500;
}

.ch-log-empty {
    font-size: 13px;
    color: var(--ch-slate-500);
    text-align: center;
    padding: 12px 0;
}


/* ═══════════════════════════════════════════════════════════
   10. CIRCULAR BUTTON (.ch-circle-btn)
   ═══════════════════════════════════════════════════════════ */

.ch-circle-btn-wrapper,
.ch-btn-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    margin: 0 auto;
}

.ch-glow-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--ch-accent-rgb), 0);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
    pointer-events: none;
}

.ch-glow-active {
    border-color: rgba(var(--ch-accent-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--ch-accent-rgb), 0.15);
}

.ch-circle-btn {
    width: 192px;
    height: 192px;
    border-radius: 50%;
    background: var(--ch-dark);
    border: 2px solid rgba(var(--ch-accent-rgb), 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.ch-circle-btn:hover {
    border-color: rgba(var(--ch-accent-rgb), 0.3);
}

.ch-circle-fill {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ch-accent);
    border-radius: 50%;
    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.ch-fill-active {
    bottom: 0;
}

.ch-circle-icon {
    width: 48px;
    height: 48px;
    color: var(--ch-accent);
    z-index: 2;
    transition: color 0.3s ease;
}

.ch-circle-active .ch-circle-icon {
    color: var(--ch-dark);
}

.ch-circle-text {
    font-family: var(--ch-font);
    font-size: 20px;
    font-weight: 800;
    color: var(--ch-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 2;
    transition: color 0.3s ease;
}

.ch-circle-active .ch-circle-text {
    color: var(--ch-dark);
}


/* ═══════════════════════════════════════════════════════════
   11. STATUS PILL (.ch-status-pill)
   ═══════════════════════════════════════════════════════════ */

.ch-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    font-family: var(--ch-font);
    font-size: 13px;
    font-weight: 600;
}

.ch-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ch-status-working {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ch-emerald);
}

.ch-status-working .ch-status-dot {
    background: var(--ch-emerald);
    animation: ch-pulse 2s ease-in-out 3;
}

.ch-status-idle {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ch-slate-400);
}

.ch-status-idle .ch-status-dot {
    background: var(--ch-slate-500);
}


/* ═══════════════════════════════════════════════════════════
   12. TIMER
   ═══════════════════════════════════════════════════════════ */

.ch-timer-area {
    text-align: center !important;
    min-height: 80px;
    position: relative;
    width: 100% !important;
    align-self: stretch !important;
    display: block !important;
}

/* Timer hidden: removed from flow so idle text centers */
.ch-timer-container {
    display: none !important;
}

/* Timer visible: shown normally */
.ch-timer-container.ch-timer-visible {
    display: block !important;
}

.ch-timer-label {
    font-size: 12px;
    color: var(--ch-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
}

.ch-timer-value {
    font-size: 42px;
    font-weight: 800;
    color: var(--ch-white);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ch-idle-text {
    font-size: 14px;
    color: var(--ch-slate-500);
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

.ch-idle-text.ch-hidden {
    display: none;
}


/* ═══════════════════════════════════════════════════════════
   13. NOTES SECTION
   ═══════════════════════════════════════════════════════════ */

.ch-notas-section {
    width: 100%;
    text-align: center;
}

.ch-notas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--ch-slate-400);
    font-family: var(--ch-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ch-notas-toggle:hover {
    color: var(--ch-white);
    background: rgba(255, 255, 255, 0.05);
}

.ch-notas-toggle i,
.ch-notas-toggle svg {
    width: 16px;
    height: 16px;
}

.ch-notas-input {
    margin-top: 10px;
}

.ch-notas-input textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 80px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--ch-white);
    font-family: var(--ch-font);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease;
    outline: none;
}

.ch-notas-input textarea::placeholder {
    color: var(--ch-slate-500);
}

.ch-notas-input textarea:focus {
    border-color: rgba(var(--ch-accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--ch-accent-rgb), 0.1);
}


/* ═══════════════════════════════════════════════════════════
   14. FEEDBACK MESSAGE
   ═══════════════════════════════════════════════════════════ */

.ch-mensaje {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--ch-font);
    padding: 4px 0;
    min-height: 24px;
}

.ch-msg-success {
    color: var(--ch-emerald);
}

.ch-msg-error {
    color: var(--ch-red);
}


/* ═══════════════════════════════════════════════════════════
   15. LOGIN PAGE (.ch-login-page)
   ═══════════════════════════════════════════════════════════ */

.ch-login-page {
    min-height: 100vh;
    font-family: var(--ch-font);
    color: var(--ch-white);
    background: var(--ch-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 40px 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header floats at top without breaking flex centering */
.ch-login-page .ch-site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 16px 20px;
}

.ch-login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(var(--ch-surface-rgb), 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ch-radius-2xl);
    padding: 40px 36px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.ch-login-form,
.ch-login-card .ch-form-group {
    max-width: 100%;
    overflow: hidden;
}

.ch-login-card *,
.ch-login-card *::before,
.ch-login-card *::after {
    box-sizing: border-box;
}

/* Login logo */
a.ch-login-logo,
.ch-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
    text-decoration: none;
    cursor: pointer;
}

.ch-login-logo-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(var(--ch-accent-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ch-font);
    font-size: 16px;
    font-weight: 800;
    color: var(--ch-accent);
}

.ch-login-logo-text {
    font-family: var(--ch-font);
    font-size: 22px;
    font-weight: 800;
    color: var(--ch-white);
    letter-spacing: -0.02em;
}

/* Login headings */
.ch-login-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ch-white);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.ch-login-subtitle {
    font-size: 14px;
    color: var(--ch-slate-400);
    margin: 0 0 28px;
    line-height: 1.5;
}

/* Login form */
.ch-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ch-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ch-form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-slate-400);
}

.ch-form-group label i,
.ch-form-group label svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.ch-form-group input[type="email"],
.ch-form-group input[type="password"],
.ch-form-group input[type="text"],
.ch-form-group input[type="tel"],
.ch-form-group input[type="number"],
.ch-form-group input[type="date"],
.ch-form-group input[type="time"],
.ch-form-group textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--ch-white);
    font-family: var(--ch-font);
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
}

.ch-form-group input::placeholder,
.ch-form-group textarea::placeholder {
    color: var(--ch-slate-500);
}

.ch-form-group input:focus,
.ch-form-group textarea:focus {
    border-color: rgba(var(--ch-accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--ch-accent-rgb), 0.1);
}

/* Force textarea dark styling over WP theme defaults */
.ch-panel-form textarea,
.ch-form-group textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--ch-white) !important;
    border-radius: 14px !important;
    font-family: var(--ch-font) !important;
    font-size: 15px !important;
    padding: 14px 16px !important;
    outline: none !important;
    resize: vertical;
}

.ch-form-group select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--ch-white);
    font-family: var(--ch-font);
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 42px;
}

.ch-form-group select:focus {
    border-color: rgba(var(--ch-accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--ch-accent-rgb), 0.1);
}

.ch-form-group select option {
    background: var(--ch-surface);
    color: var(--ch-white);
}

/* Form options row (remember me / forgot) */
.ch-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.ch-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ch-slate-400);
    cursor: pointer;
    font-size: 13px;
}

.ch-checkbox-label input[type="checkbox"] {
    accent-color: var(--ch-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ch-forgot-link {
    color: var(--ch-accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: opacity 0.2s ease;
}

.ch-forgot-link:hover {
    opacity: 0.8;
}

/* Login button */
.ch-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    background: var(--ch-accent);
    color: var(--ch-dark);
    border: none;
    border-radius: 16px;
    font-family: var(--ch-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 0 20px rgba(var(--ch-accent-rgb), 0.2);
}

.ch-login-btn:hover {
    background: var(--ch-white);
    box-shadow: 0 0 15px rgba(var(--ch-accent-rgb), 0.2);
}

/* Login messages */
.ch-login-msg {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.ch-login-msg-info,
.ch-login-msg-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ch-emerald);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.ch-login-msg-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ch-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Login footer links */
.ch-login-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--ch-slate-400);
}

.ch-login-footer a {
    color: var(--ch-accent);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.ch-login-footer a:hover {
    opacity: 0.8;
}

/* Back to home link */
.ch-back-home {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-slate-400);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ch-back-home:hover {
    color: var(--ch-white);
    background: rgba(255, 255, 255, 0.06);
}

.ch-back-home i,
.ch-back-home svg {
    width: 16px;
    height: 16px;
}


/* ═══════════════════════════════════════════════════════════
   16. REGISTRATION PAGE (.ch-registro-page)
   ═══════════════════════════════════════════════════════════ */

.ch-registro-page {
    min-height: 100vh;
    font-family: var(--ch-font);
    color: var(--ch-white);
    background: var(--ch-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 40px 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ch-registro-card {
    width: 100%;
    max-width: 560px;
    background: rgba(var(--ch-surface-rgb), 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ch-radius-2xl);
    padding: 40px 36px;
    position: relative;
    z-index: 1;
}

.ch-registro-card *,
.ch-registro-card *::before,
.ch-registro-card *::after {
    box-sizing: border-box;
}

.ch-form-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ch-white);
    margin: 24px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--ch-accent-rgb), 0.2);
}

.ch-form-section-title:first-of-type {
    margin-top: 0;
}

.ch-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 100%;
    overflow: hidden;
}

/* Asegurar box-sizing en registro (usa ch-login-card) */
.ch-registro-page .ch-login-card *,
.ch-registro-page .ch-login-card *::before,
.ch-registro-page .ch-login-card *::after {
    box-sizing: border-box;
}

.ch-registro-page .ch-login-card {
    overflow: hidden;
}

.ch-registro-page .ch-form-group input {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}


/* ═══════════════════════════════════════════════════════════
   17. HOME PAGE (.ch-home-page)
   ═══════════════════════════════════════════════════════════ */

.ch-home-page {
    font-family: var(--ch-font);
    color: var(--ch-slate-300);
    background: var(--ch-dark);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ch-home-page *,
.ch-home-page *::before,
.ch-home-page *::after {
    box-sizing: border-box;
}

/* --- Background (absolute, not fixed — WP compatibility) --- */
.ch-home-bg-fixed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.ch-home-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.ch-home-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--ch-dark-rgb), 0.85);
}

.ch-home-bg-noise {
    display: none;
}

/* --- Navbar --- */
.ch-home-nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 50;
    background: rgba(var(--ch-dark-rgb), 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ch-home-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.ch-home-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ch-home-nav-logo-icon {
    width: 40px;
    height: 40px;
    background: var(--ch-accent);
    color: var(--ch-dark);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 0 15px rgba(var(--ch-accent-rgb), 0.3);
}

.ch-home-nav-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--ch-white);
    letter-spacing: -0.02em;
}

.ch-home-nav-links {
    display: none;
    align-items: center;
    gap: 32px;
}

.ch-home-nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--ch-slate-300);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-home-nav-link:hover {
    color: var(--ch-white);
}

.ch-home-nav-link--white {
    color: var(--ch-white);
    font-weight: 500;
}

.ch-home-nav-link--white:hover {
    color: var(--ch-accent);
}

.ch-home-nav-sep {
    height: 16px;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.ch-home-nav-cta {
    background: var(--ch-white);
    color: var(--ch-dark);
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.ch-home-nav-cta:hover {
    background: var(--ch-accent);
    transform: scale(1.05);
}

/* --- Hamburger button (mobile only) --- */
.ch-home-nav-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 20;
}

.ch-home-nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ch-white);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.ch-home-nav-burger.ch-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.ch-home-nav-burger.ch-open span:nth-child(2) {
    opacity: 0;
}

.ch-home-nav-burger.ch-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Mobile menu --- */
.ch-mobile-menu {
    display: none;
    flex-direction: column;
    padding: 0 24px 20px;
    gap: 4px;
}

.ch-mobile-menu-open {
    display: flex;
}

.ch-mobile-menu-link {
    display: block;
    padding: 12px 16px;
    color: var(--ch-slate-300);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    transition: background-color 0.2s;
}

.ch-mobile-menu-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ch-white);
}

.ch-mobile-menu-cta {
    display: block;
    padding: 12px 16px;
    margin-top: 8px;
    background: rgba(var(--ch-accent-rgb), 0.15);
    color: var(--ch-accent);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    text-align: center;
}

/* --- Filter button alignment --- */
.ch-filter-btn-group {
    align-self: flex-end;
}

/* --- Hero Section --- */
.ch-home-hero-section {
    position: relative;
    z-index: 10;
    padding: 60px 0 80px;
}

.ch-home-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.ch-home-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center;
}

.ch-home-hero-copy {
    text-align: center;
}

.ch-home-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--ch-accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 32px;
    cursor: default;
    transition: background 0.2s;
}

.ch-home-badge:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ch-home-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ch-accent);
    animation: ch-pulse 2s ease-in-out 3;
}

.ch-home-title {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    color: var(--ch-white);
    line-height: 0.9;
    margin: 0 0 24px;
    letter-spacing: -0.03em;
}

.ch-home-title-accent {
    color: var(--ch-accent);
    text-shadow: 0 0 15px rgba(var(--ch-accent-rgb), 0.3);
}

.ch-home-desc {
    font-size: 20px;
    color: var(--ch-slate-400);
    font-weight: 300;
    line-height: 1.6;
    margin: 0 auto 40px;
    max-width: 480px;
}

.ch-home-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ch-home-cta-primary {
    background: var(--ch-accent) !important;
    color: var(--ch-dark) !important;
    padding: 16px 32px !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    box-shadow: 0 0 20px rgba(var(--ch-accent-rgb), 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.ch-home-cta-primary:hover {
    background: var(--ch-white) !important;
}

.ch-home-cta-secondary {
    padding: 16px 32px !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    color: var(--ch-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.ch-home-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.ch-home-cta-secondary:hover .ch-icon-sm {
    color: var(--ch-accent);
}

/* --- Phone Demo --- */
.ch-home-phone-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.ch-home-phone-blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
}

.ch-home-phone-blob--accent {
    top: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(var(--ch-accent-rgb), 0.2) 0%, transparent 70%);
}

.ch-home-phone-blob--purple {
    bottom: -80px;
    left: -80px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, transparent 70%);
}

.ch-home-phone {
    position: relative;
    width: 320px;
    background: var(--ch-dark);
    border-radius: 48px;
    border: 8px solid var(--ch-slate-800);
    box-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.ch-home-phone-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255,255,255,0.05), transparent);
    pointer-events: none;
    z-index: 20;
}

.ch-home-phone-ui {
    height: 600px;
    background: var(--ch-slate-900);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
}

/* Phone header */
.ch-phone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-top: 16px;
}

.ch-phone-header-label {
    font-size: 12px;
    color: var(--ch-slate-400);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ch-phone-header-date {
    color: var(--ch-white);
    font-weight: 700;
    font-size: 18px;
}

.ch-phone-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ch-slate-800);
    border: 1px solid var(--ch-slate-700);
    overflow: hidden;
}

.ch-phone-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Phone interactive button */
.ch-phone-btn-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ch-phone-btn-wrap {
    position: relative;
    cursor: pointer;
}

.ch-phone-glow {
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(var(--ch-accent-rgb), 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transition: opacity 0.5s;
    opacity: 0;
}

.ch-phone-glow--active {
    opacity: 1;
}

.ch-phone-btn-wrap:hover .ch-phone-glow {
    opacity: 1;
}

.ch-phone-main-btn {
    width: 192px;
    height: 192px;
    border-radius: 50%;
    background: var(--ch-slate-800);
    border: 1px solid var(--ch-slate-700);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.ch-phone-main-btn:active {
    transform: scale(0.95);
}

.ch-phone-main-btn--active {
    background: var(--ch-slate-900);
    border-color: var(--ch-accent);
}

.ch-phone-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: var(--ch-accent);
    transition: background-color 0.5s, border-color 0.5s;
    height: 0;
    opacity: 0.2;
}

.ch-phone-fill--active {
    height: 100%;
    opacity: 1;
}

.ch-phone-btn-icon {
    width: 48px;
    height: 48px;
    color: var(--ch-slate-400);
    margin-bottom: 8px;
    transition: color 0.3s;
}

.ch-phone-btn-text {
    color: var(--ch-slate-300);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.1em;
    transition: color 0.3s;
}

/* Phone status/timer */
.ch-phone-status {
    margin-top: 32px;
    text-align: center;
    height: 80px;
}

.ch-phone-timer-wrap {
    display: none;
}

.ch-phone-timer-label {
    font-size: 12px;
    color: var(--ch-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
    animation: ch-pulse 2s ease-in-out 3;
}

.ch-phone-timer {
    font-family: 'Courier New', monospace;
    font-size: 36px;
    color: var(--ch-white);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.ch-phone-idle {
    color: var(--ch-slate-500);
    font-size: 14px;
}

/* Phone bottom card */
.ch-phone-bottom {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
}

.ch-phone-bottom-icon {
    padding: 8px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    color: var(--ch-emerald);
}

.ch-phone-bottom-icon i,
.ch-phone-bottom-icon svg {
    width: 16px;
    height: 16px;
}

.ch-phone-bottom-title {
    color: var(--ch-white);
    font-size: 14px;
    font-weight: 500;
}

.ch-phone-bottom-sub {
    color: var(--ch-slate-500);
    font-size: 12px;
}

/* --- Bento Grid Features --- */
.ch-bento-section {
    position: relative;
    z-index: 10;
    padding: 96px 0;
    background: var(--ch-dark);
}

.ch-bento-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.ch-bento-header {
    margin-bottom: 64px;
}

.ch-bento-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: var(--ch-white);
    margin: 0 0 24px;
}

.ch-bento-bar {
    height: 4px;
    width: 80px;
    background: var(--ch-accent);
}

.ch-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.ch-bento-card {
    background: rgba(var(--ch-surface-rgb), 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
}

.ch-bento-card:hover {
    border-color: rgba(var(--ch-accent-rgb), 0.3);
}

.ch-bento-card--wide {
    /* spans 2 cols on desktop */
}

.ch-bento-card--tall {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* spans 2 rows on desktop */
}

.ch-bento-card-bg-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 32px;
    opacity: 0.1;
    transition: opacity 0.3s;
}

.ch-bento-card:hover .ch-bento-card-bg-icon {
    opacity: 0.2;
}

.ch-bento-card-bg-icon i,
.ch-bento-card-bg-icon svg {
    width: 128px;
    height: 128px;
    color: var(--ch-white);
}

.ch-bento-card-content {
    position: relative;
    z-index: 10;
}

.ch-bento-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.3s;
}

.ch-bento-card:hover .ch-bento-icon {
    transform: rotate(6deg);
}

.ch-bento-icon i,
.ch-bento-icon svg {
    width: 28px;
    height: 28px;
}

.ch-bento-icon--accent {
    background: var(--ch-accent);
    color: var(--ch-dark);
    transform: rotate(3deg);
    box-shadow: 0 0 15px rgba(var(--ch-accent-rgb), 0.3);
}

.ch-bento-icon--glass {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ch-white);
}

.ch-bento-icon--glass-accent {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ch-accent);
}

.ch-bento-card-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ch-white);
    margin: 0 0 16px;
}

.ch-bento-card-desc {
    font-size: 16px;
    color: var(--ch-slate-400);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

/* Bento mini report visual */
.ch-bento-mini-report {
    margin-top: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.ch-bento-card:hover .ch-bento-mini-report {
    opacity: 1;
}

.ch-bento-mini-report-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--ch-white);
}

.ch-bento-mini-report-icon {
    color: var(--ch-red);
    width: 20px;
    height: 20px;
}

.ch-bento-mini-report-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ch-bento-mini-line {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* --- Pricing Section --- */
.ch-pricing-section {
    position: relative;
    z-index: 10;
    padding: 96px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ch-pricing-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.ch-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

.ch-pricing-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--ch-white);
    margin: 0 0 24px;
}

.ch-pricing-subtitle {
    font-size: 18px;
    color: var(--ch-slate-400);
    line-height: 1.6;
    margin: 0 0 32px;
}

.ch-pricing-checks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ch-pricing-check {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ch-pricing-check span {
    color: var(--ch-white);
    font-size: 15px;
}

.ch-pricing-check-icon {
    background: rgba(var(--ch-accent-rgb), 0.2);
    padding: 8px;
    border-radius: 8px;
    color: var(--ch-accent);
    flex-shrink: 0;
}

.ch-pricing-check-icon i,
.ch-pricing-check-icon svg {
    width: 20px;
    height: 20px;
}

/* Pricing card */
.ch-pricing-card-wrap {
    position: relative;
}

.ch-pricing-card-glow {
    position: absolute;
    inset: -60px;
    background: radial-gradient(circle, rgba(var(--ch-accent-rgb), 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.ch-pricing-card {
    position: relative;
    background: rgba(var(--ch-surface-rgb), 0.85);
    border: 1px solid rgba(var(--ch-accent-rgb), 0.2);
    border-radius: 40px;
    padding: 40px;
}

.ch-pricing-card-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--ch-accent);
    color: var(--ch-dark);
    font-weight: 700;
    font-size: 12px;
    padding: 8px 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ch-pricing-card-plan {
    color: var(--ch-slate-400);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 8px;
}

.ch-pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 24px;
}

.ch-pricing-card-amount {
    font-size: 72px;
    font-weight: 700;
    color: var(--ch-white);
    letter-spacing: -0.04em;
}

.ch-pricing-card-period {
    font-size: 20px;
    color: var(--ch-slate-400);
}

.ch-pricing-card-note {
    color: var(--ch-slate-400);
    margin: 0 0 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.6;
}

.ch-pricing-card-btn {
    display: block;
    width: 100%;
    background: var(--ch-accent);
    color: var(--ch-dark);
    font-weight: 700;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
    box-shadow: 0 0 20px rgba(var(--ch-accent-rgb), 0.3);
    box-sizing: border-box;
}

.ch-pricing-card-btn:hover {
    background: var(--ch-white);
    transform: scale(1.02);
}

.ch-pricing-card-sub {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--ch-slate-500);
}

/* --- Footer --- */
.ch-site-footer {
    position: relative;
    z-index: 10;
    padding: 48px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--ch-dark);
    font-size: 14px;
    color: var(--ch-slate-500);
}

.ch-site-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ch-site-footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ch-site-footer-brand-name {
    font-weight: 700;
    color: var(--ch-white);
}

.ch-site-footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ch-site-footer-links a {
    color: var(--ch-slate-500);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-site-footer-links a:hover {
    color: var(--ch-white);
}


/* ═══════════════════════════════════════════════════════════
   18. PANEL PAGE (.ch-panel-page)
   ═══════════════════════════════════════════════════════════ */

.ch-panel-page {
    min-height: 100vh;
    font-family: var(--ch-font);
    color: var(--ch-white);
    background: var(--ch-dark);
    /* Nav ahora es sticky y ocupa espacio propio → sin padding-top extra. */
    padding-top: 0;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ch-panel-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 60px;
    position: relative;
    z-index: 1;
}

/* Panel tabs */
.ch-panel-tabs {
    display: flex;
    gap: 4px;
    padding: 28px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ch-panel-tabs::-webkit-scrollbar {
    display: none;
}

.ch-panel-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: var(--ch-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--ch-slate-400);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
}

.ch-panel-tab:hover {
    color: var(--ch-white);
    background: rgba(255, 255, 255, 0.06);
}

.ch-panel-tab-active,
.ch-panel-tab-active:hover {
    color: var(--ch-accent);
    background: rgba(var(--ch-accent-rgb), 0.1);
}

.ch-panel-tab i,
.ch-panel-tab svg {
    width: 18px;
    height: 18px;
}

/* Panel sections */
.ch-panel-section {
    padding-top: 24px;
}

/* Título de cada sección del panel ("Correcciones", "Fichajes", etc.).
   Lo separamos del header superior con margen generoso y añadimos aire
   entre el h2 y el párrafo descriptivo que lo sigue. */
.ch-panel-section > h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--ch-white);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.ch-panel-section > h2 + p,
.ch-section-lead {
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 0 24px !important;
}

.ch-panel-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.ch-panel-section-header h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--ch-white);
    margin: 0;
    letter-spacing: -0.02em;
}

/* Panel stats */
.ch-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.ch-panel-stat-card {
    background: rgba(var(--ch-surface-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ch-radius-xl);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ch-panel-stat-card i,
.ch-panel-stat-card > svg {
    width: 28px;
    height: 28px;
    color: var(--ch-accent);
    flex-shrink: 0;
}

.ch-panel-stat-info {
    display: flex;
    flex-direction: column;
}

.ch-panel-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--ch-white);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ch-panel-stat-label {
    font-size: 13px;
    color: var(--ch-slate-400);
    margin-top: 2px;
}

/* Panel form */
.ch-panel-form {
    background: rgba(var(--ch-surface-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ch-radius-xl);
    padding: 24px;
}

.ch-panel-form .ch-form-group {
    margin-bottom: 16px;
}

.ch-panel-form .ch-form-group:last-of-type {
    margin-bottom: 0;
}

.ch-panel-form-msg {
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 12px;
    font-weight: 500;
}

.ch-panel-form-msg-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ch-emerald);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.ch-panel-form-msg-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ch-red);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Panel filters */
.ch-panel-filters {
    background: rgba(var(--ch-surface-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ch-radius-xl);
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.ch-panel-filters .ch-form-group {
    flex: 1;
    min-width: 140px;
    margin-bottom: 0;
}

.ch-panel-filters .ch-form-group label {
    font-size: 12px;
    margin-bottom: 4px;
}

.ch-panel-export-btns {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Panel user actions */
.ch-panel-actions {
    display: flex;
    gap: 6px;
}

.ch-panel-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ch-slate-400);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ch-panel-action-btn:hover {
    color: var(--ch-white);
    background: rgba(255, 255, 255, 0.08);
}

.ch-panel-action-btn-danger:hover {
    color: var(--ch-red);
    background: rgba(239, 68, 68, 0.1);
}

.ch-panel-action-btn i,
.ch-panel-action-btn svg {
    width: 16px;
    height: 16px;
}


/* ═══════════════════════════════════════════════════════════
   19. DATA TABLE (.ch-data-table)
   ═══════════════════════════════════════════════════════════ */

.ch-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ch-radius-xl);
    background: rgba(var(--ch-surface-rgb), 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ch-data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ch-font);
}

.ch-data-table thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ch-slate-500);
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--ch-surface);
}

.ch-data-table tbody td {
    font-size: 13px;
    padding: 12px 16px;
    color: var(--ch-slate-300);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
}

#ch-tabla-correcciones tbody td:nth-child(6) {
    white-space: normal;
    max-width: 280px;
    word-break: break-word;
}

.ch-data-table tbody tr:last-child td {
    border-bottom: none;
}

.ch-data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Status badges inside tables */
.ch-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ch-badge-activo {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ch-emerald);
}

.ch-badge-inactivo {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ch-red);
}

.ch-badge-entrada {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ch-emerald);
}

.ch-badge-salida {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ch-red);
}

.ch-badge-pendiente {
    background: rgba(245, 158, 11, 0.1);
    color: var(--ch-amber);
}

.ch-badge-aprobado {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ch-emerald);
}

.ch-badge-rechazado {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ch-red);
}

/* Table empty state */
.ch-table-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ch-slate-500);
    font-size: 14px;
}

.ch-table-empty i,
.ch-table-empty svg {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Pagination */
.ch-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
}

.ch-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--ch-slate-400);
    font-family: var(--ch-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ch-pagination-btn:hover {
    color: var(--ch-white);
    background: rgba(255, 255, 255, 0.06);
}

.ch-pagination-btn-active,
.ch-pagination-btn-active:hover {
    color: var(--ch-accent);
    background: rgba(var(--ch-accent-rgb), 0.1);
}

.ch-pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════
   20. HISTORIAL PAGE
   ═══════════════════════════════════════════════════════════ */

/* Historial widget container */
.ch-historial-widget {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 60px;
    position: relative;
    z-index: 1;
}

/* Header */
.ch-hist-header {
    margin-bottom: 28px;
}

.ch-hist-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--ch-white);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.ch-hist-subtitle {
    font-size: 14px;
    color: var(--ch-slate-400);
    margin: 0;
}

/* Filter form */
.ch-hist-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.ch-hist-filter .ch-select {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--ch-white);
    font-family: var(--ch-font);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.ch-hist-filter .ch-select:focus {
    border-color: rgba(var(--ch-accent-rgb), 0.5);
    outline: none;
}

/* Summary cards */
.ch-hist-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.ch-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    text-align: center;
}

.ch-summary-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--ch-white);
    letter-spacing: -0.02em;
}

.ch-summary-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ch-summary-warning .ch-summary-value {
    color: #fbbf24;
}

/* Export buttons */
.ch-hist-export {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.ch-btn-glass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--ch-white);
    font-family: var(--ch-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ch-btn-glass:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Table card */
.ch-table-card {
    overflow-x: auto;
    margin-bottom: 20px;
}

.ch-hist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ch-hist-table thead th {
    padding: 12px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--ch-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ch-hist-table tbody td {
    padding: 12px 14px;
    color: var(--ch-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ch-hist-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ch-row-warn {
    background: rgba(251, 191, 36, 0.04);
}

.ch-row-empty td {
    color: var(--ch-slate-500);
}

.ch-cell-hora {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ch-cell-total {
    font-weight: 700;
    color: var(--ch-accent);
}

.ch-cell-center {
    text-align: center;
    color: var(--ch-slate-500);
}

/* Badges */
.ch-badge-glass {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ch-badge-ok {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

.ch-badge-danger {
    background: rgba(251, 113, 133, 0.12);
    color: #fb7185;
}

.ch-badge-neutral {
    background: rgba(148, 163, 184, 0.1);
    color: var(--ch-slate-400);
}

/* Legal footer */
.ch-hist-legal {
    text-align: center;
    font-size: 12px;
    color: var(--ch-slate-500);
    padding: 16px 0 0;
}

/* Icon sizes */
.ch-icon-xs {
    width: 12px;
    height: 12px;
}

.ch-icon-sm {
    width: 16px;
    height: 16px;
}


/* ═══════════════════════════════════════════════════════════
   21. UTILITIES
   ═══════════════════════════════════════════════════════════ */

.ch-hidden {
    display: none !important;
}

.ch-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ch-text-center {
    text-align: center;
}

.ch-text-accent {
    color: var(--ch-accent);
}

.ch-text-slate {
    color: var(--ch-slate-400);
}

.ch-mt-0 { margin-top: 0; }
.ch-mt-8 { margin-top: 8px; }
.ch-mt-12 { margin-top: 12px; }
.ch-mt-16 { margin-top: 16px; }
.ch-mt-24 { margin-top: 24px; }
.ch-mb-0 { margin-bottom: 0; }
.ch-mb-8 { margin-bottom: 8px; }
.ch-mb-12 { margin-bottom: 12px; }
.ch-mb-16 { margin-bottom: 16px; }
.ch-mb-24 { margin-bottom: 24px; }

.ch-flex { display: flex; }
.ch-flex-col { flex-direction: column; }
.ch-flex-center { align-items: center; justify-content: center; }
.ch-flex-between { justify-content: space-between; }
.ch-gap-8 { gap: 8px; }
.ch-gap-12 { gap: 12px; }
.ch-gap-16 { gap: 16px; }
.ch-w-full { width: 100%; }


/* ═══════════════════════════════════════════════════════════
   22. ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes ch-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@keyframes ch-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ch-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes ch-blob {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(30px, -50px) scale(1.1); }
    66%  { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes ch-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}

.ch-animate-fade-in {
    animation: ch-fade-in 0.4s ease forwards;
}

.ch-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--ch-accent-rgb), 0.2);
    border-top-color: var(--ch-accent);
    border-radius: 50%;
    animation: ch-spin 0.6s linear infinite;
}


/* ═══════════════════════════════════════════════════════════
   23. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (max-width: 768px) ── */
@media (max-width: 768px) {

    .ch-panel-stats,
    .ch-historial-summary,
    .ch-hist-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .ch-panel-content,
    .ch-historial-content,
    .ch-historial-widget {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Home tablet — navbar: hide desktop links, show burger */
    .ch-home-nav-links {
        display: none !important;
    }

    .ch-home-nav-burger {
        display: block;
    }

    /* Filter button full width on tablet/mobile */
    .ch-filter-btn-group {
        align-self: stretch;
    }

    .ch-filter-btn-group .ch-btn-accent {
        width: 100%;
        justify-content: center;
    }

    /* Home tablet — hero */
    .ch-home-hero-section {
        padding: 40px 0 60px;
    }

    .ch-home-hero-copy {
        text-align: center;
    }

    .ch-home-title {
        font-size: 52px;
    }

    .ch-home-desc {
        font-size: 18px;
    }

    .ch-home-hero-container {
        padding: 0 24px;
    }

    /* Home tablet — bento */
    .ch-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ch-bento-card--wide {
        grid-column: span 2;
    }

    .ch-bento-card--tall {
        grid-row: span 2;
    }

    /* Home tablet — pricing */
    .ch-pricing-container {
        padding: 0 24px;
    }

    .ch-panel-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .ch-panel-filters .ch-form-group {
        min-width: 100%;
    }
}

/* ── Mobile (max-width: 640px) ── */
@media (max-width: 640px) {

    /* Navbar mobile */
    .ch-nav-link span,
    .ch-nav-link-text {
        display: none;
    }

    .ch-nav-link {
        padding: 8px 10px;
    }

    .ch-site-logo-text {
        display: none;
    }

    .ch-nav-inner {
        padding: 0 12px;
    }

    /* Fichar page mobile — nav ahora es sticky, no hace falta hueco */
    .ch-fichar-page {
        padding-top: 0;
    }

    .ch-fichar-content {
        padding: 24px 16px 32px;
        gap: 20px;
    }

    .ch-fichar-greeting h1 {
        font-size: 22px;
    }

    .ch-fichar-widget-card {
        padding: 28px 16px;
        gap: 20px;
    }

    .ch-fichar-info-row {
        grid-template-columns: 1fr;
    }

    /* Circle button mobile — bigger and centered */
    .ch-circle-btn-wrapper,
    .ch-btn-wrapper {
        width: 220px;
        height: 220px;
        margin: 0 auto;
    }

    .ch-glow-ring {
        width: 220px;
        height: 220px;
    }

    .ch-circle-btn {
        width: 176px;
        height: 176px;
    }

    .ch-circle-icon {
        width: 44px;
        height: 44px;
    }

    .ch-circle-text {
        font-size: 17px;
        letter-spacing: 0.06em;
    }

    /* Timer / idle text mobile — full width centered */
    .ch-timer-area {
        min-height: 60px;
    }

    .ch-timer-value {
        font-size: 32px;
    }

    .ch-idle-text {
        width: 100%;
        text-align: center;
    }

    /* Feedback message centered */
    .ch-mensaje {
        width: 100%;
        text-align: center;
    }

    /* Notes section centered */
    .ch-notas-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Login / Registro: hide redundant top header on mobile (card has logo) */
    .ch-login-page .ch-site-header {
        display: none !important;
    }

    .ch-login-page {
        padding: 24px 16px;
    }

    /* Login card mobile */
    .ch-login-card {
        padding: 28px 20px;
    }

    .ch-login-title {
        font-size: 24px;
    }

    /* Registration mobile */
    .ch-registro-card {
        padding: 28px 20px;
    }

    .ch-form-row {
        grid-template-columns: 1fr;
    }

    /* Home mobile — navbar */
    .ch-home-nav-links {
        display: none !important;
    }

    .ch-home-nav-inner {
        height: 64px;
    }

    /* Home mobile — hero */
    .ch-home-hero-section {
        padding: 30px 0 40px;
    }

    .ch-home-hero-container {
        padding: 0 20px;
    }

    .ch-home-hero-copy {
        text-align: center;
    }

    .ch-home-title {
        font-size: 40px;
    }

    .ch-home-desc {
        font-size: 16px;
    }

    .ch-home-actions {
        flex-direction: column;
        width: 100%;
    }

    .ch-home-cta-primary,
    .ch-home-cta-secondary {
        width: 100%;
        justify-content: center;
    }

    .ch-home-badge {
        font-size: 10px;
        padding: 6px 12px;
    }

    /* Home mobile — phone */
    .ch-home-phone {
        width: 260px;
    }

    .ch-home-phone-ui {
        height: 480px;
        padding: 16px;
    }

    .ch-phone-main-btn {
        width: 140px;
        height: 140px;
    }

    .ch-phone-btn-icon {
        width: 32px;
        height: 32px;
    }

    .ch-phone-btn-text {
        font-size: 14px;
    }

    .ch-phone-timer {
        font-size: 24px;
    }

    .ch-phone-header-date {
        font-size: 15px;
    }

    /* Bento mobile */
    .ch-bento-section {
        padding: 60px 0;
    }

    .ch-bento-container {
        padding: 0 20px;
    }

    .ch-bento-grid {
        grid-template-columns: 1fr;
    }

    .ch-bento-card--wide {
        grid-column: span 1;
    }

    .ch-bento-card--tall {
        grid-row: span 1;
    }

    .ch-bento-card {
        padding: 24px;
    }

    .ch-bento-card-title {
        font-size: 20px;
    }

    .ch-bento-card-desc {
        font-size: 14px;
    }

    .ch-bento-card-bg-icon i,
    .ch-bento-card-bg-icon svg {
        width: 128px;
        height: 128px;
    }

    /* Pricing mobile */
    .ch-pricing-section {
        padding: 60px 0;
    }

    .ch-pricing-container {
        padding: 0 20px;
    }

    .ch-pricing-card {
        padding: 28px;
        border-radius: 28px;
    }

    .ch-pricing-card-amount {
        font-size: 56px;
    }

    .ch-pricing-card-btn {
        padding: 16px;
        font-size: 16px;
    }

    /* Panel mobile — nav ahora es sticky, no hace falta hueco */
    .ch-panel-page {
        padding-top: 0;
    }

    .ch-panel-tabs {
        padding: 16px 0 12px;
        gap: 2px;
    }

    .ch-panel-tab {
        font-size: 13px;
        padding: 6px 12px;
    }

    .ch-panel-section-header h2 {
        font-size: 20px;
    }

    .ch-panel-stats,
    .ch-historial-summary,
    .ch-hist-summary {
        grid-template-columns: 1fr;
    }

    .ch-hist-table thead th,
    .ch-hist-table tbody td {
        padding: 10px 10px;
        font-size: 12px;
    }

    .ch-hist-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .ch-panel-stat-value {
        font-size: 22px;
    }

    /* Table mobile */
    .ch-data-table thead th {
        font-size: 11px;
        padding: 10px 12px;
    }

    .ch-data-table tbody td {
        font-size: 12px;
        padding: 10px 12px;
    }

    /* Footer mobile */
    .ch-site-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    /* Form row mobile */
    .ch-panel-filters {
        padding: 16px;
    }

    .ch-panel-form {
        padding: 20px 16px;
    }

    /* Glass card mobile */
    .ch-glass-card {
        padding: 20px 16px;
    }

    .ch-fichar-log {
        padding: 16px;
    }

    .ch-fichar-log-title {
        font-size: 12px;
    }

    /* Circle button wrapper resize — matches earlier rule */
    .ch-circle-btn-wrapper,
    .ch-btn-wrapper {
        width: 220px;
        height: 220px;
        margin: 0 auto;
    }

    /* History title mobile */
    .ch-hist-title {
        font-size: 22px;
    }

    /* Footer mobile spacing */
    .ch-site-footer {
        padding: 32px 0;
    }

    .ch-site-footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    /* Panel/historial bottom padding */
    .ch-panel-content,
    .ch-historial-widget {
        padding-bottom: 40px;
    }

    /* Hero grid gap mobile */
    .ch-home-hero-grid {
        gap: 40px;
    }

    /* Bento header margin mobile */
    .ch-bento-header {
        margin-bottom: 32px;
    }

    /* Pricing mobile spacing */
    .ch-pricing-grid {
        gap: 32px;
    }

    .ch-pricing-subtitle {
        font-size: 16px;
    }

    /* Login form options wrap */
    .ch-form-options {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Solicitudes title padding in table-wrap */
    .ch-solicitudes-title {
        font-size: 16px;
    }

    /* ─── Historial: summary cards compact 3-col ─── */
    .ch-hist-summary {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }

    .ch-summary-card {
        padding: 14px 8px;
    }

    .ch-summary-value {
        font-size: 20px;
    }

    .ch-summary-label {
        font-size: 10px;
    }

    /* ─── Historial: export buttons full-width stacked ─── */
    .ch-hist-export {
        flex-direction: column;
    }

    .ch-hist-export form {
        display: block !important;
        width: 100%;
    }

    .ch-hist-export .ch-btn-glass {
        width: 100%;
        justify-content: center;
    }

    /* ─── Historial: table → card view ─── */
    .ch-table-card.ch-glass-card {
        background: transparent;
        border: none;
        padding: 0;
        overflow: visible;
    }

    .ch-hist-table thead {
        display: none;
    }

    .ch-hist-table tbody {
        display: block;
    }

    .ch-hist-table tbody tr {
        display: block;
        position: relative;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 10px;
    }

    .ch-hist-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.06);
    }

    /* Continuation rows (2nd entry/exit pair same day) connect to card above */
    .ch-hist-table tbody tr.ch-row-cont {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: -11px;
        border-top: 1px dashed rgba(255, 255, 255, 0.1);
    }

    .ch-hist-table tbody tr:has(+ .ch-row-cont) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
        padding-bottom: 10px;
    }

    /* Default cell layout: label ← → value */
    .ch-hist-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: none;
        font-size: 14px;
    }

    .ch-hist-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        color: var(--ch-slate-400);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }

    /* ── Fecha + Día: inline card header ── */
    .ch-hist-table tbody td[data-label="Fecha"] {
        display: inline;
        font-weight: 700;
        font-size: 15px;
        padding: 0;
    }

    .ch-hist-table tbody td[data-label="Fecha"]::before {
        content: none;
    }

    .ch-hist-table tbody td[data-label="Día"] {
        display: inline;
        font-weight: 600;
        font-size: 15px;
        color: var(--ch-slate-400);
        padding: 0;
        margin-left: 2px;
    }

    .ch-hist-table tbody td[data-label="Día"]::before {
        content: "· ";
        color: var(--ch-slate-500);
        font-size: 15px;
        text-transform: none;
        letter-spacing: normal;
    }

    /* Hide empty Fecha/Día/Estado in continuation rows */
    .ch-hist-table tbody tr.ch-row-cont td[data-label="Fecha"],
    .ch-hist-table tbody tr.ch-row-cont td[data-label="Día"],
    .ch-hist-table tbody tr.ch-row-cont td[data-label="Estado"] {
        display: none !important;
    }

    /* Separator after header (before Entrada) */
    .ch-hist-table tbody td[data-label="Entrada"] {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Continuation rows: no separator since no header */
    .ch-hist-table tbody tr.ch-row-cont td[data-label="Entrada"] {
        margin-top: 0;
        padding-top: 4px;
        border-top: none;
    }

    /* Estado: no label, badge speaks for itself */
    .ch-hist-table tbody td[data-label="Estado"]::before {
        content: none;
    }

    .ch-hist-table tbody td[data-label="Estado"] {
        justify-content: flex-end;
        padding-top: 6px;
    }

    /* Actions button: top-right corner of card */
    .ch-hist-table tbody td.ch-cell-actions {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 0;
    }

    .ch-hist-table tbody td.ch-cell-actions::before {
        content: none;
    }

    .ch-hist-table tbody td.ch-cell-actions:empty {
        display: none !important;
    }

    /* Empty-day rows: hide the "—" colspan cell */
    .ch-hist-table tbody .ch-cell-nofichaje {
        display: none !important;
    }

    /* Empty rows: compact styling */
    .ch-hist-table tbody tr.ch-row-empty {
        padding: 12px 16px;
    }

    .ch-hist-table tbody tr.ch-row-empty td[data-label="Estado"] {
        padding-top: 8px;
    }

    /* Warning row card accent */
    .ch-hist-table tbody tr.ch-row-warn {
        border-color: rgba(251, 191, 36, 0.15);
        background: rgba(251, 191, 36, 0.04);
    }
}

/* ── Large screens (min-width: 1024px) ── */
@media (min-width: 1024px) {

    .ch-panel-content {
        max-width: 960px;
    }

    .ch-historial-content {
        max-width: 960px;
    }

    /* Home desktop */
    .ch-home-nav-links {
        display: flex;
    }

    .ch-home-nav-burger {
        display: none !important;
    }

    .ch-mobile-menu {
        display: none !important;
    }

    .ch-home-hero-section {
        padding: 80px 0 100px;
    }

    .ch-home-hero-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ch-home-hero-copy {
        text-align: left;
    }

    .ch-home-desc {
        margin-left: 0;
        margin-right: 0;
    }

    .ch-home-actions {
        justify-content: flex-start;
    }

    /* Bento desktop */
    .ch-bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ch-bento-card--wide {
        grid-column: span 2;
    }

    .ch-bento-card--wide .ch-bento-card-content {
        max-width: 60%;
    }

    .ch-bento-card--tall {
        grid-row: span 2;
    }

    .ch-bento-card--wide {
        padding: 48px;
    }

    .ch-bento-card--tall {
        padding: 48px;
    }

    /* Pricing desktop */
    .ch-pricing-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer desktop */
    .ch-site-footer-inner {
        flex-direction: row;
    }

    .ch-panel-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Extra-large screens (min-width: 1280px) ── */
@media (min-width: 1280px) {

    .ch-panel-content {
        max-width: 1100px;
    }

    .ch-historial-content {
        max-width: 1100px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   18. SOLICITUDES DE CORRECCIÓN — Modal + Botones + Tabla
   ══════════════════════════════════════════════════════════════════ */

/* Modal overlay */
.ch-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ch-modal {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    padding: 28px;
    position: relative;
}

.ch-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ch-modal-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.ch-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.ch-modal-close:hover {
    color: #fff;
}

.ch-modal .ch-form-group {
    margin-bottom: 16px;
}

.ch-modal .ch-form-group label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-bottom: 6px;
    font-weight: 500;
}

.ch-modal .ch-input,
.ch-modal .ch-select,
.ch-modal textarea.ch-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}

.ch-modal .ch-input:focus,
.ch-modal .ch-select:focus,
.ch-modal textarea.ch-input:focus {
    outline: none;
    border-color: #fbbf24;
}

.ch-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.ch-modal-actions .ch-btn-glass {
    flex: 1;
}

.ch-modal-actions .ch-btn-accent {
    flex: 2;
}

/* Correction request rows (entrada/salida) in modal */
.ch-sol-row {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.ch-sol-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ch-sol-actual {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Correction request button (pencil) in history table */
.ch-btn-corregir {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
    display: inline-flex;
    align-items: center;
}

.ch-btn-corregir:hover {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.ch-cell-actions {
    text-align: center;
    width: 50px;
}

/* Approve / Reject buttons in admin panel */
.ch-sol-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.ch-btn-aprobar {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 5px 10px;
    color: #22c55e;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.ch-btn-aprobar:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: #22c55e;
}

.ch-btn-rechazar {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 5px 10px;
    color: #ef4444;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.ch-btn-rechazar:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

/* Tab badge (pending count) */
.ch-tab-badge {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
    display: inline-block;
    line-height: 16px;
}

/* Solicitudes section title */
.ch-solicitudes-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Motivo column in solicitudes table */
.ch-sol-motivo {
    max-width: 200px;
    white-space: normal;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

/* Mobile: correction request modal */
@media (max-width: 640px) {
    .ch-modal {
        padding: 20px;
        max-width: 100%;
    }

    .ch-modal-actions {
        flex-direction: column;
    }

    .ch-sol-actions {
        flex-direction: column;
    }

    .ch-btn-aprobar,
    .ch-btn-rechazar {
        width: 100%;
        justify-content: center;
    }

    .ch-cell-actions {
        width: auto;
    }
}

/* ── Print styles ── */
@media print {

    .ch-nav,
    .ch-blob,
    .ch-glow-ring,
    .ch-login-bg,
    .ch-circle-btn-wrapper {
        display: none !important;
    }

    .ch-fichar-page,
    .ch-panel-page,
    .ch-login-page,
    .ch-registro-page,
    .ch-home-page {
        background: white !important;
        color: black !important;
        padding-top: 0 !important;
    }

    .ch-glass-card,
    .ch-fichar-widget-card,
    .ch-fichar-log,
    .ch-panel-form,
    .ch-panel-stat-card,
    .ch-table-wrap {
        background: white !important;
        backdrop-filter: none !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    .ch-data-table thead th,
    .ch-data-table tbody td {
        color: black !important;
        border-color: #ddd !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — disable animations for accessibility
   and devices that struggle with them
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   24. PWA INSTALL BANNER
   ═══════════════════════════════════════════════════════════ */

.ch-pwa-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(251, 191, 36, 0.2);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ch-pwa-banner-visible {
    transform: translateY(0);
    opacity: 1;
}

.ch-pwa-banner-body {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ch-pwa-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.15);
    color: var(--ch-accent);
}

.ch-pwa-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ch-pwa-banner-text strong {
    color: var(--ch-white);
    font-size: 14px;
    font-weight: 700;
}

.ch-pwa-banner-text span {
    color: var(--ch-slate-400);
    font-size: 12px;
}

.ch-pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ch-pwa-btn-install {
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    background: var(--ch-accent);
    color: var(--ch-dark);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--ch-font);
    transition: opacity 0.15s;
}

.ch-pwa-btn-install:hover {
    opacity: 0.85;
}

.ch-pwa-btn-dismiss {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ch-slate-400);
    font-size: 18px;
    cursor: pointer;
    font-family: var(--ch-font);
    transition: background 0.15s;
}

.ch-pwa-btn-dismiss:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* iOS install guide overlay */
.ch-pwa-ios-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ch-pwa-ios-visible {
    opacity: 1;
}

.ch-pwa-ios-card {
    width: 100%;
    max-width: 280px;
    background: var(--ch-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.ch-pwa-ios-visible .ch-pwa-ios-card {
    transform: scale(1);
}

.ch-pwa-ios-card p {
    color: var(--ch-slate-300);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 18px;
}

.ch-pwa-ios-card p b {
    color: var(--ch-white);
}

.ch-pwa-ios-card p svg {
    color: var(--ch-accent);
}

.ch-pwa-ios-card .ch-pwa-btn-install {
    width: 100%;
}


@media (prefers-reduced-motion: reduce) {
    .ch-blob,
    .ch-home-phone-blob,
    .ch-home-phone,
    .ch-phone-timer-label {
        animation: none !important;
    }
}


/* =========================================================================
   HOME v2 — SoloFichar 2026 (namespace sf-*)
   Estilos aislados para el [control_horario_home] rediseñado.
   Convive con los ch-* existentes sin colisión.
   ========================================================================= */

/* =============================================================
   SYSTEM — respeta tu web: slate-900 + Plus Jakarta + ámbar
   ============================================================= */
:root{
  --sf-bg:#0f172a;
  --sf-bg-2:#141e33;
  --sf-bg-3:#0a1120;
  --sf-panel:#151f37;
  --sf-border:#1e293b;
  --sf-border-2:#334155;
  --sf-border-3:#475569;
  --sf-text:#f8fafc;
  --sf-muted:#94a3b8;
  --sf-dim:#64748b;
  --sf-accent:#fbbf24;       /* ámbar — cámbialo aquí si tu accent es otro */
  --sf-accent-deep:#f59e0b;
  --sf-ok:#34d399;
  --sf-warn:#fb7185;
  --sf-radius:14px;
  --sf-radius-sm:8px;
  --sf-mono:'Fira Code',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--sf-bg);color:var(--sf-text);-webkit-font-smoothing:antialiased}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:16px;line-height:1.55;font-weight:400;letter-spacing:-.01em;
  overflow-x:hidden;
}
/* fondo técnico: rejilla + halo amber sutil */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 900px 500px at 70% -10%, rgba(251,191,36,.08), transparent 60%),
    radial-gradient(ellipse 800px 500px at 10% 120%, rgba(52,211,153,.04), transparent 60%),
    linear-gradient(rgba(148,163,184,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.035) 1px,transparent 1px);
  background-size:auto,auto,64px 64px,64px 64px;
  background-position:center;
}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
img{max-width:100%;display:block}
.sf-wrap{max-width:1340px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.sf-mono{font-family:var(--sf-mono);letter-spacing:0}
.sf-up{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600}

/* =============================================================
   TOP BAR — estado del servicio (aporta credibilidad, quita look "IA demo")
   ============================================================= */
.sf-topbar{
  border-bottom:1px solid var(--sf-border);
  background:rgba(10,17,32,.7);backdrop-filter:blur(8px);
  font-size:12px;position:relative;z-index:10;
}
.sf-topbar-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 32px;gap:24px;color:var(--sf-muted);
}
.sf-topbar .sf-dot{
  display:inline-block;width:6px;height:6px;background:var(--sf-ok);border-radius:50%;
  margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px rgba(52,211,153,.18);
  animation:sf-pulse 2.4s ease-in-out infinite;
}
@keyframes sf-pulse{50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}
.sf-topbar .sf-mono{font-size:11px}
.sf-topbar-right{display:flex;gap:22px}
.sf-topbar-right a:hover{color:var(--sf-text)}

/* =============================================================
   NAV
   ============================================================= */
.sf-nav{
  border-bottom:1px solid var(--sf-border);
  background:rgba(15,23,42,.85);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:40;
}
.sf-nav-inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding:16px 32px;gap:40px;
}
.sf-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em}
.sf-brand-mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent-deep));
  color:#0f172a;display:grid;place-items:center;
  font-weight:800;font-size:15px;letter-spacing:-.03em;
  box-shadow:0 4px 14px -4px rgba(251,191,36,.4);
}
.sf-nav-links{display:flex;gap:28px;font-size:14px;color:var(--sf-muted);font-weight:500}
.sf-nav-links a{position:relative;padding:6px 0;transition:color .2s}
.sf-nav-links a:hover{color:var(--sf-text)}
.sf-nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--sf-accent);
  transition:right .3s cubic-bezier(.4,0,.2,1);
}
.sf-nav-links a:hover::after{right:0}
.sf-nav-cta{display:flex;gap:10px;align-items:center}
.sf-btn{
  padding:10px 18px;font-size:14px;font-weight:600;border-radius:var(--sf-radius-sm);
  display:inline-flex;align-items:center;gap:8px;
  transition:all .2s ease;border:1px solid transparent;
}
.sf-btn-ghost{color:var(--sf-muted);border-color:var(--sf-border-2)}
.sf-btn-ghost:hover{color:var(--sf-text);border-color:var(--sf-border-3)}
.sf-btn-accent{
  background:var(--sf-accent);color:#0f172a;
  box-shadow:0 0 0 0 rgba(251,191,36,0);
}
.sf-btn-accent:hover{background:#fff;box-shadow:0 0 0 6px rgba(251,191,36,.12)}
.sf-btn-outline{border-color:var(--sf-border-3);color:var(--sf-text)}
.sf-btn-outline:hover{border-color:var(--sf-text);background:var(--sf-bg-2)}
.sf-btn i{width:16px;height:16px}

/* =============================================================
   HERO
   ============================================================= */
.sf-hero{padding:56px 0 90px;position:relative}
.sf-hero-watermark{
  position:absolute;bottom:-30px;left:-20px;right:0;z-index:0;pointer-events:none;
  font-weight:800;font-size:clamp(140px,22vw,280px);line-height:.82;letter-spacing:-.04em;
  color:rgba(148,163,184,.035);white-space:nowrap;
}
.sf-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  position:relative;z-index:2;
}
.sf-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px 6px 10px;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);
  border-radius:999px;font-size:12.5px;color:#fde68a;margin-bottom:28px;
  font-weight:500;
}
.sf-badge-dot{
  width:7px;height:7px;border-radius:50%;background:var(--sf-accent);
  box-shadow:0 0 0 3px rgba(251,191,36,.18);
  animation:sf-pulse-amber 2s ease-in-out infinite;
}
@keyframes sf-pulse-amber{50%{box-shadow:0 0 0 7px rgba(251,191,36,0)}}

h1.sf-title{
  font-weight:800;font-size:clamp(52px,7.5vw,110px);
  line-height:.96;letter-spacing:-.035em;margin-bottom:24px;
}
h1.sf-title .sf-accent{
  color:transparent;background:linear-gradient(135deg,var(--sf-accent) 0%,#fde68a 100%);
  -webkit-background-clip:text;background-clip:text;
  font-style:italic;font-weight:700;
}
h1.sf-title .sf-stroke{
  position:relative;display:inline-block;
}
h1.sf-title .sf-stroke::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:8%;height:14%;
  background:var(--sf-accent);opacity:.22;z-index:-1;transform:skewX(-10deg);
}

.sf-lede{
  font-size:19px;max-width:52ch;color:var(--sf-muted);
  margin-bottom:36px;line-height:1.55;
}
.sf-lede strong{color:var(--sf-text);font-weight:600}
.sf-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:44px}
.sf-btn-lg{padding:14px 24px;font-size:15px;border-radius:10px}

/* "trust row" pequeño debajo del CTA */
.sf-trust{
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;
  padding-top:28px;border-top:1px solid var(--sf-border);
  font-size:12.5px;color:var(--sf-dim);
}
.sf-trust-item{display:flex;align-items:center;gap:8px}
.sf-trust-item i{color:var(--sf-accent);width:14px;height:14px}
.sf-trust-num{color:var(--sf-text);font-weight:700;font-family:var(--sf-mono);font-size:13px}

/* ---- Phone mockup (mantengo tu concepto, mejoro composición) ---- */
.sf-phone-stage{position:relative;padding:20px;display:flex;justify-content:center}
/* cuadrícula decorativa detrás del phone */
.sf-phone-stage::before{
  content:"";position:absolute;inset:10% 15%;z-index:0;
  background-image:
    linear-gradient(rgba(251,191,36,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,191,36,.15) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 70% at center,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at center,#000 30%,transparent 75%);
}

.sf-phone{
  position:relative;z-index:2;
  width:310px;height:630px;
  background:#000;border-radius:48px;padding:12px;
  border:1.5px solid #293548;
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.sf-phone-screen{
  height:100%;border-radius:38px;overflow:hidden;
  background:linear-gradient(180deg,#0b1120 0%,#0f172a 100%);
  padding:44px 24px 24px;position:relative;
  display:flex;flex-direction:column;
}
.sf-phone-notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:100px;height:22px;background:#000;border-radius:0 0 14px 14px;
}
.sf-phone-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.sf-phone-head-label{font-size:11px;color:var(--sf-dim);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:2px}
.sf-phone-head-date{font-size:22px;font-weight:700;letter-spacing:-.02em}
.sf-phone-head-date em{font-style:normal;color:var(--sf-accent)}
.sf-phone-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#334155,#1e293b);
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#cbd5e1;
  border:1px solid #334155;
}

/* botón fichar */
.sf-punch-wrap{
  display:grid;place-items:center;margin:auto 0;position:relative;
}
.sf-punch-rings{
  position:absolute;inset:0;display:grid;place-items:center;
}
.sf-punch-rings span{
  position:absolute;border:1px solid rgba(251,191,36,.18);border-radius:50%;
}
.sf-punch-rings span:nth-child(1){width:200px;height:200px}
.sf-punch-rings span:nth-child(2){width:230px;height:230px;opacity:.6}
.sf-punch-rings span:nth-child(3){width:260px;height:260px;opacity:.3}
.sf-punch-btn{
  width:168px;height:168px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fde68a,var(--sf-accent) 60%,var(--sf-accent-deep));
  display:grid;place-items:center;gap:6px;grid-auto-flow:row;
  color:#0f172a;font-weight:700;letter-spacing:.2em;font-size:14px;
  box-shadow:
    0 20px 40px -10px rgba(251,191,36,.5),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -4px 0 rgba(245,158,11,.35);
  cursor:pointer;transition:transform .15s ease;position:relative;z-index:2;
}
.sf-punch-btn:active{transform:scale(.97)}
.sf-punch-btn.active{
  background:radial-gradient(circle at 30% 30%,#fca5a5,#ef4444 60%,#b91c1c);
  color:#fff;box-shadow:0 20px 40px -10px rgba(239,68,68,.5),inset 0 2px 0 rgba(255,255,255,.25);
}
.sf-punch-btn i{width:30px;height:30px}
.sf-punch-status{
  text-align:center;margin-top:28px;
}
.sf-punch-status-label{font-size:11px;color:var(--sf-dim);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.sf-punch-timer{
  font-family:var(--sf-mono);font-size:32px;font-weight:500;
  letter-spacing:.02em;margin-top:4px;font-variant-numeric:tabular-nums;
}
.sf-punch-timer .sf-sep{color:var(--sf-accent)}
.sf-punch-hint{color:var(--sf-muted);font-size:13px;line-height:1.4}

/* chip de abajo */
.sf-phone-chip{
  margin-top:24px;padding:12px 14px;
  background:rgba(255,255,255,.04);border:1px solid var(--sf-border);
  border-radius:12px;display:flex;align-items:center;gap:12px;
}
.sf-phone-chip-icon{
  width:32px;height:32px;border-radius:8px;background:rgba(52,211,153,.15);
  display:grid;place-items:center;color:var(--sf-ok);
}
.sf-phone-chip-icon i{width:16px;height:16px}
.sf-phone-chip-text{flex:1;font-size:12px;line-height:1.3}
.sf-phone-chip-text strong{display:block;font-weight:600;font-size:13px;margin-bottom:1px}
.sf-phone-chip-text span{color:var(--sf-muted)}

/* hero side info (ejecuta al lado del phone) */
.sf-phone-logs{
  position:absolute;z-index:3;right:-40px;bottom:40px;
  background:rgba(15,23,42,.85);backdrop-filter:blur(6px);
  border:1px solid var(--sf-border-2);border-radius:12px;
  padding:14px 16px;font-family:var(--sf-mono);font-size:11px;
  color:var(--sf-muted);min-width:230px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
}
.sf-phone-logs-head{
  display:flex;justify-content:space-between;
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--sf-border);
  color:var(--sf-dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.sf-phone-logs-line{padding:3px 0;display:flex;gap:8px;align-items:baseline}
.sf-phone-logs-line span:first-child{color:var(--sf-accent);min-width:55px}
.sf-phone-logs-line span:last-child{color:#cbd5e1}

/* =============================================================
   TICKER
   ============================================================= */
.sf-ticker{
  border-top:1px solid var(--sf-border);border-bottom:1px solid var(--sf-border);
  background:var(--sf-bg-3);overflow:hidden;padding:16px 0;position:relative;
}
.sf-ticker-track{
  display:flex;gap:56px;width:max-content;
  animation:sf-slide 42s linear infinite;color:var(--sf-muted);
}
.sf-ticker-track span{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;white-space:nowrap;font-weight:500}
.sf-ticker-track i{color:var(--sf-accent);width:14px;height:14px}
@keyframes sf-slide{to{transform:translateX(-50%)}}

/* =============================================================
   SECCIÓN GENÉRICA
   ============================================================= */
section{padding:110px 0;position:relative}
.sf-section-head{margin-bottom:64px}
.sf-kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--sf-accent);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;
  font-family:var(--sf-mono);
}
.sf-kicker::before{content:"§";opacity:.6}
.sf-section-head h2{
  font-weight:800;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.03em;
  max-width:22ch;
}
.sf-section-head h2 em{font-style:italic;color:var(--sf-accent);font-weight:700}
.sf-section-head .sf-sub{
  color:var(--sf-muted);font-size:17px;max-width:56ch;margin-top:16px;
}

/* =============================================================
   COMO FUNCIONA — 3 pasos con números gigantes
   ============================================================= */
.sf-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--sf-border);border-radius:var(--sf-radius);overflow:hidden;
  background:rgba(255,255,255,.02);
}
.sf-step{
  padding:44px 36px;border-right:1px solid var(--sf-border);position:relative;
  display:flex;flex-direction:column;min-height:320px;
  transition:background .3s ease;
}
.sf-step:last-child{border-right:none}
.sf-step:hover{background:rgba(251,191,36,.03)}
.sf-step-num{
  font-size:96px;font-weight:800;line-height:.85;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px var(--sf-border-3);
  margin-bottom:28px;
  transition:all .3s ease;
}
.sf-step:hover .sf-step-num{color:var(--sf-accent);-webkit-text-stroke:1px var(--sf-accent)}
.sf-step h3{
  font-size:24px;font-weight:700;line-height:1.2;margin-bottom:10px;letter-spacing:-.01em;
}
.sf-step p{color:var(--sf-muted);font-size:15px;line-height:1.55;max-width:32ch}
.sf-step .sf-step-tag{
  margin-top:auto;padding-top:24px;
  font-family:var(--sf-mono);font-size:11px;color:var(--sf-dim);letter-spacing:.08em;
}

/* =============================================================
   FEATURES EDITORIAL ALTERNAS
   ============================================================= */
.sf-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  padding:80px 0;
}
.sf-feature + .sf-feature{border-top:1px solid var(--sf-border)}
.sf-feature.reverse{direction:rtl}
.sf-feature.reverse > *{direction:ltr}
.sf-feature-meta{
  font-family:var(--sf-mono);font-size:12px;color:var(--sf-accent);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.sf-feature-meta::before{content:"▸";color:var(--sf-accent)}
.sf-feature h3{
  font-size:clamp(30px,3.6vw,46px);line-height:1.06;margin-bottom:18px;
  letter-spacing:-.025em;font-weight:700;
}
.sf-feature h3 em{color:var(--sf-accent);font-style:italic}
.sf-feature p{color:var(--sf-muted);font-size:17px;max-width:46ch;margin-bottom:22px;line-height:1.55}
.sf-feature ul{list-style:none;font-size:14.5px}
.sf-feature ul li{
  padding:12px 0;border-top:1px solid var(--sf-border);
  display:flex;gap:14px;align-items:flex-start;color:#cbd5e1;
}
.sf-feature ul li:last-child{border-bottom:1px solid var(--sf-border)}
.sf-feature ul li i{color:var(--sf-accent);width:18px;height:18px;flex-shrink:0;margin-top:2px}

/* visual wrapper */
.sf-visual{
  position:relative;aspect-ratio:5/4;
  background:var(--sf-bg-2);border:1px solid var(--sf-border-2);
  border-radius:var(--sf-radius);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.sf-visual-grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:28px 28px;
}

/* Visual 1 — mockup PDF apilado */
.sf-doc-stack{position:absolute;inset:0;padding:32px}
.sf-doc{
  position:absolute;inset:14% 16%;background:#fafaf7;color:#0f172a;
  border-radius:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  padding:22px 20px;font-size:10px;overflow:hidden;
}
.sf-doc.d3{inset:8% 8%;transform:rotate(-3deg);background:#eef0f3;z-index:0;opacity:.7}
.sf-doc.d2{inset:11% 12%;transform:rotate(-1.5deg);background:#f4f4ef;z-index:1;opacity:.9}
.sf-doc.d1{z-index:2;transform:rotate(1deg)}
.sf-doc-head{
  border-bottom:1px solid #0f172a;padding-bottom:8px;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:flex-end;
}
.sf-doc-head h4{font-size:15px;font-weight:700;letter-spacing:-.01em}
.sf-doc-head .sf-ref{font-family:var(--sf-mono);font-size:8px;color:#64748b;text-align:right;line-height:1.2}
.sf-doc-row{
  display:grid;grid-template-columns:24px 1fr 42px 42px;gap:8px;
  padding:5px 0;border-bottom:1px dotted rgba(15,23,42,.2);
  font-family:var(--sf-mono);font-size:9px;
}
.sf-doc-row.h{font-weight:700;color:#64748b}
.sf-doc-seal{
  position:absolute;bottom:22px;right:22px;z-index:3;
  width:78px;height:78px;border:2px solid var(--sf-accent-deep);border-radius:50%;
  display:grid;place-items:center;transform:rotate(-10deg);
  font-weight:700;color:var(--sf-accent-deep);
  font-size:11px;text-align:center;line-height:1.1;
  background:rgba(255,247,224,.7);letter-spacing:.05em;
}
.sf-doc-seal::before{content:"";position:absolute;inset:4px;border:1px dashed var(--sf-accent-deep);border-radius:50%}
.sf-doc-seal small{display:block;font-size:7px;letter-spacing:.12em;margin-top:3px;font-weight:600}

/* Visual 2 — mapa */
.sf-map{position:absolute;inset:0}
.sf-map svg{width:100%;height:100%;display:block}
.sf-pin{position:absolute;transform:translate(-50%,-100%);pointer-events:none}
.sf-pin-dot{
  width:14px;height:14px;background:var(--sf-accent);border-radius:50%;
  border:2px solid var(--sf-bg);box-shadow:0 0 0 0 rgba(251,191,36,.5);
  animation:sf-ping 2s ease-out infinite;
}
.sf-pin.p2 .sf-pin-dot{background:var(--sf-ok);box-shadow:0 0 0 0 rgba(52,211,153,.5);animation-delay:.5s}
.sf-pin.p3 .sf-pin-dot{background:#f87171;box-shadow:0 0 0 0 rgba(248,113,113,.5);animation-delay:1s}
@keyframes sf-ping{to{box-shadow:0 0 0 18px rgba(251,191,36,0)}}
.sf-pin-label{
  position:absolute;left:22px;top:-4px;white-space:nowrap;
  background:rgba(15,23,42,.95);color:var(--sf-text);padding:3px 9px;border-radius:4px;
  font-family:var(--sf-mono);font-size:10px;border:1px solid var(--sf-border-2);
}

/* Visual 3 — notificaciones */
.sf-notifs{position:absolute;inset:0;padding:32px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.sf-notif{
  background:var(--sf-bg-3);border:1px solid var(--sf-border-2);
  border-radius:12px;padding:14px 16px;
  display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;
}
.sf-notif:nth-child(2){transform:translateX(20px);border-color:rgba(251,191,36,.35);background:linear-gradient(135deg,rgba(251,191,36,.08),var(--sf-bg-3))}
.sf-notif:nth-child(3){transform:translateX(-10px)}
.sf-notif-icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(251,191,36,.12);color:var(--sf-accent);
  display:grid;place-items:center;
}
.sf-notif-icon i{width:18px;height:18px}
.sf-notif:nth-child(2) .sf-notif-icon{background:rgba(52,211,153,.12);color:var(--sf-ok)}
.sf-notif:nth-child(3) .sf-notif-icon{background:rgba(248,113,113,.12);color:#f87171}
.sf-notif-body{font-size:13px;line-height:1.3;color:#cbd5e1}
.sf-notif-body strong{display:block;color:var(--sf-text);font-weight:600;margin-bottom:2px;font-size:14px}
.sf-notif-time{font-family:var(--sf-mono);font-size:11px;color:var(--sf-dim)}

/* =============================================================
   DASHBOARD PREVIEW
   ============================================================= */
.sf-dashboard{
  border:1px solid var(--sf-border-2);border-radius:var(--sf-radius);
  background:var(--sf-bg-3);padding:18px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.6);
  position:relative;
}
.sf-dashboard::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--sf-radius);
  background:linear-gradient(135deg,rgba(251,191,36,.4),transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;pointer-events:none;
}
.sf-dash-bar{
  display:flex;gap:10px;align-items:center;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--sf-border);
}
.sf-dash-bar .sf-dots{display:flex;gap:6px}
.sf-dash-bar .sf-dots span{width:10px;height:10px;border-radius:50%;background:var(--sf-border-3)}
.sf-dash-bar .sf-dots span:first-child{background:#f87171}
.sf-dash-bar .sf-dots span:nth-child(2){background:#fbbf24}
.sf-dash-bar .sf-dots span:nth-child(3){background:#34d399}
.sf-dash-url{
  flex:1;margin:0 18px;background:var(--sf-bg-2);padding:6px 14px;
  border-radius:6px;font-family:var(--sf-mono);font-size:12px;color:var(--sf-muted);
  border:1px solid var(--sf-border);
}
.sf-dash-url::before{content:"● ";color:var(--sf-ok)}
.sf-dash-bar-right{font-family:var(--sf-mono);font-size:11px;color:var(--sf-dim)}
.sf-dash-grid{display:grid;grid-template-columns:220px 1fr;gap:20px}
.sf-dash-side h5{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-dim);margin-bottom:12px;font-weight:600}
.sf-dash-side ul{list-style:none;font-size:13px}
.sf-dash-side li{padding:9px 12px;border-radius:6px;color:var(--sf-muted);cursor:default;transition:all .2s}
.sf-dash-side li:hover{color:var(--sf-text);background:var(--sf-bg-2)}
.sf-dash-side li.active{background:rgba(251,191,36,.12);color:var(--sf-accent);font-weight:500}
.sf-dash-side li.active::before{content:"▸ "}
.sf-dash-main h4{font-size:22px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.sf-dash-main .sf-dash-sub{font-size:13px;color:var(--sf-dim);margin-bottom:20px}
.sf-dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.sf-kpi{
  border:1px solid var(--sf-border);padding:16px;border-radius:10px;
  background:var(--sf-bg-2);
}
.sf-kpi .val{font-family:var(--sf-mono);font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sf-kpi .val em{color:var(--sf-accent);font-style:normal}
.sf-kpi .lab{font-size:10px;color:var(--sf-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:4px;font-weight:600}
.sf-dash-table{border:1px solid var(--sf-border);border-radius:10px;overflow:hidden;background:var(--sf-bg-2)}
.sf-dash-table .row{
  display:grid;grid-template-columns:1fr 90px 90px 90px 80px;gap:12px;
  padding:11px 16px;font-size:13px;border-bottom:1px solid var(--sf-border);align-items:center;
}
.sf-dash-table .row:last-child{border-bottom:none}
.sf-dash-table .row.h{font-family:var(--sf-mono);font-size:10px;color:var(--sf-dim);text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.02);font-weight:600}
.sf-dash-table .n{font-family:var(--sf-mono);color:#cbd5e1;font-variant-numeric:tabular-nums}
.sf-pill{display:inline-block;padding:3px 8px;border-radius:4px;font-size:10px;font-family:var(--sf-mono);letter-spacing:.04em;font-weight:500}
.sf-pill.ok{background:rgba(52,211,153,.15);color:var(--sf-ok)}
.sf-pill.warn{background:rgba(251,113,133,.15);color:var(--sf-warn)}
.sf-pill.mute{background:rgba(148,163,184,.12);color:var(--sf-muted)}

/* =============================================================
   PRECIOS
   ============================================================= */
.sf-pricing-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.sf-pricing-left h2{
  font-weight:800;font-size:clamp(42px,5.5vw,70px);line-height:.98;letter-spacing:-.03em;margin-bottom:20px;
}
.sf-pricing-left h2 em{color:var(--sf-accent);font-style:italic;font-weight:700}
.sf-pricing-left .sf-lede{margin-bottom:28px}
.sf-compare{
  font-family:var(--sf-mono);font-size:13px;
  border-top:1px solid var(--sf-border);padding-top:18px;
}
.sf-compare div{display:flex;justify-content:space-between;padding:8px 0;color:var(--sf-muted)}
.sf-compare div:not(:last-child){border-bottom:1px dashed var(--sf-border)}
.sf-compare div span:last-child{color:var(--sf-text);font-weight:600}
.sf-compare .sf-win span:last-child{color:var(--sf-accent)}

.sf-price-card{
  position:relative;
  background:linear-gradient(180deg,var(--sf-bg-2) 0%,var(--sf-bg-3) 100%);
  border:1px solid var(--sf-border-2);border-radius:20px;padding:36px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
.sf-price-card::before{
  content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(135deg,rgba(251,191,36,.5),transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.sf-price-badge{
  position:absolute;top:-12px;right:28px;
  background:var(--sf-accent);color:#0f172a;
  padding:6px 14px;font-size:11px;font-weight:700;border-radius:999px;
  letter-spacing:.08em;text-transform:uppercase;
}
.sf-price-plan{
  font-size:14px;font-weight:600;color:var(--sf-muted);text-transform:uppercase;letter-spacing:.15em;margin-bottom:12px;
}
.sf-price-amount{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.sf-price-amount .amt{font-size:84px;font-weight:800;letter-spacing:-.04em;line-height:1}
.sf-price-amount .amt em{color:var(--sf-accent);font-style:normal}
.sf-price-amount .per{color:var(--sf-muted);font-size:17px}
.sf-price-note{font-size:12.5px;color:var(--sf-dim);margin-bottom:24px;font-family:var(--sf-mono)}
.sf-price-feats{list-style:none;margin-bottom:28px;padding-top:20px;border-top:1px solid var(--sf-border)}
.sf-price-feats li{
  padding:8px 0;display:flex;gap:12px;align-items:center;
  font-size:14.5px;color:#cbd5e1;
}
.sf-price-feats li i{
  width:18px;height:18px;color:var(--sf-accent);
  background:rgba(251,191,36,.12);border-radius:50%;padding:2px;
}
.sf-price-cta{
  display:flex;width:100%;justify-content:center;padding:16px;font-size:15px;
  background:var(--sf-accent);color:#0f172a;border-radius:10px;font-weight:700;
  transition:all .2s ease;
}
.sf-price-cta:hover{background:#fff}
.sf-price-foot{
  margin-top:16px;text-align:center;font-size:12px;color:var(--sf-dim);
  display:flex;justify-content:center;align-items:center;gap:10px;
}
.sf-price-foot i{width:14px;height:14px;color:var(--sf-ok)}

/* =============================================================
   FAQ
   ============================================================= */
.sf-faq{display:grid;grid-template-columns:1fr 2fr;gap:64px}
.sf-faq-head h2{font-weight:800;font-size:clamp(36px,4.2vw,54px);line-height:1.02;letter-spacing:-.03em;margin-bottom:14px}
.sf-faq-head h2 em{color:var(--sf-accent);font-style:italic;font-weight:700}
.sf-faq-head p{color:var(--sf-muted);font-size:15px;max-width:28ch}
.sf-faq-list{border-top:1px solid var(--sf-border)}
.sf-faq-list details{
  border-bottom:1px solid var(--sf-border);padding:22px 0;cursor:pointer;
}
.sf-faq-list summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:clamp(18px,1.9vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;
}
.sf-faq-list summary::-webkit-details-marker{display:none}
.sf-faq-list summary .sf-plus{
  width:34px;height:34px;border:1px solid var(--sf-border-2);border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;color:var(--sf-muted);
  transition:all .3s ease;
}
.sf-faq-list summary .sf-plus i{width:16px;height:16px;transition:transform .3s ease}
.sf-faq-list details[open] summary .sf-plus{background:var(--sf-accent);color:#0f172a;border-color:var(--sf-accent)}
.sf-faq-list details[open] summary .sf-plus i{transform:rotate(45deg)}
.sf-faq-a{margin-top:16px;padding-right:54px;color:var(--sf-muted);font-size:15px;line-height:1.7;max-width:58ch}
.sf-faq-a strong{color:var(--sf-text);font-weight:600}

/* =============================================================
   CTA FINAL con texto watermark
   ============================================================= */
.sf-final{
  padding:140px 0 140px;position:relative;overflow:hidden;
  border-top:1px solid var(--sf-border);
  background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(251,191,36,.07),transparent 70%);
}
.sf-final::before{
  content:"FICHAR";position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);
  font-weight:800;font-size:clamp(180px,30vw,400px);line-height:.78;letter-spacing:-.05em;
  color:rgba(251,191,36,.04);pointer-events:none;white-space:nowrap;z-index:0;
}
.sf-final-inner{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto}
.sf-final h2{
  font-weight:800;font-size:clamp(46px,6vw,90px);line-height:.98;letter-spacing:-.03em;margin-bottom:24px;
}
.sf-final h2 em{color:var(--sf-accent);font-style:italic;font-weight:700}
.sf-final p{color:var(--sf-muted);font-size:18px;margin-bottom:38px;max-width:50ch;margin-left:auto;margin-right:auto}

.sf-final-specs{
  margin-top:90px;padding-top:40px;border-top:1px solid var(--sf-border);
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:left;
  font-family:var(--sf-mono);
}
.sf-final-specs .lab{color:var(--sf-dim);letter-spacing:.12em;text-transform:uppercase;font-size:10px;margin-bottom:8px;font-weight:600}
.sf-final-specs .val{color:var(--sf-text);font-size:14px}

/* Línea de enlaces legales + copyright al final de la home del plugin */
.sf-final-legal{
  margin-top:48px;padding-top:28px;border-top:1px solid var(--sf-border);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 14px;font-size:13px;
}
.sf-final-legal a{color:var(--sf-muted);text-decoration:none;transition:color .2s}
.sf-final-legal a:hover{color:var(--sf-accent)}
.sf-final-legal-sep{color:var(--sf-dim)}
.sf-final-copy{
  margin-top:14px;text-align:center;
  color:var(--sf-dim);font-size:12px;letter-spacing:.04em;
}
@media(max-width:720px){
  .sf-final-legal{gap:4px 10px;font-size:12.5px}
}

/* =============================================================
   FOOTER
   ============================================================= */
.sf-foot{padding:64px 0 30px;border-top:1px solid var(--sf-border);background:var(--sf-bg-3)}
.sf-foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid var(--sf-border);
}
.sf-foot-brand h5{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;margin-bottom:12px}
.sf-foot-brand h5 .sf-brand-mark{width:28px;height:28px;font-size:13px}
.sf-foot-brand p{color:var(--sf-muted);max-width:32ch;font-size:14px;line-height:1.5}
.sf-foot-col h6{font-size:11px;text-transform:uppercase;letter-spacing:.15em;margin-bottom:16px;color:var(--sf-dim);font-weight:600}
.sf-foot-col ul{list-style:none}
.sf-foot-col li{padding:5px 0}
.sf-foot-col a{color:var(--sf-muted);font-size:14px;transition:color .2s}
.sf-foot-col a:hover{color:var(--sf-accent)}
.sf-foot-bottom{
  padding-top:24px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sf-mono);font-size:12px;color:var(--sf-dim);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1024px){
  .sf-phone-logs{display:none}
}
@media (max-width:880px){
  .sf-hero-grid,.sf-feature,.sf-feature.reverse,.sf-pricing-grid,.sf-faq,.sf-dash-grid,.sf-foot-grid{grid-template-columns:1fr}
  .sf-feature.reverse{direction:ltr}
  .sf-steps{grid-template-columns:1fr}
  .sf-step{border-right:none;border-bottom:1px solid var(--sf-border)}
  .sf-step:last-child{border-bottom:none}
  .sf-nav-links,.sf-topbar-right{display:none}
  .sf-nav-inner{grid-template-columns:auto 1fr;gap:20px}
  .sf-final-specs{grid-template-columns:repeat(2,1fr);gap:30px}
  .sf-foot-bottom{flex-direction:column;gap:12px;align-items:flex-start}
  .sf-dash-side{display:none}
  .sf-dash-grid{grid-template-columns:1fr}
  section{padding:72px 0}
}


/* =========================================================================
   AUTH PAGES — Login / Registro (namespace sf-auth-*)
   Reutiliza el sistema sf-* del home.
   ========================================================================= */

.sf-auth{
  min-height:70vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 0 100px;position:relative;
}
.sf-auth::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(251,191,36,.08), transparent 60%),
    linear-gradient(rgba(148,163,184,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.035) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px;
}
.sf-auth .sf-wrap{max-width:480px;position:relative;z-index:2}
.sf-auth.sf-auth--wide .sf-wrap{max-width:640px}

.sf-auth-card{
  background:rgba(21,31,55,.85);backdrop-filter:blur(12px);
  border:1px solid var(--sf-border-2);
  border-radius:var(--sf-radius);
  padding:44px 40px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
}

.sf-auth-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--sf-muted);margin-bottom:28px;
  transition:color .2s;
}
.sf-auth-back:hover{color:var(--sf-accent)}
.sf-auth-back i{width:14px;height:14px}

.sf-auth-logo{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:28px;font-weight:700;font-size:17px;letter-spacing:-.02em;
  color:var(--sf-text);
}

.sf-auth-title{
  font-weight:800;font-size:30px;line-height:1.1;
  letter-spacing:-.02em;margin-bottom:8px;
}
.sf-auth-sub{
  color:var(--sf-muted);font-size:15px;margin-bottom:30px;
}

.sf-auth-msg{
  padding:12px 14px;border-radius:var(--sf-radius-sm);
  font-size:13.5px;margin-bottom:18px;
  display:flex;gap:10px;align-items:flex-start;line-height:1.45;
}
.sf-auth-msg i{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.sf-auth-msg-info{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#d1fae5}
.sf-auth-msg-info i{color:var(--sf-ok)}
.sf-auth-msg-error{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.3);color:#fecaca}
.sf-auth-msg-error i{color:var(--sf-warn)}

.sf-auth-form{display:flex;flex-direction:column;gap:16px}

.sf-auth-section{
  display:flex;align-items:center;gap:8px;
  color:var(--sf-accent);font-family:var(--sf-mono);
  font-size:11.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;
  margin:12px 0 2px;padding-top:16px;
  border-top:1px dashed var(--sf-border);
}
.sf-auth-section:first-of-type{border-top:none;padding-top:0;margin-top:4px}
.sf-auth-section i{width:14px;height:14px}

.sf-auth-field{display:flex;flex-direction:column;gap:7px}
.sf-auth-field label{
  font-size:12.5px;font-weight:600;
  color:var(--sf-text);letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;
}
.sf-auth-field label i{width:14px;height:14px;color:var(--sf-accent)}
.sf-auth-field input{
  background:rgba(10,17,32,.6);border:1px solid var(--sf-border-2);
  border-radius:var(--sf-radius-sm);padding:12px 14px;
  color:var(--sf-text);font-size:14px;
  font-family:inherit;transition:border-color .2s, background .2s, box-shadow .2s;
  width:100%;
}
.sf-auth-field input:focus{
  outline:none;border-color:var(--sf-accent);
  background:rgba(10,17,32,.85);
  box-shadow:0 0 0 3px rgba(251,191,36,.12);
}
.sf-auth-field input::placeholder{color:var(--sf-dim)}
.sf-auth-field input:-webkit-autofill,
.sf-auth-field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 40px rgba(10,17,32,.9) inset !important;
  -webkit-text-fill-color:var(--sf-text) !important;
  caret-color:var(--sf-text);
}

.sf-auth-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}

.sf-auth-options{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;margin-top:-2px;flex-wrap:wrap;gap:8px;
}
.sf-auth-check{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--sf-muted);cursor:pointer;user-select:none;
}
.sf-auth-check input{width:14px;height:14px;accent-color:var(--sf-accent);cursor:pointer}
.sf-auth-link{color:var(--sf-accent);transition:color .2s}
.sf-auth-link:hover{color:#fde68a}

.sf-auth-submit{
  justify-content:center;width:100%;margin-top:10px;
}

.sf-auth-error{
  padding:10px 14px;border-radius:var(--sf-radius-sm);
  background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.3);
  color:#fecaca;font-size:13px;line-height:1.45;
}

.sf-auth-foot{
  text-align:center;margin-top:28px;padding-top:22px;
  border-top:1px solid var(--sf-border);
  font-size:13px;color:var(--sf-muted);
}
.sf-auth-foot a{color:var(--sf-accent);font-weight:600}
.sf-auth-foot a:hover{color:#fde68a}
.sf-auth-foot small{
  color:var(--sf-dim);font-size:11.5px;
  display:block;margin-top:10px;
}

.sf-auth-info{
  padding:28px 32px;border-radius:var(--sf-radius);
  background:rgba(21,31,55,.8);border:1px solid var(--sf-border-2);
  text-align:center;max-width:440px;margin:60px auto;
}
.sf-auth-info p{margin-bottom:16px;color:var(--sf-muted);font-size:15px}

/* Footer minimal en páginas de auth */
.sf-foot--min{padding:24px 0;border-top:1px solid var(--sf-border)}
.sf-foot--min .sf-foot-legal{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:6px 14px;
    padding-bottom:14px;margin-bottom:14px;
    border-bottom:1px dashed rgba(148,163,184,.12);
    font-size:13px;
}
.sf-foot--min .sf-foot-legal a{
    color:var(--sf-muted);text-decoration:none;transition:color .2s;
}
.sf-foot--min .sf-foot-legal a:hover{color:var(--sf-accent)}
.sf-foot--min .sf-foot-sep{color:var(--sf-dim)}
.sf-foot--min .sf-foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--sf-dim);
}

@media (max-width:560px){
  .sf-auth-card{padding:32px 24px}
  .sf-auth-title{font-size:26px}
  .sf-auth-row{grid-template-columns:1fr}
  .sf-foot--min .sf-foot-bottom{flex-direction:column;gap:8px;text-align:center}
}


/* =========================================================================
   AUTH EXTRAS — textarea + select (formulario de contacto)
   ========================================================================= */

.sf-auth-field textarea{
  background:rgba(10,17,32,.6);border:1px solid var(--sf-border-2);
  border-radius:var(--sf-radius-sm);padding:12px 14px;
  color:var(--sf-text);font-size:14px;
  font-family:inherit;line-height:1.5;
  resize:vertical;min-height:120px;
  transition:border-color .2s, background .2s, box-shadow .2s;
  width:100%;
}
.sf-auth-field textarea:focus{
  outline:none;border-color:var(--sf-accent);
  background:rgba(10,17,32,.85);
  box-shadow:0 0 0 3px rgba(251,191,36,.12);
}
.sf-auth-field textarea::placeholder{color:var(--sf-dim)}

.sf-auth-field select{
  background:rgba(10,17,32,.6);border:1px solid var(--sf-border-2);
  border-radius:var(--sf-radius-sm);padding:12px 14px;
  color:var(--sf-text);font-size:14px;
  font-family:inherit;
  transition:border-color .2s, background .2s, box-shadow .2s;
  width:100%;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23fbbf24' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:40px;cursor:pointer;
}
.sf-auth-field select:focus{
  outline:none;border-color:var(--sf-accent);
  background-color:rgba(10,17,32,.85);
  box-shadow:0 0 0 3px rgba(251,191,36,.12);
}
.sf-auth-field select option{
  background:var(--sf-bg-2);color:var(--sf-text);
}


/* =========================================================================
   APP NAV — Navbar de páginas logueadas (fichar, historial, panel)
   Convive con la CSS .ch-nav heredada. Añade el look sf-* (ámbar) y
   el brand-mark SF sustituyendo el icono fingerprint original.
   ========================================================================= */

.sf-app-nav{
  border-bottom:1px solid var(--sf-border);
  background:rgba(15,23,42,.85);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:40;
}
.sf-app-nav-inner{
  display:grid !important;grid-template-columns:auto 1fr auto;align-items:center;
  padding:14px 32px;gap:32px;max-width:1340px;margin:0 auto;
}
.sf-app-nav .sf-brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--sf-text);
}
.sf-app-nav .sf-brand-mark{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent-deep));
  color:#0f172a;display:grid;place-items:center;
  font-weight:800;font-size:14px;letter-spacing:-.03em;
  box-shadow:0 4px 14px -4px rgba(251,191,36,.4);
}

.sf-app-tabs{
  display:flex;gap:6px;justify-content:center;align-items:center;
}
.sf-app-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;font-size:14px;font-weight:500;
  color:var(--sf-muted);border-radius:10px;
  transition:color .18s, background .18s;
}
.sf-app-tab i{width:16px;height:16px}
.sf-app-tab:hover{color:var(--sf-text);background:rgba(255,255,255,.04)}
.sf-app-tab--active{
  color:#0f172a !important;
  background:var(--sf-accent) !important;
  font-weight:600;
}
.sf-app-tab--active i{color:#0f172a}

.sf-app-user{
  display:flex;align-items:center;gap:12px;
}
.sf-app-user .sf-app-avatar,
.sf-app-user .ch-avatar{
  width:34px !important;height:34px !important;border-radius:50% !important;
  border:1px solid var(--sf-border-2);
}
.sf-app-logout{
  width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;
  color:var(--sf-muted);border:1px solid var(--sf-border-2);
  transition:all .18s;
}
.sf-app-logout:hover{
  color:var(--sf-warn);border-color:var(--sf-warn);
  background:rgba(251,113,133,.08);
}
.sf-app-logout i{width:16px;height:16px}

@media (max-width:720px){
  .sf-app-nav-inner{padding:12px 16px;gap:16px}
  .sf-app-tab span{display:none}
  .sf-app-tab{padding:9px 12px}
}

/* Overrides para que ch-* legacy respete los tokens sf-* en estas páginas */
.ch-fullpage body,
body.ch-fullpage{ background:var(--sf-bg) !important; }


/* =========================================================================
   DOCUMENTACIÓN — [control_horario_documentacion]
   Layout: TOC sticky izquierda + contenido derecha. Estética sf-* ámbar.
   ========================================================================= */

.sf-docs{
  padding:56px 0 120px;position:relative;
}
.sf-docs::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 900px 500px at 20% 0%, rgba(251,191,36,.06), transparent 60%),
    linear-gradient(rgba(148,163,184,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.03) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px;
}
.sf-docs .sf-wrap{position:relative;z-index:2}

.sf-docs-hero{
  max-width:760px;margin-bottom:56px;
}
.sf-docs-hero h1{
  font-weight:800;font-size:clamp(34px,4.2vw,54px);
  line-height:1.04;letter-spacing:-.025em;margin:14px 0 16px;
}
.sf-docs-hero h1 em{color:var(--sf-accent);font-style:italic;font-weight:700}
.sf-docs-hero p{color:var(--sf-muted);font-size:17px;max-width:56ch;line-height:1.55}

.sf-docs-grid{
  display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:flex-start;
}

/* ---- TOC ---- */
.sf-docs-toc{
  position:sticky;top:84px;
  font-size:13.5px;
  padding:20px 4px;
}
.sf-docs-toc-label{
  font-family:var(--sf-mono);font-size:11px;
  color:var(--sf-dim);text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:16px;font-weight:500;
}
.sf-docs-toc ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.sf-docs-toc a{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  color:var(--sf-muted);transition:all .18s;
}
.sf-docs-toc a .num{
  font-family:var(--sf-mono);font-size:11px;color:var(--sf-dim);
  min-width:22px;
}
.sf-docs-toc a:hover{color:var(--sf-text);background:rgba(255,255,255,.03)}
.sf-docs-toc a:hover .num{color:var(--sf-accent)}
.sf-docs-toc-help{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--sf-border);
  font-size:12.5px;color:var(--sf-muted);line-height:1.5;
}

/* ---- Content ---- */
.sf-docs-content{
  max-width:760px;min-width:0; /* min-width para que no se desborde en responsive */
}

.sf-docs-section{
  padding:40px 0 56px;
  border-top:1px solid var(--sf-border);
  scroll-margin-top:100px; /* que el anchor deje aire arriba */
}
.sf-docs-section:first-child{border-top:none;padding-top:0}

.sf-docs-meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sf-mono);font-size:11.5px;
  color:var(--sf-accent);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:18px;font-weight:500;
}
.sf-docs-meta span{
  display:inline-block;padding:2px 8px;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);
  border-radius:4px;
}

.sf-docs-content h2{
  font-weight:800;font-size:clamp(26px,3.2vw,36px);
  line-height:1.12;letter-spacing:-.02em;margin-bottom:14px;
}
.sf-docs-content h2 em{color:var(--sf-accent);font-style:italic;font-weight:700}
.sf-docs-content h3{
  font-weight:700;font-size:18px;line-height:1.3;
  margin:32px 0 10px;color:var(--sf-text);
}
.sf-docs-content p{
  color:var(--sf-muted);font-size:15.5px;line-height:1.65;
  margin-bottom:14px;
}
.sf-docs-content p strong{color:var(--sf-text)}
.sf-docs-content p em{color:#cbd5e1;font-style:italic}
.sf-docs-content a:not(.sf-auth-link){
  color:var(--sf-accent);border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.sf-docs-content a:not(.sf-auth-link):hover{border-bottom-color:var(--sf-accent)}

/* Listas */
.sf-docs-list{
  list-style:none;margin:10px 0 16px;
  display:flex;flex-direction:column;gap:10px;
}
.sf-docs-list li{
  position:relative;padding-left:22px;
  color:#cbd5e1;font-size:15px;line-height:1.6;
}
.sf-docs-list li::before{
  content:"→";position:absolute;left:0;top:0;
  color:var(--sf-accent);font-weight:600;
}
.sf-docs-list li strong{color:var(--sf-text);font-weight:600}
.sf-docs-list li em{color:var(--sf-accent);font-style:italic}

/* Steps numerados */
.sf-docs-steps{
  list-style:none;counter-reset:sfstep;
  margin:24px 0;display:flex;flex-direction:column;gap:18px;
}
.sf-docs-steps li{
  counter-increment:sfstep;
  position:relative;padding:18px 22px 18px 64px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--sf-border);border-radius:var(--sf-radius-sm);
  display:flex;flex-direction:column;gap:4px;
}
.sf-docs-steps li::before{
  content:counter(sfstep,decimal-leading-zero);
  position:absolute;left:20px;top:16px;
  font-family:var(--sf-mono);font-weight:600;font-size:16px;
  color:var(--sf-accent);
}
.sf-docs-steps li strong{
  color:var(--sf-text);font-size:15.5px;font-weight:600;
}
.sf-docs-steps li span{
  color:var(--sf-muted);font-size:14.5px;line-height:1.55;
}

/* Código inline */
.sf-docs-code{
  font-family:var(--sf-mono);font-size:13px;
  background:rgba(251,191,36,.08);color:#fde68a;
  padding:2px 7px;border-radius:4px;
  border:1px solid rgba(251,191,36,.15);
  white-space:nowrap;
}

/* Callouts / notas */
.sf-docs-note{
  display:flex;gap:14px;align-items:flex-start;
  margin:22px 0;padding:16px 18px;
  background:rgba(251,191,36,.05);
  border-left:3px solid var(--sf-accent);
  border-radius:4px;
}
.sf-docs-note i{
  width:20px;height:20px;color:var(--sf-accent);flex-shrink:0;margin-top:2px;
}
.sf-docs-note div{font-size:14px;line-height:1.6;color:#cbd5e1}
.sf-docs-note strong{color:var(--sf-text);font-weight:600}
.sf-docs-note--warn{
  background:rgba(251,113,133,.06);
  border-left-color:var(--sf-warn);
}
.sf-docs-note--warn i{color:var(--sf-warn)}

/* Tabla */
.sf-docs-table-wrap{
  overflow-x:auto;margin:18px 0;
  border:1px solid var(--sf-border);border-radius:var(--sf-radius-sm);
}
.sf-docs-table{
  width:100%;border-collapse:collapse;font-size:14px;
}
.sf-docs-table th,.sf-docs-table td{
  padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--sf-border);
}
.sf-docs-table thead th{
  font-family:var(--sf-mono);font-size:11px;
  color:var(--sf-dim);text-transform:uppercase;letter-spacing:.1em;
  font-weight:500;background:rgba(255,255,255,.02);
}
.sf-docs-table tbody tr:last-child td{border-bottom:none}
.sf-docs-table tbody td{color:var(--sf-muted);line-height:1.5}
.sf-docs-table tbody td strong{color:var(--sf-text);font-weight:600}

.sf-docs-foot{
  margin-top:48px;padding-top:28px;border-top:1px solid var(--sf-border);
  text-align:center;font-size:14px;color:var(--sf-muted);
}

/* Responsive */
@media (max-width:960px){
  .sf-docs-grid{grid-template-columns:1fr;gap:0}
  .sf-docs-toc{
    position:static;top:auto;
    padding:16px 0 32px;
    border-bottom:1px solid var(--sf-border);
    margin-bottom:24px;
  }
  .sf-docs-toc ul{
    flex-direction:row;flex-wrap:wrap;gap:4px;
  }
}
@media (max-width:560px){
  .sf-docs{padding:32px 0 80px}
  .sf-docs-section{padding:32px 0 40px}
  .sf-docs-steps li{padding:16px 16px 16px 56px}
}


/* ---- DOCS: scrollspy + detalles sin outline feo ---- */
.sf-docs-toc a.sf-docs-toc--active{
  color:var(--sf-accent) !important;
  background:rgba(251,191,36,.08) !important;
}
.sf-docs-toc a.sf-docs-toc--active .num{color:var(--sf-accent) !important}
.sf-docs-toc a{position:relative}
.sf-docs-toc a.sf-docs-toc--active::before{
  content:"";position:absolute;left:-14px;top:50%;
  width:3px;height:16px;margin-top:-8px;
  background:var(--sf-accent);border-radius:2px;
}

/* Eliminar el outline default del navegador en <details>/<summary> y focus del TOC */
.sf-faq-list details,
.sf-faq-list details[open],
.sf-faq-list details summary{
  outline:none !important;
}
.sf-faq-list details summary::-moz-focus-inner{border:0}
.sf-faq-list details summary:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.35);
  border-radius:8px;
}
.sf-docs-toc a:focus,
.sf-docs-toc a:focus-visible{outline:none;box-shadow:none}


/* =========================================================================
   MENÚ HAMBURGUESA (sf-nav en páginas públicas: home, contacto, docs)
   Se inyecta vía JS en inject_mobile_menu_js() — no hay que tocar los
   shortcodes. JS clona los .sf-nav-links y .sf-nav-cta y los muestra como
   menú desplegable en <= 768px.
   ========================================================================= */

.sf-nav-burger{
  display:none;
  width:40px;height:40px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--sf-border-2);
  border-radius:8px;
  cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;
  margin-left:auto;
  transition:background .18s, border-color .18s;
}
.sf-nav-burger:hover{background:rgba(255,255,255,.06);border-color:var(--sf-border-3)}
.sf-nav-burger span{
  width:20px;height:2px;background:var(--sf-text);
  border-radius:1px;
  transition:transform .25s ease, opacity .2s ease;
  display:block;
}
.sf-nav-burger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.sf-nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.sf-nav-burger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.sf-nav-mobile{
  display:none;
  flex-direction:column;gap:2px;
  padding:12px 16px 20px;
  border-top:1px solid var(--sf-border);
  background:rgba(10,17,32,.98);
  backdrop-filter:blur(12px);
  animation:sfNavSlide .18s ease-out;
}
@keyframes sfNavSlide{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.sf-nav-mobile > a{
  padding:12px 14px;
  font-size:15px;font-weight:500;
  color:var(--sf-muted);
  border-radius:8px;
  display:flex;align-items:center;gap:10px;
  transition:background .18s, color .18s;
}
.sf-nav-mobile > a:hover{
  color:var(--sf-text);background:rgba(255,255,255,.04);
}
.sf-nav-mobile > a.sf-btn{
  justify-content:center;
  padding:13px 16px;
  margin-top:6px;
  font-weight:600;
}
.sf-nav-mobile > a.sf-btn-accent{
  background:var(--sf-accent);color:#0f172a;
}
.sf-nav-mobile > a.sf-btn-ghost{
  background:transparent;
  border:1px solid var(--sf-border-2);
  color:var(--sf-text);
}
.sf-nav-mobile > a.sf-btn:hover{
  background:#fff;color:#0f172a;
}
.sf-nav-mobile > a i{width:16px;height:16px;flex-shrink:0}

.sf-nav--open .sf-nav-mobile{display:flex}

@media (max-width:768px){
  .sf-nav-inner .sf-nav-links,
  .sf-nav-inner .sf-nav-cta{display:none !important}
  .sf-nav-burger{display:flex !important}
  .sf-nav-inner{
    grid-template-columns:1fr auto !important;
    padding:14px 18px !important;
    gap:12px !important;
  }
}


/* =========================================================================
   MÓVIL — ajustes puntuales de la home (dashboard mockup, features, etc.)
   ========================================================================= */

/* Dashboard mockup (sección "Resumen del día" en home)
   En móvil el mockup se trata como una "captura" scroleable horizontalmente.
   No forzamos responsividad del layout interno porque lo importante es que
   se RECONOZCA como un panel de admin. Clipeamos overflow a nivel de sección. */
@media (max-width:768px){
  /* Clipear overflow al nivel de la sección y del wrap para que el mockup
     no desborde la página completa hacia la derecha */
  section[id="panel"]{overflow:hidden}
  section[id="panel"] .sf-wrap{overflow:hidden}

  .sf-dashboard{
    margin:0;padding:14px;
    max-width:100%;
  }
  .sf-dash-bar{padding-bottom:12px;margin-bottom:14px}
  .sf-dash-url{font-size:11px;margin:0 10px;padding:5px 10px}
  .sf-dash-bar-right{display:none}

  /* El grid interno del dashboard hace scroll horizontal como unidad,
     manteniendo el look de "panel de admin" real */
  .sf-dash-grid{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .sf-dash-grid::-webkit-scrollbar{height:6px}
  .sf-dash-grid::-webkit-scrollbar-thumb{background:var(--sf-border-3);border-radius:3px}

  .sf-dash-main{
    min-width:520px;  /* para que tabla + KPIs respiren */
  }

  /* KPIs en 3 columnas compactas dentro del área scrolleable */
  .sf-dash-kpis{gap:8px;margin-bottom:16px}
  .sf-kpi{padding:12px 14px}
  .sf-kpi .val{font-size:18px}
  .sf-kpi .lab{font-size:9px}

  /* Tabla: filas compactas, texto más pequeño */
  .sf-dash-table .row{
    padding:9px 12px;font-size:12px;gap:8px;
    grid-template-columns:1.2fr 70px 70px 70px 70px;
  }
  .sf-dash-table .row.h{font-size:9px}

  /* Section heads más compactos */
  .sf-section-head{margin-bottom:36px}
  .sf-section-head h2{font-size:28px !important;line-height:1.1}
}

/* Hero: phone mockup más pequeño en móvil */
@media (max-width:768px){
  .sf-hero{padding:36px 0 60px}
  .sf-hero-grid{grid-template-columns:1fr !important;gap:40px}
  .sf-phone{width:260px;height:520px;margin:0 auto}
  .sf-phone-logs{display:none} /* log flotante se come la pantalla */
  .sf-hero-watermark{font-size:clamp(80px,32vw,180px)}
  .sf-trust{gap:14px;padding-top:20px}
  .sf-trust-item{font-size:11.5px}

  h1.sf-title{font-size:clamp(44px,12vw,72px) !important;line-height:.98}
  .sf-lede{font-size:16px}

  .sf-hero-ctas{gap:10px}
  .sf-hero-ctas .sf-btn-lg{flex:1;justify-content:center;padding:13px 16px;font-size:14px}
}

/* Steps "Cómo funciona": 3 columnas → 1 fila por paso */
@media (max-width:768px){
  .sf-steps{grid-template-columns:1fr !important}
  .sf-step{border-right:none !important;border-bottom:1px solid var(--sf-border);min-height:auto;padding:32px 24px}
  .sf-step:last-child{border-bottom:none}
  .sf-step-num{font-size:64px;margin-bottom:16px}
}

/* Features editoriales (PDF + Notifs): 2 col → 1 col */
@media (max-width:768px){
  .sf-feature{
    grid-template-columns:1fr !important;
    gap:32px;padding:48px 0;
  }
  .sf-feature.reverse{direction:ltr !important}
  .sf-feature h3{font-size:26px !important}
  .sf-feature p{font-size:15px}
  .sf-doc-stack{transform:scale(.85);transform-origin:center}
  .sf-notifs{gap:12px}
}

/* Precios: comparativa + card en vertical */
@media (max-width:768px){
  .sf-pricing-grid{grid-template-columns:1fr !important;gap:32px}
  .sf-price-card{max-width:420px;margin:0 auto}
}

/* Ticker: más compacto */
@media (max-width:768px){
  .sf-ticker{padding:12px 0}
  .sf-ticker-track{gap:36px}
  .sf-ticker-track span{font-size:12px}
}

/* Footer en móvil */
@media (max-width:768px){
  .sf-foot-grid{grid-template-columns:1fr 1fr !important;gap:24px}
  .sf-foot-brand{grid-column:1/-1;margin-bottom:8px}
}
@media (max-width:420px){
  .sf-foot-grid{grid-template-columns:1fr !important}
}

/* FAQ: summary más compacto */
@media (max-width:768px){
  .sf-faq-list summary{font-size:15px;padding:16px 0}
  .sf-faq-a{font-size:14px}
}

/* CTA final móvil */
@media (max-width:768px){
  .sf-final-inner h2{font-size:32px}
  .sf-final-specs{grid-template-columns:1fr 1fr !important;gap:16px}
}

/* Páginas auth (login/registro/contacto/docs) — card con aire en móvil */
@media (max-width:768px){
  .sf-auth{padding:32px 0 60px}
  .sf-auth-card{padding:28px 22px}
  .sf-auth-title{font-size:24px !important}
  .sf-auth-row{grid-template-columns:1fr !important;gap:14px}
}

/* Documentación: TOC vertical → horizontal chips */
@media (max-width:960px){
  .sf-docs{padding:32px 0 60px}
  .sf-docs-hero{margin-bottom:32px}
  .sf-docs-hero h1{font-size:32px !important}
  .sf-docs-toc ul{flex-direction:row !important;flex-wrap:wrap;gap:4px}
  .sf-docs-toc a{font-size:12.5px;padding:6px 10px}
  .sf-docs-toc a .num{min-width:auto}
  .sf-docs-toc-help{display:none}
  .sf-docs-toc a.sf-docs-toc--active::before{display:none}
  .sf-docs-section{padding:28px 0 36px}
  .sf-docs-table-wrap{margin:16px -16px}
  .sf-docs-steps li{padding:14px 14px 14px 50px}
  .sf-docs-steps li::before{left:16px;top:14px}
}


/* =========================================================================
   PLANES — [control_horario_planes]
   Dos cards lado a lado: autoservicio (14 días gratis) + enterprise (>20).
   ========================================================================= */

.sf-planes{
  padding:56px 0 100px;position:relative;
}
.sf-planes::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse 800px 500px at 50% 0%, rgba(251,191,36,.08), transparent 60%),
    linear-gradient(rgba(148,163,184,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.03) 1px,transparent 1px);
  background-size:auto,64px 64px,64px 64px;
}
.sf-planes .sf-wrap{position:relative;z-index:2;max-width:1100px}

.sf-planes-head{
  text-align:center;max-width:640px;margin:0 auto 60px;
}
.sf-planes-head .sf-kicker{justify-content:center}
.sf-planes-head h1{
  font-weight:800;font-size:clamp(36px,5vw,56px);
  line-height:1.04;letter-spacing:-.025em;margin:10px 0 14px;
}
.sf-planes-head h1 em{color:var(--sf-accent);font-style:italic;font-weight:700}
.sf-planes-head p{color:var(--sf-muted);font-size:17px;line-height:1.55}

.sf-planes-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  align-items:stretch;
}

/* Card base */
.sf-plan{
  position:relative;
  background:rgba(21,31,55,.7);backdrop-filter:blur(12px);
  border:1px solid var(--sf-border-2);
  border-radius:var(--sf-radius);
  padding:40px 36px;
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
  transition:transform .2s ease, border-color .2s ease;
}
.sf-plan:hover{transform:translateY(-3px)}

/* Variante destacada (prueba gratis) */
.sf-plan--primary{
  border-color:var(--sf-accent);
  background:
    radial-gradient(ellipse 600px 300px at 50% 0%, rgba(251,191,36,.08), transparent 70%),
    rgba(21,31,55,.85);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.5),
    0 0 0 3px rgba(251,191,36,.06);
}

.sf-plan-tag{
  position:absolute;top:-12px;left:24px;
  padding:5px 12px;
  background:var(--sf-accent);color:#0f172a;
  font-family:var(--sf-mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;
  box-shadow:0 6px 14px -4px rgba(251,191,36,.5);
}

.sf-plan-icon{
  width:52px;height:52px;border-radius:12px;
  background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent-deep));
  color:#0f172a;display:grid;place-items:center;
  margin-bottom:20px;
  box-shadow:0 8px 20px -6px rgba(251,191,36,.4);
}
.sf-plan-icon i{width:24px;height:24px}
.sf-plan-icon--muted{
  background:rgba(148,163,184,.12);
  color:var(--sf-muted);
  box-shadow:none;
}

.sf-plan h2{
  font-weight:800;font-size:26px;line-height:1.15;
  letter-spacing:-.02em;margin-bottom:10px;
}
.sf-plan-sub{
  color:var(--sf-muted);font-size:15px;line-height:1.55;
  margin-bottom:24px;
}
.sf-plan-sub strong{color:var(--sf-text)}

.sf-plan-price{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:16px 0 6px;
  border-top:1px solid var(--sf-border);
  margin-bottom:6px;
}
.sf-plan-price .amt{
  font-weight:800;font-size:46px;
  color:var(--sf-text);letter-spacing:-.03em;line-height:1;
}
.sf-plan-price .amt em{
  font-style:normal;font-size:.6em;
  color:var(--sf-accent);font-weight:700;margin-left:2px;
}
.sf-plan-price .per{
  color:var(--sf-muted);font-size:15px;
}
.sf-plan-price-note{
  width:100%;font-size:12.5px;color:var(--sf-dim);
  font-family:var(--sf-mono);letter-spacing:.02em;
  margin-top:4px;
}
.sf-plan-price--muted .amt{
  font-size:26px;color:var(--sf-muted);
}

.sf-plan-feats{
  list-style:none;margin:22px 0 24px;
  display:flex;flex-direction:column;gap:10px;
  font-size:14.5px;color:#cbd5e1;
}
.sf-plan-feats li{
  display:flex;align-items:flex-start;gap:10px;
  line-height:1.5;
}
.sf-plan-feats li i{
  width:16px;height:16px;flex-shrink:0;margin-top:3px;
  color:var(--sf-accent);
}

.sf-plan-cta{
  justify-content:center;margin-top:auto;width:100%;
}
.sf-plan-fine{
  margin-top:14px;text-align:center;
  font-size:11.5px;color:var(--sf-dim);line-height:1.5;
}

/* Trust row bajo las cards */
.sf-planes-trust{
  margin-top:56px;
  display:flex;justify-content:center;flex-wrap:wrap;gap:28px;
  padding-top:28px;border-top:1px solid var(--sf-border);
  font-size:13px;color:var(--sf-muted);
}
.sf-planes-trust > div{
  display:flex;align-items:center;gap:8px;
}
.sf-planes-trust i{width:16px;height:16px;color:var(--sf-accent)}

@media (max-width:768px){
  .sf-planes{padding:36px 0 70px}
  .sf-planes-head{margin-bottom:36px}
  .sf-planes-grid{grid-template-columns:1fr;gap:20px}
  .sf-plan{padding:32px 24px}
  .sf-plan h2{font-size:22px}
  .sf-plan-price .amt{font-size:38px}
  .sf-planes-trust{gap:16px;font-size:12.5px}
}


/* =========================================================================
   PAUSA — botón secundario + estado "en pausa"
   ========================================================================= */

/* Pill "en pausa" (además de working/idle existentes) */
.ch-status-pill.ch-status-paused{
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, 0.28);
}
.ch-status-pill.ch-status-paused .ch-status-dot{
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,.2);
}

/* Contenedor del botón de pausa */
.ch-pausa-wrap{
    display:flex;justify-content:center;margin-top:18px;
}
.ch-pausa-wrap.ch-hidden{display:none}

/* Botón de pausa/reanudar */
.ch-btn-pausa{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--sf-border-2, #334155);
    border-radius:10px;
    color:#cbd5e1;font-size:14px;font-weight:500;
    cursor:pointer;
    transition:background .18s, border-color .18s, color .18s, transform .1s;
    font-family:inherit;
}
.ch-btn-pausa i{width:16px;height:16px}
.ch-btn-pausa:hover{
    background:rgba(255,255,255,.08);
    border-color:var(--sf-border-3, #475569);
    color:#fff;
}
.ch-btn-pausa:active{transform:scale(.97)}
.ch-btn-pausa:disabled{opacity:.5;cursor:not-allowed}

/* Variante "reanudar" — más llamativa (ámbar)
   (Nota: ya no se usa como secundario; ahora el botón principal es REANUDAR
   en pausa. Se mantiene por compat con versiones antiguas del DOM.) */
.ch-btn-pausa--reanudar{
    background:rgba(251,191,36,.12);
    border-color:rgba(251,191,36,.35);
    color:#fde68a;
}
.ch-btn-pausa--reanudar:hover{
    background:rgba(251,191,36,.2);
    border-color:rgba(251,191,36,.5);
    color:#fef3c7;
}

/* Variante "salida" del botón secundario — aparece en estado pausa como
   acción alternativa ("Fichar salida" sin tener que reanudar antes).
   Tono rojo discreto para diferenciar del "iniciar pausa" (neutro). */
.ch-btn-pausa--salida{
    background:rgba(251,113,133,.08);
    border-color:rgba(251,113,133,.28);
    color:#fecdd3;
}
.ch-btn-pausa--salida:hover{
    background:rgba(251,113,133,.15);
    border-color:rgba(251,113,133,.45);
    color:#fee2e2;
}

/* Botón circular principal en estado "reanudar" — ámbar dominante para que
   sea inequívoco que esa es la acción principal (y no SALIR). */
.ch-circle-btn--reanudar .ch-circle-icon,
.ch-circle-btn--reanudar .ch-circle-text{
    color:#0f172a;
}

/* Responsive — pausa más compacta en móvil */
@media (max-width:560px){
    .ch-btn-pausa{padding:10px 14px;font-size:13px}
    .ch-pausa-wrap{margin-top:14px}
}

/* =========================================================================
   TABLA DE CORRECCIONES — dos líneas por celda + diff visual
   ========================================================================= */

.ch-subsection-title{
    margin:28px 0 12px;
    font-size:14px;font-weight:700;
    color:rgba(255,255,255,.75);
    text-transform:uppercase;letter-spacing:.09em;
}

.ch-table-wrap--correcciones .ch-data-table th{
    font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
    color:rgba(255,255,255,.55);font-weight:700;
}

.ch-table-correcciones td{
    vertical-align:top;padding-top:14px;padding-bottom:14px;
}

/* Celda en dos líneas: título y subtítulo */
.ch-cell-strong{
    color:#f8fafc;font-weight:600;font-size:14px;line-height:1.3;
}
.ch-cell-sub{
    color:rgba(255,255,255,.45);font-size:12px;line-height:1.3;margin-top:2px;
    font-variant-numeric:tabular-nums;
}

/* Diff valor anterior → valor nuevo */
.ch-diff{
    display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;
    margin-top:4px;
}
.ch-diff-before{
    color:rgba(255,255,255,.55);
    text-decoration:line-through;
    font-size:13px;
}
.ch-diff-after{
    color:#34d399;font-weight:600;font-size:13.5px;
}
.ch-diff-arrow{
    width:14px;height:14px;color:rgba(255,255,255,.35);
}

/* Motivo con truncado para no romper el layout */
.ch-cell-motivo{
    max-width:280px;
    color:rgba(255,255,255,.75);font-size:13.5px;line-height:1.4;
}
.ch-cell-motivo span{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
}

.ch-cell-cuando{white-space:nowrap}

.ch-table-empty{
    text-align:center;padding:40px 20px !important;
    color:rgba(255,255,255,.4);font-size:14px;
}

@media(max-width:768px){
    .ch-table-correcciones thead{display:none}
    .ch-table-correcciones tbody tr{
        display:block;
        padding:14px 14px 10px;
        margin-bottom:10px;
        border-radius:12px;
        background:rgba(255,255,255,.03);
        border:1px solid rgba(255,255,255,.06);
    }
    .ch-table-correcciones tbody td{
        display:block;padding:6px 0 !important;border:none;
    }
    .ch-table-correcciones tbody td::before{
        content:attr(data-label);
        display:block;
        font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
        color:rgba(255,255,255,.45);font-weight:700;margin-bottom:2px;
    }
    .ch-cell-motivo{max-width:none}
    .ch-cell-motivo span{-webkit-line-clamp:none;overflow:visible}
}


/* =========================================================================
   FOOTER LEGAL — aparece en todas las páginas del plugin
   ========================================================================= */

.ch-legal-footer{
    position:relative;z-index:2;
    padding:36px 24px 28px;
    margin-top:40px;
    border-top:1px solid rgba(148,163,184,.12);
    background:rgba(10,17,32,.6);
    backdrop-filter:blur(8px);
    color:rgba(255,255,255,.65);
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    font-size:13px;line-height:1.5;
}

.ch-legal-footer-inner{
    max-width:1120px;margin:0 auto;
    display:flex;justify-content:space-between;align-items:flex-start;
    gap:32px;flex-wrap:wrap;
    padding-bottom:22px;
    border-bottom:1px solid rgba(148,163,184,.08);
}

.ch-legal-footer-brand{min-width:240px}
.ch-legal-footer-logo{
    display:inline-flex;align-items:center;gap:10px;
    color:#f8fafc;text-decoration:none;font-weight:700;font-size:15px;
    letter-spacing:-.02em;
}
.ch-legal-footer-mark{
    width:28px;height:28px;display:grid;place-items:center;
    background-image:linear-gradient(135deg,#fbbf24,#f59e0b);
    border-radius:7px;color:#0f172a;font-size:12px;font-weight:800;
}
.ch-legal-footer-tag{margin:6px 0 0;color:rgba(255,255,255,.45);font-size:12.5px}

.ch-legal-footer-links{
    display:flex;flex-wrap:wrap;gap:4px 22px;
    font-size:13px;
}
.ch-legal-footer-links a{
    color:rgba(255,255,255,.7);text-decoration:none;
    padding:6px 0;transition:color .15s;
}
.ch-legal-footer-links a:hover{color:#fde68a}

.ch-legal-footer-copy{
    max-width:1120px;margin:16px auto 0;
    text-align:center;
    font-size:11.5px;color:rgba(255,255,255,.4);line-height:1.55;
}
.ch-legal-footer-sep{color:rgba(255,255,255,.25);margin:0 6px}

@media(max-width:600px){
    .ch-legal-footer{padding:28px 18px 22px}
    .ch-legal-footer-inner{flex-direction:column;gap:18px}
    .ch-legal-footer-links{gap:2px 16px}
}


/* =========================================================================
   PÁGINAS LEGALES — privacidad, aviso legal, cookies, términos
   ========================================================================= */

.ch-legal-page .ch-fichar-content{
    max-width:820px;
}
.ch-legal-card{
    padding:36px 40px;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    color:rgba(248,250,252,.85);font-size:15px;line-height:1.65;
}
.ch-legal-card .ch-legal-lead{
    font-size:16px;color:rgba(255,255,255,.75);
    margin:0 0 28px;padding-bottom:22px;
    border-bottom:1px solid rgba(148,163,184,.15);
}
.ch-legal-card h2{
    margin:32px 0 12px;
    font-size:18px;font-weight:800;
    color:#fbbf24;letter-spacing:-.015em;
}
.ch-legal-card h2:first-of-type{margin-top:8px}
.ch-legal-card h3{
    margin:20px 0 8px;
    font-size:15px;font-weight:700;color:#f8fafc;
}
.ch-legal-card p{margin:0 0 12px}
.ch-legal-card ul{margin:6px 0 14px 22px;padding:0}
.ch-legal-card li{margin-bottom:5px}
.ch-legal-card a{color:#fde68a;text-decoration:underline}
.ch-legal-card a:hover{color:#fef3c7}
.ch-legal-card strong{color:#fff}
.ch-legal-card em{font-style:italic;color:rgba(255,255,255,.7)}
.ch-legal-card code{
    background:rgba(251,191,36,.12);
    padding:1px 6px;border-radius:4px;
    font-family:'Fira Code',ui-monospace,monospace;font-size:13px;
    color:#fde68a;
}

.ch-legal-data{
    background:rgba(255,255,255,.03);
    padding:14px 18px;border-radius:10px;
    border:1px solid rgba(148,163,184,.12);
    list-style:none !important;margin-left:0 !important;
}
.ch-legal-data li{margin-bottom:6px}
.ch-legal-data li:last-child{margin-bottom:0}

.ch-legal-table{
    width:100%;margin:10px 0 18px;
    border-collapse:collapse;font-size:13.5px;
}
.ch-legal-table th,.ch-legal-table td{
    text-align:left;padding:8px 10px;
    border-bottom:1px solid rgba(148,163,184,.14);
}
.ch-legal-table th{color:#fbbf24;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em}

.ch-legal-updated{
    margin-top:28px;padding-top:18px;
    border-top:1px solid rgba(148,163,184,.12);
    font-size:12.5px;color:rgba(255,255,255,.45);font-style:italic;
}

.ch-legal-warning{
    padding:12px 16px;margin:0 0 24px;
    background:rgba(251,113,133,.12);
    border:1px solid rgba(251,113,133,.35);
    border-radius:10px;
    color:#fecaca;font-size:13.5px;line-height:1.5;
}
.ch-legal-warning strong{color:#fff}

.ch-rgpd-block--admin{
    margin-top:18px !important;padding:14px 16px;
    background:rgba(251,191,36,.07);
    border:1px solid rgba(251,191,36,.22);
    border-radius:10px;
}
.ch-rgpd-block--admin h4{margin-top:0 !important}

@media(max-width:600px){
    .ch-legal-page .ch-fichar-content{padding:18px 10px 32px !important;gap:12px}
    .ch-legal-content .ch-fichar-greeting{padding:0 4px}
    .ch-legal-content .ch-fichar-greeting h1{font-size:22px !important}
    .ch-legal-card{padding:18px 16px !important;font-size:14px;line-height:1.55;border-radius:14px}
    .ch-legal-card .ch-legal-lead{font-size:14.5px;margin:0 0 18px;padding-bottom:14px}
    .ch-legal-card h2{font-size:15px;margin:20px 0 8px}
    .ch-legal-card h3{font-size:14px;margin:14px 0 6px}
    .ch-legal-card p{margin:0 0 10px}
    .ch-legal-card ul{margin:4px 0 10px 18px}
    .ch-legal-card li{margin-bottom:4px}
    .ch-legal-data{padding:12px 14px}
    .ch-legal-table{font-size:12.5px}
    .ch-legal-table th,.ch-legal-table td{padding:6px 8px}
}


/* =========================================================================
   AVISOS RGPD DISCRETOS — reemplazan el modal bloqueante.
   Aparecen como línea informativa pequeña en el login y en la pantalla
   de fichar, con enlace a la política de privacidad completa.
   ========================================================================= */

.sf-auth-privacy{
    margin:14px 0 0 !important;
    padding-top:14px;
    border-top:1px dashed rgba(148,163,184,.14);
    font-size:12px;line-height:1.5;
    color:var(--sf-dim,#64748b);
    text-align:center;
}
.sf-auth-privacy strong{color:var(--sf-muted,#94a3b8)}
.sf-auth-privacy a{color:var(--sf-accent,#fbbf24);text-decoration:underline}
.sf-auth-privacy a:hover{color:#fef3c7}

.ch-fichar-privacy-note{
    display:flex;align-items:flex-start;gap:8px;
    margin:8px auto 0;padding:10px 14px;
    max-width:520px;
    background:rgba(148,163,184,.06);
    border:1px solid rgba(148,163,184,.15);
    border-radius:10px;
    font-size:12px;line-height:1.5;
    color:rgba(255,255,255,.55);
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
.ch-fichar-privacy-note i{
    width:14px;height:14px;flex-shrink:0;
    color:rgba(251,191,36,.7);margin-top:2px;
}
.ch-fichar-privacy-note strong{color:rgba(255,255,255,.8);font-weight:600}
.ch-fichar-privacy-note a{color:var(--ch-accent,#fbbf24);text-decoration:underline}
.ch-fichar-privacy-note a:hover{color:#fef3c7}


/* =========================================================================
   RGPD — modal bloqueante con cláusula informativa (art. 13 RGPD)
   Se muestra la primera vez que un empleado entra. No se puede cerrar sin
   marcar el acuse de lectura.
   ========================================================================= */

.ch-rgpd-lock{overflow:hidden}

.ch-rgpd-modal{
    position:fixed;inset:0;z-index:10002;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
    background:rgba(10,17,32,.85);
    backdrop-filter:blur(8px);
    opacity:0;visibility:hidden;
    transition:opacity .25s ease, visibility 0s linear .25s;
}
.ch-rgpd-modal--open{opacity:1;visibility:visible;transition:opacity .25s ease}

.ch-rgpd-card{
    position:relative;
    width:100%;max-width:640px;max-height:calc(100vh - 32px);
    display:flex;flex-direction:column;
    background:#151f37;
    border:1px solid rgba(148,163,184,.2);
    border-radius:18px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    color:#f8fafc;
    overflow:hidden;
    transform:translateY(10px) scale(.98);
    transition:transform .3s ease;
}
.ch-rgpd-modal--open .ch-rgpd-card{transform:translateY(0) scale(1)}

/* Botón X de cerrar (= cerrar sesión) en la esquina superior derecha */
.ch-rgpd-close{
    position:absolute;top:14px;right:14px;z-index:2;
    width:34px;height:34px;display:grid;place-items:center;
    border-radius:8px;
    color:rgba(255,255,255,.55);text-decoration:none;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    transition:background .18s,color .18s,border-color .18s;
}
.ch-rgpd-close:hover{
    background:rgba(251,113,133,.14);
    border-color:rgba(251,113,133,.35);
    color:#fff;
}

/* Header — siempre visible arriba aunque se scrollee el body */
.ch-rgpd-head{
    display:flex;align-items:center;gap:16px;
    padding:22px 56px 16px 24px;    /* derecha amplia para que no pise la X */
    border-bottom:1px solid rgba(148,163,184,.12);
    flex:0 0 auto;
}
.ch-rgpd-icon{
    width:42px;height:42px;flex-shrink:0;
    display:grid;place-items:center;
    border-radius:10px;
    background-image:linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#0f172a;
    box-shadow:0 8px 18px -8px rgba(245,158,11,.5);
}
.ch-rgpd-icon i{width:20px;height:20px}
.ch-rgpd-head h2{
    margin:0 0 2px;font-size:17px;font-weight:700;letter-spacing:-.015em;
}
.ch-rgpd-head p{margin:0;font-size:13px;color:rgba(255,255,255,.55)}

/* Body — flex column con gap fijo: ignora los márgenes que algún tema de
   WordPress inyecta a `<section>` u otros elementos, y garantiza separación
   uniforme entre bloques. flex:1 1 auto para que se adapte/contraiga. */
.ch-rgpd-body{
    flex:1 1 auto;min-height:0;
    display:flex !important;flex-direction:column !important;gap:14px !important;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:16px 24px 12px !important;
    font-size:14px;line-height:1.5;color:rgba(248,250,252,.85);
}
.ch-rgpd-body::-webkit-scrollbar{width:8px}
.ch-rgpd-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.ch-rgpd-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}
.ch-rgpd-body::-webkit-scrollbar-track{background:transparent}

/* Cada bloque ya no depende de márgenes (el gap del body se encarga) */
.ch-rgpd-body .ch-rgpd-block{margin:0 !important;padding:0 !important}
.ch-rgpd-block h4{
    margin:0 0 4px !important;
    font-size:13.5px;font-weight:700;
    color:#fbbf24;letter-spacing:-.01em;
}
.ch-rgpd-block p{margin:0 0 4px !important}
.ch-rgpd-block p:last-child{margin-bottom:0 !important}
.ch-rgpd-block ul{margin:2px 0 0 18px !important;padding:0 !important}
.ch-rgpd-block li{margin-bottom:2px}
.ch-rgpd-block li:last-child{margin-bottom:0}
.ch-rgpd-block a{color:#fde68a;text-decoration:underline}
.ch-rgpd-block a:hover{color:#fef3c7}
.ch-rgpd-block strong{color:#fff}
.ch-rgpd-block em{color:rgba(255,255,255,.7);font-style:italic}

/* Footer con acuse — siempre visible abajo aunque se scrollee el body */
.ch-rgpd-foot{
    padding:14px 24px 16px;
    border-top:1px solid rgba(148,163,184,.14);
    background:rgba(15,23,42,.4);
    flex:0 0 auto;
}

/* Fila de links legales dentro del footer del modal — lleva a las páginas
   completas de privacidad/aviso/cookies/términos en pestaña nueva. */
.ch-rgpd-legal-links{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
    padding:0 0 12px;margin:0 0 12px;
    border-bottom:1px dashed rgba(148,163,184,.14);
    font-size:12px;line-height:1.4;color:rgba(255,255,255,.45);
}
.ch-rgpd-legal-links span:first-child{
    color:rgba(255,255,255,.55);font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;
}
.ch-rgpd-legal-links a{
    color:#fde68a;text-decoration:underline;font-size:12px;
}
.ch-rgpd-legal-links a:hover{color:#fef3c7}
.ch-rgpd-legal-sep{color:rgba(255,255,255,.2)}
.ch-rgpd-check{
    display:flex;align-items:flex-start;gap:10px;cursor:pointer;
    user-select:none;
    font-size:13.5px;color:#f8fafc;font-weight:500;
    margin-bottom:12px;
}
.ch-rgpd-check input{
    width:18px;height:18px;margin-top:2px;accent-color:#fbbf24;cursor:pointer;
}
.ch-rgpd-check span{flex:1;line-height:1.4}

.ch-rgpd-actions{
    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.ch-rgpd-logout{
    font-size:13px;color:rgba(255,255,255,.55);text-decoration:underline;
}
.ch-rgpd-logout:hover{color:#fb7185}
#ch-rgpd-continue{
    padding:12px 24px;font-size:14.5px;font-weight:700;
    border-radius:10px;border:none;cursor:pointer;
    background-image:linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#0f172a;
    box-shadow:0 10px 24px -10px rgba(245,158,11,.55);
    transition:filter .15s, transform .1s, opacity .15s;
}
#ch-rgpd-continue:hover:not(:disabled){filter:brightness(1.05)}
#ch-rgpd-continue:active:not(:disabled){transform:scale(.98)}
#ch-rgpd-continue:disabled{opacity:.5;cursor:not-allowed}

@media(max-width:560px){
    .ch-rgpd-card{max-height:calc(100vh - 32px)}
    .ch-rgpd-close{top:10px;right:10px;width:30px;height:30px}
    .ch-rgpd-head{padding:18px 48px 12px 18px;gap:12px}
    .ch-rgpd-head h2{font-size:16px}
    .ch-rgpd-body{padding:14px 18px 6px;font-size:13.5px}
    .ch-rgpd-foot{padding:12px 18px 14px}
    .ch-rgpd-actions{flex-direction:column;align-items:stretch}
    .ch-rgpd-logout{text-align:center;order:2}
    #ch-rgpd-continue{width:100%;order:1}
}


/* =========================================================================
   TOAST — notificaciones flotantes estilo SoloFichar (reemplazan alert)
   ========================================================================= */

.ch-toast-container{
    position:fixed;top:24px;right:24px;z-index:10000;
    display:flex;flex-direction:column;gap:10px;
    max-width:380px;pointer-events:none;
}
.ch-toast{
    pointer-events:auto;
    display:flex;align-items:flex-start;gap:12px;
    padding:12px 14px 12px 14px;
    background:rgba(21,31,55,.98);
    border:1px solid rgba(148,163,184,.18);
    border-radius:12px;
    color:#f8fafc;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    font-size:14px;line-height:1.45;
    box-shadow:0 18px 48px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);
    backdrop-filter:blur(14px);
    transform:translateX(16px);opacity:0;
    transition:transform .22s ease, opacity .22s ease;
}
.ch-toast--visible{transform:translateX(0);opacity:1}
.ch-toast-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.ch-toast-text{flex:1;min-width:0;word-break:break-word}
.ch-toast-close{
    background:none;border:none;cursor:pointer;
    color:rgba(255,255,255,.45);
    font-size:18px;line-height:1;padding:0 2px;
    transition:color .15s;
}
.ch-toast-close:hover{color:#fff}

/* Variantes por color */
.ch-toast--success{border-color:rgba(52,211,153,.4)}
.ch-toast--success .ch-toast-icon{color:#34d399}
.ch-toast--error{border-color:rgba(251,113,133,.45)}
.ch-toast--error .ch-toast-icon{color:#fb7185}
.ch-toast--info{border-color:rgba(251,191,36,.4)}
.ch-toast--info .ch-toast-icon{color:#fbbf24}

@media(max-width:560px){
    .ch-toast-container{top:12px;right:12px;left:12px;max-width:none}
    .ch-toast{font-size:13.5px}
}


/* =========================================================================
   MODAL DE CONFIRMACIÓN — reemplaza confirm() nativo
   ========================================================================= */

.ch-modal-overlay{
    position:fixed;inset:0;z-index:10001;
    display:flex;align-items:center;justify-content:center;
    background:rgba(10,17,32,.65);
    backdrop-filter:blur(6px);
    opacity:0;transition:opacity .18s ease;
    padding:16px;
}
.ch-modal-overlay--visible{opacity:1}

.ch-modal{
    width:100%;max-width:440px;
    background:rgba(21,31,55,.98);
    border:1px solid rgba(148,163,184,.2);
    border-radius:16px;
    padding:28px 28px 22px;
    text-align:center;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.3);
    transform:translateY(8px) scale(.98);
    transition:transform .22s ease;
}
.ch-modal-overlay--visible .ch-modal{transform:translateY(0) scale(1)}

.ch-modal-icon{
    width:56px;height:56px;margin:0 auto 14px;
    display:grid;place-items:center;
    border-radius:50%;
    background:rgba(251,191,36,.12);
    color:#fbbf24;
}
.ch-modal-icon i{width:26px;height:26px}
.ch-modal--danger .ch-modal-icon{
    background:rgba(251,113,133,.14);color:#fb7185;
}

.ch-modal-title{
    margin:0 0 8px;
    font-size:18px;font-weight:700;
    color:#f8fafc;letter-spacing:-.015em;
}
.ch-modal-message{
    margin:0 0 22px;
    font-size:14.5px;line-height:1.5;
    color:rgba(248,250,252,.7);
}

.ch-modal-actions{
    display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.ch-modal-actions button{
    min-width:120px;
    padding:10px 20px;
    font-size:14px;font-weight:600;
    border-radius:10px;cursor:pointer;
    font-family:inherit;border:1px solid transparent;
    transition:background .18s,border-color .18s,transform .1s;
}
.ch-modal-actions button:active{transform:scale(.97)}

/* Cancel = outline sutil */
.ch-modal-cancel{
    background:transparent;
    border-color:rgba(255,255,255,.18);
    color:#cbd5e1;
}
.ch-modal-cancel:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.3);
    color:#fff;
}

/* OK accent (default primary) */
.ch-btn-accent{
    background-image:linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#0f172a;border-color:transparent;
    box-shadow:0 8px 22px -8px rgba(245,158,11,.55);
}
.ch-btn-accent:hover{filter:brightness(1.05)}

/* OK danger (para borrar / baja) */
.ch-btn-danger{
    background-image:linear-gradient(135deg,#fb7185,#e11d48);
    color:#fff;border-color:transparent;
    box-shadow:0 8px 22px -8px rgba(225,29,72,.55);
}
.ch-btn-danger:hover{filter:brightness(1.05)}

@media(max-width:460px){
    .ch-modal{padding:22px 18px 18px}
    .ch-modal-actions button{flex:1;min-width:0}
}


/* =========================================================================
   PANEL — Botones pequeños de acciones de tabla (dar de baja / reactivar)
   ========================================================================= */

.ch-btn-sm{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;
    font-size:12.5px;font-weight:600;
    border-radius:8px;cursor:pointer;
    transition:background .18s,border-color .18s,color .18s,transform .1s;
    font-family:inherit;border:1px solid transparent;
    background:rgba(255,255,255,.04);
    color:#cbd5e1;
}
.ch-btn-sm:hover{background:rgba(255,255,255,.08);color:#fff}
.ch-btn-sm:active{transform:scale(.97)}
.ch-btn-sm:disabled{opacity:.5;cursor:not-allowed}
.ch-btn-sm .ch-icon-sm{width:14px;height:14px}

.ch-btn-sm--danger{
    background:rgba(251,113,133,.1);
    border-color:rgba(251,113,133,.3);
    color:#fecaca;
}
.ch-btn-sm--danger:hover{
    background:rgba(251,113,133,.18);
    border-color:rgba(251,113,133,.5);
    color:#fef2f2;
}

.ch-btn-sm--ok{
    background:rgba(52,211,153,.1);
    border-color:rgba(52,211,153,.3);
    color:#a7f3d0;
}
.ch-btn-sm--ok:hover{
    background:rgba(52,211,153,.18);
    border-color:rgba(52,211,153,.5);
    color:#ecfdf5;
}

.ch-muted{color:rgba(255,255,255,.4)}


/* =========================================================================
   MI HORARIO — formulario self-service
   ========================================================================= */

.ch-horario-card{
    max-width:720px;margin:0 auto;padding:28px 32px;
}

.ch-horario-form .ch-horario-section{
    padding:18px 0;
    border-top:1px solid rgba(255,255,255,.08);
}
.ch-horario-form .ch-horario-section:first-of-type{border-top:none;padding-top:4px}

.ch-horario-section-title{
    font-size:13px;text-transform:uppercase;letter-spacing:.12em;
    color:var(--ch-accent,#fbbf24);
    margin:0 0 12px;font-weight:700;
}

/* Radios tipo tarjeta */
.ch-horario-radios{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.ch-radio-card{
    display:block;cursor:pointer;
    padding:16px;
    background:rgba(255,255,255,.03);
    border:1.5px solid rgba(255,255,255,.08);
    border-radius:12px;
    transition:background .18s,border-color .18s,transform .1s;
}
.ch-radio-card input{position:absolute;opacity:0;pointer-events:none}
.ch-radio-card:hover{border-color:rgba(251,191,36,.35)}
.ch-radio-card--active{
    background:rgba(251,191,36,.08);
    border-color:var(--ch-accent,#fbbf24);
}
.ch-radio-card-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ch-radio-card-head i{width:18px;height:18px;color:var(--ch-accent,#fbbf24)}
.ch-radio-card-head strong{color:#f8fafc;font-size:15px}
.ch-radio-card p{margin:0;font-size:13px;color:rgba(255,255,255,.55);line-height:1.45}

/* Details opcionales */
.ch-horario-details{margin-top:10px;padding:8px 0}
.ch-horario-details summary{
    cursor:pointer;color:var(--ch-accent,#fbbf24);font-size:13px;font-weight:600;
    padding:6px 0;list-style:none;
}
.ch-horario-details summary::-webkit-details-marker{display:none}
.ch-horario-details summary::before{content:"+ ";font-weight:700}
.ch-horario-details[open] summary::before{content:"− "}

/* Días de la semana (chips) */
.ch-dias-semana{display:flex;flex-wrap:wrap;gap:8px}
.ch-dia-chip{
    position:relative;cursor:pointer;
    width:44px;height:44px;
    display:grid;place-items:center;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1.5px solid rgba(255,255,255,.1);
    color:#cbd5e1;font-weight:700;font-size:14px;
    transition:background .18s,border-color .18s,color .18s;
}
.ch-dia-chip input{position:absolute;opacity:0;pointer-events:none}
.ch-dia-chip:hover{border-color:rgba(251,191,36,.4)}
.ch-dia-chip--active{
    background:var(--ch-accent,#fbbf24);
    border-color:var(--ch-accent,#fbbf24);
    color:#0f172a;
}

/* Acciones */
.ch-horario-actions{
    display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    margin-top:24px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
}

/* Tarjeta de ayuda debajo */
.ch-horario-help{
    max-width:720px;margin:18px auto 0;padding:18px 24px;
    font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.55;
}
.ch-horario-help strong{color:#f8fafc}
.ch-horario-help ul{margin:8px 0 8px 18px;padding:0}
.ch-horario-help li{margin-bottom:4px}

@media(max-width:560px){
    .ch-horario-card{padding:20px 18px}
    .ch-horario-radios{grid-template-columns:1fr}
    .ch-dia-chip{width:40px;height:40px;font-size:13px}
}


/* =========================================================================
   HOY — chip con el horario del día en la pantalla de fichar
   ========================================================================= */

.ch-hoy-horario{
    display:inline-flex;align-items:center;gap:10px;
    margin-top:12px;
    padding:7px 14px 7px 12px;
    background:rgba(251,191,36,.08);
    border:1px solid rgba(251,191,36,.25);
    border-radius:999px;
    font-size:13.5px;color:#fde68a;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
.ch-hoy-horario i{width:15px;height:15px;color:var(--ch-accent,#fbbf24);flex-shrink:0}
.ch-hoy-horario strong{color:#fef3c7;font-weight:700}
.ch-hoy-horario-mini{color:rgba(255,255,255,.55);font-size:12.5px}

.ch-hoy-horario--libre{
    background:rgba(52,211,153,.1);
    border-color:rgba(52,211,153,.28);
    color:#a7f3d0;
}
.ch-hoy-horario--libre i{color:#34d399}

.ch-hoy-horario--vacio{
    background:rgba(148,163,184,.06);
    border-color:rgba(148,163,184,.22);
    color:#cbd5e1;
}
.ch-hoy-horario--vacio i{color:#94a3b8}
.ch-hoy-horario--vacio a{color:var(--ch-accent,#fbbf24);text-decoration:underline}
.ch-hoy-horario--vacio a:hover{color:#fef3c7}


/* =========================================================================
   PAUSA — chip flotante con contador de tiempo en pausa
   Aparece cuando el empleado está en pausa, para que vea en todo momento
   cuánto tiempo lleva parado.
   ========================================================================= */

.ch-pausa-timer{
    display:inline-flex;align-items:center;gap:10px;
    margin:14px auto 0;
    padding:8px 14px 8px 12px;
    background:rgba(96,165,250,.1);
    border:1px solid rgba(96,165,250,.28);
    border-radius:999px;
    color:#bfdbfe;
    font-family:var(--sf-mono,'Fira Code',ui-monospace,Menlo,monospace);
    font-size:13px;
    letter-spacing:.02em;
    box-shadow:0 4px 18px -8px rgba(96,165,250,.35);
    backdrop-filter:blur(6px);
    animation:ch-pausa-pulse 2.4s ease-in-out infinite;
}
.ch-pausa-timer.ch-hidden{display:none}
.ch-pausa-timer-icon{
    width:14px;height:14px;color:#93c5fd;flex-shrink:0;
}
.ch-pausa-timer-label{
    text-transform:uppercase;
    font-size:10.5px;letter-spacing:.14em;font-weight:600;
    color:#93c5fd;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
}
.ch-pausa-timer-value{
    font-variant-numeric:tabular-nums;
    font-size:14px;font-weight:700;
    color:#dbeafe;
}

@keyframes ch-pausa-pulse{
    0%,100%{box-shadow:0 4px 18px -8px rgba(96,165,250,.35)}
    50%    {box-shadow:0 4px 24px -6px rgba(96,165,250,.55)}
}

@media (max-width:560px){
    .ch-pausa-timer{font-size:12px;padding:7px 12px 7px 10px;gap:8px}
    .ch-pausa-timer-label{font-size:10px}
    .ch-pausa-timer-value{font-size:13px}
}


/* =========================================================================
   PANEL ADMIN — LAYOUT CON SIDEBAR (estilo mockup de la home)
   Convive con .ch-panel-tabs por si algún día lo quisiéramos restaurar.
   ========================================================================= */

.ch-panel-content--with-sidebar{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:32px;
  align-items:flex-start;
  max-width:1280px;
  margin:0 auto;
  padding:32px 24px 60px;
}

/* Sidebar */
.ch-panel-sidebar{
  position:sticky; top:88px;
  border-right:1px solid rgba(255,255,255,.06);
  padding-right:16px;
  font-family:var(--sf-mono, 'Fira Code', ui-monospace, Menlo, monospace);
}
.ch-panel-sidebar-label{
  font-size:11px;
  color:rgba(255,255,255,.35);
  text-transform:uppercase;
  letter-spacing:.16em;
  margin-bottom:14px;
  font-weight:500;
}
.ch-panel-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ch-panel-sidebar-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  color:rgba(255,255,255,.6);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:all .18s;
  position:relative;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
}
.ch-panel-sidebar-item i{
  width:16px;height:16px;
  color:rgba(255,255,255,.4);
  transition:color .18s;
}
.ch-panel-sidebar-item:hover{
  color:#fff;
  background:rgba(255,255,255,.03);
}
.ch-panel-sidebar-item:hover i{color:rgba(255,255,255,.7)}

.ch-panel-sidebar-item--active{
  background:rgba(251,191,36,.1);
  color:var(--sf-accent, #fbbf24) !important;
  font-weight:600;
}
.ch-panel-sidebar-item--active i{color:var(--sf-accent, #fbbf24) !important}
.ch-panel-sidebar-item--active::before{
  content:"▸ ";
}

.ch-panel-sidebar-count{
  color:rgba(255,255,255,.35);
  font-weight:400;
  margin-left:2px;
}
.ch-panel-sidebar-item--active .ch-panel-sidebar-count{
  color:rgba(251,191,36,.6);
}

/* Main content */
.ch-panel-main{
  min-width:0; /* evita desborde en grid */
}

/* Oculta los tabs mobile en desktop */
.ch-panel-mobile-tabs{display:none}

/* Responsive: en móvil, sidebar → chips horizontales scrolleables */
@media (max-width:960px){
  .ch-panel-content--with-sidebar{
    grid-template-columns:1fr;
    gap:18px;
    padding:18px 14px 40px;
  }
  .ch-panel-sidebar{display:none}

  .ch-panel-mobile-tabs{
    display:flex;gap:8px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:4px 2px 10px;
    margin:0 -4px 4px;
    /* Ocultar scrollbar pero mantener funcionalidad */
    scrollbar-width:none;
  }
  .ch-panel-mobile-tabs::-webkit-scrollbar{display:none}

  .ch-mobile-tab{
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    color:rgba(255,255,255,.7);
    font-size:13px;font-weight:500;
    text-decoration:none;
    white-space:nowrap;flex-shrink:0;
    scroll-snap-align:start;
    transition:background .18s,border-color .18s,color .18s;
  }
  .ch-mobile-tab i{width:14px;height:14px;flex-shrink:0}
  .ch-mobile-tab:hover{
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.9);
    border-color:rgba(255,255,255,.18);
  }
  .ch-mobile-tab--active{
    background:rgba(251,191,36,.14) !important;
    border-color:rgba(251,191,36,.45) !important;
    color:#fde68a !important;
    font-weight:600;
  }
  .ch-mobile-tab--active i{color:#fbbf24}
  .ch-mobile-tab-badge{
    display:inline-grid;place-items:center;
    min-width:20px;height:20px;padding:0 6px;
    background:rgba(251,191,36,.2);color:#fde68a;
    border-radius:999px;
    font-size:11px;font-weight:700;line-height:1;
  }
  .ch-mobile-tab--active .ch-mobile-tab-badge{
    background:rgba(15,23,42,.3);color:#fef3c7;
  }
}


/* =========================================================================
   RESPONSIVE MÓVIL — FIXES FINOS (home + resto)
   Consolidado al final para que gane por especificidad sobre reglas previas.
   ========================================================================= */

/* Topbar: por defecto muestra texto completo, en móvil muestra el corto
   "Operativo · UE" y mantiene los enlaces Documentación/Contacto a la derecha. */
.sf-topbar-short{display:none}
@media (max-width:720px){
  .sf-topbar-inner{
    padding:8px 14px !important;gap:10px !important;
  }
  .sf-topbar .sf-mono{
    font-size:10.5px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    flex:1 1 auto;min-width:0;
  }
  .sf-topbar-full{display:none}
  .sf-topbar-short{display:inline}
  .sf-topbar-right{
    display:flex !important;gap:14px !important;font-size:11px !important;
    flex-shrink:0;white-space:nowrap;
  }
}

/* Wrap: menos padding lateral en móviles pequeños para aprovechar ancho. */
@media (max-width:560px){
  .sf-wrap{padding:0 18px !important}
}

/* Phone mockup del hero: aumentar altura y reducir márgenes internos
   para que el chip "Jornada ayer" no se corte por abajo. */
@media (max-width:768px){
  .sf-phone{
    width:280px !important;height:580px !important;
  }
  .sf-phone-screen{padding:40px 18px 18px !important}
  .sf-phone-head{margin-bottom:18px !important}
  .sf-phone-head-date{font-size:20px !important}
  .sf-punch-btn{width:148px !important;height:148px !important}
  .sf-punch-rings span:nth-child(1){width:170px;height:170px}
  .sf-punch-rings span:nth-child(2){width:195px;height:195px}
  .sf-punch-rings span:nth-child(3){width:220px;height:220px}
  .sf-punch-status{margin-top:16px !important}
  .sf-punch-timer{font-size:28px !important}
  .sf-phone-chip{
    margin-top:16px !important;padding:10px 12px !important;
  }
  .sf-phone-chip-text strong{font-size:12.5px}
  .sf-phone-chip-text span{font-size:11.5px}
}

@media (max-width:420px){
  .sf-phone{width:260px !important;height:560px !important}
  .sf-phone-screen{padding:36px 16px 14px !important}
  .sf-punch-btn{width:132px !important;height:132px !important;font-size:13px}
  .sf-punch-rings span:nth-child(1){width:152px;height:152px}
  .sf-punch-rings span:nth-child(2){width:175px;height:175px}
  .sf-punch-rings span:nth-child(3){width:198px;height:198px}
  .sf-punch-timer{font-size:26px !important}
  .sf-phone-head-date{font-size:18px !important}
}

/* Feature (sección "Buenos días, Marta" con mockup de notifs):
   evitar que el mockup de teléfono se corte por arriba/abajo. */
@media (max-width:768px){
  .sf-feature{padding:48px 0 !important}
  .sf-notifs{
    padding:20px 14px !important;
    max-width:100% !important;
  }
  .sf-notif{padding:12px 14px !important}
  .sf-doc-stack{
    transform:scale(.9) !important;transform-origin:center top !important;
    margin:0 auto !important;
  }
}

/* CTA final: ajustes para que todo quepa bien y centrado. */
@media (max-width:560px){
  .sf-final{padding:72px 0 !important}
  .sf-final-inner h2{font-size:28px !important;line-height:1.05}
  .sf-final p{font-size:15px !important;margin-bottom:26px !important}
  .sf-final-specs{
    grid-template-columns:1fr 1fr !important;
    gap:18px !important;margin-top:48px !important;padding-top:26px !important;
  }
  .sf-final-specs .val{font-size:13px !important}
  .sf-final-legal{
    margin-top:32px !important;padding-top:20px !important;
    gap:4px 10px !important;font-size:12px !important;
  }
  .sf-final-copy{font-size:11px !important}
  .sf-final::before{font-size:clamp(100px,35vw,180px) !important;bottom:-20px !important}
}

/* Títulos de sección en móvil — menos agresivos */
@media (max-width:560px){
  .sf-section-head h2{font-size:26px !important}
  .sf-kicker{font-size:10.5px !important;letter-spacing:.14em}
}

/* Hero en pantallas muy pequeñas */
@media (max-width:420px){
  .sf-hero{padding:24px 0 40px !important}
  h1.sf-title{font-size:clamp(38px,14vw,60px) !important}
  .sf-lede{font-size:14.5px !important}
  .sf-trust{gap:10px !important;font-size:11px}
}

/* Cualquier imagen/mockup decorativo que pueda desbordar */
@media (max-width:560px){
  .sf-feature-media, .sf-doc-stack, .sf-notifs{
    max-width:100% !important;overflow:hidden;
  }
}

/* Separación entre bloques del panel admin: el formulario de "Crear empleado"
   y otros cards no pueden tocar directamente la tabla siguiente. */
.ch-panel-section .ch-panel-form{margin-bottom:18px}
.ch-panel-section .ch-panel-form + .ch-table-wrap{margin-top:4px}
.ch-panel-section .ch-table-wrap{margin-top:14px}
@media (max-width:768px){
  .ch-panel-section .ch-panel-form{margin-bottom:14px}
  .ch-panel-section .ch-table-wrap{margin-top:10px}
}

/* Espacio entre los inputs del form y el botón submit.
   Antes el botón quedaba pegado al último input (se veía mal). */
.ch-panel-form form > .ch-btn-accent,
.ch-panel-form form > button[type="submit"]{
    margin-top:18px;
}
.ch-panel-form form > .ch-form-row + .ch-btn-accent,
.ch-panel-form form > .ch-form-row + button[type="submit"]{
    margin-top:20px;
}

/* Ajuste final del aviso RGPD con el texto en un <span> para que el flex
   no rompa las palabras en columnas extrañas. */
.ch-fichar-privacy-note{
    display:flex;align-items:flex-start;gap:10px;
}
.ch-fichar-privacy-note .ch-fichar-privacy-text{
    flex:1 1 auto;min-width:0;
}
@media (max-width:560px){
  .ch-fichar-privacy-note{padding:10px 12px;font-size:11.5px}
}

/* ========================================================================
   FIX OVERFLOW HORIZONTAL — causa de márgenes vacíos grandes en móvil.
   Algunos elementos decorativos (watermark "FICHAR", phone mockup absoluto,
   docs flotantes, tickers) pueden salirse del viewport y forzar scroll
   horizontal, lo que da la sensación de "página más ancha que el móvil".
   Encerramos todas las secciones y cortamos cualquier desborde.
   ======================================================================== */
html,body{max-width:100vw;overflow-x:hidden !important}
.sf-hero,.sf-ticker,.sf-feature,.sf-final,.sf-foot,
section[id="como"],section[id="producto"],section[id="panel"],
section[id="precios"],section[id="faq"],
.sf-planes,.sf-auth,.sf-docs{
  overflow-x:hidden !important;max-width:100vw !important;
}
/* Watermark FICHAR del CTA final: jamás debe forzar scroll */
.sf-final::before{max-width:100vw;overflow:hidden}
/* Grid de .sf-wrap garantizado al ancho del viewport */
.sf-wrap{max-width:100% !important;box-sizing:border-box}
@media (min-width:1341px){
  .sf-wrap{max-width:1340px !important}
}

/* ─────────────────────────────────────────────────────────
   Login / registro: mantener el card estrecho incluso cuando
   el override global de .sf-wrap lo estira (ver regla anterior).
   ───────────────────────────────────────────────────────── */
.sf-auth .sf-wrap{max-width:480px !important}
.sf-auth.sf-auth--wide .sf-wrap{max-width:640px !important}

/* ─────────────────────────────────────────────────────────
   Password visibility toggle (icono ojo).
   El JS de fichaje.js envuelve cada <input type="password">
   en un .ch-pw-wrap y añade un botón .ch-pw-toggle al lado.
   ───────────────────────────────────────────────────────── */
.ch-pw-wrap{position:relative;display:block}
.ch-pw-wrap > input{padding-right:42px !important}
.ch-pw-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  background:transparent;border:0;padding:6px;margin:0;
  color:inherit;opacity:.6;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;transition:opacity .15s, background .15s;
}
.ch-pw-toggle:hover,
.ch-pw-toggle:focus-visible{opacity:1;outline:none;background:rgba(255,255,255,.06)}
.ch-pw-toggle svg{display:block;width:18px;height:18px}