/* UtiliPro — Shared site styles */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Header ── */
#site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header {
    background: #1d4ed8;
    /* bg-blue-700 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


/* New SVG logo styles */
.site-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
    display: block;
}

.site-logo-img-footer {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.site-logo-wordmark {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.site-logo-utili {
    color: #ffffff;
}

.site-logo-pro {
    color: #93c5fd;
}

/* Footer wordmark colors — must contrast against dark (#111827) footer background */
.site-footer-brand-row .site-logo-utili {
    color: #ffffff;
}

.site-footer-brand-row .site-logo-pro {
    color: #93c5fd;
}

.site-header span.text-gray-900 {
    color: white !important;
}

.site-nav-link {
    color: #bfdbfe;
    /* text-blue-200 */
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}

.site-nav-link:hover {
    color: white;
    background: rgba(30, 58, 138, 0.4);
}

.site-nav-link.active {
    color: white;
    font-weight: 700;
    background: rgba(30, 58, 138, 0.6);
}

.site-dropdown {
    position: relative;
}

.site-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 200;
}

.site-dropdown:hover .site-dropdown-menu,
.site-dropdown.open .site-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-dropdown-item {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #374151;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
}

.site-dropdown-item:hover {
    background: #f3f4f6;
    color: #2563eb;
}

.site-dropdown-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

/* Mobile menu button in blue theme */
.site-header #site-menu-btn {
    color: white !important;
}

.site-header #site-menu-btn:hover {
    background: rgba(30, 58, 138, 0.4) !important;
}

/* Mobile menu */
#site-mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: white;
    border-top: 1px solid #eff6ff;
}

#site-mobile-menu.open {
    max-height: 2000px;
}

#site-mobile-menu .site-nav-link {
    color: #4b5563;
    /* text-gray-600 */
}

#site-mobile-menu .site-nav-link:hover {
    color: #2563eb;
    background: #eff6ff;
}

#site-mobile-menu .site-nav-link.active {
    color: #2563eb;
    background: #eff6ff;
    font-weight: 600;
}

.site-mobile-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    padding: 0.75rem 0.5rem 0.25rem;
}

/* ── Homepage cards — entrance animation ── */
@keyframes cardFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Homepage cards ── */
.tool-card {
    background: white;
    border: 1px solid #f0f4f8;
    border-radius: 18px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.26s cubic-bezier(.22, .68, 0, 1.2),
        box-shadow 0.26s ease,
        border-color 0.26s ease;
    height: 100%;
    animation: cardFadeUp 0.45s ease both;
}

/* Colored top accent stripe — revealed on hover */
.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    opacity: 0;
    transition: opacity 0.26s ease;
}

.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.10);
    border-color: #e8eeff;
}

.tool-card:hover::before {
    opacity: 1;
}

