/* Estilos base para todas las calculadoras y elementos generales */

.result{display:flex;}
.icon-sili{width:20px;height:20px;margin-right:5px;}
.cost-calculator-wrapper{width:max-content;margin-top:5em;}
img.button-image{width:150px;height:150px;}
label{font-size:15px;}
.descripcion-calculadora{margin-top:5px;font-size:16px;color:#555;}
.cost-calculator-cost-dropdown{padding:6px;}
.error-message{color:red;}
.silicon-input.error{border:1px solid red;background-color:#ffe0e0;}
p.note{margin-bottom:0;}
.reference-table h4{margin:10px 0 10px;}
.reference-table{border-collapse:separate;border-spacing:0;overflow:hidden;line-height:.8em;border:2px solid #008a9c;border-radius:10px;}
.reference-table tr:last-child td{border:1px solid #ccc;}
.tooltip-icon{display:inline-block;width:15px;height:15px;background-color:#008a9c;color:white;border-radius:50%;text-align:center;line-height:15px;font-size:13px;font-weight:bold;cursor:help;margin-left:5px;vertical-align:middle;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:all .3s ease;}
.tooltip-icon:hover{background-color:#e74c3c;transform:scale(1.1);}
.campo-con-tooltip{position:relative;}
.info-wrapper{position:relative;display:inline-block;margin-left:8px;vertical-align:middle;}
.sili-info-button{background:none;border:none;cursor:pointer;padding:0;outline:none;display:inline-flex;align-items:center;}
.sili-info-icon{width:20px;height:20px;}
.sili-info-tooltip{display:none;position:absolute;top:100%;left:0;z-index:999;background:#fff;border:1px solid #C3C8D4;padding:10px 14px;font-size:14px;color:#4B5563;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1);width:240px;line-height:1.4;}
.cost-calculator-arrow{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #007bff;position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);}
.cost-calculator-value{font-weight:bold;}
.input-group-horizontal{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.input-label{width:140px;font-weight:bold;text-align:right;font-size:14px;}
.input-slider{flex:1;appearance:none;height:6px;background:#ddd;border-radius:5px;outline:none;}
.input-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:#007bff;border-radius:50%;cursor:pointer;}
.input-slider::-moz-range-thumb{width:16px;height:16px;background:#007bff;border-radius:50%;cursor:pointer;}
.input-number{width:70px;padding:5px;font-size:14px;}
.ui-widget-header{background:#008a9c !important;}
.ui-state-active{background:#0089ac !important;}
.ui-widget.ui-widget-content{margin-top:1em;}
.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-radius:10px !important;}
.cost-slider-tooltip{position:absolute !important;background:#ffffff !important;color:#333 !important;padding:1px 7px !important;border-radius:4px !important;border:2px solid #333 !important;font-size:.85em !important;white-space:nowrap !important;z-index:9999 !important;transition:opacity .3s ease;}
i.fas.fa-angle-up.sili-2{transform:rotate(135deg);font-size:x-large;}
.cost-slider-tooltip .tooltip-arrow{position:absolute !important;top:30%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid #333;border-top:6px solid transparent;left:100%;}
.ui-tooltip{background:#fff;color:#333;border:1px solid #ddd;border-radius:4px;padding:8px 12px;box-shadow:0 2px 10px rgba(0,0,0,.1);max-width:300px;font-size:14px;}
.ui-tooltip-arrow{display:none;}
.silicon-calculator{background:#dcdcdc;border-radius:8px;padding:20px;margin:20px 0;box-shadow:0 2px 10px rgba(0,0,0,.1);font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;width:450px;border:1px solid #000;}
.silicon-calculator h3{color:#2c3e50;margin-top:0;border-bottom:2px solid #3498db;padding-bottom:10px;text-align:center;}
.input-group{margin-bottom:15px;}
.input-group label{display:block;margin-bottom:5px;font-weight:600;color:#34495e;}
.input-group input,.input-group select{width:100%;padding:10px;border:1px solid #ddd;border-radius:25px;font-size:16px;}
button.silicon-block{margin:0;margin-top:1em;padding:.5em;background-color:#008a9c;border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;width:100%;height:50px;font-size:1.4em;color:#FFF;font-weight:600;font-family:inherit;transition:transform .1s ease-in-out,background-color .2s ease-out;}
button.silicon-block:hover{background:#2980b9;}
button.silicon-block:active{transform:scale(.98);}
button.silicon-return-calc{display:block;margin-top:1em;background:#008a9c;}
.silicon-return-calc{color:#fff !important;transition:all .2s linear;}
.silicon-return-calc:hover{text-decoration:underline !important;background:#2980b9;}
.results{margin-top:20px;padding:15px;background:#f8f9fa;border-radius:5px;display:none;}
.results h4{margin-top:0;color:#27ae60;}
.mortar-calc .note{font-size:.9em;color:#7f8c8d;margin-top:10px;font-style:italic;}
.slab-calc .input-description{font-size:.8em;color:#7f8c8d;margin-top:5px;}
.slab-calc .material-list{margin:10px 0;padding-left:20px;}
.slab-calc .material-list li{margin-bottom:5px;}
.input-group label{display:block;margin-bottom:5px;font-weight:600;color:#34495e;}
.silicon-input,.silicon-select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:16px;}
.silicon-results{margin-top:20px;padding:15px;background:#f8f9fa;border-radius:5px;display:none;}
.material-preview{text-align:center;margin:15px 0;padding:10px;background:#f9f9f9;border-radius:8px;border:1px solid #eee;}
.material-img{max-width:200px;height:auto;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:transform .3s ease;}
.material-img:hover{transform:scale(1.05);}
.resultado-container{display:flex;gap:20px;margin-top:15px;flex-wrap:wrap;}
.material-info{flex:1;min-width:200px;text-align:center;padding:15px;background:#f5f5f5;border-radius:8px;}
.calculos-info{flex:2;min-width:250px;}
.resultado-img{max-width:150px;height:auto;margin:10px 0;border-radius:5px;}
.bloque-imagen-container{display:none;}
.imagen-boton{display:flex;justify-content:center;margin-bottom:15px;background:#fff;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px;width:50%;margin:auto;}
.imagen-boton img{max-width:100%;height:auto;}
.block-measure{font-size:14px;font-weight:600;color:#333;background-color:#f5f5f5;padding:5px 10px;border-radius:4px;text-align:center;margin-top:5px;border:1px solid #ddd;}
#bloque-imagen-boton{max-width:150px;height:auto;display:block;}
#modal-resultados-content h3{color:#ffffff;background:#008a9c;border-radius:8px 8px 0 0;margin-top:0;margin-bottom:20px;text-align:center;font-size:1.5em;padding-bottom:10px;}
.result-item{margin-bottom:12px;font-size:16px;line-height:1.6;display:flex;justify-content:space-between;}
.result-item strong{color:#2c3e50;font-weight:600;min-width:180px;display:inline-block;align-items:center;}
#slopeGraphContainer{position:relative;width:100%;min-height:300px;margin:20px 0;overflow:visible;}
#slopeGraph{z-index:1;position:relative;z-index:1;width:100%;height:auto;display:block;}
#graphLabels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
.graph-label{position:absolute;font-size:.85rem;font-weight:bold;color:#3f51b5;white-space:nowrap;padding:.2rem .4rem;border-radius:4px;transform:translate(-50%,-50%);}
.graph-label.angle{background-color:rgba(255,255,255,.8);color:#ff5722;font-size:.75rem;border:1px solid #ff5722;padding:.2rem .5rem;border-radius:3px;}
.result-value{color:#008a9c;font-weight:bold;text-align:right;flex-grow:1;}
.sili-2{color:#008a9c;margin-right:5px;}
.result-value span{font-family:'Courier New',monospace;color:#333;}
.result-unit{color:#7f8c8d;font-size:.9em;margin-left:3px;}
.result-total{font-weight:bold;color:#27ae60;}
/* Estilos para el modal */
.modal{display:none;position:fixed;z-index:10;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4);}
#modal-resultados-content p{line-height:1em;margin-bottom:15px;}
#resultados-modal{z-index:10000;}
#resultados-modal .modal-content{position:relative;z-index:10001;}
.advertencia{background-color:#f8d7da;color:#721c24;padding:10px;border:1px solid #f5c6cb;margin-bottom:20px;font-weight:bold;}
.calc-header-modal h3{color:#fff;margin:auto;}
.calc-header-modal{background:#0089ac;text-align:center;padding:5px;font-size:1.2rem;border-radius:12px 12px 0 0;margin:-15px -11px 9px -11px;}
.modal-content{background-color:#fefefe;margin:7% auto;padding:10px;border:1px solid #888;width:50%;border-radius:8px;position:relative;}
.close-button{color:#aaa;float:right;font-size:28px;font-weight:bold;margin-top:-15px;}
.close-button:hover,.close-button:focus{color:#FF0000;text-decoration:none;cursor:pointer;}
#modal-resultados-content{background-color:#f8f9fa;padding:20px;line-height:1.4em;}
.results-section{line-height:1.4em;}
/* Estilo de dos columnas */
.cost-calculator-grid{display:flex;gap:30px;flex-wrap:wrap;width:100%;margin-top:1.5em;margin-bottom:1.5em;}
.cost-calculator-col{flex:1 1 45%;width:450px;}
.calc-header h3{color:#fff;margin-bottom:0;font-weight:100;}
.calc-header{background:#008a9c;text-align:center;padding:5px;font-size:1.2rem;border-radius:12px 12px 0 0;margin:-18px -18px 15px -18px;width:auto;position:relative;}
.cost-calculator-col.izquierda{background:#ffffff;padding:1.1rem;border-radius:12px;box-shadow:10px 10px 25px rgba(0,0,0,.1);width:100%;border:1px solid #dadada;}
.cost-calculator-col.derecha{display:flex;flex-direction:column;align-items:center;text-align:center;}
img#sistema-imagen-boton{max-width:50%;}
/* Responsive */
@media (max-width:600px){.resultado-container{flex-direction:column;}}
.cost-calculator-grid{display:flex;flex-direction:column;gap:30px;width:95%;margin:1.5em auto;}
.cost-calculator-col{width:100%;max-width:100%;flex:1 1 100%;}
@media (min-width:768px){.cost-calculator-grid{flex-direction:row;flex-wrap:wrap;justify-content:space-between;}.cost-calculator-col{width:48%;flex:1 1 45%;max-width:450px;}}
@media (max-width:768px){#modal-resultados-content{width:100%;padding:15px 20px;border-radius:6px;}.modal-content{margin:25% auto;width:95%;}.result-item{flex-direction:column;align-items:flex-start;margin-bottom:10px;display:block;text-align:left;}.result-item .result-value{text-align:left;width:100%;margin-top:4px;}.graph-label{font-size:11px;}.graph-label.angle{font-size:10px;padding:1px 4px;}.ui-widget.ui-widget-content{display:none;}}
/* Animación */
@keyframes fadeIn{from{transform:translateY(30px);opacity:0;}to{transform:translateY(0);opacity:1;}}