/* Aplicar fuente Roboto a todos los elementos (si no está cargada, añadirla) */
body {
    font-family: 'Roboto', sans-serif;
}

/* Estilo para TODOS los títulos de categorías */
.tp-category-title-5,
.tp-category-title-4,
.tp-category-title-3,
.tp-category-title-2,
.tp-category-title-1,
.tp-category-title {
    margin-top: 0;
    text-align: center;
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
    font-size: 18px;
    font-weight: 500; /* Peso medio (puedes cambiar a bold si prefieres) */
    color: #FFFFFF; /* Color del texto (blanco) */
    background-color: rgba(0, 0, 0, 0.6); /* Franja semi-transparente */
    padding: 8px 12px;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    width: auto; /* Ajusta el ancho automáticamente al texto */
    max-width: 90%; /* Evita que el título sea demasiado ancho */
    margin-left: auto;
    margin-right: auto;
}







.basic-slider {
    width: 100%;
    height: 500px; /* Ajusta según el tamaño de tus imágenes */
    margin-top: 100px; /* Ajusta según la altura de tu header */
    overflow: hidden;
    position: relative;
}

.basic-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    animation: slideAnimation 20s infinite;
}

/* Asignar imágenes de fondo a cada slide */
.slide-1 {
    background-image: url('https://mercadocafe.co/storage/grocery/sliders/slider-1.png');
}
.slide-2 {
    background-image: url('https://mercadocafe.co/storage/grocery/sliders/slider-2.png');
}
.slide-3 {
    background-image: url('https://mercadocafe.co/storage/grocery/sliders/slider-3.png');
}
.slide-4 {
    background-image: url('/https://mercadocafe.co/storage/grocery/sliders/slider-4.png');
}

/* Animación para cada slide */
.basic-slide:nth-child(1) { animation-delay: 0s; }
.basic-slide:nth-child(2) { animation-delay: 5s; }
.basic-slide:nth-child(3) { animation-delay: 10s; }
.basic-slide:nth-child(4) { animation-delay: 15s; }

@keyframes slideAnimation {
    0%, 20% { opacity: 1; }
    25%, 100% { opacity: 0; }
}



/* --- Personalización Panel de Vendedor --- */

/**
 * Añadir padding derecho a los elementos de texto en la columna del medio
 * del formulario de edición de pedido en el panel de vendedor.
 * Selector basado en la estructura típica de Botble CMS / Shofy para la página de edición de pedidos.
 */
#main-order-content .col-md-8 .card .card-body,
#main-order-content .col-md-8 .datagrid-item dd {
    padding-right: 1rem; /* Ajusta este valor según sea necesario (ej: 15px, 20px) */
}

/* --- Fin Personalización Panel de Vendedor --- */



/* --- Personalización Panel de Vendedor (Corrección Estructura Columnas) --- */

/**
 * Asegurar que la columna del medio (col-md-8) no se expanda más allá de su ancho designado
 * y que la columna derecha (col-md-4) se mantenga al lado.
 * Se aplica flexbox o se fuerza el ancho máximo y overflow.
 */
#main-order-content .row {
    /* Asegurar que el contenedor row sea un contenedor flexible */
    display: flex;
    flex-wrap: wrap; /* Permitir que las columnas se envuelvan si el ancho total > 100% */
}

#main-order-content .row > .col-md-8 {
    /* Forzar el ancho máximo de 8/12 (aprox. 66.66%) */
    max-width: calc(100% * 8 / 12);
    /* Opcional: Si el flexbox no es suficiente, forzar el ancho */
    /* width: calc(100% * 8 / 12); */
    /* Asegurar que el contenido interno no desborde */
    overflow-wrap: break-word; /* Romper palabras largas si es necesario */
    word-wrap: break-word;     /* Compatibilidad con navegadores antiguos */
    /* Opcional: Agregar un padding derecho para separación visual */
    padding-right: 1rem;
    /* Asegurar que se comporte como flex item */
    flex-shrink: 1; /* Permitir que se encoja si es necesario */
    flex-grow: 0;   /* No crecer más del cálculo de ancho */
}

#main-order-content .row > .col-md-4 {
    /* Forzar el ancho máximo de 4/12 (aprox. 33.33%) */
    max-width: calc(100% * 4 / 12);
    /* Opcional: Si el flexbox no es suficiente, forzar el ancho */
    /* width: calc(100% * 4 / 12); */
    /* Asegurar que se comporte como flex item */
    flex-shrink: 0; /* No encogerse */
    flex-grow: 0;   /* No crecer */
}

/* Opcional: Limpiar cualquier float que pueda afectar */
#main-order-content .row::after {
    display: table;
    clear: both;
    content: "";
}