/* Per-color top accent gradients using :has() */
.tool-card:has(.tool-card-icon.blue)::before {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.tool-card:has(.tool-card-icon.green)::before {
    background: linear-gradient(90deg, #059669, #34d399);
}

.tool-card:has(.tool-card-icon.purple)::before {
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.tool-card:has(.tool-card-icon.indigo)::before {
    background: linear-gradient(90deg, #4338ca, #818cf8);
}

.tool-card:has(.tool-card-icon.sky)::before {
    background: linear-gradient(90deg, #0284c7, #38bdf8);
}

.tool-card:has(.tool-card-icon.violet)::before {
    background: linear-gradient(90deg, #7c3aed, #c4b5fd);
}

.tool-card:has(.tool-card-icon.teal)::before {
    background: linear-gradient(90deg, #0d9488, #2dd4bf);
}

.tool-card:has(.tool-card-icon.orange)::before {
    background: linear-gradient(90deg, #ea580c, #fb923c);
}

.tool-card:has(.tool-card-icon.emerald)::before {
    background: linear-gradient(90deg, #059669, #6ee7b7);
}

.tool-card:has(.tool-card-icon.cyan)::before {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
}

.tool-card:has(.tool-card-icon.rose)::before {
    background: linear-gradient(90deg, #e11d48, #fb7185);
}

.tool-card:has(.tool-card-icon.lime)::before {
    background: linear-gradient(90deg, #65a30d, #a3e635);
}

.tool-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
    transition: transform 0.26s cubic-bezier(.22, .68, 0, 1.2), box-shadow 0.26s ease;
}

.tool-card:hover .tool-card-icon {
    transform: scale(1.12) rotate(-4deg);
}

/* Icon gradient backgrounds + colored shadows */
.tool-card-icon.blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.18);
}

.tool-card:hover .tool-card-icon.blue {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.28);
}

.tool-card-icon.green {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.18);
}

.tool-card:hover .tool-card-icon.green {
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.28);
}

.tool-card-icon.purple {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #6d28d9;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.18);
}

.tool-card:hover .tool-card-icon.purple {
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.28);
}

.tool-card-icon.indigo {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca;
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.18);
}

.tool-card:hover .tool-card-icon.indigo {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.28);
}

.tool-card-icon.sky {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0369a1;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.18);
}

.tool-card:hover .tool-card-icon.sky {
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.28);
}

.tool-card-icon.violet {
    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 100%);
    color: #7c3aed;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.18);
}

.tool-card:hover .tool-card-icon.violet {
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.28);
}

.tool-card-icon.teal {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
    color: #0f766e;
    box-shadow: 0 3px 10px rgba(13, 148, 136, 0.18);
}

.tool-card:hover .tool-card-icon.teal {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.28);
}

.tool-card-icon.orange {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    color: #c2410c;
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.18);
}

.tool-card:hover .tool-card-icon.orange {
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.28);
}

.tool-card-icon.emerald {
    background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%);
    color: #065f46;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.18);
}

.tool-card:hover .tool-card-icon.emerald {
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.28);
}

.tool-card-icon.cyan {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    color: #0e7490;
    box-shadow: 0 3px 10px rgba(6, 182, 212, 0.18);
}

.tool-card:hover .tool-card-icon.cyan {
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.28);
}

.tool-card-icon.rose {
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
    color: #be123c;
    box-shadow: 0 3px 10px rgba(244, 63, 94, 0.18);
}

.tool-card:hover .tool-card-icon.rose {
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.28);
}

.tool-card-icon.lime {
    background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
    color: #4d7c0f;
    box-shadow: 0 3px 10px rgba(101, 163, 13, 0.18);
}

.tool-card:hover .tool-card-icon.lime {
    box-shadow: 0 6px 20px rgba(101, 163, 13, 0.28);
}

.tool-card-cta {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap 0.2s ease;
}

.tool-card:hover .tool-card-cta {
    gap: 0.65rem;
}

.tool-card-cta.blue {
    color: #1d4ed8;
}

.tool-card-cta.green {
    color: #047857;
}

.tool-card-cta.purple {
    color: #6d28d9;
}

.tool-card-cta.indigo {
    color: #4338ca;
}

.tool-card-cta.sky {
    color: #0369a1;
}

.tool-card-cta.violet {
    color: #7c3aed;
}

.tool-card-cta.teal {
    color: #0f766e;
}

.tool-card-cta.orange {
    color: #c2410c;
}

.tool-card-cta.emerald {
    color: #065f46;
}

.tool-card-cta.cyan {
    color: #0e7490;
}

.tool-card-cta.rose {
    color: #be123c;
}

.tool-card-cta.lime {
    color: #4d7c0f;
}

/* ── Tool page footer ── */
.tool-page-footer {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 1.25rem 0;
}

.tool-page-footer-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

.tool-page-footer-title span {
    color: #111827;
    font-weight: 700;
}

.site-global-footer {
    background: #111827;
    color: #9ca3af;
    padding: 3.5rem 0 1.5rem;
    margin-top: auto;
}

