h2 {padding:15px;margin:0;font-size:28px;border-bottom:1px solid #CCC;}

h3 {
	padding:5px 15px;
	background:#CCC;
	margin:0;
  text-transform: uppercase;
  font-size:1.5rem;
	}

h4{font-size:1.4rem;margin:0 0 10px 0}
li {
	float:left;
	list-style-type:none;
	text-align:center;
	margin-left:0;
}

ul {
	padding: 0;
	}
body{
  font-size:1.2rem;
  font-family: "Open Sans", Arial, Sans Serif;
  margin:0;
  padding:0;
  color:#3d4850;
}

.usuario-conectado{font-size:1.1rem;margin:10px 20px;text-align:right}
.usuario-conectado .cerrar-sesion{background:#fff;padding:5px 20px 10px 20px;color:#064160;border-radius:10px;font-size:1.3rem;cursor:pointer}

#home, #usuarios{background:#064160;height: 100vh}
#home #login .contenido input{width:90%}

#fondo{
  /*background-image: url('imagenes/fondo.png');
  background-repeat: repeat;*/
  background-color: #fff;
  }

#top{background:#064160;box-shadow: 0px 5px 5px #888;position:absolute;z-index:2;width:100%;top:0}
#top .contenido{color:#fff;padding:10px}

/* Cabecera */
#cabecera .contenido{font-size:0.875rem !important}
#cabecera{background-color: #FFF;margin-top:80px;z-index:1;width:100%}

#topmenu {
	width:100%;
	background:#000;
	}

#topmenu #menu {
        margin:0 auto;
        width: 1000px;
        }



#topmenu li {
	color:#fff;
	border-right: 1px solid #fff;
	line-height: 35px;
	padding:0 10px;
	vertical-align:middle;
	}

#topmenu li:lastchild {
	border-right: none;
	}


/* Pantalla de login */
#cabecera_login{
  width:400px;
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
  font-weight:bold;
  font-size:1.7rem;
  padding-top: 100px;
  font-family: "Ubuntu condensed", sans-serif;
  color:#fff;
}

#login{
  width:400px;
  min-height:200px;
  margin:10px auto 0 auto;
  border:1px solid #CCC;
  border-radius:5px;
  background:#FFF;
  padding:30px;
    box-shadow:0 0 5px #CCC;
}

#login .titulo{
  background-color: #ccc;
  font-size:18px;
  font-weight: bold;
  height:25px;
  padding:5px 0;
  text-align: center;
}

#login ul {
    padding:0 0 10px 0;
    margin:0;
}
#login li {
  float:left;
  list-style-type: none;
  padding:0;
  margin:0;
  line-height: 25px;
  width:100%;
}

#login li.etiqueta {
  width:90px;
  font-weight:bold;
}

#login #mensaje{
  background-color:rgba(61,72,80,0.6);
  color:#FFF;
  display:none;
  padding:10px;
  text-align:center;
  border-radius:5px;
}
#login .contenido{
  padding:10px 15px;
}

#login .contenido input{
  height:45px;
  border-radius: 5px;
  padding-left:40px;
  font-size:18px;
  border:1px solid #064160;
  margin-bottom:10px;
  width:60%;

}
#login .contenido input#usuario{background: url('imagenes/usuario.png') no-repeat 5px 6.5px;}
#login .contenido input#password{background: url('imagenes/password.png') no-repeat 5px 6.5px;}

#login .contenido .boton{
  height:45px;
  border-radius: 5px;
  margin:10px 0 15px 0;
  padding:10px 0;
  display:block !important;
  text-align: center;
}

#login .contenido .campo{
  font-weight: bold;
  line-height:25px;
  color:#333;
}

/* Contenedor */
#contenedor{
  width:100%;
  margin:0 auto 0 auto;
}

#cuerpo{
  border-top: none;
}

#menu{
  width:100%;
  background:#064160;
  height:50px;
  color:#FFF;

}
#menu ul{margin:0;padding:1px 100px;}
#menu li{float:left;font-size:18px;text-align:left;border-right:1px solid #FFF;padding:10px 20px;font-weight:300}

#menu a, a, a:visited {
  text-decoration: none;
  color:#fff;
}

