* {
    box-sizing: border-box;
    font-family:arial;
}
*, *::before, *::after {
    margin: 0;
    padding: 0;
}
/* _variables.css o en :root de tu main.css */
/* style.css (O tu archivo CSS global principal) */

/* --- Variables CSS: Define tu paleta y espaciado --- */
:root {
    /* --- Paleta de Colores Primarios (Azules) --- */
    /* Manteniendo tus nombres, pero ajustando los tonos para más modernidad y profundidad */
    --primary-100: #004a99; /* Azul oscuro primario: un tono más profundo y saturado */
    --primary-200: #007bff; /* Azul vibrante: un buen tono base, lo mantenemos como tu 'vibrante' */
    --primary-300: #5cb8ff; /* Azul más claro: un tono más suave y amigable */

    /* --- Colores Secundarios y Grises de Interfaz --- */
    --secondary-100: #6c757d; /* Gris para texto secundario: un gris versátil, mantenido */

    /* Fondos: Cruciales para el look no-Bootstrap. Más suaves y con ligeros matices. */
    --bg-100: #fcfcfc; /* Blanco limpio: un blanco roto muy sutil, da un look más premium */
    --bg-200: #f5f6f8; /* Gris muy claro para hover/activo: un gris claro apenas perceptible, muy limpio */
    --bg-300: #ebedef; /* Gris claro para fondos de secciones/bordes: un gris claro y suave */
    --bg-overlay: rgba(0, 0, 0, 0.4); /* Overlay oscuro para móvil: ligeramente menos opaco para una sensación más ligera */

    /* Textos: Ajustados para mejor legibilidad y estética. */
    --text-100: #212529; /* Texto oscuro principal: un negro muy oscuro, pero no absoluto */
    --text-200: #57606a; /* Texto secundario: un gris medio oscuro, legible y suave */
    --text-active: var(--primary-200); /* Color de texto activo: apunta al azul vibrante */

    /* --- Colores de Estado --- */
    /* Ligeros ajustes para mejor integración en la nueva paleta */
    --success: #28a745; /* Verde: mantenido */
    --danger: #dc3545; /* Rojo: mantenido */
    --warning: #ffc107; /* Amarillo: mantenido */
    --info: #17a2b8; /* Nuevo: Azul para información */

    /* --- Sombras --- */
    /* La clave para un look elevado y moderno. Más difusas y menos opacas. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); /* Sombra pequeña: muy sutil y apenas visible */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra media: la principal para popovers y tarjetas, difusa y elegante */

    /* --- Espaciado --- */
    /* Escala consistente para un buen ritmo vertical y horizontal. */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    /* Considera añadir: --spacing-xxs: 0.125rem; para micro-espacios. */

    /* --- Border Radius --- */
    /* Fundamental para la "sensación" visual. */
    --border-radius-sm: 4px; /* Mantenido */
    --border-radius-md: 8px; /* Mantenido: el tamaño ideal para la mayoría de elementos modernos */
    --border-radius-lg: 16px; /* Ajustado de 20px a 16px: un tamaño más estándar para tarjetas y elementos más grandes, aún muy suave. */

    /* --- Transiciones --- */
    /* Velocidad y curva de animación para una experiencia fluida. */
    --transition-speed: 0.25s; /* Ligeramente más rápido para mayor agilidad */
    --transition-timing: ease-out; /* Una curva de easing más suave y natural */

    /* --- Altura del Encabezado --- */
    --header-height: 64px; /* Ligeramente más alto para una presencia más elegante */

    /* --- Variables específicas para el buscador (¡Mejoradas para elegancia!) --- */
    --search-bg-color: var(--bg-100); /* Fondo del input de búsqueda: el blanco roto */
    --search-border-color: var(--bg-300); /* Borde del input: el gris claro y suave */
    --search-focus-glow-color: rgba(0, 123, 255, 0.1); /* Brillo de enfoque: sutil y azulado */
    --search-placeholder-color: var(--text-200); /* Color del placeholder: gris secundario */
    --search-icon-color: var(--text-200); /* Color del icono: gris secundario */
    --search-results-bg: var(--bg-100); /* Fondo de los resultados: el blanco roto */
    --search-results-border: var(--bg-300); /* Borde de los resultados: el gris claro */
    --search-results-shadow: var(--shadow-md); /* Sombra para los resultados: la sombra media elegante */
    --search-results-hover-bg: var(--bg-200); /* Fondo al pasar el mouse por un resultado: el gris muy claro, dando un toque limpio */

    /* --- Mapeo de variables antiguas a nuevas (no se tocan, solo se actualizan sus valores subyacentes) --- */
    --color-primary: var(--primary-200);
    --color-primary-light: var(--primary-300);
    --color-text-dark: var(--text-100);
    --color-text-subtle: var(--secondary-100);
    --color-background-light: var(--bg-200);
    --color-surface-white: var(--bg-100);
    --color-border-subtle: var(--bg-300);
    --color-error: var(--danger);

    --shadow-small: var(--shadow-sm);
    --shadow-medium: var(--shadow-md);
    --border-radius-card: var(--border-radius-md);
    --border-radius-pill: 999px;
    /* --- Variables para la Flecha del Popover (¡Revisa estos valores!) --- */
    --arrow-height: 0.5rem; /* Altura del triángulo de la flecha (8px) */
    --arrow-base: 1rem;     /* Ancho de la base del triángulo (16px) */
    --arrow-offset: 1.5px;  /* Offset para la flecha en relación con el borde del popover (ajustado para border-radius-md) */
    --spacing-xxl: 1rem;

    /* Variables de modal específicas (ajustadas) */
    --layshane-modal-bg: var(--bg-100);
    --layshane-modal-border-color: var(--bg-300);
    --layshane-modal-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --layshane-modal-header-padding: var(--spacing-lg) var(--spacing-xl);
    --layshane-modal-body-padding: var(--spacing-xl);
    --layshane-modal-footer-padding: var(--spacing-md) var(--spacing-xl);
    --layshane-modal-title-size: 1.5rem;
    --layshane-modal-close-color: var(--text-200);
    --layshane-modal-content-border-radius: var(--border-radius-md);

    /* Variables de formulario */
    --form-input-bg: var(--bg-200);
    --form-input-border: 1px solid var(--bg-300);
    --form-input-focus-shadow: 0 0 0 2px var(--search-focus-glow-color);

    /* Nuevas variables para el diseño de botones */
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.5rem;
    --btn-border-radius: var(--border-radius-md);
    --btn-font-size: 0.95rem;
    --btn-hover-scale: 1.05;
    --btn-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- Variables para el Modo Oscuro (Refinado con tus nombres de variable existentes) --- */
body.dark {
    /* Fondos: Tonos de gris oscuros, profundos pero con buen contraste. */
    --bg-100: #1a1a1a; /* El fondo más oscuro, un gris muy profundo, no negro absoluto */
    --bg-200: #2c2c2c; /* Fondo de tarjetas, paneles, sidebar: un gris oscuro medio */
    --bg-300: #424242; /* Fondo para inputs, hover/activo, separadores: un gris más claro para contraste */
    --bg-overlay: rgba(0, 0, 0, 0.75); /* Overlay más opaco para modales en oscuro */

    /* Textos: Claros y legibles sobre fondos oscuros. */
    --text-100: #ebebeb; /* Texto principal claro: un blanco muy suave */
    --text-200: #b0b0b0; /* Texto secundario: un gris claro intermedio */
    --text-active: #5bc0de; /* Un azul claro y fresco para enlaces/activos en modo oscuro */

    /* Colores primarios (Azules - ajustados para el modo oscuro) */
    --primary-100: #0d6efd; /* Azul principal para botones: un azul estándar, brillante en oscuro */
    --primary-200: #23a3ff; /* Azul vibrante: un azul claro y brillante para elementos destacados */
    --primary-300: #7ebae9; /* Azul más claro: un azul desaturado para elementos sutiles */
    
    /* Colores de estado (ligeramente ajustados para contraste en oscuro) */
    --success: #3cb371; /* Verde: un tono más vibrante y legible en oscuro */
    --danger: #dc3545; /* Rojo: mantenido */
    --warning: #ffb74d; /* Amarillo: un tono naranja-amarillo que resalta bien */
    --info: #64b5f6; /* Nuevo: Un azul más claro para mayor visibilidad en la noche */

    /* Sombras (más sutiles y oscuras para modo oscuro) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); /* Sombra sutil en oscuro */
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.6); /* Sombra media en oscuro, que se mezcla bien */
    /* shadow-lg si existiera: 0 6px 16px rgba(0, 0, 0, 0.7); */

    /* Variables específicas para el buscador (Tema Oscuro) */
    --search-bg-color: var(--bg-300); /* Fondo del input de búsqueda: el gris medio oscuro */
    --search-border-color: transparent; /* Borde transparente para un look limpio */
    --search-focus-glow-color: rgba(35, 163, 255, 0.35); /* Brillo de enfoque con el nuevo azul */
    --search-placeholder-color: var(--text-200); /* Placeholder más claro */
    --search-icon-color: var(--text-200); /* Icono más claro */
    --search-results-bg: var(--bg-200); /* Fondo de los resultados: el gris oscuro principal */
    --search-results-border: var(--bg-300); /* Borde de los resultados: coincide con el input */
    --search-results-shadow: var(--shadow-md); /* Sombra para los resultados: la sombra media */
    --search-results-hover-bg: #4e4f50; /* Fondo al pasar el mouse por un resultado: un gris ligeramente más claro para contraste */
    /* --- Variables para la Flecha del Popover en modo oscuro (mantener iguales por consistencia) --- */
    --arrow-height: 0.5rem; 
    --arrow-base: 1rem;
    --arrow-offset: 1.5px; 

    /* Variables de modal en modo oscuro (corregidas) */
    --layshane-modal-bg: var(--bg-200); /* Fondo del modal oscuro */
    --layshane-modal-border-color: var(--bg-300); /* Color de línea más claro para contraste */
    --layshane-modal-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); /* Sombra más oscura */
    --layshane-modal-close-color: var(--text-200); /* Color del icono de cerrar */

    /* Variables de formulario en modo oscuro (corregidas) */
    --form-input-bg: var(--bg-300);
    --form-input-border: 1px solid var(--bg-300);
    --form-input-focus-shadow: 0 0 0 2px rgba(35, 163, 255, 0.35);

    /* Variables de botones en modo oscuro (corregidas) */
    --btn-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html, body {
    height: 100%; /* Aseguramos que el html y el body ocupen toda la altura */
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: var(--text-100);
    background-color: var(--bg-300); /* Un fondo general ligeramente gris */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[role=button]{cursor:pointer;}
a{text-decoration:none;}
ol, ul {
    list-style: none;
    margin-bottom: 10px;
}
svg:not(:root) {
    overflow-clip-margin: content-box;
    overflow: hidden;
}
svg {
    vertical-align: middle;
}
#toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toast {
    min-width: 260px;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
    position: relative;
}