.site-footer-inner {
    width: 100%;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .site-footer-grid {
        grid-template-columns: 1fr 2fr 1fr;
        gap: 3rem;
    }
}

.site-footer-col {
    min-width: 0;
}

.site-footer-brand-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}


.site-footer-brand-name {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

.site-footer-tagline {
    color: #9ca3af;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 32ch;
}

.site-footer-heading {
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.site-footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.site-footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 2rem;
}

.site-footer-link {
    color: #9ca3af;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s, transform 0.15s;
}

.site-footer-link:hover {
    color: #ffffff;
    transform: translateX(2px);
}

/* Social media icons */
.site-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.site-social-link {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s;
}

.site-social-link svg {
    width: 18px;
    height: 18px;
}

.site-social-link:hover {
    color: #ffffff;
    background: #1d4ed8;
    border-color: #1d4ed8;
    transform: translateY(-2px);
}

/* Bottom bar */
.site-footer-bottom {
    border-top: 1px solid #1f2937;
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    color: #6b7280;
    font-size: 0.75rem;
}

.site-footer-bottom-links {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.site-footer-bottom-links a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer-bottom-links a:hover {
    color: #ffffff;
}

@media (min-width: 640px) {
    .site-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* Scrollbar */
textarea::-webkit-scrollbar {
    width: 8px;
}

textarea::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

button {
    transition: all 0.2s ease-in-out;
}

/* ── Back-to-top button ── */
#back-to-top {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover {
    background: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 78, 216, 0.45);
}

#back-to-top svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   Calculadora de Horas — page-specific styles
   (migrated from the deleted css/horas.css)
═══════════════════════════════════════════════════════ */

/* ── Tab panes ── */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* ── Main tab buttons ── */
.tabs,
.flex.border-b.overflow-x-auto {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    overflow-x: auto;
    background: rgba(249, 250, 251, .8);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.tabs::-webkit-scrollbar,
.flex.border-b.overflow-x-auto::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.tab-btn {
    position: relative;
    flex-shrink: 0;
    padding: .875rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #374151;
}

.tab-btn.active {
    color: #2563eb;
    font-weight: 700;
    border-bottom-color: #2563eb;
}

/* ── Card wrapper ── */
.calc-card {
    background: #fff;
    border-radius: 1.25rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.tab-content {
    padding: 1.25rem;
}

/* ── History panel custom classes (used by JS) ── */
/* Classes: .hp-count, .hp-list, .hp-footer, .hp-footer-text, .hp-clear, .hp-close */

.hp-item {
    padding: .875rem 1rem;
    border-bottom: 1px solid #f9fafb;
}

.hp-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}

.hp-item-label {
    font-size: .6875rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hp-item-result {
    font-size: .9375rem;
    font-weight: 700;
    color: #1f2937;
}

.hp-item-sub {
    font-size: .75rem;
    color: #6b7280;
    margin-top: .2rem;
}

.hp-item-time {
    font-size: .6875rem;
    color: #d1d5db;
    margin-top: .25rem;
}

/* ── History panel open/close ── */
/* Handled by Tailwind utilities (translate-x-full, translate-x-0, hidden) */
/* ── Keypad outer container ── */
.keypad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: .875rem;
    overflow: hidden;
}

@media(max-width:640px) {
    .keypad-grid {
        grid-template-columns: 1fr;
    }
}

.keypad-outer {
    padding: 0;
    background: #111827;
}

/* ── Keypad display (dark theme) ── */
.keypad-display {
    background: #111827;
    padding: 1rem 1.25rem 1rem;
    margin-bottom: 0;
    min-height: 6rem;
    position: relative;
}

.keypad-display-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .25rem;
    min-height: 1.5rem;
}

.kp-op-accum {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.kp-op-badge {
    font-size: .875rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: .375rem;
    background: rgba(255, 255, 255, .15);
    color: #93c5fd;
}

.keypad-accum {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .45);
    font-family: monospace;
}

.kp-format-label {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .35);
    letter-spacing: .1em;
}

