/* custom_styles.css */
:root {
    --catering-bg: #F8F9FA;
    --catering-primary: #2F5233;    /* Verde */
    --catering-accent: #E87A5A;     /* Naranja Terracota */
    --catering-text: #4A4A4A;
    --catering-text-light: #FFFFFF; /* Texto Blanco */
    --catering-border: #DEE2E6;
}

body {
    background-color: var(--catering-bg);
    color: var(--catering-text);
    padding-top: 56px;  /* Asumiendo navbar fija. Ajusta si tu navbar-custom-catering no es fixed-top */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* === Botones === */
.btn-primary {
    background-color: var(--catering-primary) !important;
    border-color: var(--catering-primary) !important;
    color: var(--catering-text-light) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #254229 !important; 
    border-color: #203823 !important; /* Un poco más oscuro aún para el borde */
    color: var(--catering-text-light) !important;
}

.btn-accent {
    background-color: var(--catering-accent);
    border-color: var(--catering-accent);
    color: var(--catering-text-light);
}
.btn-accent:hover, .btn-accent:focus {
    background-color: #D46A4A;
    border-color: #C05F40;
    color: var(--catering-text-light);
}

/* === Tipografía === */
h1, h2, h3, h4, h5, h6 {
    color: var(--catering-primary);
}

a {
    color: var(--catering-primary);
    text-decoration: none; /* Buena práctica quitar subrayado por defecto */
}
a:hover, a:focus {
    color: var(--catering-accent);
    text-decoration: underline; /* Subrayar al hacer hover/focus */
}

/* === Navbar === */
.navbar-custom-catering {
    background-color: var(--catering-primary) !important;
}
.navbar-custom-catering .navbar-brand,
.navbar-custom-catering .nav-link {
    color: var(--catering-text-light) !important;
}
.navbar-custom-catering .nav-link:hover,
.navbar-custom-catering .nav-link.active,
.navbar-custom-catering .nav-link:focus {
    color: var(--catering-accent) !important;
}
.navbar-custom-catering .dropdown-menu {
    background-color: var(--catering-primary); 
    border: 1px solid var(--catering-accent);
}
.navbar-custom-catering .dropdown-item {
    color: var(--catering-text-light);
}
.navbar-custom-catering .dropdown-item:hover,
.navbar-custom-catering .dropdown-item:focus {
    background-color: var(--catering-accent);
    color: var(--catering-text-light);
}
.navbar-custom-catering .dropdown-divider {
    border-top-color: var(--catering-accent);
}

/* === Cards === */
.card {
    border-color: var(--catering-border);
}

/* === Estilos de Estado de Pedidos === */
.status-text {
    font-weight: bold;
}
.status-cancelled {
    color: red !important;
}
.status-completed {
    color: green !important;
}
.status-processing {
    color: blue !important;
}
.status-default {
    color: var(--catering-text) !important; /* Usar el color de texto por defecto del tema */
}


/* === NUEVOS ESTILOS PARA CONTROLES DE CANTIDAD EN EL CARRITO === */
.quantity-controls { /* Contenedor de los botones +/- y el input */
    display: flex;
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
}

.quantity-controls .btn-outline-secondary { /* Estilo para los botones +/- */
    min-width: 28px; /* Ancho mínimo */
    width: auto;    /* Permitir que crezca si el contenido es más grande (ej. texto en lugar de +/-) */
    height: 28px;
    padding: 0 0.5rem; /* Padding horizontal */
    line-height: 1;  /* Ajustar para centrar mejor el texto/icono */
    font-size: 0.9rem; /* Tamaño de fuente para los botones */
    /* Bootstrap ya define bordes, etc. para btn-outline-secondary */
}

.quantity-controls input[type="number"].item-quantity-input {
    width: 50px !important; /* Fijar ancho con !important si Bootstrap lo sobreescribe */
    height: 28px;
    text-align: center;
    border-left: none;  /* Quitar borde izquierdo si está pegado al botón '-' */
    border-right: none; /* Quitar borde derecho si está pegado al botón '+' */
    border-radius: 0;   /* Esquinas cuadradas si está entre botones */
    padding: 0.25rem 0.25rem; /* Padding interno */
    font-size: 0.9rem;
    
    /* Ocultar spinners de number input */
    -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
    -moz-appearance: textfield; /* Firefox */
    appearance: none; /* Estándar */
    margin: 0; /* Eliminar márgenes que puedan añadir los spinners ocultos */
}
/* Estilos específicos para cuando los inputs están al lado de los botones Bootstrap */
.quantity-controls .btn-outline-secondary:first-child { /* Botón - */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.quantity-controls .btn-outline-secondary:last-child { /* Botón + */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Para los botones de eliminar en el carrito */
.cart-item-row .remove-item-btn .fa-trash-alt {
    font-size: 1.1em; /* Ajustar tamaño del ícono de basura */
}
.cart-item-row .remove-item-btn:hover .fa-trash-alt {
    color: darkred !important; /* O un rojo más oscuro de tu paleta */
}

/* Efecto visual al actualizar subtotales y totales */
.cart-item-subtotal.updating, 
.cart-grand-total.updating {
    background-color: #fff3cd; /* Amarillo claro de Bootstrap para 'warning' o 'info' */
    transition: background-color 0.1s ease-out; /* Transición más rápida para feedback */
}

/* Estilos para los mensajes de feedback AJAX globales en la página del carrito */
#cart-actions-feedback {
    margin-top: 10px;
    margin-bottom: 15px; /* Espacio antes de la tabla */
    font-size: 0.9em;
    display: none; /* Oculto por defecto */
    padding: 10px 15px; /* Más padding */
    border-radius: 0.25rem; /* Bootstrap border-radius */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}
#cart-actions-feedback.success {
    color: var(--catering-primary); /* Verde del tema */
    background-color: #d1e7dd; /* Fondo verde claro de Bootstrap */
    border: 1px solid #badbcc;  /* Borde verde de Bootstrap */
}
#cart-actions-feedback.error {
    color: #842029; /* Rojo oscuro de Bootstrap */
    background-color: #f8d7da; /* Fondo rojo claro de Bootstrap */
    border: 1px solid #f5c2c7;  /* Borde rojo de Bootstrap */
}
#cart-actions-feedback.info { /* Por si usas un tipo 'info' */
    color: #055160;
    background-color: #cff4fc;
    border: 1px solid #b6effb;
}