#menu .top{
  border-radius: 10px 10px 0 0;
  border-bottom:1px solid #fff;
  background-color: #666;
  font-size:14px;
  width:180px;
  padding:10px;
  text-align:center;
  color:#fff;
  font-weight: bold;
}

#menu .cuerpo{
  background-color:#ccc;
  margin-top:-15px;
}


#left .cuerpo li{
  border-top:1px solid #fff;
  list-style:none;
  padding:10px;
}

#left .cuerpo li:hover{
  background-color: #666;
  color:#fff;
  cursor:pointer;
}

#contenido{margin:40px;background:#FFF}

#cabecera .contenido{padding:20px 50px}
#cabecera img{margin-right:20px}
#cabecera h1{margin:0;padding:25px 0 0;font-size:18px}
#login h1{margin:0;padding:15px 0 0;font-size:16px}
#left .titulo{border:none;font-size:18px;font-weight:bold;text-align:center}
.titulo{clear:both;margin-top:0;border-left:1px solid #FFF;font-size:14px;font-weight:300;color:#064160;padding:13px 20px}
#bienvenida a{color:#0000D8}
#bienvenida #enlaces{width:100%%}
#enlaces li.enlace{padding:10px;background:#064160;width:25%;float:left;text-align:center;margin:0;border-radius:10px}
#enlaces .enlace img{max-width:175px;margin:10px 0}
#enlaces .enlace .texto-enlace{padding:20px 0;text-align:center;color:#fff;font-size:18px;font-weight:300}
li.titulo{clear:none;float:left; padding:10px 0}
.boton{cursor:pointer;background:#064160;border-radius:5px;box-shadow:5px 5px 10px #ccc;color:#FFF;padding:10px;border:none;width:100%;font-size:18px;font-weight:300;margin:10px 0}
#zona-calculo h2{font-size:17px;padding:5px 0}
#medidas{margin-right:30px}
#medidas .medidas, .unidades{font-size:1.3rem}
.opcionales{font-size:1.3rem;padding-left:30px;float:left;width:20%;font-weight:bold}
#medidas .medidas input, .unidades input, .opcionales input{font-size:1.3rem}
#zona-calculo select{font-size:17px;padding-top:10px;margin-bottom:2px;padding-left:10px}
#zona-calculo option{font-size:18px;padding:5px}
#calculaprecio .boton, #anadircomposicion .boton{background:#064160;border-radius:5px;color:#FFF;padding:10px 20px;border:none;width:90%;font-size:14px;box-shadow:none;font-weight:300}
#detalle-presupuesto{color:#FFF;padding:5px 0;text-align: center;border-left:1px solid #FFF;background-color: rgba(61,72,80,0.8);}
/*#contenido div.titulo{
  padding:5px 10px;
  padding:10px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  border-bottom: 1px solid #FFF;
  border-radius: 10px 10px 0 0;
  background-color: #666;
}*/

#contenido .cuerpo{
  padding:15px;
  background-color:#CCC;
}

#contenido .cuerpo .presupuesto:hover{
  cursor:pointer;
  background-color: #999;
  color:white;
}

#contenido .cuerpo tr:first-child td:first-child{
 border-radius:10px 0 0 0;
  padding:5px 10px;
  padding:10px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  background-color: #666;
}

#contenido .cuerpo tr:first-child td{
  padding:5px 10px;
  padding:10px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  background-color: #666;
}

#contenido .cuerpo tr:first-child td:last-child{
 border-radius:0 10px 0 0;
  padding:5px 10px;
  padding:10px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  background-color: #666;
}

#contenido .cuerpo td{
  border-bottom: 1px solid #999;
  height:25px;
}

#contenido .titulocapa{
  padding:5px 10px;
  padding:10px;
  cursor: pointer;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  border-bottom: 1px solid #FFF;
  border-radius: 10px 10px 0 0;
  background-color: #666;
}

#contenido #nuevo, #contenido #filtros, #contenido #listado{
  padding:10px;
}

#contenido #listado td{
  border-left:1px dotted #999;
  border-bottom: 1px dotted #999;
  font-size:10px;
  padding:0 10px;
}

#contenido #listado td.titulo{
  background-color:#666;
  color:#fff;
  border-left:1px solid white;
  border-bottom:none;
  font-size:11px;
  padding:0 10px;
}