.keypad-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #4ade80;
    font-family: monospace;
    letter-spacing: .05em;
    margin: 0;
    line-height: 1.15;
}

.keypad-value-sub {
    font-size: .75rem;
    color: rgba(255, 255, 255, .4);
    margin: .3rem 0 0;
    font-family: monospace;
}

/* ── Keypad buttons (dark theme) ── */
.keypad-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    padding: .75rem;
    background: #111827;
}

.kp-hint {
    font-size: .6875rem;
    color: rgba(255, 255, 255, .3);
    margin: 0 .75rem .75rem;
    text-align: center;
    background: #111827;
}

.kp-btn {
    border: none;
    border-radius: .5rem;
    padding: .875rem .5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s;
    background: #1e2a3a;
    color: #cbd5e1;
}

.kp-btn:hover {
    background: #243448;
    transform: translateY(-1px);
}

.kp-btn:active {
    transform: translateY(0);
    opacity: .8;
}

.kp-btn.clear {
    background: #7f1d1d;
    color: #fca5a5;
}

.kp-btn.clear:hover {
    background: #991b1b;
}

.kp-btn.back {
    background: #1e2a3a;
    color: #7dd3fc;
    font-size: 1.125rem;
}

.kp-btn.back:hover {
    background: #243448;
}

.kp-btn.minus {
    background: #1e3a5f;
    color: #93c5fd;
    font-size: 1.25rem;
}

.kp-btn.minus:hover {
    background: #1e40af;
}

.kp-btn.plus {
    background: #1e3a5f;
    color: #93c5fd;
    font-size: 1.25rem;
}

.kp-btn.plus:hover {
    background: #1e40af;
}

.kp-btn.colon {
    background: #1e2a3a;
    color: #94a3b8;
    font-size: .9375rem;
}

.kp-btn.colon:hover {
    background: #243448;
}

.kp-btn.equals {
    background: #2563eb;
    color: #fff;
    font-size: 1.625rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kp-btn.equals:hover {
    background: #1d4ed8;
}

.kp-btn.span2 {
    grid-column: span 2;
}

/* ── Keypad operation lines ── */
.kp-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: .375rem;
    margin-bottom: .25rem;
    background: #f8faff;
}

.kp-line.kp-result {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
    border-radius: .25rem .375rem .375rem .25rem;
}

.kp-line.kp-start {
    background: #f9fafb;
}

.kp-line-op {
    font-size: .875rem;
    font-weight: 800;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.kp-line-op.plus {
    color: #059669;
}

.kp-line-op.minus {
    color: #dc2626;
}

.kp-line-op.equals {
    color: #2563eb;
}

.kp-line-op.start {
    color: #9ca3af;
    font-size: .5rem;
}

.kp-line-val {
    font-family: monospace;
    font-size: .875rem;
    font-weight: 700;
    color: #1f2937;
}

.kp-line.kp-result .kp-line-val {
    color: #1d4ed8;
    font-size: .9375rem;
}

/* ── Keypad right panel ── */
.keypad-history {
    border-left: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    background: #fff;
}

.keypad-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    background: #f9fafb;
}

.keypad-history-title {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 700;
    color: #6b7280;
}

.keypad-history-clear {
    font-size: .6875rem;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.keypad-history-clear:hover {
    color: #ef4444;
}

.keypad-history-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
    min-height: 8rem;
}

.keypad-empty {
    text-align: center;
    padding: 1.5rem 1rem;
}

