<?xml version="1.0" encoding="UTF-8"?>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <title>TODO supply a title</title>
           <style>
            #top {
                height: 65px;
                background-color: #353535; /* Color de fondo para el top */
               
                text-align: center;
                color: #B0B0B0; /* Texto blanco */
            }

            body {
                margin: 0;
                padding: 0;
                font-family: Arial, sans-serif;
                background-color: #ffffff; /* Fondo blanco */
                color: #000000; /* Texto negro */
                 font-size: 16px; /* Tamaño de fuente deseado */
            }

            
            #top-container {
                align-content:center;
                justify-content: center;
                align-items: center; /* Esta propiedad centra el contenido verticalmente */
            }
           #main-container {
    display: flex;
      font-size: 60px; /* Tamaño de fuente deseado */
    flex: 1;  /* Ocupa todo el espacio restante después del top */
   /* Utiliza todo el ancho disponible */
}

#left {
    background-color: #F4F4F4;
    width: 270px;  /* Ancho fijo para el menú lateral */
    flex-shrink: 0; /* No permitir que el menú lateral se encoja */
}

#content {
     width: 100%; 
    flex-grow: 1;  /* Permite que el contenido crezca para ocupar el espacio disponible */
    overflow-y: auto;  /* Permite desplazamiento si el contenido es más grande que el contenedor */
    padding: 20px; /* Espacio interno */
      font-size: 60px; /* Tamaño de fuente deseado */
}
            .card {
                width: 100%;
                background-color: #F9F9F9; /* Color de fondo para el contenido */
                padding: 20px; /* Espaciado interno */
                border-radius: 10px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra */
            }
            .left_content {
                padding: 20px; /* Espaciado interno */
                color: #000000; /* Texto negro */
            }
            
        </style>
    
    </head>
    <body>
           <div id="top" class="top">
            <div class="top-container">
                <nav  class="navbar navbar-inverse">

                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">INVENTARIO</a>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Iniciar sesión</a></li>
                        <li><a href="#"> </a></li>
                    </ul>

                </nav>
            </div>
               <form><p:commandButton value="AAAAAAAAAAAAAAS"></p:commandButton></form>
               
        </div>
    </body>
</html>