/* custom_styles.css */

/* ... (todos tus estilos existentes van aquí arriba) ... */


/* === EFECTOS DE TRANSICIÓN PARA TARJETAS DEL DASHBOARD === */

/* Aplicar a las tarjetas dentro de un contenedor con la clase 'dashboard-cards-container' 
   para ser más específico y no afectar a todas las tarjetas del sitio, a menos que así lo desees. 
   Si quieres que todas las .card tengan este efecto, simplemente usa .card y .card:hover */

.dashboard-cards-container .card {
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    /* Puedes ajustar la duración (0.25s) y la función de tiempo (ease-in-out) */
}

.dashboard-cards-container .card:hover,
.dashboard-cards-container .card:focus-within { /* :focus-within es bueno para accesibilidad con teclado */
    transform: translateY(-6px); /* Cuánto se "eleva" la tarjeta */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.175) !important; /* Una sombra más pronunciada que .shadow de Bootstrap */
                                                                  /* O puedes usar variables de Bootstrap si las tienes: var(--bs-box-shadow-lg) */
}

/* Opcional: Transición suave para los botones dentro de las tarjetas del dashboard */
.dashboard-cards-container .card .btn {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/*.dashboard-cards-container .card .btn:hover,*/
/*.dashboard-cards-container .card .btn:focus {*/
    /* Los colores de hover ya los tienes definidos para .btn-primary, .btn-accent, etc. */
    /* Podríamos añadir un ligero escalado si quieres, pero puede ser excesivo */
    /* transform: scale(1.03); */ 
/*}*/

/* Opcional: Transición para los íconos dentro de los títulos de las tarjetas */
.dashboard-cards-container .card .card-title i {
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.dashboard-cards-container .card:hover .card-title i {
    transform: scale(1.1); /* Escalar el ícono */
    color: var(--catering-accent); /* Cambiar color del ícono al color de acento */
}

/* custom_styles.css */

/* ... (tus estilos existentes) ... */

.text-catering-accent {
    color: var(--catering-accent) !important;
}

/* Estilos para los mensajes AJAX en las tarjetas de producto */
.add-to-cart-message {
    font-size: 0.85em;
    margin-top: 8px;
    padding: 5px;
    border-radius: 3px;
    display: none; /* Oculto por defecto */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}
.add-to-cart-message.success {
    color: green;
    /* background-color: #e6ffed; */
}
.add-to-cart-message.error {
    color: red;
    /* background-color: #f8d7da; */
}

/* Estilo para el input de cantidad en el formulario de producto */
.product-quantity-input { /* Ya lo tenías, pero asegúrate que el selector sea correcto si no usas form-control */
    /* width: 60px !important; -- Bootstrap input-group-sm y form-control-sm manejan esto mejor */
    text-align: center;
    /* padding: 0.375rem 0.75rem; -- Bootstrap form-control-sm maneja esto */
}

/* Si los botones +/- no son parte de input-group, este estilo podría ser útil */
.quantity-change-btn-inline {
    min-width: 30px; /* Ajusta según sea necesario */
}

/* Para el spinner en el botón de añadir al carrito */
.ajax-add-to-cart-form button i.fa-spinner {
    margin-right: 5px;
}

/* Ajustes para las tarjetas de producto si es necesario (además de la animación global) */
.product-card .card-title {
    font-size: 1.1rem; /* Un poco más grande que el h5 por defecto */
    margin-bottom: 0.5rem;
}
.product-card .card-text {
    margin-bottom: 0.75rem;
}

/* Ajustes para la barra lateral de categorías */
.sticky-category-nav {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 70px; /* Ajusta esto! Debe ser la altura de tu navbar fija + un pequeño margen (ej. 56px navbar + 14px margen) */
    align-self: flex-start; 
    max-height: calc(100vh - 90px); /* Evita que sea más alta que la ventana, 90px = 70px top + 20px margen inferior */
    overflow-y: auto; /* Scroll si la lista es muy larga */
    z-index: 100; /* Para que esté por encima de otros elementos si es necesario */
}
/* Estilos opcionales para los ítems de la lista de categorías */
.category-nav-sidebar .list-group-item {
    border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; margin-bottom: 0.25rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.category-nav-sidebar .list-group-item:hover,
.category-nav-sidebar .list-group-item.active-category-link { 
    background-color: var(--catering-primary); color: var(--catering-text-light);
}
.category-nav-sidebar .list-group-item.active-category-link a,
.category-nav-sidebar .list-group-item:hover a {
    color: var(--catering-text-light) !important;
}

.sticky-category-nav-wrapper {
    position: fixed;
    left: 0;
    top: 56px; /* Altura de tu navbar */
    width: 250px; /* Ancho de tu barra lateral */
    height: calc(100vh - 56px); /* Altura completa menos navbar */
    overflow-y: auto;
    background-color: #f8f9fa; /* O el color que quieras */
    padding: 1rem;
    z-index: 1000;
}
.main-content-beside-fixed-nav {
    margin-left: 270px; /* Ancho de la barra lateral + un poco de margen */
}


/* --- Efecto Hover para Tarjetas Clickables --- */

/* 
  Definimos el estado base de la tarjeta. 
  La propiedad 'transition' es la clave para que la animación sea suave.
*/
.custom-card {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border: 1px solid #e9ecef; /* Un borde sutil que combina bien */
}

/* 
  Esta es la regla mágica.
  Se aplica a .custom-card CUANDO su elemento padre 'a' está en estado :hover.
  Esto levanta la tarjeta y aumenta la sombra.
*/
a:hover .custom-card {
  transform: translateY(-8px); /* Mueve la tarjeta 8px hacia arriba */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important; /* Sombra más pronunciada */
}