:root{
--calc-dates-bg:var(--white);
--calc-dates-text:var(--dark-gray);
--calc-dates-label:var(--dark-gray);
--calc-dates-toggle-bg:var(--off-white);
--calc-dates-toggle-text:var(--medium-gray);
--calc-dates-input-border:var(--light-gray);
--calc-dates-input-bg:var(--white);
--calc-dates-input-text:var(--dark-gray);
--calc-dates-result-bg:linear-gradient(135deg,var(--off-white) 0%,var(--light-gray) 100%);
--calc-dates-result-text:var(--dark-gray);
--calc-dates-highlight:var(--primary-blue);
}
[data-theme="dark"]{
--calc-dates-bg:var(--white);
--calc-dates-text:var(--dark-gray);
--calc-dates-label:var(--dark-gray);
--calc-dates-toggle-bg:var(--off-white);
--calc-dates-toggle-text:var(--medium-gray);
--calc-dates-input-border:var(--light-gray);
--calc-dates-input-bg:var(--white);
--calc-dates-input-text:var(--dark-gray);
--calc-dates-result-bg:linear-gradient(135deg,var(--off-white) 0%,var(--light-gray) 100%);
--calc-dates-result-text:var(--dark-gray);
--calc-dates-highlight:var(--primary-blue);
}
.calc-section-title{margin-bottom:25px;color:var(--calc-dates-label);}
.calc-section-icon{width:20px;height:20px;vertical-align:middle;margin-right:8px;fill:var(--primary-blue);}
.date-calculator{background:var(--calc-dates-bg);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);padding:30px;margin-bottom:30px;overflow:hidden;position:relative;max-width:550px;margin:0 auto;}
.calculator-toggle{display:flex;background:var(--calc-dates-toggle-bg);border-radius:8px;padding:4px;margin-bottom:30px;position:relative;}
.toggle-option{flex:1;text-align:center;padding:12px 20px;border-radius:6px;cursor:pointer;transition:all 0.3s ease;font-weight:500;color:var(--calc-dates-toggle-text);position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;}
.toggle-option svg{width:18px;height:18px;fill:currentColor;}
.toggle-option.active{color:#fff;background:linear-gradient(135deg,var(--primary-green) 0%,var(--primary-blue) 100%);box-shadow:0 2px 10px rgba(0,166,81,0.3);}
.calculator-section{display:none;animation:fadeIn 0.3s ease-in-out;}
.calculator-section.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.form-group{margin-bottom:20px;}
.form-label{display:block;margin-bottom:8px;font-weight:600;color:var(--calc-dates-label);font-size:14px;}
.form-input{width:100%;padding:12px 16px;border:2px solid var(--calc-dates-input-border);border-radius:8px;font-size:16px;transition:all 0.3s ease;background:var(--calc-dates-input-bg);color:var(--calc-dates-input-text);}
.form-input:focus{outline:none;border-color:var(--primary-green);box-shadow:0 0 0 3px rgba(0,166,81,0.1);}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.time-unit-selector{position:relative;display:inline-block;}
.unit-dropdown{width:100%;padding:12px 40px 12px 16px;border:2px solid var(--calc-dates-input-border);border-radius:8px;font-size:16px;background:var(--calc-dates-input-bg);color:var(--calc-dates-input-text);cursor:pointer;transition:all 0.3s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' 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 12px center;background-size:18px;}
.unit-dropdown:hover{border-color:var(--primary-green);}
.unit-dropdown:focus{outline:none;border-color:var(--primary-green);box-shadow:0 0 0 3px rgba(0,166,81,0.1);}
.unit-option{padding:10px 15px;border:2px solid var(--calc-dates-input-border);border-radius:8px;text-align:center;cursor:pointer;transition:all 0.3s ease;font-weight:500;background:var(--calc-dates-input-bg);}
.unit-option:hover{border-color:var(--primary-green);}
.unit-option.active{background:linear-gradient(135deg,var(--primary-green) 0%,var(--primary-blue) 100%);color:#fff;border-color:var(--primary-green);}
.add-time-controls{display:grid;grid-template-columns:2fr 1fr;gap:15px;align-items:end;width:100%;margin:0;box-sizing:border-box;}
.add-time-controls .form-group{margin-bottom:0;width:100%;padding:0;}
.add-time-controls .form-input,.add-time-controls .unit-dropdown{width:100%!important;min-width:0;box-sizing:border-box;margin:0;}
.time-unit-selector{display:block;width:100%;min-width:0;}
.result-container{background:var(--calc-dates-result-bg);border-radius:12px;padding:25px;margin-top:25px;text-align:center;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;}
.result-text{font-size:18px;font-weight:600;color:var(--calc-dates-result-text);margin:0;}
.result-highlight{color:var(--calc-dates-highlight);font-size:22px;}
.empty-result{color:var(--medium-gray);font-style:italic;}
.result-secondary{font-size:14px;color:var(--medium-gray);font-weight:400;margin-top:5px;}
.checkbox-container{margin:20px 0;}
.calculate-button-container{margin:25px 0;text-align:center;display:block;}
.calculate-button{background:linear-gradient(135deg,var(--primary-green) 0%,var(--primary-blue) 100%);color:white;border:none;padding:14px 28px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 15px rgba(0,166,81,0.3);}
.calculate-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,166,81,0.4);}
.calculate-button:active{transform:translateY(0);}
.calculate-button:disabled{background:linear-gradient(135deg,var(--medium-gray) 0%,var(--light-gray) 100%);cursor:not-allowed;transform:none;box-shadow:none;opacity:0.6;}
.calculate-button:disabled:hover{transform:none;box-shadow:none;}
.calculate-button svg{width:18px;height:18px;fill:currentColor;}
.btn-copiar{background:linear-gradient(135deg,var(--primary-blue) 0%,#1a73e8 100%);color:white;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 15px rgba(0,114,188,0.3);margin-top:10px;}
.btn-copiar:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,114,188,0.4);}
.btn-copiar:active{transform:translateY(0);}
.btn-copiar svg{width:16px;height:16px;stroke:currentColor;fill:none;}
@media (max-width:768px){
.date-calculator{padding:20px;margin:0 -15px 30px -15px;max-width:100%;width:100%;margin:0 auto;}
#difference-section .input-row{grid-template-columns:1fr 1fr;gap:20px;}
.input-row{grid-template-columns:1fr;gap:15px;}
.calculator-toggle{margin:0 -15px 25px -15px;border-radius:0;}
.toggle-option{padding:10px 15px;font-size:14px;}
.time-unit-selector{grid-template-columns:1fr;gap:8px;}
.add-time-controls{grid-template-columns:2fr 1fr;gap:15px;width:100%;}
.result-text{font-size:16px;}
.result-highlight{font-size:18px;}
}
@media (max-width:480px){
.form-input{font-size:16px;}
}