:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --display-bg: #1a1a1a;
}

/* This new wrapper will center the calculator on the page by default.
  It's better to do this here than with Bootstrap columns in the template,
  as it gives Kadence/Elementor full-width blocks proper control.
*/
#alicia-calculator-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem; /* Increased top/bottom padding for a gap */
    box-sizing: border-box; /* Ensure padding doesn't break layout */
}

.calculator-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1e1e1e;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    width: 100%; /* Changed from 970px to be responsive */
    max-width: 768px; /* NEW: Made calculator "smaller" (less wide) */
    height: auto; /* NEW: Removed fixed height to prevent cutoff */
    display: flex;
    flex-direction: column;
    /* margin: 0 auto; is no longer needed as the wrapper handles centering */
}

.calculator-content-row {
    flex-grow: 1;
    min-height: 0;
    display: flex; /* NEW: Make columns equal height */
    flex-wrap: wrap; /* NEW: Allow columns to wrap on mobile */
}

#calculator-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.calculator-header {
    background-color: #2a2a2a;
    color: white;
    padding: 15px 20px;
    position: relative;
}

.calculator-header .cal-header-title {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 600;
}

.header-btn {
    position: absolute;
    top: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
}

.clear-btn {
    right: 20px;
}

.calculator-display {
    background-color: var(--display-bg);
    color: #fff;
    border: 1px solid #444; 
    margin: 20px 20px 0 20px; 
    border-radius: 10px;
    font-size: 2.2rem; /* NEW: Reduced font size */
    padding: 15px; /* NEW: Reduced padding */
    text-align: right;
    min-height: 90px; /* NEW: Reduced min-height */
    font-family: 'Courier New', monospace;
    font-weight: 500;
    overflow-x: auto;
    white-space: nowrap;
}

.calculator-body {
    padding: 15px; /* NEW: Reduced padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.calc-btn {
    height: 45px; /* NEW: Adjusted button height */
    font-size: 1.4rem; /* NEW: Adjusted font size */
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #444;
    transition: all 0.2s;
    /* --- NEW: Added flex properties to center content --- */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove padding if any, to let flex do the work */
    padding: 0; 
}

.calc-btn:active {
    transform: translateY(1px);
}

.calculator-body .row {
   margin-bottom: 4px; /* NEW: Adjusted gap from 5px to 4px */
}
.calculator-body .row:last-child {
    margin-bottom: 0;
}


/* --- BUTTON COLORS --- */
#t0, #t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #tcom {
    background-color: #EBEB6D;
    color: #1e1e1e;
}
#tmas, #tmen, #tpor, #tdiv, #tdel {
    background-color: #EA6506;
    color: white;
}
#trai, #tpri, #tcal {
    background-color: #64EC64;
    color: #1e1e1e;
}

#tc{
	background-color: #DC3545;
    color: white;
}

/* --- HOVER EFFECTS (Desktop only) --- */
@media (hover: hover) and (min-width: 992px) {
    .header-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }
    .calc-btn:hover {
        transform: translateY(-2px);
    }
    #t0:hover, #t1:hover, #t2:hover, #t3:hover, #t4:hover, #t5:hover, #t6:hover, #t7:hover, #t8:hover, #t9:hover, #tcom:hover {
        background-color: #d8d85a;
    }
    #tmas:hover, #tmen:hover, #tpor:hover, #tdiv:hover, #tdel:hover {
        background-color: #FF6A00;
    }
    #trai:hover, #tpri:hover, #tcal:hover {
        background-color: #52d952;
    }
    
    #tc:hover{
    	background-color: #ff0000;
    }
}

/* --- STEPS CONTAINER --- */
.steps-container {
    background-color: #1e1e1e;
    height: 100%; /* This will now work with the flex parent */
    border-left: 1px solid #444;
    padding: 20px;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

.steps-header {
    color: #f1f1f1;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #444;
}

#salida {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    flex-grow: 1;
}

.caja, .caja2, .caja3, .caja4 {
    position: absolute;
    text-align: center;
    font-family: 'kurzetstypekurzetstype';
}

.caja { color: #aaaaaa; }
.caja2 { color: #32CD32; }
.caja3 { color: #87CEEB; }
.caja4 { color: #FFD700; }

.ra { border-bottom: #f1f1f1 2px solid; }
.perror {
    text-align: center;
    padding: 2rem;
    font-size: 1.2rem;
    color: #FF5C33;
}

/* --- MOBILE VIEW FIXES --- */
/* This breakpoint (991.98px) is fine */
@media (max-width: 991.98px) {
    #alicia-calculator-wrapper {
        padding: 0; /* Use full screen width on mobile */
    }

    .calculator-container {
        border-radius: 0;
        width: 100%;
        max-width: 100%; /* Ensure it fills screen */
        height: auto; /* Revert to auto height on mobile */
        display: block; /* This stacks the columns */
    }

    .calculator-content-row {
        display: block; /* Revert to block on mobile */
    }

    #calculator-column, .calculator-body {
        display: block;
        height: auto;
    }
    .calculator-body .row {
        margin-bottom: 0.5rem;
    }
    .calc-btn {
        height: 8.5vh; /* Keep responsive height on mobile */
        min-height: 55px;
        font-size: 1.6rem;
    }
    .steps-container {
        border-left: none;
        border-top: 1px solid #444;
        min-height: 400px;
        /* This will be scrolled into view by your JS, which is correct */
    }
}