/* ===================== TABLAS GENERALES ===================== */
table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 15px;
}

table th,
table td {
 border: 1px solid var(--gris);
 padding: 8px;
 text-align: center;
}

table th {
 background: var(--azul);
 color: rgb(188, 213, 250);
}

table tr:nth-child(even) {
 background: #f9f9f9;
}

/* ===================== TABLAS CRUD (Facturación) ===================== */
/* ===================== LAYOUT PRINCIPAL (Basado en Bootstrap Grid) ===================== */

/* Contenedor principal: Se elimina el display:grid para usar el row de Bootstrap */
.contenedor_CRUD {
    /* Solo se deja el padding y el gap, el resto lo maneja .container y .row .g-4 */
    padding: 20px;
}

/* El MAIN del menú (Platos): Se asegura que respete el 100% de su columna (col-lg-7) */
main {
    width: 100%;
}

/* El SELECT de Categoría: Acomodar el ancho para que se vea como en la imagen */
.Categoria_ {
  /* ... estilos de color, padding, fuente ... */
  display: block;
  margin-top: 5px;
  margin-bottom: 15px;
  width: 150px; /* Ancho fijo para que se vea compacto como en la imagen */
  border: 1px solid var(--gris);
  border-radius: 8px;
}


/* ===================== ESTILOS BASE Y CONTENEDORES ===================== */

:root {
  --azul: #3f5ea7; /* Azul Principal de FastBill (Encabezados, Botón) */
  --gris: #cccccc;
  --blanco: #ffffff;
  --amarillo: #f5cc12; /* Color de los nombres de los platos */
  --fondo-cuerpo: #e9eff7; /* Fondo azul muy claro de la imagen */
}

/* 1. Estilo para el BODY (Fondo azul muy claro) */
body {
  background-color: var(--fondo-cuerpo);
  font-family: 'Roboto', sans-serif;
}

/* 2. Títulos principales (Platos y Factura) */
.titulo {
  color: var(--azul);
  font-size: 28px;
}

/* 3. Contenedor Blanco Principal (Platos y Factura) */
.content_menu {
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: var(--blanco);
  /* AJUSTE CRUCIAL: Padding de 20px se ve mejor para el contenido general */
  padding: 20px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
}

/* 4. Estilo del SELECT de Categoría */
.Categoria_ {
  color: #333;
  padding: 8px 12px; 
  font-size: 16px;
  width: 150px;
  border: 1px solid var(--gris);
  border-radius: 4px;
}

/* ===================== TARJETAS FASTBILL (ESTILO 5) ===================== */
:root{
  --fb-bg: #ffffff;
  --fb-shadow: rgba(0,0,0,0.10);
  --fb-accent: #ff6a00;
  --fb-title: #333333;
  --fb-tag: #6c757d;
  --fb-popular-bg: transparent;
}

/* Contenedor sección */
.fb-platos-section{
  margin: 10px 0 20px;
}

/* Título sección */
.fb-section-title{
  font-size: 1.6rem;
  color: var(--fb-title);
  margin-bottom: 12px;
}

/* GRID responsive */
.fb-grid-platos{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}

/* TARJETA */
.fb-card{
  background: var(--fb-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 14px var(--fb-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}

.fb-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.14);
}