.keypad-empty .icon {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

.keypad-empty-text {
    font-size: .8125rem;
    font-weight: 600;
    color: #9ca3af;
}

.keypad-empty-sub {
    font-size: .6875rem;
    color: #d1d5db;
    margin-top: .2rem;
}

.keypad-totals {
    padding: .75rem;
    border-top: 1px solid #f3f4f6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.keypad-total-box {
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.keypad-total-box.gray {
    background: #f3f4f6;
}

.keypad-total-box.blue {
    background: #eff6ff;
}

.keypad-total-label {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.keypad-total-label.gray {
    color: #9ca3af;
}

.keypad-total-label.blue {
    color: #3b82f6;
}

.keypad-total-value {
    font-size: .9375rem;
    font-weight: 800;
    margin-top: .1rem;
    font-family: monospace;
}

.keypad-total-value.gray {
    color: #374151;
}

.keypad-total-value.blue {
    color: #2563eb;
}

/* ── Jornada / Horas Trabalhadas ── */
.jornada-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: .75rem;
    padding: .875rem 1rem;
}

.jornada-box-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .625rem;
}

.jornada-inputs {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.jornada-label {
    font-size: .8125rem;
    color: #374151;
    font-weight: 600;
}

.jornada-input {
    width: 3.5rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .4rem .5rem;
    text-align: center;
    font-size: .9375rem;
    font-weight: 700;
    background: #fff;
}

.jornada-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.jornada-sep {
    font-size: .8125rem;
    color: #9ca3af;
    font-weight: 600;
}

.days-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.day-row {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .75rem 1rem;
}

.day-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .625rem;
}

.day-row-num {
    font-size: .75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.day-row-remove {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

.day-row-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem;
}

@media(max-width:480px) {
    .day-row-fields {
        grid-template-columns: 1fr 1fr;
    }
}

.day-result-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed #e5e7eb;
    font-size: .75rem;
    color: #6b7280;
}

.add-day-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    border: 1.5px dashed #d1d5db;
    border-radius: .75rem;
    background: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: #6b7280;
    transition: all .15s;
}

.add-day-btn:hover {
    border-color: #3b82f6;
    color: #2563eb;
    background: #eff6ff;
}

/* ── Horas Extras ── */
.extra-percent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.extra-pct-btn {
    border: 2px solid #e5e7eb;
    border-radius: .75rem;
    padding: .625rem .5rem;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    background: #f9fafb;
    color: #6b7280;
    transition: all .15s;
}

.extra-pct-btn:hover {
    border-color: #93c5fd;
    color: #2563eb;
    background: #eff6ff;
}

.extra-pct-btn.active {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    border: 1.5px solid #e5e7eb;
    border-radius: .75rem;
    cursor: pointer;
    transition: border-color .15s;
}

.checkbox-label:hover {
    border-color: #93c5fd;
}

.checkbox-label input[type="checkbox"] {
    margin-top: .175rem;
    accent-color: #2563eb;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.checkbox-text-main {
    font-size: .875rem;
    font-weight: 600;
    color: #1f2937;
}

.checkbox-text-sub {
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .1rem;
}

/* ── Somar rows ── */
.somar-rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.somar-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.somar-sign-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    border: 2px solid;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.somar-sign-btn.plus {
    border-color: #059669;
    background: #f0fdf4;
    color: #059669;
}

.somar-sign-btn.minus {
    border-color: #dc2626;
    background: #fef2f2;
    color: #dc2626;
}

.somar-sign-btn:hover {
    filter: brightness(.95);
}

.somar-inputs {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: .75rem;
    padding: .5rem .75rem;
    background: #fff;
    transition: border-color .15s;
}

.somar-inputs:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.somar-input-field {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: .9375rem;
    font-weight: 700;
    border: none;
    background: none;
    color: #1f2937;
}

.somar-input-field:focus {
    outline: none;
}

.somar-sep-label {
    font-size: .6875rem;
    font-weight: 700;
    color: #d1d5db;
    flex-shrink: 0;
}

.somar-remove {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.add-line-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1.5px dashed #d1d5db;
    border-radius: .75rem;
    background: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: #6b7280;
    transition: all .15s;
}

.add-line-btn:hover {
    border-color: #3b82f6;
    color: #2563eb;
    background: #eff6ff;
}

/* ── Converter ── */
.conv-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

@media(max-width:480px) {
    .conv-mode-grid {
        grid-template-columns: 1fr;
    }
}