#contenido #nuevo div.titulocampo{
  float:left;
  width:150px;
  vertical-align: middle;
}
#contenido input.corto{
  width:75px;
}

#contenido input.largo{
  width:300px;
}

#contenido div.marco{
  border: 1px dotted #999;
  padding:10px;
}

#ayuda, #acciones_habituales {

	}

#left .titulo{
	border-bottom: 1px solid #FFF;
	padding:10px 20px;
        text-align:left;
	}

#left .texto{
	font-size:17px;
	padding:5px 5px 5px 0;
	}

/* Mis presupuestos */
#mispresupuestos {
  float:left;
  margin-top:20px;
  width:100%;
}
#mispresupuestos .titulo{font-size:24px;padding:0}

#mispresupuestos #presupuestos-listado{
  min-height:100px;
}

#mispresupuestos ul{
  padding: 0;
}

#mispresupuestos div.presupuestos {
  border-bottom: 1px dotted #CCC;
}

#mispresupuestos li {
  margin: 5px 0;
}

#mispresupuestos li.enlace {
  cursor:pointer;
  color:#0000ff;
}
#mispresupuestos li.titulo, #lineaspresupuesto li.titulo {
  border-bottom:1px solid #000;
  font-size:18px;
}

#lineaspresupuesto li.presupuesto {
	border-bottom:1px dotted #000;
	font-size:14px;
        padding-top:10px;
	}

#lineaspresupuesto li.grande{text-align:left;padding-left:10px;}

#lineaspresupuesto li.mini {
	width:9%;
	}

#mispresupuestos #lineaspresupuesto li.mini {
	width:9%;
	}

#mispresupuestos li.mini {
	width:10%;
	}

#mispresupuestos li.grande {
	width:32%;
	}

#lineaspresupuesto li.grande {
	width:35%;
	}


/* Crear Presupuestos */

#datos-presupuesto {
  margin: 0;
  padding:10px;
  font-size:17px;

}


#detalle-presupuesto .enlace, #detalle-presupuesto a {
  text-transform: uppercase;
  font-weight: bold;
  cursor:pointer;
}

#creacion-presupuesto {
  border:1px solid #ccc;
  border-radius: 5px;
}

#zona-calculo {
  text-align:left;
  width:100%;
    min-height:600px;
}

#zona-calculo h2{
  border:none;
  margin:5px 0;
  font-style: normal;
}
#precio {
  bottom:30px;
  right:20px;
  background-color: rgba(61,72,80,1);
  padding:40px;
  margin-left:15px;
  border-radius:5px;
  color:#FFF;
  transition: background 2s;
}

#zona-calculo textarea{font-size:1.3rem;padding:10px;border:1px solid #000;border-radius:5px;width:50%;height:50px}
#selectsComposicion h3{margin-top:20px}
#confirmacion-linea{padding:20px;background:#FFF;font-size:14px;margin:20px;border-radius:5px}
#confirmacion-linea input, #confirmacion-linea textarea{margin:0 auto;margin:10px 0;border:1px solid #064160;font-size:17px;border-radius:5px;padding:10px 2px 10px 10px;width:90%;font-family:'Open Sans',sans-serif}
#confirmacion-linea input[type='submit']{background:#064160;border:none;color:#fff}
footer#pie{background:#064160;color:#FFF;text-align:center;padding:20px 0}
#presupuestos-listado a{color:#064160;font-weight:bold;paddding:0}
#cerrar-presupuesto{padding:20px;font-size:17px;width:65%}
#cerrar-presupuesto a{color:#064160;font-weight:bold}
.widget{margin-bottom:40px}
#left li:hover{background: rgba(255,255,255,0.3);}
#cabecera #logo{float:left}
#cabecera #ayuda{width:45%;border-radius:10px;border:1px solid #064160;padding:20px;float:right;background:url('imagenes/ayuda.png') no-repeat 10px center;margin-top:15px;height:130px;padding:10px 10px 10px 140px}