.toast .icon {
    font-size: 20px;
    margin-top: 2px;
}

.toast .content {
    flex-grow: 1;
}

.toast .close-btn {
    background: none;
    border: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 10px;
}

.toast.success { background-color: #28a745; }   /* Verde */
.toast.info    { background-color: #007bff; }   /* Azul */
.toast.warning { background-color: #ffc107; color: #333; } /* Amarillo */
.toast.error   { background-color: #dc3545; }   /* Rojo */

@keyframes fadeIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateX(100%); }
}

/* From Uiverse.io by Nawsome */ 
.hamster-loader {
  --dur: 1s;
  position: relative;
  width: 100%;
  height: 3.75em;
  font-size: 14px;
  display:flex;
  justify-content:center;
}

.wheel,
.hamster,
.hamster div,
.spoke {
  position: absolute;
}

.wheel,
.spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
  z-index: 2;
}

.hamster {
  width: 7em;
  height: 3.75em;
  z-index: 1;
}

.hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
        0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}

.hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}

.hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
        0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}

.hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}

.hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  transform: rotate(-25deg);
}

.hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}

.spoke {
  animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
        linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

/* Animations */
@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}

@keyframes spoke {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}

.pointer{cursor:pointer;}
/*Container aplication*/
.container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: 320px 1fr; /* ¡MODIFICADO A 280px! */
    grid-template-rows: auto 1fr;
    height: 100vh;
    transition: grid-template-columns var(--transition-speed) var(--transition-timing);
}
.container:not(:has(.sidebar)) { /* Nota: :has() tiene soporte limitado en algunos navegadores antiguos */
    grid-template-areas:
        "header"
        "main";
    grid-template-columns: 1fr;
}
/*END Container aplication*/
/* style.css (O tu archivo CSS global principal) */

