body {
    font-family: sans-serif;
    background-size: cover;
    margin: 0;
    padding: 20px;
}

#principal {
    background-image: url(IMAGENES/fondo.jpg);
    background-color: #ffffffb3;
    width: 850px;
    margin: 0 auto; 
    padding: 20px;
    border: 1px solid gray;
    box-shadow: 5px 5px 15px black;
}

/* Encabezado */
#cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#titulo {
    color: #00AEEF;
    font-size: 40px;
    text-shadow: 2px 2px 2px gray;
}

.redondo {
    width: 100px;
    border-radius: 50%; /* Redondeo de imagen */
}

.derecha {
    text-align: right;
    font-weight: bold;
}

/* Flexbox para las columnas */
.contenedor-flex {
    display: flex;
    justify-content: center;
    color:grey;
}

.caja {
    flex: 1;
    background-color: white;
    border: 2px solid black;
    margin: 10px; /* Espacio entre cajas */
}

/* Colores y Barras */
.barra {
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.rojo { background-color: rgb(228, 77, 38); }
.azul { background-color: rgb(0, 112, 186); }
.verde { background-color: rgb(140, 200, 75); }

.b-rojo { border-color: #E44D26; }
.b-azul { border-color: #0070BA; }
.b-verde { border-color: #8CC84B; }

/* Contenido de las cajas */
.contenido {
    padding: 10px;
    text-align: left;
}

#icono{
    width: 80px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.resaltado{
    background-color: yellow;
}

/* Imagen de la casa */
.centro {
    text-align: center;
    margin-top: 20px;
}

#imagen-casa {
    width: 400px;
    padding: 10px;
    background-color: white;
    box-shadow: 10px 8px 5px gray;
}

.linea-negra {
    border: 0;           
    height: 3px;             
    background-color: black; 
    margin-top: 10px;    
    margin-bottom: 10px;     
    width: 100%;          
}
/* resumen final */
#cuadro-final {
    color: gray;
    border-radius: 10px; /* Redondeo del cuadro */
    padding: 20px;
    background-color: white;
    text-align: center;
    box-shadow: 4px 4px 10px black;
}
#bloque-externo {
    border: 5px solid black;
    padding: 15px;              
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    margin: 0;
}