*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Roboto',sans-serif;background:#f4f4f4;padding:10px;color:#333;}
.container{position:relative;width:100%;max-width:1200px;margin:0 auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.1);}
.logo{display:block;margin:0 auto 10px;max-width:180px;}
h1{text-align:center;margin-bottom:20px;color:#1565c0;}
.user-menu-container{position:absolute;top:15px;right:20px;z-index:110;}
.user-menu-btn{background-color:#f1f1f1;border:1px solid #ddd;padding:6px 12px;border-radius:16px;cursor:pointer;display:flex;align-items:center;font-size:14px;font-weight:500;color:#333;transition:background-color 0.2s ease;}
.user-menu-btn:hover{background-color:#e9e9e9;}
.user-menu-btn .menu-arrow{width:20px;height:20px;fill:#333;margin-left:4px;transition:transform 0.2s ease-out;}
.user-menu-dropdown{display:none;position:absolute;top:100%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);min-width:200px;overflow:hidden;padding:5px 0;}
.user-menu-dropdown.show{display:block;}
.user-menu-container.open .user-menu-btn .menu-arrow{transform:rotate(180deg);}
.user-menu-dropdown a{display:block;padding:10px 15px;color:#333;text-decoration:none;font-size:15px;transition:background-color 0.2s ease;}
.user-menu-dropdown a:hover{background-color:#f5f5f5;color:#1565c0;}
.user-menu-dropdown a.admin-link{background-color:#e3f2fd;color:#1565c0;font-weight:500;}
.user-menu-dropdown a.admin-link:hover{background-color:#cce7ff;}
.user-menu-dropdown .menu-separator{height:1px;background-color:#eee;margin:5px 0;}
.row-container{display:flex;flex-wrap:wrap;gap:15px;align-items:flex-end;margin-bottom:15px;}
.input-group{display:flex;flex-direction:column;margin-bottom:10px;flex:1 1 200px;}
.input-group label{margin-bottom:5px;font-weight:500;}
.input-group label[for="altura"]::after{content:" (mín. 1)";}
input[type="number"],input[type="text"],input[type="email"],input[type="password"],select,textarea{width:100%;padding:8px;font-size:16px;border:1px solid #ccc;border-radius:4px;transition:border-color 0.3s ease;font-family:'Roboto',sans-serif;}
input[type="number"]:focus,input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,select:focus,textarea:focus{border-color:#1565c0;outline:none;}
textarea{resize:vertical;min-height:80px;}
.btn-calcular{padding:10px 20px;font-size:18px;font-weight:bold;background-color:#1565c0;color:white;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s ease,transform 0.2s ease,-webkit-transform 0.2s ease;margin-top:10px;height:40px;flex-shrink:0;}
.btn-calcular:hover{background-color:#0d47a1;transform:scale(1.02);}
#btnCalcular{display:none;}
.actions-container{margin-top:20px;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.actions-container button{padding:10px 20px;font-size:18px;border:none;border-radius:4px;color:white;cursor:pointer;transition:background-color 0.3s ease,transform 0.2s ease,-webkit-transform 0.2s ease;}
.actions-container button:disabled{background-color:#9e9e9e;cursor:not-allowed;}
.btn-export{background-color:#1565c0;}
.btn-export:hover:not(:disabled){background-color:#0d47a1;}
.btn-presupuesto{background-color:#43a047;}
.btn-presupuesto:hover:not(:disabled){background-color:#2e7d32;}
.checkboxes{margin-bottom:15px;font-size:15px;display:flex;flex-wrap:wrap;gap:15px;align-items:center;padding:10px;background-color:#e3f2fd;border-radius:4px;}
.checkboxes label{cursor:pointer;white-space:nowrap;}
.checkboxes .options-right{margin-left:auto;display:flex;gap:15px;align-items:center;}
.checkboxes label.opcion-extra{font-weight:500;padding:5px 10px;background-color:#e0e0e0;border-radius:12px;}
#pasoPeatonOptionsContainer{display:flex;gap:10px;align-items:center;}
#pasoPeatonOptionsContainer label{font-size:14px;}
#pasoPeatonOptionsContainer select{padding:4px;font-size:14px;}
.main-controls{margin-bottom:15px;}
#shape-options-container{background-color:#eef4fb;padding:15px;border-radius:6px;border:1px solid #c9deff;margin-bottom:15px;}
.shape-option-group .input-group{max-width:300px;}
#tramos-builder-container{display:flex;flex-direction:column;gap:12px;}
.tramo-group{background-color:#fff;border:1px solid #ddd;border-radius:5px;padding:12px 15px;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.tramo-group .input-group{flex-basis:100%;}
.tramo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0;cursor:pointer;gap:10px;}
.tramo-header-left{display:flex;align-items:center;gap:15px;flex-wrap:wrap;}
.tramo-header h4{display:flex;align-items:center;color:#0d47a1;margin:0;font-size:18px;}
.tramo-header h4::before{content:'▼';font-size:12px;margin-right:8px;transition:transform 0.2s ease-out;}
.tramo-group.collapsed .tramo-header h4::before{transform:rotate(-90deg);}
.tramo-content{max-height:2000px;transition:max-height 0.3s ease-in-out,opacity 0.2s ease-in-out,padding 0.3s ease-in-out,margin 0.3s ease-in-out;overflow:hidden;opacity:1;border-top:1px solid #eee;margin-top:12px;padding-top:15px;}
.tramo-group.collapsed .tramo-content{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-top:0;border-top:none;}
.tramo-row{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
.tramo-row .input-group{margin-bottom:0;}
.tramo-length-feedback{font-size:18px;font-weight:500;color:#1565c0;background-color:#e3f2fd;padding:4px 8px;border-radius:4px;white-space:nowrap;}
.tramo-length-feedback strong{font-weight:500;}
.remove-tramo-btn{background-color:#ef5350;color:white;border:none;border-radius:50%;width:24px;height:24px;font-size:20px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;padding:0;}
.remove-tramo-btn:hover{background-color:#d32f2f;}
.add-tramo-wrapper{text-align:center;margin-top:15px;padding-top:15px;border-top:1px dashed #c9deff;}
#addTramoBtn{background-color:#4caf50;color:white;border:none;padding:8px 16px;border-radius:4px;font-weight:500;cursor:pointer;}
#addTramoBtn:hover{background-color:#388e3c;}
.tramo-modulos-container{margin-top:15px;text-align:center;background-color:#f9f9f9;padding:12px;border-radius:4px;}
.tramo-modulos-container h3{margin-bottom:10px;color:#1565c0;font-size:16px;}
.tramo-modulos-container table{margin:10px auto;border-collapse:collapse;width:100%;}
.tramo-modulos-container th,.tramo-modulos-container td{border:1px solid #ccc;padding:8px 12px;text-align:center;}
.tramo-modulos-container th{background-color:#90caf9;color:#333;font-size:14px;}
.tramo-modulos-container td label{display:none;}
.tramo-modulos-container .quantity-control{display:flex;align-items:center;justify-content:center;}
.tramo-modulos-container .quantity-btn{display:none;}
.tramo-modulos-container .modulo-input{width:70px;text-align:center;padding:5px;border-radius:3px;border:1px solid #ccc;}
#parts-container{position:relative;border:1px solid #ddd;border-radius:6px;padding:15px;background:#fafafa;margin-top:20px;}
#placementControls{background-color:#f9f9f9;padding:15px;border-radius:4px;margin-bottom:20px;display:flex;align-items:center;gap:15px;flex-wrap:wrap;}
#placementControls label{font-weight:500;color:#1565c0;}
#placementControls select{flex-grow:1;max-width:300px;}
.piezas h3{margin-bottom:15px;color:#1565c0;}
.piezas table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px;}
.piezas th,.piezas td{border:1px solid #ccc;padding:10px;text-align:center;vertical-align:middle;}
.piezas th{background-color:#1565c0;color:#fff;font-weight:500;}
.piezas tr:nth-child(even){background-color:#f2f2f2;}
.piezas tr:hover{background-color:#e3f2fd;}
.piezas tbody tr.row-selected{background-color:#fff9c4 !important;font-weight:500;}
.piezas tfoot td{font-weight:bold;background-color:#e0e0e0;}
.piezas .col-peso-unit{display:none;}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:100;display:flex;justify-content:center;align-items:center;}
.modal-content{background:#fff;padding:25px;border-radius:8px;width:90%;max-width:500px;box-shadow:0 5px 15px rgba(0,0,0,0.3);}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
.modal-header h2{color:#1565c0;}
.modal-close{font-size:24px;font-weight:bold;cursor:pointer;border:none;background:none;}
.modal-body .input-group{margin-bottom:15px;}
.modal-body p{font-size:15px;line-height:1.5;margin-bottom:15px;}
#errorStatusMessage{font-size:14px;margin-top:10px;text-align:left;font-weight:500;}
.modal-footer{text-align:right;margin-top:20px;}
.modal-footer button{padding:10px 20px;}
.modal-footer .btn-cancel{background-color:#757577;}
.modal-footer .btn-cancel:hover{background-color:#616161;}
.hidden{display:none !important;}
#status-message{font-size:14px;margin-top:10px;text-align:left;font-weight:500;}
#diagrama3dContainer{width:100%;height:550px;border:1px solid #b0bec5;margin-top:20px;position:relative;background-color:#eceff1;border-radius:4px;overflow:hidden;cursor:default;}
#diagrama3dContainer.placement-active{cursor:crosshair !important;}
#diagrama3d{width:100%;height:100%;display:block;}
#editor3d-controls{position:absolute;bottom:80px;right:10px;z-index:10;display:flex;align-items:center;}
.btn-eliminar-3d{padding:8px 16px;font-size:14px;background-color:#d32f2f;color:white;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s ease;}
.btn-eliminar-3d:hover{background-color:#b71c1c;}
.btn-undo-3d{padding:8px;background-color:#ff9800;color:white;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s ease;margin-right:10px;display:flex;align-items:center;justify-content:center;}
.btn-undo-3d:hover{background-color:#f57c00;}
.btn-undo-3d:disabled{background-color:#9e9e9e;cursor:not-allowed;}
.btn-undo-3d svg{width:18px;height:18px;}
#columnLabelsContainer{position:absolute;bottom:10px;left:10px;right:10px;background:transparent;padding:8px;border-radius:4px;border:none;z-index:10;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;min-height:60px;box-shadow:none;}
.column-label-item{border:1px solid rgba(176,190,197,0.8);padding:5px 8px;text-align:center;background:rgba(255,255,255,0.85);border-radius:3px;min-width:75px;flex-shrink:0;cursor:move;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:14px;transition:background-color 0.2s ease,border-color 0.2s ease,opacity 0.2s ease;box-shadow:0 1px 3px rgba(0,0,0,0.12);}
.column-label-item:hover{background-color:rgba(245,245,245,0.95);}
.column-label-item span{display:block;margin-bottom:4px;font-weight:500;color:#37474f;}
.column-label-item label{font-size:12px;cursor:pointer;display:flex;align-items:center;color:#546e7a;}
.column-label-item input[type="checkbox"]{margin-right:4px;cursor:pointer;vertical-align:middle;}
.dragging{opacity:0.4 !important;background-color:#e3f2fd !important;border-color:#90caf9 !important;}
.drag-over{border-left:3px solid #1565c0 !important;background-color:#e3f2fd !important;}
.fullscreen-btn{position:absolute;top:10px;right:10px;z-index:20;background-color:rgba(255,255,255,0.8);border:1px solid #ccc;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.3s ease,transform 0.2s ease,-webkit-transform 0.2s ease;}
.fullscreen-btn:hover{background-color:#fff;-webkit-transform:scale(1.1);transform:scale(1.1);}
.fullscreen-btn svg{width:20px;height:20px;fill:#333;}
#diagrama3dContainer:fullscreen,#parts-container:fullscreen{width:100vw;height:100vh;padding:20px;overflow-y:auto;background:#fafafa;}
#diagrama3dContainer:fullscreen{background:#eceff1;}
#fullscreen-controls-panel{position:absolute;top:0;left:0;width:320px;height:100%;background-color:rgba(250,250,250,0.95);border-right:1px solid #ddd;padding:20px;box-shadow:2px 0 10px rgba(0,0,0,0.1);-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:transform 0.3s ease-in-out,-webkit-transform 0.3s ease-in-out;z-index:25;overflow-y:auto;}
#diagrama3dContainer:fullscreen #fullscreen-controls-panel{-webkit-transform:translateX(0);transform:translateX(0);}
#fullscreen-controls-panel.closed{-webkit-transform:translateX(-100%) !important;transform:translateX(-100%) !important;}
#toggle-panel-btn{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:30;width:25px;height:60px;background-color:rgba(250,250,250,0.95);border:1px solid #ddd;border-left:none;border-radius:0 8px 8px 0;cursor:pointer;display:none;justify-content:center;align-items:center;transition:left 0.3s ease-in-out;}
#diagrama3dContainer:fullscreen #toggle-panel-btn{display:flex;left:320px;}
#fullscreen-controls-panel.closed + #toggle-panel-btn{left:0;}
#toggle-panel-btn svg{width:18px;height:18px;fill:#333;transition:transform 0.3s ease,-webkit-transform 0.3s ease;}
#fullscreen-controls-panel.closed + #toggle-panel-btn svg{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
@media (max-width:768px){.user-menu-container{top:10px;right:10px;}
h1{font-size:24px;margin-top:40px;}
.tramo-modulos-container table,.tramo-modulos-container tbody,.tramo-modulos-container tr,.tramo-modulos-container th{display:block;}
.tramo-modulos-container thead{display:none;}
.tramo-modulos-container tr{display:flex;flex-wrap:wrap;justify-content:space-around;gap:10px;}
.tramo-modulos-container td{flex:1 1 45%;max-width:calc(50% - 10px);border:1px solid #ccc;border-radius:4px;padding:10px;background-color:#fff;display:flex;flex-direction:column;align-items:center;}
.tramo-modulos-container td label{display:block;font-weight:500;margin-bottom:8px;}
.tramo-modulos-container .quantity-btn{display:inline-block;background-color:#e0e0e0;border:1px solid #ccc;border-radius:50%;cursor:pointer;font-size:20px;font-weight:bold;width:32px;height:32px;line-height:30px;text-align:center;user-select:none;}
.tramo-modulos-container .quantity-btn:hover{background-color:#d0d0d0;}
.tramo-modulos-container .modulo-input{width:50px;border:none;text-align:center;font-size:16px;}
.tramo-modulos-container input[type="number"]{-moz-appearance:textfield;}
.tramo-modulos-container input[type="number"]::-webkit-outer-spin-button,.tramo-modulos-container input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#tablaPiezas thead th:first-child,#tablaPiezas tbody td:first-child,#tablaPiezas tfoot td:first-child{display:none;}
#tablaPiezas tfoot td#pesoTotalGlobal{text-align:right;padding-right:10px;}
#tablaPiezas tfoot td#pesoTotalGlobal::before{content:"Total:";font-weight:bold;float:left;padding-left:10px;}
}
@media (min-width:769px){.tramo-row{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:15px;}
.tramo-row .input-group{flex:1 1 180px;margin-bottom:0;}
.tramo-row .input-group-checkbox,.tramo-row .tramo-paso-peaton-container{flex:1;padding-top:20px;margin-bottom:0;align-self:center;}
.tramo-row .tramo-paso-peaton-container{display:flex;flex-direction:column;gap:5px;}
}
.tramo-label{color:#fff;background-color:rgba(21,101,192,0.8);padding:4px 8px;border-radius:4px;font-size:16px;font-weight:bold;border:1px solid rgba(255,255,255,0.5);pointer-events:none;text-shadow:1px 1px 2px rgba(0,0,0,0.3);}
.corner-label{font-size:20px;font-weight:bold;color:#0d47a1;background-color:rgba(255,255,255,0.7);border:1px solid #0d47a1;border-radius:50%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;pointer-events:none;}
.login-body{background:#f4f4f4;display:flex;justify-content:center;align-items:center;min-height:90vh;}
.login-container{width:100%;max-width:400px;margin:0 auto;background:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.login-container h1{text-align:center;margin-bottom:20px;}
.login-container .logo{margin-bottom:20px;}
.login-container .input-group{margin-bottom:20px;}
.login-container .btn-calcular{width:100%;font-size:18px;}
.login-error{color:#d32f2f;background:#ffebee;border:1px solid #d32f2f;padding:10px;border-radius:4px;margin-bottom:15px;text-align:center;}
.logout-link{float:right;margin-top:5px;color:#1565c0;text-decoration:none;font-size:14px;}
.logout-link:hover{text-decoration:underline;}
.login-success{color:#2e7d32;background:#e8f5e9;border:1px solid #43a047;padding:10px;border-radius:4px;margin-body:15px;text-align:center;}
.login-subtext{text-align:center;margin-top:15px;color:#616161;}
.login-subtext a{color:#1565c0;font-weight:500;text-decoration:none;}
.login-subtext a:hover{text-decoration:underline;}
#listaDisenosContainer{max-height:400px;overflow-y:auto;}
.diseno-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #eee;cursor:pointer;transition:background-color 0.2s ease;}
.diseno-item:hover{background-color:#f5f5f5;}
.diseno-item-nombre{font-weight:500;color:#333;}
.diseno-item-fecha{font-size:13px;color:#757575;}