/* ESTILO PARA EL CONTENEDOR <header class="header"> PRINCIPAL Y GLOBAL */
.header {
    grid-area: header; /* Mantener si usas CSS Grid */
    display: flex;
    justify-content: space-between; /* Espacia los grupos de contenido (izquierda y derecha) */
    align-items: center; /* Centra los elementos verticalmente */
    padding: var(--spacing-sm) var(--spacing-lg); /* Padding moderno */
    background-color: var(--bg-100); /* Fondo blanco limpio */
    color: var(--text-100);
    box-shadow: var(--shadow-sm); /* Sombra sutil */
    width: 100%; /* Ocupa todo el ancho disponible */
    position: sticky; /* Se pega al top */
    top: 0;
    z-index: 100; /* Asegura que esté por encima de otros contenidos */
    border-bottom: 1px solid var(--bg-300); /* Línea sutil en la parte inferior */
    box-sizing: border-box; /* Incluye el padding y borde en el tamaño total */
    min-height: var(--header-height); /* Asegura una altura mínima */
}

/* Estilos para el logo común que puede ser usado dentro de .header */
.logo {
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    justify-content:flex-start;
    text-align:left;
}
.vercion_app{font-size:10px;}
.logo img {
    max-width: 255px; /* Ajusta el tamaño del logo */
}

/* Estilos para el contenedor de elementos a la derecha del header */
.header-right {
    display: flex;
    align-items: center; /* Centrar verticalmente */
    gap: var(--spacing-md); /* Espacio entre los elementos de la derecha */
}

/* Estilos para notificaciones o elementos con badge */
.notifications {
    position: relative; /* Necesario para el conteo de notificaciones */
    /* margin-right: 20px; Eliminado porque 'gap' en .header-right lo maneja mejor */
}

.notification-btn {
    background: none;
    border: none;
    color:var(--text-100);
    font-size: 20px;
    cursor: pointer;
    padding: var(--spacing-sm); /* Añadir padding para área de click */
    border-radius: 50%; /* Hacerlo circular */
    transition: background-color var(--transition-speed) var(--transition-timing);
}
.notification-btn:hover {
    background-color: var(--bg-200);
}

.notification-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--danger); /* Usar variable global */
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 12px;
    color: var(--bg-100); /* Usar variable para color de texto en badge */
    border: 2px solid var(--bg-100); /* Borde blanco para destacarlo */
    min-width: 20px; /* Asegurar que el círculo sea visible incluso con un dígito */
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
}

/* Estilos para elementos como reloj o botones de acción */
.clock {
    /* margin-right: 20px; Eliminado por 'gap' en .header-right */
    font-size: 0.9rem;
    color: var(--text-200);
    padding: var(--spacing-sm);
    background-color: var(--bg-200);
    border-radius: var(--border-radius-sm);
}

.fullscreen-btn {
    background: none;
    border: none;
    color: var(--text-100);
    font-size: 20px;
    cursor: pointer;
    padding: var(--spacing-sm); /* Añadir padding para área de click */
    border-radius: 50%; /* Hacerlo circular */
    transition: background-color var(--transition-speed) var(--transition-timing);
}
.fullscreen-btn:hover {
    background-color: var(--bg-200);
}

/* Sidebar */
.sidebar {
    grid-area: sidebar;
    background-color: var(--bg-100);
    padding: var(--spacing-md);
    overflow-y: auto; /* Permite scroll si el contenido es largo */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el botón de salir hacia abajo */
    box-shadow: var(--shadow-sm); /* Sombra sutil a la derecha */
    z-index: 5; /* Por debajo del header pero por encima del main en el grid */
}
/* END Sidebar */

/* Main Content Area */
.main {
    grid-area: main;
    overflow-y: auto;
    padding: var(--spacing-xl); /* Espaciado generoso */
    background-color: var(--bg-300); /* Fondo para el contenido principal */
}
/* END Main */

/* Alertas generales */
.alert_bottom_right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin: 10px;
    display: none;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(20px);
    z-index: 1050;
}
.alert_bottom_right.show {
    opacity: 1;
    transform: translateY(0);
}
.alert_message {
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 1.5;
}
.alert_progress_bar {
    height: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    width: 0%;
    border-radius: 3px;
    transition: width 0s;
}
.alert_bottom_right.error {
    background-color: #e74c3c;
}
.alert_bottom_right.success {
    background-color: #2ecc71;
}
.alert_bottom_right.warning {
    background-color: #f39c12;
}
.alert_bottom_right.info {
    background-color: #3498db;
}
.alert_bottom_right {
    border-left: 6px solid transparent;
}

.alert_bottom_right.error {
    border-left-color: #c0392b;
}

.alert_bottom_right.success {
    border-left-color: #27ae60;
}

.alert_bottom_right.warning {
    border-left-color: #e67e22;
}