.seccion_composicion{display:flex;box-sizing: border-box;}
.seccion{max-width:100%;background:#eeeeee;padding:20px;}
div.opciones{position: relative;display: inline-block;margin-right:10px;float:left;width:25%}
div.opciones select{width:100%}
#zona-calculo select{color:#000;font-size:1.3rem;appearance: none; /* Quita el estilo predeterminado del navegador */
    -webkit-appearance: none; /* Soporte para navegadores basados en WebKit */
    -moz-appearance: none; /* Soporte para Firefox */
    background-color: transparent; /* Fondo transparente */
    border: 1px solid #000; /* Agregar un borde personalizado */
    padding: 10px; /* Espaciado interno */
    outline: none; /* Quitar el contorno al enfocar */}



.opcionesVentana{padding:5px 0}
.opcionesVentana span, .opcionesVentana input{font-size:1.3rem}
.seccionOculta{display:none;margin-top:20px}
.boton-oculto:disabled{cursor:inherit !important;opacity: 0.3}
div#totalpresupuesto{font-size:3.75rem;font-weight:bold}
.oculto{display:none}
#productofinal{font-size:18px}
#datos-presupuesto input{font-size:1.1rem}

/* Columnas en los widgets de inicio */
.borde-gris{border:1px solid #ddd}
.container{
    width: 100%;
    margin: 40px auto;
    padding: 0px;
}

/* Estilo para las filas */
.row {
  display: flex;
  flex-wrap: wrap; /* Esto permite que las columnas cambien a filas en pantallas pequeñas */
  align-items: stretch; /* Hace que todas las columnas tengan la misma altura */
  gap:30px;
}

.column-container .row{border-bottom: 1px solid #ddd;}
/* Estilo para las columnas */
.col {
    flex: 1;
    align-items: top; /* Centrar contenido verticalmente */
    justify-content: flex-start; /* Centrar contenido horizontalmente */
    text-align: left;
    font-size:0.750rem;
    min-width:300px;
}

.column-container {
  width:100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.column-container .row{padding:5px}

        .data-row {
            display: flex;
            flex-wrap: wrap;
            font-size:0.875rem;
        }

        .data-row label{display:none}

        /* Columnas dentro de las filas de datos (ajustables según el tamaño del campo) */
        .data-column-small {
            flex: 1.2;
            padding: 5px;
        }

        .data-column-medium {
            flex: 2;
            padding: 5px;
        }

        .data-column-large {
            flex: 6;
            padding: 5px;
        }

        .data-column-left{
          justify-content: flex-end;
          text-align:left;
        }
        .data-column-right{
          justify-content: flex-end;
        }
        .data-column-center{
          justify-content: center;
        }

/* Encabezado */
.header {
    font-weight: bold;
    background-color: #f4f4f4;
}

/* Botones */
/* Contenedor principal */
        .botones-container {
            display: flex;
            flex-direction: row; /* Asegura que los elementos se alineen horizontalmente */
            justify-content: flex-start; /* Alinea los botones desde el inicio */
            gap: 10px; /* Espacio entre botones */
            flex-wrap: nowrap; /* Evita que los botones se envuelvan a la siguiente línea */
            width: 50%; /* Asegura que el contenedor no sea demasiado estrecho */
        }

        /* Estilo de los botones */
        .boton {
            display: flex !important;
            align-items: center; /* Alinear verticalmente el contenido */
            padding: 15px 15px;
            background-color: #064160;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-family: Arial, sans-serif;
            transition: background-color 0.3s;
            text-align:left;
            justify-content: flex-start;
            /* Evita que los botones crezcan demasiado */
            white-space: nowrap;
        }

        .boton:hover {
            background-color: #406478;
        }

        /* Estilo para el icono */
        .boton i {
            margin-right: 8px; /* Espacio entre el icono y el texto */
        }
i{font-size:36px}
.pagination{margin:20px auto}
.pagination span{font-size:24px;margin-left:20px;border:1px solid #064160;padding:5px 15px}
.pagination a{color:#406478 !important}
.pagination span.active{font-weight:bold;color:#064160}

.micuenta{border:1px solid #064160;padding:40px}
.micuenta label{display:block;float:left;font-size:1.3rem;width:37%} 
.micuenta input{width:60%;font-size:1.3rem;margin-bottom:20px;padding:10px;border:1px solid #064160;border-radius:5px}


.search-form {
    width:100%;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

.search-form input[type="text"] {
    padding: 8px;
    width: 70%;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size:1.3rem;
    margin-right:1%;
}

.search-form button {
    padding: 8px 15px;
    background-color: #064160;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size:1.3rem;
    width:27%;
}

.search-form button:hover {
    background-color: #064160;
}

/* CSS Responsive */
@media only screen and (max-width: 1024px){
  .usuario-conectado{font-size:1.7rem}
  #datos-presupuesto{font-size:1.7rem}
  #cabecera .contenido img{width:50% !important}
  h2{font-size:3.75rem}
  h3{font-size:3.5rem}
  h4{font-size:3.25rem}
  div.seccion_composicion{display:inline-block !important;width:100%}
  div.opciones{width:100%}
  #zona-calculo select{font-size:2.5rem;width:100%}
  .opcionales{padding-left:0;font-size:3.25rem;width:100%}
  #vidriodetalle{margin-left:0 !important}
  #acciones, #precio{width:initial !important;margin:0}
  .boton{font-size:2.5rem;padding:40px}
  #medidas .medidas, .unidades{font-size:2.5rem}
  #medidas .medidas input, .unidades input, .opcionales input{font-size:2.5rem}
  #medidas .medidas input,.unidades input{min-width:125px}
  div#totalpresupuesto{font-size:5rem !important;}
  #precio span{font-size:1.85rem !important}
  .container {width:100%}
  .col{flex-basis:100%}
  .column-container .row{margin-bottom:40px}
  .data-row {
            flex-direction: column;
            font-size:3rem;
            padding:20px;
         }
                .data-row label{display:block;font-weight:bold}
                    .data-column-small,
            .data-column-medium,
            .data-column-large {
                flex-basis: 100%; /* Toma el ancho completo */
                width: 100%;      /* Garantiza el ancho completo */
                margin-bottom: 5px; /* Espacio entre columnas ahora verticales */
                text-align:right !important;
            }
        .header{display:none}
}


/* Búsqueda de valoraciones */
.search-box {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 5px;
}

.search-box input[type="text"] {
    padding: 8px 12px;
    width: 80%;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    font-size:1.3rem;
}

.search-box button {
    padding: 8px 15px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size:1.3rem;
}

.search-box button:hover {
    background: #0056b3;
}

/* Switcher */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px; width: 16px;
  left: 4px; bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider { background-color: #2196F3; }
input:checked + .slider:before { transform: translateX(20px); }

.data-row label.switch{display:inherit !important}

.column-container .search-form{width:auto !important}

/* Clientes */
       .form-row {
            display: flex;
            gap: 0;
            margin-bottom: 0px;
        }
        .form-col.small {
          width:15%;
          margin:0 1%;
        }
        .form-col.medium {
          width:20%;
          margin:0 2%;
        }
        .form-col.large {
          width:24%;
          margin:0 1%;
        }

        .form-col.small input{
          width:100%;
        }
        .form-col.medium input{
            width:250px;
        }
        .form-col.medium select{
          width:250px;
        }
        .form-col.large input, .form-col.large select{
            width:100%;
        }
        .form-group input{font-size:1.3rem;padding:5px;border:none;border-bottom:5px solid #064160}
        button {
            padding: 8px 15px;
            background: #064160;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1.3rem;
        }

        .form-group select {-webkit-appearance: none;-moz-appearance: none;appearance: none;font-size:1.3rem;padding:5px;border:none;border-bottom:5px solid #064160;border-radius:0}
        .form-group label{
          display: block;
          margin-bottom: 5px; /* Espacio entre la etiqueta y el input */
        }
        .form-group textarea{font-size:1.3rem;width:80%;height:150px;margin-bottom:20px;padding:20px;border-radius:0;border:none;border-bottom:5px solid #064160}
        button:hover {
            background: #064160;
        }
        .mensaje-exito {
            background-color: #dff0d8;
            color: #3c763d;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
            border: 1px solid #d6e9c6;
        }
        .error {
            background-color: #f2dede;
            color: #a94442;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
            border: 1px solid #ebccd1;
        }


/* Página categorias */
.form-group {
            width:100%;
            margin: 20px;
            float:left;

        }
.form-group label{display:inline-block;}