/* --- Fin Personalización Panel de Vendedor (Corrección Estructura Columnas) --- */



/* --- Personalización Panel de Vendedor (Corrección Contenido Interno Columna 8) --- */

/**
 * Asegurar que el contenido interno de la columna del medio (col-md-8)
 * respete su ancho y no se desborde hacia la columna derecha (col-md-4).
 * Se aplica a los contenedores principales de contenido dentro de col-md-8.
 */
#main-order-content .col-md-8 .card,
#main-order-content .col-md-8 .card-body,
#main-order-content .col-md-8 .datagrid,
#main-order-content .col-md-8 .datagrid-item,
#main-order-content .col-md-8 .datagrid-item dd {
    /* Asegurar que estos elementos no excedan el ancho de su contenedor padre (col-md-8) */
    max-width: 100%;
    /* Obligar al contenido interno a ajustarse */
    overflow-wrap: break-word; /* Romper palabras largas si es necesario */
    word-wrap: break-word;     /* Compatibilidad con navegadores antiguos */
    word-break: break-word;    /* Alternativa para romper palabras */
    /* Opcional: Añadir un borde derecho visual para confirmar el límite */
    /* border-right: 1px solid red; */
}

/* Opcional: Si hay tablas dentro de la columna, asegurar que sean responsivas */
#main-order-content .col-md-8 .table {
    width: 100%; /* Asegurar que la tabla ocupe el ancho disponible dentro de su contenedor */
    table-layout: auto; /* Permitir que las celdas se ajusten al contenido o al ancho disponible */
    /* Opcional: Si la tabla es muy ancha, envolverla en un contenedor responsive */
    /* max-width: 100%; */
    /* display: block; */
    /* overflow-x: auto; */
}

/* --- Fin Personalización Panel de Vendedor (Corrección Contenido Interno Columna 8) --- */



/* --- Personalización Panel de Vendedor/Admin (Corrección Color Texto Blanco) --- */

/**
 * Cambiar el color de texto que sea blanco en áreas comunes del panel
 * para que sea visible sobre fondos claros.
 * NOTA: Este selector es general y puede afectar otros textos blancos.
 * Si se vuelve muy genérico, se puede afinar más si se conoce la ubicación exacta del texto problemático.
 */

/* Opción 1: Aplicar a elementos de texto comunes dentro de contenedores del panel */
.core-box .box-title,
.card .card-title,
.card .card-header,
.navbar .navbar-brand,
.sidebar .nav-link,
.breadcrumb .active,
.alert,
.badge,
.btn,
.core-box .box-title *,
.card .card-title *,
.card .card-header *,
.navbar .navbar-brand *,
.sidebar .nav-link *,
.breadcrumb .active *,
.alert *,
.badge *,
.btn * {
    color: #212529 !important; /* Color de texto oscuro estándar (Bootstrap) */
    /* Puedes cambiar #212529 por otro color si prefieres, por ejemplo #000000 para negro puro */
}

/* Opción 2: Si el problema está en el body o en un contenedor general con texto blanco */
/* body, .page-content, .main-content { */
/*    color: #212529 !important; */
/* } */

/* --- Fin Personalización Panel de Vendedor/Admin (Corrección Color Texto Blanco) --- */

/* --- Dashboard Metrics - Fix White Text on Light Background --- */

.dashboard-widget-item a.text-white,
.dashboard-widget-item a.text-white .desc,
.dashboard-widget-item a.text-white .number,
.dashboard-widget-item a.text-white span {
    color: #212529 !important;
}

.ps-dashboard .dashboard-widget-item a {
    color: #212529 !important;
}

/* --- Fin Dashboard Metrics Fix --- */




/*---css acordeón centro de ayuda---*/
/* Contenedor general del centro de ayuda */
.help-center {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Título principal */
.help-center__title {
  color: #333;
  margin-bottom: 30px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
}

/* Barra de pestañas */
.help-center__tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

/* Botones de pestañas */
.help-tab {
  padding: 12px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.help-tab:hover {
  color: #2c3e50;
}

/* Pestaña activa */
.help-tab.is-active {
  color: #2c3e50;
  border-bottom-color: #2c3e50;
}

/* Contenedores de contenido */
.help-center__contents {
  margin-top: 10px;
}

/* Cada panel de contenido */
.help-content {
  display: none;
}

/* Panel activo visible */
.help-content.is-active {
  display: block;
}

/* Responsive: apilar pestañas en móvil */
@media (max-width: 768px) {
  .help-center__tabs {
    flex-direction: column;
  }

  .help-tab {
    text-align: left;
    width: 100%;
  }
}





/*final css acordeón*/