.alert_bottom_right.info {
    border-left-color: #2980b9;
}
.alert_bottom_right .alert_message {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.alert_progress_bar {
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
    border-radius: 50px;
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}
/* END Alertas generales */

.tienda_activo_layshane_peru{
    display:flex;
    padding:15px;
    border-radius:16px;
    background-color:var(--primary-300);
    justify-content:center;
    align-items:center;
    flex-direction:column;
    user-select:none;
    cursor:pointer;
    color:var(--text-100);
    gap: .5rem;
    border:1px dashed var(--text-200);
    margin-bottom:20px;
    margin-top:10px;
    text-transform:uppercase;
    font-size:12px;
}
.tienda_activo_layshane_peru svg{
    width:30px;
    height:30px;
}
.lista_options {
    display: grid;
    gap: var(--spacing-sm); /* Espaciado entre elementos principales */
    width: 100%;
    list-style: none; /* Quitar viñetas de lista */
    padding: 0; /* Quitar padding por defecto */
    margin: 0;
}

.otras_opciones {
    width: 100%;
    margin-top: var(--spacing-lg); /* Espacio para separar */
}

/* Estilo para cada opción de menú (enlaces directos y padres de submenús) */
.opcion_menu {
    display: flex;
    gap: var(--spacing-sm);
    background: var(--bg-100); /* Fondo por defecto */
    padding: var(--spacing-sm) var(--spacing-lg); /* Padding más equilibrado */
    user-select: none;
    border-radius: var(--border-radius-md); /* Un poco más suave */
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: background var(--transition-speed) var(--transition-timing),
                color var(--transition-speed) var(--transition-timing);
    font-weight: 500; /* Un poco más de peso */
    color: var(--text-200);
    text-decoration: none; /* Quitar subrayado en enlaces */
    white-space: nowrap; /* Evitar que el texto se rompa */
    box-sizing: border-box; /* Asegurar que el padding no desborde */
}

/* Íconos SVG dentro de .opcion_menu */
.opcion_menu svg {
    color: var(--primary-200);
    width: 24px; /* Tamaño más estándar */
    height: 24px;
    flex-shrink: 0; /* Asegurar que no se encoja */
}

/* Estado Hover para .opcion_menu */
.opcion_menu:hover {
    background: var(--bg-200); /* Fondo ligeramente más oscuro */
    color: var(--text-100);
}

/* Estado Activo para .opcion_menu (página actual) */
.opcion_menu.active {
    background: var(--bg-200);
    color: var(--primary-100); /* Resaltar el texto con el color primario */
    font-weight: 600; /* Más peso para el activo */
    box-shadow: var(--shadow-sm); /* Sombra sutil para el activo */
}
.opcion_menu.active svg {
    color: var(--primary-100); /* El ícono también toma el color primario */
}

/* --- Estilos para Collapsibles (Submenús) --- */
.menu-item-has-children {
    list-style: none; /* Eliminar viñeta de la lista padre */
    padding: 0;
    margin: 0;
    position: relative;
    /* Esto es importante: el padding y border-radius del a interno manejará el look */
}

.menu-item-has-children > a {
    /* Estilo del elemento padre del menú desplegable */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    color: var(--text-200);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-speed) var(--transition-timing), color var(--transition-speed) var(--transition-timing);
    font-weight: 500;
    background: var(--bg-100);
    position: relative; /* Para posicionar el ícono de flecha */
}

.menu-item-has-children > a svg {
    color: var(--primary-200);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.menu-item-has-children > a:hover {
    background: var(--bg-200);
    color: var(--text-100);
}

/* Indicador de flecha para submenús */
.menu-item-has-children > a::after {
    content: '❯'; /* O un icono de flecha SVG/Font Awesome */
    margin-left: auto; /* Empuja la flecha a la derecha */
    transition: transform var(--transition-speed) var(--transition-timing);
    font-size: 0.8em;
    color: var(--text-200);
}

/* Rotar flecha cuando el submenú está abierto */
.menu-item-has-children.open > a::after {
    transform: rotate(90deg);
}

/* Estilos para el submenú */
.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden; /* Importante para la transición de altura */
    max-height: 0; /* Por defecto oculto */
    transition: max-height var(--transition-speed) var(--transition-timing);
    padding-left: var(--spacing-lg); /* Indentar submenú */
}

/* Mostrar submenú cuando el padre tiene la clase 'open' */
.menu-item-has-children.open .sub-menu {
    max-height: 500px; /* Suficientemente grande para contener todos los elementos */
    /* Puedes calcular una altura más precisa con JS si el número de elementos varía mucho */
    margin-top: var(--spacing-sm); /* Espacio entre el padre y el primer subitem */
}

/* Estilo para los elementos del submenú */
.sub-menu .opcion_menu {
    padding-top: var(--spacing-xs); /* Menos padding vertical para sub-items */
    padding-bottom: var(--spacing-xs);
    font-weight: 400; /* Menos peso en el texto del sub-item */
    background: none; /* No queremos el fondo del .opcion_menu si ya tiene el padre */
    border-radius: var(--border-radius-sm); /* Un poco menos redondeado */
    color: var(--text-200); /* Color de texto normal */
}

.sub-menu .opcion_menu:hover {
    background: var(--bg-200);
    color: var(--text-100);
}

.sub-menu .opcion_menu.active {
    background: var(--bg-200);
    color: var(--primary-100);
    font-weight: 500;
    box-shadow: none; /* No box-shadow para sub-items activos */
}
.sub-menu .opcion_menu.active svg {
    color: var(--primary-100);
}


/* --- Salir (Logout) --- */
.exit_login {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    user-select: none;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-timing);
    text-decoration: none;
    color: var(--text-200);
    margin-top: auto; /* Empuja este elemento al final del sidebar */
}

.exit_login svg {
    height: 28px; /* Un poco más pequeños que antes */
    width: 28px;
    color: var(--danger); /* Rojo para el ícono de salir */
    transition: all var(--transition-speed) var(--transition-timing);
}

.exit_login span {
    color: var(--text-200);
    font-weight: 500;
    transition: color var(--transition-speed) var(--transition-timing);
}

.exit_login:hover {
    background: var(--bg-200);
    border-radius: var(--border-radius-md);
}

.exit_login:active {
    gap: var(--spacing-xs); /* Efecto de "clic" */
}
.exit_login:active span {
    color: var(--danger); /* El texto también se pone rojo al hacer clic */
}
.exit_login:active svg {
    transform: translateX(2px); /* Pequeño movimiento al hacer clic */
}
/* Estilo para el padre de submenú cuando una de sus hijas está activa */
/* Esto aplica a la etiqueta 'a' directamente dentro del LI padre marcado como activo */
.menu-item-has-children.active > a {
    background: var(--bg-200); /* Mismo fondo que un item activo normal */
    color: var(--primary-100); /* Color primario para el texto del padre */
    font-weight: 600; /* Negrita para el padre activo */
    box-shadow: var(--shadow-sm); /* Sombra sutil para el padre activo */
}

/* Asegurar que el ícono y la flecha del padre activo también cambien de color */
.menu-item-has-children.active > a svg {
    color: var(--primary-100); /* El ícono también toma el color primario */
}

.menu-item-has-children.active > a::after {
    color: var(--primary-100); /* La flecha también toma el color primario */
}
/* --- Controls Pages (Footer del Sidebar) --- */
.controls_pages {
    display: flex;
    width: 100%;
    background: var(--bg-100);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    align-items: center;
    user-select: none;
    justify-content: space-between;
    box-shadow: var(--shadow-sm); /* Sutil sombra */
    margin-top: var(--spacing-lg); /* Espacio superior */
}

.icons_controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs);
}

