:root {
    --bg-color: #0f172a;
    --card-bg: rgba(30, 41, 59, 0.7);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-color: #38bdf8;
    --accent-glow: rgba(56, 189, 248, 0.3);
    --input-bg: rgba(15, 23, 42, 0.6);
    --border-color: rgba(148, 163, 184, 0.2);
    --font-family: 'Outfit', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 20px;
    position: relative;
    /* display: flex; override for sidebar */
}

.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 40px);
    width: 100%;
}

.background-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

.calculator-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    width: 100%;
    max-width: 500px;
    /* Ancho consistente con IVA */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.6s ease-out;
}

header {
    text-align: center;
    margin-bottom: 2rem;
}

header h1 {
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.input-wrapper:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.input-wrapper.readonly {
    background: rgba(15, 23, 42, 0.3);
    border-color: transparent;
}

.currency-symbol {
    padding-left: 1rem;
    color: var(--text-secondary);
    font-weight: 300;
}

input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 1.25rem;
    padding: 1rem;
    outline: none;
    text-align: right;
    font-weight: 600;
}

/* Specific styling for Boleta inputs based on their IDs if needed, 
   but general input style covers it. 
   We will override specific colors inline or via helper classes if requested,
   but user said "similar a IVA", so maybe keeping it uniform is better.
   Wait, user liked the specialized colors in previous step (green for liquid, red for retention).
   I will add helper classes for those.
*/

.text-success {
    color: #4ade80 !important;
}

.text-danger {
    color: #f87171 !important;
}

/* Year Selector Specifics */
.year-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.year-input {
    width: 100px;
    text-align: center;
    padding: 0.5rem;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
}

input::placeholder {
    color: rgba(148, 163, 184, 0.4);
}

.btn-reset {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--accent-color), #0ea5e9);
    border: none;
    border-radius: 12px;
    color: white;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 1rem;
}

.btn-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px var(--accent-glow);
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@media (max-width: 480px) {
    .calculator-card {
        padding: 1.5rem;
        border-radius: 20px;
    }
}