/* Imagen */
.fb-card-img{
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Cuerpo */
.fb-card-body{
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fb-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fb-card-title{
  font-size: 1rem;
  font-weight: 700;
  color: var(--fb-title);
  margin: 0;
}

/* Botón favorito */
.fb-fav{
  background: transparent;
  border: none;
  cursor: pointer;
  color: #d0d0d0;
  padding: 6px;
  border-radius: 8px;
}
.fb-fav:hover{
  color: #ffbf00;
  transform: scale(1.05);
}

/* Precio */
.fb-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.fb-price{
  font-weight: 800;
  color: #222;
  font-size: 1.05rem;
}

/* Tags */
.fb-tags { 
    font-size: 1.1rem; 
    color: #64748b; 
    margin: 10px 0; 
    flex-grow: 1; 
    font-weight: bold; 
}
.fb-tags span {
    background: #eff6ff;
    color: #3b82f6;
    padding: 4px 10px;
    border-radius: 10px;
    margin-right: 5px;
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 1rem;
}

/* Botón agregar */
.fb-card-actions{
  margin-top: auto;
  display: flex;
  justify-content: center;
}
.fb-add-btn{
  background: var(--fb-accent);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.fb-add-btn:hover{
  background: #d55601;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1200px){
  .fb-grid-platos{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px){
  .fb-grid-platos{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px){
  .fb-grid-platos{
    grid-template-columns: 1fr;
  }
  .fb-card{
    min-height: 320px;
  }
  .fb-card-img{
    height: 150px;
  }
}
.fb-bebidas-section{
  margin-top: 30px;
}
.fb-grid-bebidas{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1200px){
  .fb-grid-bebidas{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:900px){
  .fb-grid-bebidas{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:480px){
  .fb-grid-bebidas{ grid-template-columns: 1fr; }
}
.oculto {
  display: none !important;
}
/* ===================== GRID FALTANTE (ACOMPAÑAMIENTOS) ===================== */

.fb-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}

/* Hacemos que sea responsive igual que los otros */
@media (max-width: 1200px){
  .fb-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px){
  .fb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px){
  .fb-grid {
    grid-template-columns: 1fr;
  }
}
/* ===================== GRID DE 3 COLUMNAS (TARJETAS MÁS ANCHAS) ===================== */

/* Aplicamos el cambio a las 3 secciones al mismo tiempo */
.fb-grid-platos,
.fb-grid-bebidas,
.fb-grid {
    display: grid;
    gap: 20px; /* Un poco más de espacio entre tarjetas */
    /* Aquí está la magia: repeat(3, 1fr) hace que sean 3 tarjetas por fila */
    grid-template-columns: repeat(3, 1fr); 
}

/* ===================== AJUSTE RESPONSIVE ===================== */

/* En pantallas medianas (laptops pequeñas/tablets), bajamos a 2 columnas */
@media (max-width: 1100px){
    .fb-grid-platos,
    .fb-grid-bebidas,
    .fb-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* En celulares, bajamos a 1 columna para que ocupen todo el ancho */
@media (max-width: 550px){
    .fb-grid-platos,
    .fb-grid-bebidas,
    .fb-grid {
        grid-template-columns: 1fr;
    }
}
/* ===================== TABLA DE FACTURA ===================== */

/* Contenedor de Scroll */
.tabla_scroll {
  max-height: 250px; 
  overflow-y: auto; 
  /* AJUSTE CRUCIAL: Quitando el borde explícito aquí */
  border-radius: 8px
}

/* Encabezado de la tabla (TH) */
.tabla_CRUD thead th {
  background-color: var(--azul); 
  color: var(--amarillo); /* AJUSTE CRUCIAL: Texto del encabezado en amarillo/dorado */
  padding: 10px;
  text-align: center;
  font-size: 14px; 
  font-weight: bold;
  /* AJUSTE CRUCIAL: El borde entre TH debe ser más claro o del color del fondo del encabezado */
    border: 1px solid var(--azul); 
}

/* Celdas del cuerpo */
.tabla_CRUD tbody td {
  padding: 8px;
  text-align: center;
  /* Las rayas de la tabla parecen ser color blanco y amarillo muy claro */
  border-bottom: 1px solid #f0f0f0; /* Borde de fila muy claro */
  border-right: none; /* Quitamos el borde vertical que no se ve en la imagen */
}
.tabla_CRUD tbody tr:nth-child(even) {
    /* Simula las rayas amarillas claras */
    background-color: #fffde7;
}
.tabla_CRUD tbody tr:last-child td {
  border-bottom: none;
}


/* ===================== DATOS DEL CLIENTE Y BOTÓN ===================== */

.datos-cliente {
    /* AJUSTE CRUCIAL: Fondo completamente blanco, sin gris */
  background: var(--blanco); 
  border: 1px solid #dcdcdc;
    /* AJUSTE: El padding es sutil, los campos están pegados al borde de la caja */
    padding: 15px 15px 5px 15px; 
}

.datos-cliente h3 {
  color: var(--azul);
  font-size: 18px;
  font-weight: 500;
  margin-top: 0; /* Asegura que no haya espacio extra */
    margin-bottom: 10px;
}

.datos-cliente label {
  font-weight: normal;
  font-size: 14px;
    margin-bottom: 3px;
}

/* Input con altura más pequeña */
.datos-cliente input.form-control {
  height: 30px; 
  padding: 0.375rem 0.75rem;
    margin-bottom: 10px; /* AJUSTE: Espacio entre inputs */
}

/* Botón Generar Factura */
#btnGenerarFactura {
  background-color: #295697 !important; /* AJUSTE CRUCIAL: El botón es un azul más oscuro y simple */
  border-color: #295697 !important;
  color: var(--blanco);
  width: 100%;
  margin-top: 15px; 
    /* AJUSTE: El padding vertical debe ser menor */

}
#btnGenerarFactura:hover {
  background-color: #1f4277 !important;
  border-color: #1f4277 !important;
}
.tabla_CRUD td, 
.tabla_CRUD th {
    white-space: nowrap;
}

/* Clase de utilidad */
.oculto {
  display: none !important;
}

/* --- CONTENEDOR PRINCIPAL DEL FOOTER --- */
footer, .pie_ {
    background: linear-gradient(rgb(1, 1, 36), rgb(1, 19, 61));
    color: rgb(188, 213, 250);
    padding: 30px 15px; /* Un poco más de espacio interno */
    margin-top: auto;

    /* ACTIVA EL MODO HORIZONTAL */ 
    
    /* ORGANIZACIÓN ESPACIAL */
    flex-wrap: wrap; /* Permite que los elementos bajen si la pantalla es chica */
    justify-content: space-evenly; /* Distribuye el espacio entre columnas automáticamente */
    align-items: flex-start; /* Alinea las columnas al borde superior */
}

/* --- ESTILO DE LAS 3 COLUMNAS SUPERIORES --- */
.footer-columna {
    width: 30%; /* Ocupa un tercio del ancho */
    min-width: 220px; /* Ancho mínimo para que no se vea aplastado */
    margin-bottom: 20px; /* Separación con lo de abajo */
    
    /* CENTRADO DEL TEXTO INTERNO */
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center; /* Fuerza el centrado de los elementos internos */
}

/* --- AJUSTE DE TEXTOS Y ENLACES --- */
.pie_ p, footer p, .pie_ a {
    font-family: 'NEXT', Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 5px 0;
    text-decoration: none; /* Quita el subrayado feo de los links */
    color: rgb(188, 213, 250); /* Asegura que los links tengan el color correcto */
}

.pie_ a:hover {
    color: #fff; /* Efecto blanco al pasar el mouse */
}

/* --- SECCIÓN DE REDES SOCIALES (ABAJO) --- */
.footer-social-section {
    width: 100%; /* Fuerza a que ocupe todo el ancho y baje al final */
    text-align: center; /* Centra el contenido */
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(188, 213, 250, 0.2); /* Línea divisoria tenue */
}

/* --- RESPONSIVE (CELULARES) --- */
@media (max-width: 768px) {
    footer, .pie_ {
        flex-direction: column; /* En celular vuelve a ser vertical */
        align-items: center;
    }
    .footer-columna {
        width: 100%; /* Ocupa todo el ancho en celular */
        margin-bottom: 30px;
    }
}
.fb-grid-platos, .fb-grid-bebidas, .fb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding-bottom: 20px;
}
.fb-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #eee;
}
/* ESTILOS NECESARIOS PARA QUE SE VEAN BIEN LAS CARTAS Y FILTROS */
.fb-card-img { width: 100%; height: 140px; object-fit: cover; }
.fb-card-body { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.fb-card-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 5px; height: 3rem; overflow: hidden; }
.fb-price-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: bold; color: #28a745; }
.fb-popular { font-size: 1.1rem; color: #ff9800; font-weight: bold; }
.fb-card-actions { margin-top: auto; }
.fb-add-btn { width: 100%; padding: 8px; background: #ff6b00; color: white; border: 0; border-radius: 4px; cursor: pointer; }
.fb-add-btn:hover { background: #e65100; }

/* Estilo para los controles de filtro */
.filtros-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.filtro-group { flex: 1; min-width: 150px; }
/* 1. CONTENEDOR MÁS AMPLIO */
    .contenedor_CRUD {
        max-width: 98% !important; /* Usar casi toda la pantalla */
        margin: auto;
    }
    
    /* 2. ESPACIO INTERNO (Para que no quede pegado a las tarjetas) */
    .content_menu {
        padding: 40px !important; /* MUCHO espacio blanco alrededor */
    }

    /* 3. LETRA GRANDE Y CLARA */
    .fb-card-title {
        font-size: 1.3rem !important; /* Título del plato grande */
        font-weight: 800;
        margin-bottom: 10px;
    }
    .fb-price {
        font-size: 1.4rem !important; /* Precio grande */
        font-weight: bold;
        color: #e67e22; /* Color naranja oscuro para resaltar */
    }
    .fb-add-btn {
        font-size: 1.2rem !important; /* Botón grande */
        font-weight: bold;
        padding: 10px 0;
        width: 100%;
    }
    
    /* Ajuste de imagen */
    .fb-card-img {
        height: 220px !important; /* Imagen alta para que se vea bien */
        object-fit: cover;
    }

    /* Títulos de secciones */
    .titulo { font-size: 2.2rem; font-weight: bold; color: #444; }
    label { font-size: 1.1rem; font-weight: 600; }
    .form-control { font-size: 1.1rem; height: 45px; }