.icons_controls svg {
    width: 20px;
    height: 20px;
    color: var(--text-200);
    cursor: pointer;
    transition: color var(--transition-speed) var(--transition-timing);
}
.icons_controls svg:hover {
    color: var(--primary-200);
}
/* Estilos existentes del botón */
.boton_controns{display:flex;gap:.5rem;}
.buttons_g {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    background: var(--primary-200);
    color: var(--bg-200);
    outline: none;
    user-select: none;
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    position: relative; /* Para que el progress bar se posicione dentro del botón */
    transition: all 0.3s;
    overflow:hidden;
}
.buttons_g span{position:relative;z-index:1}

.buttons_g:hover {
    opacity: 0.8;
}

.buttons_g:active {
    background: var(--primary-100);
    color: var(--bg-100);
}

/* Estilos para la barra de progreso */
.progress {
    position: absolute;
    bottom: 0;
    left: 0;
    top:0;
    bottom:0;
    height: 100%;
    background-color: var(--accent-200);
    color:var(--bg-400);
    width: 0%; /* Inicialmente la barra no es visible */
    transition: width 0.4s ease; /* Animación de la barra */
    border-radius:15px;
}


/*Modal*/
/*Mat Modal*/
.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
    padding: 24px;
    border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
    border: 0;
    font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
}

.modal, .modal-backdrop{top:0;right:0;bottom:0;left:0;}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.modal{position:fixed;z-index:1050;display:none;-webkit-overflow-scrolling:touch;outline:0}

.modal.fade .modal-dialog{
  -webkit-transition:-webkit-transform .3s ease-out;
  -o-transition:-o-transform .3s ease-out;
  transition:transform .3s ease-out;
  -webkit-transform:translate(0,-25%);
  -ms-transform:translate(0,-25%);
  -o-transform:translate(0,-25%);
  transform:translate(0,-25%);
}
.modal.in .modal-dialog{
  -webkit-transform:translate(0,0);
  -ms-transform:translate(0,0);
  -o-transform:translate(0,0);
  transform:translate(0,0)
}

.modal-dialog{position:relative;}
.fade.in {
    opacity: 1;
}
.modal-open .modal{overflow-x:hidden;overflow-y:auto}
body.modal-open {overflow:hidden;position:fixed;width:100%;}
.modal-backdrop{position:fixed;z-index:1040;background-color:#000}
.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}
.modal-backdrop.in{filter:alpha(opacity=80);opacity:.8}
.modal-header{min-height:16.43px;padding:0;margin: 0 0 20px;border-top-right-radius:3px;border-top-left-radius:5px;display:flex;justify-content:space-between;}
.modal-header .close {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    margin-top:-2px;
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
.modal-header .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity = 50);
    opacity: .5;
}
.modal-title{margin:0;color:#1d2129;font-size:20px;line-height:32px;
  display:contents;font-weight:bold;}
.modal-body form,
.modal-body{position:relative;padding:0;display:flex;flex-wrap:wrap;gap:1.5rem;}
.modal-body form{width:100%;}
.modal-footer{display:flex;justify-content:flex-end;}
.modal-footer .btn{margin-top:10px;font-size:14px;padding:6px 12px;font-weight:400;min-width: 64px;
    line-height: 36px;}
.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px;}
.modal-footer .btn-group .btn+.btn{margin-left:-1px}
.modal-footer .btn-block+.btn-block{margin-left:0}
.modal-scrollbar-measure{
  position:absolute;
  top:-9999px;
  width:50px;
  height:50px;
  overflow:scroll
}
/* --- Media Queries para el Sidebar Móvil --- */
.menu-toggle {
    display: none; /* Ocultar por defecto en desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    color: var(--text-100);
}
.menu-toggle svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 992px) {
    .menu-toggle {
        display: block; /* Mostrar en tablet y móvil */
    }
    .header-left {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }
}
/* Para pantallas de hasta 992px (ej. tablets en vertical) */
@media (max-width: 992px) {
    .container {
        /* En móvil, el sidebar no estará en el flujo principal del grid */
        grid-template-areas:
            "header"
            "main";
        grid-template-columns: 1fr; /* Una sola columna */
        grid-template-rows: auto 1fr;
    }

    .sidebar {
        /* Ocultar el sidebar por defecto en móvil */
        position: fixed; /* Lo fijamos a la ventana */
        top: 0;
        left: -290px; /* Lo ocultamos fuera de la pantalla (igual que su ancho) */
        width: 290px; /* Mantener su ancho definido */
        height: 100vh; /* Que ocupe toda la altura de la vista */
        z-index: 1000; /* Asegurar que esté por encima de casi todo */
        box-shadow: var(--shadow-md); /* Sombra más pronunciada al salir */
        transition: left var(--transition-speed) var(--transition-timing); /* Animación suave */
    }

    /* Clase para mostrar el sidebar (se añade al body o container con JS) */
    .container.sidebar-open .sidebar {
        left: 0; /* Moverlo a la posición visible */
    }

    /* Overlay oscuro cuando el sidebar está abierto */
    .container.sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bg-overlay); /* Fondo semitransparente */
        z-index: 999; /* Por debajo del sidebar pero por encima del main */
    }

    /* Ocultar el scroll del body cuando el sidebar está abierto */
    body.no-scroll { /* Añadiremos esta clase al body con JS */
        overflow: hidden;
    }
}

/* Opcional: Ajustes para pantallas muy pequeñas (smartphones) */
@media (max-width: 576px) {
    .sidebar {
        width: 88%; /* Ocupar un 80% del ancho para dejar un margen */
        left: -88%;
    }
    .container.sidebar-open .sidebar {
        left: 0;
    }
    .main {
        padding: var(--spacing-md); /* Menos padding en pantallas muy pequeñas */
    }
}
@media (min-width: 768px){
  .modal-dialog.big{
    width:800px!important
  }
  .modal-dialog{
    width:600px;
    margin:50px auto
  }
  .modal-sm{
    width:300px
  }
}

.modal.fade {
    text-align: center;
    padding: 0 !important;
}
.modal_joseLuis{
    width:100%;
    max-width:400px;
    margin:auto;
    margin-right:0;
    height:100%;
}
.modal_joseLuis .modal-content{
    height:100%;
}
.modal-content .scro_sty_d_luo{
    overflow-x:hidden;
    scroll:auto;
}
.modal_joseLuis_galery{
    width:100%;
    max-width:800px;
    margin:auto;
    margin-right:0;
    height:100%;
}
.modal_joseLuis_galery .modal-content{
    height:100%;
}

/**Modal end***/

