:root {
    --azul-construccion: #1a5276;
    --naranja-industrial: #e67e22;
    --gris-fondo: #f4f7f6;
    --blanco: #ffffff;
    --texto: #2c3e50;
}
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: var(--gris-fondo); display: flex; color: var(--texto); }
nav { width: 250px; background-color: var(--azul-construccion); height: 100vh; color: white; padding: 20px; position: fixed; overflow-y: auto; }
nav h1 { font-size: 1.5rem; border-bottom: 2px solid var(--naranja-industrial); padding-bottom: 10px; }
nav ul { list-style: none; padding: 0; }
nav li { padding: 15px 0; border-bottom: 1px solid #2e86c1; cursor: pointer; transition: 0.3s; }
nav li:hover { color: var(--naranja-industrial); padding-left: 10px; }
main { margin-left: 290px; padding: 40px; width: calc(100% - 290px); }
.header-proyecto { background: var(--blanco); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 30px; }
.card { background: var(--blanco); padding: 25px; border-radius: 10px; margin-bottom: 20px; border-left: 5px solid var(--naranja-industrial); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
h2 { color: var(--azul-construccion); margin-top: 0; font-size: 1.4rem; }
select, input { width: 100%; padding: 12px; margin-top: 10px; border-radius: 5px; border: 1px solid #ddd; font-size: 1rem; box-sizing: border-box; }
.btn-accion { background-color: var(--naranja-industrial); color: white; border: none; padding: 15px 40px; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 1.1rem; margin-top: 10px; width: 100%; transition: 0.3s; }
.btn-accion:hover { background-color: #d35400; transform: translateY(-2px); }
.resumen-tabla { width: 100%; border-collapse: collapse; margin-top: 20px; }
.resumen-tabla th { background-color: #f8f9fa; color: var(--azul-construccion); font-weight: bold; text-transform: uppercase; font-size: 0.85rem; }
.resumen-tabla th, .resumen-tabla td { text-align: left; padding: 15px; border-bottom: 1px solid #eee; }
.total-box { margin-top: 25px; text-align: right; padding: 20px; background: #ebf5fb; border-radius: 8px; }
.total-valor { font-size: 1.8rem; color: var(--azul-construccion); font-weight: bold; }
.historial-row:hover { background-color: #fcf3cf; }
.badge { background: #3498db; color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.8em; }
.alert-box { background-color: #f8d7da; color: #721c24; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #f5c6cb; }

/* ESTILOS DISEÑADOR 3D */
.btn-dir { width: 60px; height: 60px; background: var(--azul-construccion); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1.2rem; }
.btn-dir:hover { background-color: var(--naranja-industrial); }
#contenedor_plano { background: #2c3e50; border-radius: 8px; margin-top: 20px; overflow: hidden; display: flex; justify-content: center; }
svg { background: #1a252f; border: 2px solid #3e4f5f; cursor: crosshair; }
.panel-vano { background: #eaf2f8; padding: 15px; border-radius: 8px; margin-top: 15px; display: none; border: 1px solid #3498db; }