.conv-mode-btn {
    padding: .625rem .75rem;
    border-radius: .625rem;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    font-size: .8125rem;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}

.conv-mode-btn p {
    margin: 0;
}

.conv-mode-btn .mode-title {
    font-size: .8125rem;
    font-weight: 700;
}

.conv-mode-btn .mode-example {
    font-size: .6875rem;
    font-family: monospace;
    color: #9ca3af;
    margin-top: .15rem;
}

.conv-mode-btn.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.conv-mode-btn.active .mode-example {
    color: #93c5fd;
}

.conv-mode-btn:hover:not(.active) {
    border-color: #93c5fd;
    color: #374151;
}

/* ── Common form elements ── */
.space-y-5>*+* {
    margin-top: 1.25rem;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.form-label {
    font-size: .6875rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.form-input {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: .625rem;
    padding: .625rem .875rem;
    font-size: .9375rem;
    background: #fff;
    color: #1f2937;
    transition: border-color .15s;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.form-input.large {
    padding: .75rem 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.form-input.center {
    text-align: center;
}

.form-input.input-rounded {
    border-radius: .75rem;
}

.input-wrapper {
    position: relative;
}

.input-wrapper .prefix {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .875rem;
    font-weight: 600;
    color: #9ca3af;
    pointer-events: none;
}

.input-wrapper .suffix {
    position: absolute;
    right: .875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .875rem;
    font-weight: 600;
    color: #9ca3af;
    pointer-events: none;
}

.has-prefix {
    padding-left: 2.5rem;
}

.has-suffix {
    padding-right: 2.75rem;
}

.btn-row {
    display: flex;
    gap: .5rem;
}

.btn {
    border: none;
    border-radius: .75rem;
    padding: .75rem 1.25rem;
    font-size: .9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}

.btn-primary {
    background: #2563eb;
    color: #fff;
}

.btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: #f3f4f6;
    color: #6b7280;
}

.btn-secondary:hover {
    background: #e5e7eb;
}

.flex-1 {
    flex: 1;
}

.error-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: .625rem;
    padding: .625rem .875rem;
    font-size: .875rem;
    color: #dc2626;
    font-weight: 500;
}

/* ── Result cards ── */
.result-card {
    border-radius: 1rem;
    overflow: hidden;
    border: 2px solid #bfdbfe;
    margin-top: 1.25rem;
}

.result-header-blue {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    padding: 1.25rem 1.5rem;
}

.result-header-green {
    background: linear-gradient(135deg, #059669, #047857);
    padding: 1.25rem 1.5rem;
}

.result-header-orange {
    background: linear-gradient(135deg, #d97706, #b45309);
    padding: 1.25rem 1.5rem;
}

.result-label-top {
    font-size: .6875rem;
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem;
}

.result-value-main {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    font-family: monospace;
    letter-spacing: .025em;
}

.result-value-sub {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .7);
    margin-top: .3rem;
}

.result-body {
    background: #f8faff;
    padding: 1rem 1.25rem;
}

.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: .875rem;
}

@media(max-width:420px) {
    .result-grid {
        grid-template-columns: 1fr;
    }
}

.result-stat {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .625rem;
    padding: .5rem .75rem;
}

.result-stat-label {
    font-size: .625rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.result-stat-val {
    font-size: .9375rem;
    font-weight: 800;
    color: #1f2937;
    margin-top: .1rem;
    font-family: monospace;
}

.result-stat-val.green {
    color: #059669;
}

.result-stat-val.red {
    color: #dc2626;
}

.result-stat-val.blue {
    color: #2563eb;
}

.steps-section {
    margin-top: .75rem;
    border-top: 1px solid #e5e7eb;
    padding-top: .75rem;
}

.steps-title {
    font-size: .625rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .5rem;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.step-row {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-size: .8125rem;
}

.step-num {
    width: 1.25rem;
    height: 1.25rem;
    background: #dbeafe;
    color: #2563eb;
    border-radius: 50%;
    font-size: .625rem;
    font-weight: 700;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}

.step-text {
    font-family: monospace;
    color: #1e3a5f;
    line-height: 1.5;
}

/* ── CLT cards ── */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media(max-width:640px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.clt-card {
    background: #fff;
    border-radius: 1rem;
    border: 1.5px solid #e5e7eb;
    padding: 1.25rem;
    text-align: center;
}

.clt-card.blue {
    border-color: #bfdbfe;
    background: #f0f9ff;
}

.clt-card.orange {
    border-color: #fed7aa;
    background: #fff7ed;
}

.clt-card.purple {
    border-color: #e9d5ff;
    background: #faf5ff;
}

.clt-card.green {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.clt-value {
    font-size: 1.75rem;
    font-weight: 800;
}

.clt-value.blue {
    color: #2563eb;
}

.clt-value.orange {
    color: #ea580c;
}

.clt-value.purple {
    color: #7c3aed;
}

.clt-value.green {
    color: #059669;
}

.clt-title {
    font-size: .875rem;
    font-weight: 600;
    color: #374151;
    margin: .25rem 0 .25rem;
}

.clt-sub {
    font-size: .75rem;
    font-weight: 600;
}

.clt-sub.blue {
    color: #3b82f6;
}

.clt-sub.orange {
    color: #f97316;
}

.clt-sub.purple {
    color: #8b5cf6;
}

.clt-sub.green {
    color: #10b981;
}

/* ── Content sections ── */
.section {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.section-sm {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .875rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media(max-width:640px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.content-card {
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

/* ── Conv table ── */
.conv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.conv-table th {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    padding: .625rem .875rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.conv-table td {
    padding: .625rem .875rem;
    border-bottom: 1px solid #f3f4f6;
}

.mono-blue {
    font-family: monospace;
    font-weight: 700;
    color: #2563eb;
}

.mono-gray {
    font-family: monospace;
    font-weight: 700;
    color: #374151;
}

.overflow-x-auto {
    overflow-x: auto;
}

@media(max-width:640px) {
    .hidden-sm {
        display: none;
    }
}

/* ── Accordion / FAQ ── */
.accordion-item {
    border: 1px solid #f3f4f6;
    border-radius: .875rem;
    overflow: hidden;
    background: #fff;
}

.accordion-btn {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    list-style: none;
}

.accordion-btn::-webkit-details-marker {
    display: none;
}

.accordion-btn:hover {
    background: #fafafa;
}

.q-letter {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.q-text {
    flex: 1;
    font-size: .9375rem;
    font-weight: 600;
    color: #1f2937;
}

.chevron {
    color: #9ca3af;
    transition: transform .2s;
    flex-shrink: 0;
}

details[open] .chevron {
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0 1.25rem 1rem 3.25rem;
}

/* ── Float history button ── */
.float-history {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    transition: all .2s;
    color: #fff;
}

.float-history.blue {
    background: #2563eb;
}

.float-history:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.float-badge {
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    background: #ef4444;
    color: #fff;
    border-radius: 2rem;
    padding: .1rem .4rem;
    font-size: .625rem;
    font-weight: 700;
    min-width: 1rem;
    text-align: center;
}

/* ── Prose ── */
.prose-sm p {
    font-size: .9375rem;
    color: #4b5563;
    margin-bottom: .875rem;
    line-height: 1.7;
}

.prose-sm a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
}

.prose-sm a:hover {
    color: #1d4ed8;
}

/* ── Breadcrumb ── */
.site-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.45rem 0;
}

.site-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
}

.site-breadcrumb-list li a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}

.site-breadcrumb-list li a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.site-breadcrumb-list li[aria-current="page"],
.site-breadcrumb-list li span[aria-current="page"] {
    color: #111827;
    font-weight: 600;
}

.site-breadcrumb-sep {
    color: #d1d5db;
    font-size: 0.875rem;
    line-height: 1;
    user-select: none;
}