.dropdown-menu.show:not(.notfi-dropdown):not([role=combobox]) {
    transition: opacity 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms;
    transform: none;
    opacity: 1;
    visibility: visible;
}
.collapsing, .dropdown, .dropup {
    position: relative;
}
/*Dropdown*/
.dropdown-menu:not(.notfi-dropdown):not([role=combobox]) {border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;box-shadow:0 12px 28px 0 rgba(0, 0, 0, 0.20),0 2px 4px 0 rgba(0, 0, 0, 0.1),inset 0 0 0 1px rgba(255, 255, 255, 0.5);padding: 8px 0;transform: scale3d(.8,.8,1);transform-origin: right top;display: block;opacity: 0;visibility: hidden;border: 0;}
.dropdown-menu.toleft {transform-origin: left top !important;}
.open>.dropdown-menu:not(.notfi-dropdown):not([role=combobox]) {transition: opacity 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms;transform: none;opacity: 1;visibility: visible;}
.dropdown-menu:not(.notfi-dropdown) > li > a {padding: 5px 15px;line-height: 30px;}
.navbar-nav>li>.dropdown-menu{margin-top:0;}
@media (min-width: 768px){
.navbar-right .dropdown-menu{right:0;left:auto;}
}
.btn,.dropdown-header,.dropdown-menu>li>a{line-height:1.42857143;white-space:nowrap}
.dropdown-menu,.modal-content{-webkit-background-clip:padding-box}
.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:180px;padding:5px 0;font-size:13px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);}
.dropdown-menu-right,.dropdown-menu.pull-right{right:auto;left:auto!important}
.dropdown-menu .divider{height:1px;overflow:hidden;background-color:#ededed}
.dropdown-menu>li>a{display:block;padding:5px 10px;clear:both;font-weight:400;font-size:14.5px;color:#555;text-shadow:none;}
.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:var(--boton-color);text-decoration:none;background-color:var(--boton-fondo);}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}
.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}
.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid: DXImageTransform.Microsoft.gradient(enabled=false)}
.open>.dropdown-menu{display:block}
.open>a{outline:0}
.dropdown-menu-left{right:auto;left:0}
.dropdown-header{display:block;padding:3px 20px;font-size:13px;color:#777}
.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;}
.nav-justified>.dropdown .dropdown-menu,.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}
.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover,.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}
.pull-right>.dropdown-menu{right:0;left:auto}
.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px solid}
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}
@media (min-width: 768px) {
.navbar-right .dropdown-menu.notifications-dropdown{left:auto;overflow-x:hidden}
.navbar-right .dropdown-menu{right:0;left:auto}
.navbar-right .dropdown-menu-left{right:auto;left:0}
}
.btn-group-justified>.btn-group .dropdown-menu{left:auto}
[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}
.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
.navbar{border:1px solid transparent}
.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu{right:0;left:auto}
.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding: 5px 15px 5px 25px}
.navbar-nav .open .dropdown-menu>li>a{line-height:30px}
.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover {
    background-image: none
}
}
.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-radius: 4px 4px 0 0}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}
    .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#333;background-color:transparent}
    .navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}
    .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}
}
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#999}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#fff}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}
}
.dropdown_losproductosLista {
    right: 0 !important;
    left: auto !important;
    top: 0;
}
.pulsedrob{
    display: flex;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    flex-direction:column;
}
.dropdown_losproductosContenido2 .dropdown-toggle {
    background-color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border: none;
    outline: none;
}
.dropdown_losproductosContenido2 {
    position: relative;
    display: inline-block;
}
.dropdown_losproductosContenido .dropdown-menu {
    position: absolute;
    top: 10%;
    right: 0;
    background-color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: none;
    width: 150px;
}

.dropdown_losproductosContenidox .dropdown-menu {
    top: 100%;
}
.dropdown_losproductosContenidox .dropdown-toggle{display:inline-block;}
.dropdown_losproductosContenido .dropdown-menu::before {
    content: " ";
    position: absolute;
    top: -10px;
    right: 12px;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.dropdown_losproductosContenido .dropdown-menu ul {
    margin: 0;
    padding: 0;
}
.dropdown_losproductosContenido .dropdown-menu li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #333;
    transition:all .4s;
}
.dropdown_losproductosContenido .dropdown-menu li span {
    padding-right: 7px;
}
.dropdown_losproductosContenido .dropdown-menu li:hover {
    background-color: #f5f5f5;
}
/*Dropdown end*/
.los_datos_modal_lista {
    margin-top: 16px;
    gap:1rem!important;
    overflow: auto!important;
}
.null_data,
.null_catts{display:block;width:100%;text-align:center;padding:10px;margin-top:20px;user-select:none}
.use_non{overflow:auto;}
.add_Joseluis_lista{
    display:flex;
    height:calc(100% - 50px);
    flex-direction:column;
    position:relative;
    justify-content:space-between;
    gap:1rem;

}
.content_add_LuisLE{
    display:flex;
    justify-content:flex-start;
    gap:1rem;
    align-items:center;
    border-radius:8px;
    border:2px solid #333;
    padding:20px;
    transition:all .4s;
    user-select:none;
    cursor:pointer;
}
.content_add_LuisLE:hover{
    background-color:#dee7ed;
}
.add_Joseluis_lista div{
    width:100%;
    position: relative;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.add_Joseluis_lista select{cursor:pointer;}
.add_Joseluis_lista select,
.add_Joseluis_lista input,
.add_Joseluis_lista textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.5rem;
    font-weight: 400;
    font-family: var(--font-nunito, 'Helvetica', 'sans-serif', 'Arial');
    border-radius: 0.75rem;
    outline-style: none;
    color: rgb(26, 39, 50);
    border: 2px solid rgb(195, 204, 213);
    padding: 8px 16px;
}
.btn_auto_vat,.delete_categorr,.add_categorr{
    width:100%;
    margin-top:10px;
    padding:15px 10px;
}
.delete_categorr{
    background-color:transparent;
    margin-top:10px;
    color:#ff3b3b;
    font-weight:700;
    text-decoration: underline;
    display:flex;
    justify-content:center;
    align-items:center;
}
.delete_categorr:active{background:transparent;color:#d31010}
.ad_title_categori{display:flex;justify-content:flex-start;align-items:center;gap:1rem;cursor:pointer;}
.icon_datos_LuisLEdata,
.icon_categorys {
    display: flex;
    margin: 0px 12px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    overflow: hidden;
}
.lista_datos_luisLE:hover,
.lista_categories:hover {
    background: rgb(243, 245, 247)!important;
}
.icon_datos_LuisLEdata > :first-child,
.icon_categorys > :first-child {
    border: none;
    width: 100% !important;
    height: 100% !important;
}
.conten_list_name_cats {
    display: flex;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex-grow: 1;
    overflow: hidden;
    margin-left: 0px;
}
.lista_datos_luisLE div,
.lista_categories div {
    height: 48px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    flex-direction: column;
}
.conten_list_name_cats_NN {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    gap: 4px;
}
.name_LEdata_lis,
.name_catery_lis {
    line-height: 1.5rem;
    font-weight: 700;
    font-style: normal;
    font-size: 1rem;
    font-family: var(--font-nunito, 'Nunito Sans', 'Helvetica', 'sans-serif', 'Arial');
    margin: 1em;
    padding: 0px;
    color: rgb(26, 39, 50);
    text-transform: none;
}
.conten_list_name_cats_NN p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0px;
    text-align: left;text-transform: capitalize;
}
.option_datos_MLE,
.option_categorys{
    display: flex;
    margin: 0px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    overflow: hidden;
}
.option_datos_MLE > :first-child,
.option_categorys > :first-child {
    border: none;
    width: 100% !important;
    height: 100% !important;
}
.lista_datos_luisLE,
.lista_categories {
    overflow: hidden;
    cursor: pointer;
    transition: background-color 300ms linear;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 8px;
    width: 100%;
    background: rgb(255, 255, 255);
    border-style: solid;
    border-color: rgb(195, 204, 213);
    border-width: 2px;
    border-radius: 12px;
    gap: 8px;

    padding: 12px;
    border-color: rgb(234, 236, 241);
}
.foter_dash{
    width:100%;
    margin-top:10px;
}
.foter_dash button{
    width:100%;
}
/*Tablas*/
.stock_bajo{
    position:relative;
    background-color: rgba(255, 0, 0, 0.1)!important;
    padding-left: 10px!important;
}
.stock_bajo::before {
    content: ''; /* Necesario para que el pseudo-elemento sea visible */
    position: absolute;
    left: 0; /* Posición del borde a la izquierda */
    top: 10%; /* Ajusta este valor para centrar verticalmente */
    width: 4px; /* Ancho del borde */
    height: 80%; /* Altura del borde */
    background: linear-gradient(to bottom, red, orange); /* Gradiente de color */
    border-radius: 2px; /* Opcional: para bordes redondeados */
}
.data_proveedors div{
    align-items:center;
    justify-content:space-between;
    width:100%;
    flex-direction:row;
    padding:10px 0;
}

