/* =========================================================================
   TU CSS
   -------------------------------------------------------------------------
   Este archivo es tuyo. Se carga de último, después de la plantilla Sneat y
   de cms.css, así que lo que escribas aquí gana sin necesidad de !important
   (salvo que pelees contra una regla que ya lo use).

   No hace falta compilar nada: guardas y recargas. La URL lleva la fecha de
   modificación del archivo, así que el navegador no te sirve una copia vieja.

   Orden de carga en el layout:
     1. core.css        (Sneat, no tocar)
     2. demo.css        (Sneat, no tocar)
     3. cms.css         (parches a la plantilla + estilos del panel)
     4. color primario  (<style> generado desde Ajustes → Apariencia)
     5. custom.css      ← estás aquí
     6. @push('styles') (CSS suelto de una vista concreta)
   ========================================================================= */


/* -------------------------------------------------------------------------
   Variables útiles que puedes reutilizar (las define Bootstrap):

     var(--bs-primary)          color primario configurado
     var(--bs-body-bg)          fondo de la página
     var(--bs-body-color)       color de texto
     var(--bs-heading-color)    color de títulos
     var(--bs-border-color)     bordes
     var(--bs-paper-bg)         fondo de tarjetas y barras (solo tema Sneat)

   El <html> lleva estos atributos, útiles para acotar tus reglas:

     data-admin-theme="sneat" | "appdashboard"     apariencia activa
     data-bs-theme="light" | "dark"                modo claro u oscuro
     data-menu-mode="expanded" | "hover" | "icons" estado del menú

   Ejemplos:

     [data-bs-theme='dark'] .mi-clase { ... }              solo en oscuro
     [data-admin-theme='appdashboard'] .mi-clase { ... }   solo en esa apariencia
     [data-admin-theme='sneat'][data-bs-theme='dark'] …    combinadas

   Para el sitio público (no el panel), usa un selector propio de esa
   página, por ejemplo .site-hero.
   ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Texto del menú en negro (solo cuando el menú está en claro)
   -------------------------------------------------------------------------
   El menú lateral lleva su PROPIO data-bs-theme, porque en Ajustes →
   Apariencia se puede dejar oscuro aunque el panel esté claro. Por eso el
   selector arranca en .layout-menu[data-bs-theme='light'] y no en el <html>:
   así el negro se aplica al menú claro y no ensucia el menú oscuro.
   ------------------------------------------------------------------------- */
.layout-menu[data-bs-theme='light'] .menu-link,
.layout-menu[data-bs-theme='light'] .menu-horizontal-prev,
.layout-menu[data-bs-theme='light'] .menu-horizontal-next {
    color: #000000 !important;
}

/* El ítem activo de primer nivel va sobre el degradado del color primario: su
   texto y su icono siguen en blanco, o quedarían ilegibles. */
.layout-menu[data-bs-theme='light'] .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle),
.layout-menu[data-bs-theme='light'] .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) * {
    color: #ffffff !important;
}

/* Los sub-items activos (los de dentro de un desplegable) no llevan fondo:
   se marcan con el color primario, como en la plantilla original. */
.layout-menu[data-bs-theme='light'] .menu-sub > .menu-item.active > .menu-link {
    color: var(--bs-primary) !important;
}
 
/* Ejemplo de tarjeta propia — bórralo cuando quieras:

.mi-tarjeta-destacada {
    border-left: 4px solid var(--bs-primary);
    background: var(--bs-paper-bg);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

[data-bs-theme='dark'] .mi-tarjeta-destacada {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}

*/

/* ==========================================================================
   Catálogo de productos
   ========================================================================== */

/* Miniatura del listado. Cuadrada y recortada para que filas con fotos de
   distinta proporción no descuadren la altura de la tabla. */
.producto-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    cursor: zoom-in;
}

/* Marcador cuando no hay foto. En rojo cuando la ruta existe pero el archivo
   se perdió: distinguirlo importa, porque se arregla distinto. */
.producto-thumb-vacio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}

/* Las tarjetas de resumen son enlaces a la lista ya filtrada. */
.card[href]:hover {
    border-color: var(--bs-primary);
}