.list_mopd_pay_cont {
    display: grid !important;
    gap: .3rem !important;
    grid-template-columns: repeat(2, 1fr);
}
.select-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Ajusta según tus necesidades */
}

.select-inputsty{
    width: 100%;
    padding: 10px;
    border: 2px solid var(--primary-100);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-100);
    background-color: #fff;
    outline: none;
    cursor: pointer; /* Cambiar el cursor para indicar interactividad */
}

.select-dropdown_style {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 2px solid var(--primary-100);
    border-radius: 0 0 8px 8px;
    background-color: #fff;
    z-index: 10;
    display: none; /* Inicialmente oculto */
    max-height: 150px; /* Ajusta la altura según sea necesario */
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option_style {
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.option_style:hover {
    background-color: var(--primary-100); /* Cambia el color al pasar el mouse */
    color: #fff; /* Cambia el color del texto al pasar el mouse */
}

.selected {
    background-color: var(--primary-200); /* Color de fondo para la opción seleccionada */
    color: #fff; /* Color del texto para la opción seleccionada */
}
.pos_venta_active{grid-template-columns: 90px 1fr!important;}
.pos_venta_active .sidebar .otras_opciones .exit_login{padding: 20px!important}
.pos_venta_active .sidebar .lista_options .opcion_menu span,
.pos_venta_active .sidebar .otras_opciones .exit_login span{display:none!important;}




/* Estilos para el header_a */
.client-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Estilos para el logo dentro del header del cliente (si difiere del global) */
.client-header-left .logo img {
    height: 45px;
    width: auto;
}

/* Navegación principal del cliente para desktop */
.client-navbar-desktop {
    display: flex;
    gap: var(--spacing-lg);
    font-weight: 500;
}

.client-navbar-desktop a {
    text-decoration: none;
    color: var(--text-200);
    font-size: 1rem;
    padding: var(--spacing-sm) 0;
    transition: color var(--transition-speed) var(--transition-timing);
    position: relative;
}

.client-navbar-desktop a:hover {
    color: var(--primary-100);
}

.client-navbar-desktop a.active {
    color: var(--primary-100);
    font-weight: 600;
}
.client-navbar-desktop a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-100);
    border-radius: 1px;
}

/* Estilo para el Toggle menú en móvil (Hamburguesa) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    position: relative;
    z-index: 1001; /* Alto para estar por encima del contenido del header */
}

.menu-toggle span {
    height: 3px;
    width: 100%;
    background-color: var(--text-100);
    border-radius: 2px;
    transition: all var(--transition-speed) var(--transition-timing);
    position: absolute;
    left: 0;
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 9.5px; }
.menu-toggle span:nth-child(3) { top: 19px; }

.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* Iconos de la derecha: asegúrate de que usan los estilos globales de .notification-btn y .mi-cuenta */
.mi-cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-100);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    text-decoration: none;
    font-size: 20px;
    transition: background var(--transition-speed) var(--transition-timing);
}

.mi-cuenta:hover {
    background-color: var(--primary-200);
}

.mi-cuenta svg {
    fill: currentColor; /* Corrección para el SVG del usuario */
}

/* Responsive para Header_a (contenido del cliente) */
@media (max-width: 992px) {
    .client-navbar-desktop { display: none; }
    .menu-toggle { display: flex; }
    .client-header-left { gap: var(--spacing-sm); }
}
@media (max-width: 576px) {
    /* Los paddings del .header global se ajustarán. */
    /* .header-right { gap: var(--spacing-sm); } */
    /* .clock, .fullscreen-btn { display: none !important; } */
}
/* **NUEVO** Estilo para el overlay HTML */
.client-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-overlay);
    z-index: 1040; /* Este debe ser menor que el sidebar */
    opacity: 0; /* Oculto por defecto */
    visibility: hidden; /* Oculto por defecto */
    transition: opacity var(--transition-speed) var(--transition-timing), visibility var(--transition-speed) var(--transition-timing);
}
/* CLIENT MENU SIDEBAR (z-index ajustado) */
.client-menu-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background-color: var(--bg-100);
    box-shadow: var(--shadow-md);
    z-index: 1050; /* **Este debe ser mayor que el overlay** */
    transition: left var(--transition-speed) var(--transition-timing);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md) 0;
    overflow-y: auto;
}

.client-menu-sidebar .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--bg-300);
    margin-bottom: var(--spacing-md);
}

.client-menu-sidebar .sidebar-header .logo img {
    height: 40px;
    width: auto;
}

.client-menu-sidebar .close-sidebar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    color: var(--text-200);
    transition: color 0.2s ease;
}
.client-menu-sidebar .close-sidebar-btn:hover {
    color: var(--primary-100);
}

.client-menu-sidebar .lista_options {
    list-style: none;
    padding: 0 var(--spacing-md);
    margin: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.client-menu-sidebar .opcion_menu {
    display: flex;
    gap: var(--spacing-sm);
    background: var(--bg-100);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    align-items: center;
    cursor: pointer;
    transition: background var(--transition-speed) var(--transition-timing),
                color var(--transition-speed) var(--transition-timing);
    font-weight: 500;
    color: var(--text-200);
    text-decoration: none;
}
.client-menu-sidebar .opcion_menu:hover {
    background: var(--bg-200);
    color: var(--text-100);
}
.client-menu-sidebar .opcion_menu.active {
    background: var(--bg-200);
    color: var(--primary-100);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.client-menu-sidebar .opcion_menu svg,
.client-menu-sidebar .opcion_menu i {
    color: var(--primary-200);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.client-menu-sidebar .opcion_menu.active svg,
.client-menu-sidebar .opcion_menu.active i {
    color: var(--primary-100);
}

.client-menu-sidebar .menu-item-has-children {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.client-menu-sidebar .menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    color: var(--text-200);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-speed) var(--transition-timing), color var(--transition-speed) var(--transition-timing);
    font-weight: 500;
    background: var(--bg-100);
    position: relative;
}
.client-menu-sidebar .menu-item-has-children > a:hover {
    background: var(--bg-200);
    color: var(--text-100);
}
.client-menu-sidebar .menu-item-has-children.active > a {
    background: var(--bg-200);
    color: var(--primary-100);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.client-menu-sidebar .menu-item-has-children.active > a svg,
.client-menu-sidebar .menu-item-has-children.active > a i {
    color: var(--primary-100);
}
.client-menu-sidebar .menu-item-has-children > a::after {
    content: '❯';
    margin-left: auto;
    transition: transform var(--transition-speed) var(--transition-timing);
    font-size: 0.8em;
    color: var(--text-200);
}
.client-menu-sidebar .menu-item-has-children.open > a::after {
    transform: rotate(90deg);
}

.client-menu-sidebar .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-speed) var(--transition-timing);
    padding-left: var(--spacing-lg);
}
.client-menu-sidebar .menu-item-has-children.open .sub-menu {
    max-height: 500px;
    margin-top: var(--spacing-sm);
}
.client-menu-sidebar .sub-menu .opcion_menu {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    font-weight: 400;
    background: none;
    border-radius: var(--border-radius-sm);
    color: var(--text-200);
}
.client-menu-sidebar .sub-menu .opcion_menu:hover {
    background: var(--bg-200);
    color: var(--text-100);
}
.client-menu-sidebar .sub-menu .opcion_menu.active {
    background: var(--bg-200);
    color: var(--primary-100);
    font-weight: 500;
    box-shadow: none;
}
.client-menu-sidebar .sub-menu .opcion_menu.active svg,
.client-menu-sidebar .sub-menu .opcion_menu.active i {
    color: var(--primary-100);
}

.client-menu-sidebar .exit_login {
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    user-select: none;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-timing);
    text-decoration: none;
    color: var(--text-200);
    margin-top: auto;
}
.client-menu-sidebar .exit_login svg,
.client-menu-sidebar .exit_login i {
    height: 24px;
    width: 24px;
    color: var(--danger);
    transition: all var(--transition-speed) var(--transition-timing);
}
.client-menu-sidebar .exit_login span {
    color: var(--text-200);
    font-weight: 500;
    transition: color var(--transition-speed) var(--transition-timing);
}
.client-menu-sidebar .exit_login:hover {
    background: var(--bg-200);
    border-radius: var(--border-radius-md);
}
.client-menu-sidebar .exit_login:active {
    gap: var(--spacing-xs);
}
.client-menu-sidebar .exit_login:active span {
    color: var(--danger);
}
.client-menu-sidebar .exit_login:active svg,
.client-menu-sidebar .exit_login:active i {
    transform: translateX(2px);
}
/* Estilos básicos para el submenú */
.sub-menu {
    max-height: 0;
    overflow: hidden; /* Muy importante para ocultar contenido que desborda */
    transition: max-height 0.3s ease-out; /* Para una animación suave */
    /* Otros estilos como padding, margen, etc. */
}

/* Cuando el elemento padre tiene la clase 'open', el submenú se expande */
.menu-item-has-children.open .sub-menu {
    max-height: 500px; /* Un valor lo suficientemente grande para contener todo el contenido */
    /* Puedes usar `max-content` o `fit-content` si tu navegador lo soporta y se ajusta mejor */
}
.header_panel_sidebar{display:none;}
.container_pages.sidebar-open .header_panel_sidebar{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom:5px;
}
.container_pages.sidebar-open #close-panel-sidebar-btn {
    position: absolute;
    top: 15px; /* Distance from top of sidebar */
    right: 15px; /* Distance from right of sidebar */
    background: none;
    border: none;
    font-size: 1.8em; /* Make it more visible, adjust as needed */
    cursor: pointer;
    color: #333;
    z-index: 1001; /* Ensure it's above other sidebar content */
    padding: 5px; /* Add some padding for easier clicking */
}
body.client-sidebar-active .client-menu-sidebar { /* CAMBIO DE NOMBRE DE CLASE */
    left: 0;
}
body.client-sidebar-active .client-sidebar-overlay { /* Muestra el overlay */
    opacity: 1;
    visibility: visible;
}
body.client-sidebar-active { /* Evitar scroll del contenido principal */
    overflow: hidden;
}