/* Spinner de Carga */
.loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    font-family: sans-serif;
    color: #666;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Contenedor Principal */
.account-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 30px;
}

.account-header h1 {
    font-size: 2rem;
    margin: 0 0 5px 0;
    color: #111;
}

.account-header p {
    color: #666;
    margin: 0;
}

/* Botón de Logout Secundario */
.btn-logout-secondary {
    background-color: transparent;
    border: 1px solid #dc2626;
    color: #dc2626;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-logout-secondary:hover {
    background-color: #dc2626;
    color: #fff;
}

/* Layout en Grid */
.account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Tarjetas */
.account-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #111;
}

.card-header i {
    font-size: 1.2rem;
}

.card-header h2 {
    font-size: 1.25rem;
    margin: 0;
}

/* Información del Perfil */
.info-group {
    margin-bottom: 16px;
}

.info-group label {
    display: block;
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-group p {
    font-size: 1rem;
    font-weight: 500;
    color: #222;
    margin: 0;
}

/* Estado de Pedidos Vacío */
.empty-orders {
    text-align: center;
    padding: 20px 0;
}

.empty-icon {
    font-size: 2.5rem;
    color: #ccc;
    margin-bottom: 12px;
}

.btn-explore {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    background-color: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}



/* --- ANIMACIÓN DE APARICIÓN DESDE ABAJO --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- OVERLAY CARGA --- */
.loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    color: #64748b;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #0f172a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- LAYOUT DEL DASHBOARD --- */
.dashboard-container {
    max-width: 1200px;
    margin: 110px auto 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
    font-family: system-ui, -apple-system, sans-serif;
}

/* SIDEBAR */
.dashboard-sidebar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.user-summary-card {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 20px;
}

.avatar-circle {
    width: 60px;
    height: 60px;
    background-color: #0f172a;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 12px auto;
}

.user-summary-card h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 600;
}

.user-summary-card p {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: #64748b;
    word-break: break-all;
}

/* MENÚ LATERAL */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #475569;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.menu-tab i {
    font-size: 1.1rem;
    width: 20px;
}

.menu-tab:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

.menu-tab.active {
    background-color: #0f172a;
    color: #ffffff;
    font-weight: 600;
}

.menu-divider {
    border: 0;
    border-top: 1px solid #f1f5f9;
    margin: 8px 0;
}

.logout-btn {
    color: #dc2626 !important;
}

.logout-btn:hover {
    background-color: #fef2f2 !important;
}

/* PANELS / CONTENIDO */
.dashboard-panels {
    min-height: 400px;
}

.tab-panel {
    display: none;
    /* Se activa con JS */
}

.tab-panel.active {
    display: block;
}

.panel-header {
    margin-bottom: 24px;
}

.panel-header h2 {
    font-size: 1.5rem;
    color: #0f172a;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-header p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.panel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* INFORMACIÓN PERSONAL GRID */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.info-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.info-item p {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

/* ESTADO VACÍO */
.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 16px;
}

.empty-state h3 {
    margin: 0 0 8px 0;
    color: #0f172a;
}

.empty-state p {
    color: #64748b;
    margin: 0 0 20px 0;
}

.btn-primary-action {
    display: inline-block;
    background-color: #0f172a;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.btn-primary-action:hover {
    opacity: 0.9;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}



/* --- ESTILOS DE SUB-PESTAÑAS ADMIN --- */
.admin-subtabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
}

.subtab-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.subtab-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.subtab-btn.active {
    color: #ffffff;
    background: #0f172a;
}

.subtab-panel {
    display: none;
}

.subtab-panel.active {
    display: block;
}

/* --- ESTILOS DE FORMULARIO ADMIN --- */
.form-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
}

.form-section-title {
    font-size: 0.95rem;
    color: #0f172a;
    margin: 0 0 12px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: #0f172a;
}


/* ==========================================================================
   ENVASE DE CATEGORIZACIÓN E INTEGRACIÓN IA (account.css)
   ========================================================================== */

/* Recuadro contenedor de Tema + Subtema */
.ai-theme-container {
    background-color: var(--swan-wing);
    border: 1.5px dashed var(--quicksand);
    border-radius: 10px;
    padding: 10px 14px 14px 14px;
    position: relative;
    box-shadow: 0 2px 6px rgba(17, 34, 80, 0.05);
}

/* Cabecera interna del recuadro */
.ai-theme-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ai-theme-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--sapphire);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botón Auto-detectar con la Varita Mágica */
.btn-autodetect {
    background: linear-gradient(135deg, var(--sapphire) 0%, var(--royal-blue) 100%);
    color: var(--swan-wing);
    border: 1px solid var(--sapphire);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(17, 34, 80, 0.2);
}

.btn-autodetect:hover {
    background: linear-gradient(135deg, var(--royal-blue) 0%, var(--dark-bg) 100%);
    border-color: var(--quicksand);
    color: var(--quicksand);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 34, 80, 0.3);
}

.btn-autodetect:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(17, 34, 80, 0.2);
}


/* Contenedor relativo para el campo híbrido */
.editable-select-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.editable-select-wrapper select {
    width: 100%;
}

/* El cuadro de texto superpuesto al seleccionar '+ Añadir nuevo...' */
.editable-select-wrapper .editable-input {
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 34px);
    /* Deja la flecha del select libre a la derecha */
    height: calc(100% - 2px);
    border: none;
    outline: none;
    background-color: var(--white);
    padding: 0 12px;
    font-size: 14px;
    color: var(--text-dark);
    border-radius: 6px 0 0 6px;
    z-index: 2;
}



/* ==========================================================================
   DESPLEGABLE HÍBRIDO PERSONALIZADO (account.css)
   ========================================================================== */

/* Contenedor relativo para el control híbrido */
.editable-select-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Estilo base del <select> integrado a la paleta */
.editable-select-wrapper select.form-input {
    width: 100%;
    height: 42px;
    padding: 0 36px 0 12px;
    /* Espacio reservado para la flecha a la derecha */
    background-color: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--royal-blue);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;

    /* Remover la flecha fea por defecto del navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Flecha personalizada dibujada en SVG con el color --royal-blue (#112250) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23112250'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 16L5.63603 9.63589L7.05024 8.22168L11.9999 13.1714Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}

/* Estado Focus y Hover del Select */
.editable-select-wrapper select.form-input:focus,
.editable-select-wrapper select.form-input:hover {
    border-color: var(--sapphire);
    box-shadow: 0 0 0 3px rgba(60, 80, 125, 0.12);
}

/* Opciones dentro del desplegable */
.editable-select-wrapper select option {
    background-color: var(--white);
    color: var(--text-dark);
    padding: 10px;
    font-size: 14px;
}

.editable-select-wrapper select option[value="__NUEVO__"] {
    font-weight: 700;
    color: var(--sapphire);
    background-color: var(--swan-wing);
}

/* Campo de texto de escritura superpuesto cuando '+ Añadir nuevo...' está activo */
.editable-select-wrapper .editable-input {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 38px);
    /* Respeta la flecha del select */
    height: calc(100% - 4px);
    border: none;
    outline: none;
    background-color: var(--white);
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--royal-blue);
    border-radius: 6px 0 0 6px;
    z-index: 2;
}

/* Animación y borde para cuando el usuario escribe en el input overlay */
.editable-select-wrapper:focus-within {
    border-color: var(--sapphire);
}

.editable-select-wrapper .editable-input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}



/* ==========================================================================
   ETIQUETAS INTERACTIVAS Y CAMPO DE DESCUENTO
   ========================================================================== */

.tags-group-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background-color: var(--swan-wing);
    border: 1.5px solid var(--gray-200);
    padding: 8px 12px;
    border-radius: 8px;
    min-height: 42px;
}

.tag-chip-item {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* Ocultar checkbox por defecto */
.tag-chip-item input[type="checkbox"] {
    display: none;
}

/* Apariencia de Ficha / Badge */
.tag-chip {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--royal-blue);
    background-color: var(--white);
    border: 1.5px solid var(--gray-200);
    transition: all 0.2s ease;
}

.tag-chip-item:hover .tag-chip {
    border-color: var(--sapphire);
}

/* Estado Marcado / Checked */
.tag-chip-item input[type="checkbox"]:checked+.tag-chip {
    background-color: var(--royal-blue);
    color: var(--swan-wing);
    border-color: var(--royal-blue);
    box-shadow: 0 2px 6px rgba(17, 34, 80, 0.2);
}

/* Estilo especial cuando Oferta está activo */
.tag-chip-item input[type="checkbox"]:checked+.tag-chip-oferta {
    background-color: #dc2626;
    /* Rojo oferta */
    border-color: #dc2626;
    color: var(--white);
}

/* Contenedor e Input de Porcentaje de Descuento */
.tag-oferta-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.discount-badge-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--white);
    border: 1.5px solid #dc2626;
    border-radius: 6px;
    padding: 2px 6px;
    animation: fadeIn 0.2s ease-in-out;
}

.discount-field {
    width: 45px;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
    text-align: center;
    background: transparent;
}

.discount-unit {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
}

/* Campo personalizado de otra etiqueta */
.custom-tag-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.custom-tag-input {
    width: 90px;
    border: none;
    border-bottom: 1.5px solid var(--sapphire);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--royal-blue);
    outline: none;
    padding: 2px 4px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ==========================================================================
   TABLA DE INVENTARIO Y PRODUCTOS (account.css)
   ========================================================================== */

.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.inventory-search-box {
    position: relative;
    width: 280px;
}

.inventory-search-box .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}

.inventory-search-box input {
    padding-left: 36px;
    height: 38px;
    font-size: 13px;
}

/* Contenedor responsivo */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--white);
}

/* Estilos de la Tabla */
.inventory-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.inventory-table th {
    background-color: var(--swan-wing);
    color: var(--royal-blue);
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 2px solid var(--gray-200);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.inventory-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
    color: var(--text-dark);
}

.inventory-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Miniatura del producto */
.product-thumb {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    background: var(--swan-wing);
}

/* Badges de Categorización */
.cat-badge-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.badge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
}

.badge-cat {
    background-color: #e0e7ff;
    color: #3730a3;
}

.badge-theme {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-subtheme {
    background-color: #f3e8ff;
    color: #6b21a8;
}

/* Indicadores de Stock */
.stock-indicator {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
}

.stock-high {
    background-color: #d1fae5;
    color: #065f46;
}

.stock-low {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Botones de Acción */
.table-actions {
    display: flex;
    gap: 8px;
}

.btn-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 13px;
}

.btn-edit {
    background-color: #e0f2fe;
    color: #0369a1;
}

.btn-edit:hover {
    background-color: #bae6fd;
    transform: translateY(-1px);
}

.btn-delete {
    background-color: #fee2e2;
    color: #dc2626;
}

.btn-delete:hover {
    background-color: #fecaca;
    transform: translateY(-1px);
}


/* ==========================================================================
   BANNER DE MODO EDICIÓN (account.css)
   ========================================================================== */

.editing-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e0f2fe;
    border: 1.5px solid #0284c7;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 20px;
    animation: fadeIn 0.25s ease-in-out;
}

.editing-banner-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0369a1;
    font-size: 14px;
}

.editing-banner-info i {
    font-size: 18px;
}

.btn-cancel-edit {
    background-color: var(--white);
    color: #dc2626;
    border: 1.5px solid #fecaca;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-edit:hover {
    background-color: #fee2e2;
    border-color: #dc2626;
}


/* ==========================================================================
   OPCIONES DE ATRIBUTOS - CREAR PRODUCTO
   ========================================================================== */

.admin-attribute-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;
    min-height: 40px;

    padding: 8px 14px;

    border: 1.5px solid var(--gray-200);
    border-radius: 8px;

    background-color: var(--white);
    color: var(--royal-blue);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    user-select: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}


/* Hover */

.admin-attribute-option:hover {
    border-color: var(--sapphire);
    background-color: var(--swan-wing);
}


/* Seleccionado */

.admin-attribute-option.selected {
    background-color: var(--royal-blue);
    border-color: var(--royal-blue);
    color: var(--white);

    box-shadow:
        0 2px 6px rgba(17, 34, 80, 0.2);
}


/* Hover de una opción seleccionada */

.admin-attribute-option.selected:hover {
    background-color: var(--royal-blue);
    border-color: var(--royal-blue);
}


/* Efecto al pulsar */

.admin-attribute-option:active {
    transform: scale(0.97);
}


/* Vista previa de color */

.admin-attribute-option .attribute-color-preview {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    border: 1px solid rgba(0, 0, 0, 0.15);

    margin-right: 7px;

    flex-shrink: 0;
}


/* ==========================================================================
   ATRIBUTOS DEL PRODUCTO - COLUMNAS
   ========================================================================== */

.admin-attributes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,
            minmax(180px, 1fr));
    gap: 24px;
    width: 100%;
    align-items: start;
}


/* Cada atributo funciona como una columna */

.admin-attribute-group {
    min-width: 0;
}


/* Cabecera del atributo */

.admin-attribute-header {
    margin-bottom: 12px;
}


/* Nombre */

.admin-attribute-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--royal-blue);
}


/* Atributo obligatorio */

.admin-attribute-required {
    margin-left: 3px;
    font-weight: 700;
    color: #dc2626;
}


/* Atributo opcional */

.admin-attribute-optional {
    margin-left: 6px;
    font-size: 12px;
    color: var(--text-muted);
}


/* Slug */

.admin-attribute-slug {
    display: block;

    margin-top: 3px;

    font-size: 12px;

    color: var(--text-muted);
}


/* Opciones de cada atributo */

.admin-attribute-options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}


/* ==========================================================================
   GALERÍA DEL PRODUCTO
   ========================================================================== */

.product-gallery-drop-zone {

    border: 2px dashed #cbd5e1;

    border-radius: 12px;

    padding: 24px;

    text-align: center;

    background: #f8fafc;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;

}


.product-gallery-drop-zone.drag-over {

    border-color: var(--sapphire);

    background-color: #f1f5f9;

}


.product-gallery-drop-icon {

    display: block;

    margin-bottom: 10px;

    font-size: 1.8rem;

    color: var(--sapphire);

}


.product-gallery-drop-title {

    margin: 0;

    font-weight: 700;

    color: var(--royal-blue);

}


.product-gallery-drop-description {

    margin: 5px 0 15px;

    color: var(--text-muted);

    font-size: 0.9rem;

}


.product-gallery-file-info {

    display: block;

    margin-top: 10px;

    color: var(--text-muted);

    font-size: 0.85rem;

}


/* ==========================================================================
   CONTENEDOR DE MINIATURAS
   ========================================================================== */

.product-gallery-preview {

    display: grid;

    grid-template-columns:
        repeat(auto-fill,
            minmax(140px, 1fr));

    gap: 14px;

    margin-top: 18px;

}


/* ==========================================================================
   TARJETA DE IMAGEN
   ========================================================================== */

.product-gallery-item {

    min-width: 0;

    padding: 8px;

    border: 1px solid var(--gray-200);

    border-radius: 10px;

    background: var(--white);

}


.product-gallery-item.is-primary {

    border-color: var(--royal-blue);

    box-shadow:
        0 0 0 2px rgba(17, 34, 80, 0.08);

}


/* ==========================================================================
   IMAGEN
   ========================================================================== */

.product-gallery-image-wrapper {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 7px;

    background: var(--swan-wing);

}


.product-gallery-image-wrapper img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* ==========================================================================
   ETIQUETA PRINCIPAL
   ========================================================================== */

.product-gallery-primary-badge {

    position: absolute;

    top: 6px;

    left: 6px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 7px;

    border-radius: 5px;

    background: var(--royal-blue);

    color: var(--white);

    font-size: 11px;

    font-weight: 700;

}


/* ==========================================================================
   INFORMACIÓN DE LA IMAGEN
   ========================================================================== */

.product-gallery-item-info {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 7px;

}


.product-gallery-item-name {

    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    color: var(--text-dark);

}


/* ==========================================================================
   BOTÓN IMAGEN PRINCIPAL
   ========================================================================== */

.product-gallery-primary-btn {

    border: none;

    padding: 3px;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

}


.product-gallery-primary-btn:hover {

    color: var(--royal-blue);

}


.product-gallery-primary-btn.active {

    color: var(--royal-blue);

}


/* ==========================================================================
   BOTÓN ELIMINAR
   ========================================================================== */

.product-gallery-remove-btn {

    border: none;

    padding: 3px;

    background: transparent;

    color: #dc2626;

    cursor: pointer;

}


.product-gallery-remove-btn:hover {

    opacity: 0.75;

}


/* ==========================================================================
   INFORMACIÓN DE IMAGEN PRINCIPAL
   ========================================================================== */

.product-gallery-primary-info {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 12px;

    padding: 8px 10px;

    border-radius: 8px;

    background: #f8fafc;

    color: var(--text-dark);

    font-size: 12px;

}


.product-gallery-primary-info i {

    color: var(--royal-blue);

}



/* ==========================================================================
   PANEL DE IMÁGENES DE VARIANTE
   ========================================================================== */

/*
 * El contenedor ya no funciona como modal flotante.
 * Se comporta como un panel dentro de la lista de variantes.
 */

#adminVariantImagesModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;

    width: min(900px, 90vw);
    max-height: 90vh;
    overflow-y: auto;
}


/* --------------------------------------------------------------------------
   BACKDROP
   -------------------------------------------------------------------------- */

#adminVariantImagesModal .admin-modal-backdrop {
    display: none !important;
}


/* --------------------------------------------------------------------------
   CONTENIDO
   -------------------------------------------------------------------------- */

#adminVariantImagesModal .admin-modal-content {

    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;

    border: 1px solid var(--gray-200);
    border-radius: 12px;

    background: var(--white);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06);

}


/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

#adminVariantImagesModal .admin-modal-header {

    padding: 14px 18px;

    border-bottom: 1px solid var(--gray-200);

}


#adminVariantImagesModal .admin-modal-header h3 {

    margin: 0;

    font-size: 15px;

}


#adminVariantImagesModal .admin-modal-header p {

    margin: 4px 0 0;

    font-size: 12px;

    color: var(--text-muted);

}


/* --------------------------------------------------------------------------
   BODY
   -------------------------------------------------------------------------- */

#adminVariantImagesModal .admin-modal-body {

    padding: 18px;

}


/* --------------------------------------------------------------------------
   LISTA DE IMÁGENES
   -------------------------------------------------------------------------- */

.admin-variant-images-list {

    display: grid;

    grid-template-columns:
        repeat(auto-fill,
            minmax(120px, 1fr));

    gap: 12px;

}


/* --------------------------------------------------------------------------
   OPCIÓN DE IMAGEN
   -------------------------------------------------------------------------- */

.admin-variant-image-option {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 6px;

    width: 100%;

    padding: 6px;

    border: 2px solid transparent;

    border-radius: 9px;

    background: var(--swan-wing);

    cursor: pointer;

    text-align: left;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;

}


.admin-variant-image-option:hover {

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.08);

}


/* --------------------------------------------------------------------------
   IMAGEN SELECCIONADA
   -------------------------------------------------------------------------- */

.admin-variant-image-option.selected {

    border-color: var(--royal-blue);

    box-shadow:
        0 0 0 2px rgba(17, 34, 80, 0.10);

}


/* --------------------------------------------------------------------------
   PREVIEW
   -------------------------------------------------------------------------- */

.admin-variant-image-preview {

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 6px;

    background: var(--white);

}


.admin-variant-image-preview img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* --------------------------------------------------------------------------
   NOMBRE
   -------------------------------------------------------------------------- */

.admin-variant-image-name {

    display: block;

    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 11px;

    font-weight: 500;

    color: var(--text-dark);

}


/* --------------------------------------------------------------------------
   CHECK DE SELECCIÓN
   -------------------------------------------------------------------------- */

.admin-variant-image-check {

    position: absolute;

    top: 9px;

    right: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: var(--royal-blue);

    color: var(--white);

    font-size: 11px;

}


/* --------------------------------------------------------------------------
   ESTADO SIN IMÁGENES
   -------------------------------------------------------------------------- */

.admin-variant-images-empty {

    margin: 0;

    padding: 25px;

    text-align: center;

    color: var(--text-muted);

    font-size: 13px;

}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

#adminVariantImagesModal .admin-modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding: 12px 18px;

    border-top: 1px solid var(--gray-200);

}




/* ==========================================================================
   VARIANTES DEL PRODUCTO
   ========================================================================== */

/* Contenedor general */
.admin-variants-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* --------------------------------------------------------------------------
   TARJETA DE VARIANTE
   -------------------------------------------------------------------------- */

.admin-variant-card {
    position: relative;

    background: var(--white);

    border: 1px solid var(--gray-200);
    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* Hover */
.admin-variant-card:hover {
    border-color: var(--sapphire);

    box-shadow:
        0 6px 14px rgba(17, 34, 80, 0.08);
}


/* --------------------------------------------------------------------------
   VARIANTE SELECCIONADA
   -------------------------------------------------------------------------- */

.admin-variant-card.selected {
    border-color: var(--royal-blue);

    background-color: var(--swan-wing);

    box-shadow:
        0 0 0 2px rgba(17, 34, 80, 0.10),
        0 8px 18px rgba(17, 34, 80, 0.10);
}


/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */

.admin-variant-card-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 6px 12px;
    padding: 10px 12px;
}

.variant-header-title {
    min-width: 0;
    text-align: center;
}

.admin-variant-card-header>div:first-child {
    width: 100%;
    min-width: 0;
}


/* Cuando la variante está seleccionada */
.admin-variant-card.selected .admin-variant-card-header {
    background-color: var(--swan-wing);
}


/* --------------------------------------------------------------------------
   NÚMERO DE VARIANTE
   -------------------------------------------------------------------------- */

.variant-number {
    display: block;

    margin-bottom: 8px;

    color: var(--royal-blue);

    font-size: 14px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   ATRIBUTOS
   -------------------------------------------------------------------------- */

.variant-attributes-list {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}


/* Chip de atributo */
.variant-attribute-chip {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 5px 9px;

    border-radius: 6px;

    background-color: var(--white);

    border: 1px solid var(--gray-200);

    color: var(--text-dark);

    font-size: 12px;
}


/* Nombre del atributo */
.variant-attribute-chip strong {
    color: var(--royal-blue);

    font-weight: 700;
}


/* Punto de color */
.variant-color-dot {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    border: 1px solid rgba(0, 0, 0, 0.15);

    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   VARIANTE PREDETERMINADA
   -------------------------------------------------------------------------- */

.variant-default-control {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    padding: 6px 10px;

    border-radius: 7px;

    background-color: var(--gray-100);

    color: var(--royal-blue);

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    grid-column: 2;
    grid-row: 1;
}


.variant-default-control:hover {
    background-color: var(--swan-wing);
}


.variant-default-control input {
    accent-color: var(--royal-blue);

    margin: 0;
}


/* --------------------------------------------------------------------------
   CUERPO
   -------------------------------------------------------------------------- */

.admin-variant-card-body {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px 18px;

    padding: 18px;
}


/* --------------------------------------------------------------------------
   CAMPOS
   -------------------------------------------------------------------------- */

.variant-field {
    min-width: 0;
}


.variant-field>label:first-child {
    display: block;

    margin-bottom: 6px;

    color: var(--royal-blue);

    font-size: 12px;

    font-weight: 700;
}


/* Inputs dentro de variantes */
.admin-variant-card .form-input {
    height: 40px;

    padding: 8px 10px;

    font-size: 13px;
}


/* Focus */
.admin-variant-card .form-input:focus {
    border-color: var(--sapphire);

    box-shadow:
        0 0 0 3px rgba(60, 80, 125, 0.10);
}


/* --------------------------------------------------------------------------
   STOCK RESERVADO / SKU
   -------------------------------------------------------------------------- */

.admin-variant-card .form-input:disabled,
.admin-variant-card .form-input[readonly] {
    background-color: var(--gray-100);

    color: var(--text-muted);

    cursor: not-allowed;
}


/* Valor generado automáticamente */
.variant-generated-value {
    min-height: 40px;

    display: flex;

    align-items: center;

    padding: 8px 10px;

    box-sizing: border-box;

    border: 1px solid var(--gray-200);

    border-radius: 8px;

    background-color: var(--gray-100);

    color: var(--text-muted);

    font-size: 13px;
}


/* --------------------------------------------------------------------------
   BACKORDER
   -------------------------------------------------------------------------- */

.variant-backorder-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background-color: var(--swan-wing);
    grid-column: 1 / -1;
}


.variant-backorder-field>label:first-child {

    margin: 0;

}


.variant-sku-field {
    grid-column: 1 / -1;
}


.variant-switch {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--text-dark);

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;
}


.variant-switch input {
    accent-color: var(--royal-blue);

    margin: 0;
}


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

@media (max-width: 700px) {

    .admin-variant-card-header {
        flex-direction: column;
    }

    .variant-default-control {
        width: fit-content;
    }

    .admin-variant-card-body {
        grid-template-columns: 1fr;
    }

}




/* ==========================================================================
   IMAGEN DE VARIANTE SELECCIONADA
   ========================================================================== */

.admin-variant-image-option.selected {
    border-color: var(--royal-blue);

    background-color: var(--swan-wing);

    box-shadow:
        0 0 0 2px rgba(17, 34, 80, 0.12),
        var(--shadow-sm);

    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   HOVER DE IMAGEN SELECCIONADA
   -------------------------------------------------------------------------- */

.admin-variant-image-option.selected:hover {
    border-color: var(--sapphire);

    box-shadow:
        0 0 0 2px rgba(60, 80, 125, 0.15),
        var(--shadow-md);
}


/* --------------------------------------------------------------------------
   CHECK DE SELECCIÓN
   -------------------------------------------------------------------------- */

.admin-variant-image-check {
    position: absolute;

    top: 8px;
    right: 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background-color: var(--royal-blue);

    color: var(--white);

    font-size: 12px;

    box-shadow:
        0 2px 5px rgba(17, 34, 80, 0.25);
}


/* --------------------------------------------------------------------------
   ICONO DEL CHECK
   -------------------------------------------------------------------------- */

.admin-variant-image-check i {
    line-height: 1;
}




#adminVariantsContainer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


@media (max-width: 900px) {
    #adminVariantsContainer {
        grid-template-columns: 1fr;
    }
}



.variant-images-modal-active {
    grid-column: 1 / -1;
}


.variant-card-hidden-by-modal {
    display: none;
}



.admin-tags-price-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    align-items: stretch;
}


@media (max-width: 768px) {

    .admin-tags-price-row {
        grid-template-columns: 1fr;
    }

}


.form-help {
    font-size: 11px;
}



/* ==========================================================================
   SECCIÓN DE ATRIBUTOS
   ========================================================================== */

.variant-attributes-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* --------------------------------------------------------------------------
   ENCABEZADO
   -------------------------------------------------------------------------- */

.variant-section-header {
    display: flex;
    align-items: flex-start;
}

.variant-section-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: var(--text-dark);
    font-size: 16px;
    font-weight: 700;
}

.variant-section-title i {
    color: var(--royal-blue);
    font-size: 15px;
}

.variant-section-description {
    margin: 5px 0 0;

    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   CONTENEDOR DE ATRIBUTOS
   -------------------------------------------------------------------------- */

.product-attributes-container {
    min-height: 100px;

    padding: 18px;

    border: 1px solid var(--gray-200);
    border-radius: 10px;

    background-color: var(--white);
}


/* --------------------------------------------------------------------------
   ESTADO VACÍO
   -------------------------------------------------------------------------- */

.attributes-empty-state {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: var(--text-muted);
}

.attributes-empty-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background-color: var(--gray-100);

    color: var(--royal-blue);
    font-size: 16px;

    flex-shrink: 0;
}

.attributes-empty-content {
    text-align: left;
}

.attributes-empty-content strong {
    display: block;

    margin-bottom: 2px;

    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
}

.attributes-empty-content p {
    margin: 0;

    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   ACCIONES
   -------------------------------------------------------------------------- */

.variant-actions {
    display: flex;
    justify-content: flex-end;

    padding-top: 2px;
}


.admin-resource-view-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-top: 14px;

    background: var(--gray-100);
    border-radius: 8px;
}

.admin-resource-view-tabs .subtab-btn {
    border: 0;
    background: transparent;

    padding: 8px 14px;
    border-radius: 6px;

    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.admin-resource-view-tabs .subtab-btn.active {
    background: var(--white);
    color: var(--royal-blue);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


.attributes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.attribute-card {
    padding: 14px 16px;

    border: 1px solid var(--gray-200);
    border-radius: 10px;

    background: var(--white);
}

.attribute-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.attribute-card-name {
    margin: 0;

    color: var(--text-dark);
    font-size: 14px;
    font-weight: 700;
}

.attribute-card-description {
    margin: 4px 0 0;

    color: var(--text-muted);
    font-size: 12px;
}

.attribute-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 12px;
}

.attribute-card-actions button {
    border: 0;
    background: transparent;

    padding: 5px 7px;

    color: var(--text-muted);
    font-size: 12px;

    cursor: pointer;
}

.attribute-card-actions button:hover {
    color: var(--royal-blue);
}


@media (max-width: 768px) {

    .attributes-list {
        grid-template-columns: 1fr;
    }

}


.inventory-search-box {
    position: relative;
    margin-top: 16px;
    max-width: 360px;
}

.inventory-search-box .form-input {
    width: 100%;
    padding-left: 38px;
}

.inventory-search-box .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--text-muted);
    pointer-events: none;
}





/* ==========================================================================
   LISTA DE ATRIBUTOS
   ========================================================================== */

.attributes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}


/* ==========================================================================
   TARJETA DE ATRIBUTO
   ========================================================================== */

.global-attribute-item {
    display: flex;
    flex-direction: column;

    padding: 14px 16px;

    border: 1px solid var(--gray-200);
    border-radius: 10px;

    background-color: var(--white);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.global-attribute-item:hover {
    border-color: var(--royal-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}


/* ==========================================================================
   NOMBRE
   ========================================================================== */

.global-attribute-header {
    display: flex;
    align-items: center;
}

.global-attribute-name {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================================
   OPCIONES
   ========================================================================== */

.global-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 8px;

    min-height: 24px;
}

.global-attribute-option {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border: 1px solid var(--gray-200);
    border-radius: 6px;

    background-color: var(--gray-100);

    color: var(--text-dark);
    font-size: 11px;
    font-weight: 500;
}

.global-attribute-no-options {
    color: var(--text-muted);
    font-size: 12px;
}


/* ==========================================================================
   ACCIONES
   ========================================================================== */

.global-attribute-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid var(--gray-200);
}

.global-attribute-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 7px;

    border: 0;
    background: transparent;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.global-attribute-actions .btn-secondary {
    color: var(--royal-blue);
}

.global-attribute-actions .btn-danger {
    color: var(--danger, #dc2626);
}


@media (max-width: 768px) {

    .attributes-list {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   LISTA DE TIPOS DE PRODUCTO
   ========================================================================== */

.product-types-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 16px;
}


/* ==========================================================================
   TARJETA
   ========================================================================== */

.product-type-item {
    display: flex;
    flex-direction: column;

    padding: 14px 16px;

    border: 1px solid var(--gray-200);
    border-radius: 10px;

    background-color: var(--white);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.product-type-item:hover {
    border-color: var(--royal-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}


/* ==========================================================================
   NOMBRE
   ========================================================================== */

.product-type-header {
    display: flex;
    align-items: center;
}

.product-type-name {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================================================
   ACCIONES
   ========================================================================== */

.product-type-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid var(--gray-200);
}

.product-type-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 7px;

    border: 0;
    background: transparent;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.product-type-actions .btn-secondary {
    color: var(--royal-blue);
}

.product-type-actions .btn-danger {
    color: var(--danger, #dc2626);
}


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

@media (max-width: 768px) {

    .product-types-list {
        grid-template-columns: 1fr;
    }

}



#adminCreateProductTypeBtn {
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
}


#adminCreateGlobalAttributeBtn {
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}


.variant-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}



/* ==========================================================================
   BOTÓN ELIMINAR / RESTAURAR
   ========================================================================== */

.variant-delete-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #fecaca;
    border-radius: 8px;

    background-color: #fef2f2;
    color: #dc2626;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
}

.variant-delete-btn:hover {
    background-color: #fee2e2;
    border-color: #fca5a5;
}

.variant-delete-btn:active {
    transform: scale(0.95);
}


/* ==========================================================================
   BOTÓN RESTAURAR
   ========================================================================== */

.variant-delete-btn.variant-restore {
    border-color: #d1d5db;
    background-color: #f3f4f6;
    color: #374151;
}

.variant-delete-btn.variant-restore:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}



/* ==========================================================================
   VARIANTE ELIMINADA
   ========================================================================== */

.admin-variant-card.variant-deleted {
    background-color: #fef2f2;
    border-color: #fecaca;
}


/* Mantener el contenido legible pero visualmente desactivado */

.admin-variant-card.variant-deleted .admin-variant-card-body {
    opacity: 0.75;
}


/* ==========================================================================
   ATRIBUTOS DEBAJO DEL ENCABEZADO
   ========================================================================== */

.admin-variant-card-header .variant-attributes-list {
    grid-column: 1 / -1;
}


/* ==========================================================================
   VARIANTE ELIMINADA — CONTROL PRINCIPAL
   ========================================================================== */

.admin-variant-card.variant-deleted .variant-default-control {
    opacity: 0.55;
    cursor: not-allowed;
}


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

@media (max-width: 600px) {

    .admin-variant-card-header {
        grid-template-columns: 1fr;
    }

    .variant-header-actions {
        justify-content: flex-start;
    }

}


/* ==========================================================================
   PRECIOS EN TABLA DE INVENTARIO
   ========================================================================== */

.price-single {
    display: inline-block;
    white-space: nowrap;
}

.price-range {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    white-space: nowrap;
}

.price-range span {
    display: block;
}





/* ==========================================================================
   TÍTULO DE VARIANTE — MODAL DETALLE
   ========================================================================== */

.product-detail-variant-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.variant-number {
    font-size: 1rem;
    font-weight: 800;
    color: var(--royal-blue);
}

.variant-primary-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff3cd;
    color: #a16207;
    font-size: 0.68rem;
    font-weight: 700;
}



/* ==========================================================================
   FILA DE PRODUCTO EN OFERTA
   ========================================================================== */

.inventory-table tbody tr.product-offer-row {
    background: #fff7ed;
}

.inventory-table tbody tr.product-offer-row:hover {
    background: #ffedd5;
}




/* ==========================================================================
   SELECTOR DE VISTAS - INVENTARIO
   ========================================================================== */

.inventory-view-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    width: fit-content;
    margin: 0 auto 28px;

    padding: 4px;

    background: #f1f0ed;
    border-radius: 9px;
}


/* --------------------------------------------------------------------------
   BOTONES
   -------------------------------------------------------------------------- */

.inventory-view-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 9px 18px;

    border: none;
    border-radius: 7px;

    background: transparent;

    color: #64748b;

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}


/* --------------------------------------------------------------------------
   ICONOS
   -------------------------------------------------------------------------- */

.inventory-view-tab i {
    font-size: 0.85rem;
}


/* --------------------------------------------------------------------------
   HOVER
   -------------------------------------------------------------------------- */

.inventory-view-tab:hover {
    color: #172554;
    background: rgba(255, 255, 255, 0.65);
}


/* --------------------------------------------------------------------------
   VISTA ACTIVA
   -------------------------------------------------------------------------- */

.inventory-view-tab.active {
    background: #111827;
    color: #ffffff;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}


/* Evitar que el hover cambie el botón activo */

.inventory-view-tab.active:hover {
    background: #111827;
    color: #ffffff;
}




/* ==========================================================================
   DETALLE DE INVENTARIO DENTRO DEL MODAL
   ========================================================================== */

.inventory-detail {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* ==========================================================================
   SECCIONES
   ========================================================================== */

.inventory-detail-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inventory-detail-section+.inventory-detail-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}


/* ==========================================================================
   ENCABEZADO DE SECCIÓN
   ========================================================================== */

.inventory-detail-section-header {
    display: flex;
    align-items: center;
    gap: 11px;
}

.inventory-detail-section-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eef2ff;
    color: #172554;

    flex-shrink: 0;
}

.inventory-detail-section-header h4 {
    margin: 0;

    font-size: 0.98rem;
    font-weight: 700;

    color: #111827;
}

.inventory-detail-section-header p {
    margin: 2px 0 0;

    font-size: 0.78rem;

    color: #64748b;
}


/* ==========================================================================
   TARJETAS DE STOCK
   ========================================================================== */

.inventory-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.inventory-detail-stat {
    min-width: 0;

    padding: 13px 12px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #f8fafc;

    display: flex;
    flex-direction: column;
    gap: 7px;
}

.inventory-detail-stat span {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 0.76rem;
    color: #64748b;
}

.inventory-detail-stat span i {
    font-size: 0.72rem;
}

.inventory-detail-stat strong {
    font-size: 1.35rem;
    line-height: 1;

    color: #111827;
}

.inventory-detail-stat-available {
    background: #f8fafc;
}


/* ==========================================================================
   CONFIGURACIÓN
   ========================================================================== */

.inventory-detail-config {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.inventory-detail-config-item {
    padding: 12px;

    border: 1px solid #e2e8f0;
    border-radius: 10px;

    background: #ffffff;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inventory-detail-config-item span {
    font-size: 0.76rem;
    color: #64748b;
}

.inventory-detail-config-item strong {
    font-size: 0.9rem;
    color: #111827;
}

.inventory-detail-positive {
    color: #166534 !important;
}

.inventory-detail-negative {
    color: #b91c1c !important;
}


/* ==========================================================================
   BOTONES
   ========================================================================== */

.inventory-detail-action {
    min-height: 42px;

    padding: 9px 14px;

    border: 1px solid #d7dce3;
    border-radius: 8px;

    background: #ffffff;

    color: #172554;

    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.inventory-detail-action:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.inventory-detail-action:active {
    transform: translateY(1px);
}


/* ==========================================================================
   AJUSTAR STOCK
   ========================================================================== */

.inventory-detail-action-primary {
    align-self: flex-start;

    background: #172554;
    border-color: #172554;

    color: #ffffff;
}

.inventory-detail-action-primary:hover {
    background: #1e3a6f;
    border-color: #1e3a6f;
}


/* ==========================================================================
   MOVIMIENTOS
   ========================================================================== */

.inventory-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.inventory-detail-action-danger {
    color: #b91c1c;
}

.inventory-detail-action-danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
}


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

@media (max-width: 600px) {

    .inventory-detail-stats,
    .inventory-detail-config,
    .inventory-detail-actions {
        grid-template-columns: 1fr;
    }

    .inventory-detail-action-primary {
        width: 100%;
    }

}



/* ==========================================================================
   FORMULARIOS DEL MODAL DE MOVIMIENTOS / AJUSTE
   ========================================================================== */

.inventory-form-view {
    width: 100%;
    padding: 4px 0 6px;
}


/* ==========================================================================
   CABECERA DEL FORMULARIO
   ========================================================================== */

.inventory-form-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
}

.inventory-form-header .inventory-section-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;
    background: #eef2ff;
    color: #172554;

    font-size: 15px;
}

.inventory-form-header h3 {
    margin: 0;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;

    color: #111827;
}

.inventory-form-header p {
    margin: 5px 0 0;

    font-size: 0.82rem;
    line-height: 1.45;

    color: #64748b;
}


/* ==========================================================================
   CONTENEDOR DEL FORMULARIO
   ========================================================================== */

.inventory-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ==========================================================================
   GRUPO DE CAMPO
   ========================================================================== */

.inventory-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.inventory-form-group label {
    display: block;

    font-size: 0.84rem;
    font-weight: 600;

    color: #172554;
}


/* ==========================================================================
   INPUTS Y TEXTAREA
   ========================================================================== */

.inventory-form-group .form-input {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid #cbd5e1;
    border-radius: 8px;

    background: #ffffff;
    color: #111827;

    font-family: inherit;
    font-size: 0.9rem;

    padding: 10px 12px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.inventory-form-group input.form-input {
    height: 42px;
}

.inventory-form-group textarea.form-input {
    min-height: 100px;
    resize: vertical;
    line-height: 1.45;
}


/* ==========================================================================
   FOCUS
   ========================================================================== */

.inventory-form-group .form-input:focus {
    outline: none;

    border-color: #172554;

    box-shadow:
        0 0 0 3px rgba(23, 37, 84, 0.10);
}


/* ==========================================================================
   PLACEHOLDER
   ========================================================================== */

.inventory-form-group .form-input::placeholder {
    color: #94a3b8;
}


/* ==========================================================================
   TEXTO DE AYUDA
   ========================================================================== */

.inventory-form-group small {
    margin-top: 1px;

    font-size: 0.76rem;
    line-height: 1.4;

    color: #64748b;
}


/* ==========================================================================
   STOCK ACTUAL DEL AJUSTE
   ========================================================================== */

.inventory-adjustment-current {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
    padding: 13px 15px;

    border: 1px solid #dbe3ef;
    border-radius: 9px;

    background: #f8fafc;
}

.inventory-adjustment-current span {
    font-size: 0.82rem;
    color: #64748b;
}

.inventory-adjustment-current strong {
    font-size: 1rem;
    color: #172554;
}


/* ==========================================================================
   ACCIONES DEL FORMULARIO
   ========================================================================== */

.inventory-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 28px;
    padding-top: 20px;

    border-top: 1px solid #e2e8f0;
}


/* ==========================================================================
   BOTONES
   ========================================================================== */

.inventory-form-actions button {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 9px 16px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}

.inventory-form-actions button i {
    font-size: 0.78rem;
}


/* --------------------------------------------------------------------------
   ATRÁS
   -------------------------------------------------------------------------- */

.inventory-form-actions .btn-secondary {
    border: 1px solid #cbd5e1;

    background: #ffffff;
    color: #172554;
}

.inventory-form-actions .btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}


/* --------------------------------------------------------------------------
   GUARDAR
   -------------------------------------------------------------------------- */

.inventory-form-actions .btn-primary {
    border: 1px solid #172554;

    background: #172554;
    color: #ffffff;
}

.inventory-form-actions .btn-primary:hover {
    background: #243b72;
}


/* ==========================================================================
   AJUSTE DE STOCK: INPUT DESTACADO
   ========================================================================== */

#inventoryAdjustmentTarget {
    font-size: 1rem;
    font-weight: 600;
}


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

@media (max-width: 520px) {

    .inventory-form-header {
        margin-bottom: 22px;
    }

    .inventory-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inventory-form-actions button {
        width: 100%;
    }

}



/* ==========================================================================
   IDENTIFICACIÓN DE LA VARIANTE
   ========================================================================== */

.inventory-variant-header {
    margin-bottom: 0px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.inventory-variant-name {
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.inventory-variant-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.inventory-variant-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;

    border: 1px solid #dbe3ef;
    border-radius: 7px;

    background: #f8fafc;
    color: #475569;

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}









/* ========================================================================== */
/* HISTORIAL DE MOVIMIENTOS                                                   */
/* ========================================================================== */

.inventory-history {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}


/* -------------------------------------------------------------------------- */
/* CABECERA                                                                    */
/* -------------------------------------------------------------------------- */

.inventory-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.inventory-history-header h3 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.inventory-history-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}


/* ========================================================================== */
/* TABLA DE HISTORIAL                                                         */
/* ========================================================================== */

.inventory-history-table {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}


/* -------------------------------------------------------------------------- */
/* CABECERA Y FILAS                                                           */
/* -------------------------------------------------------------------------- */

.inventory-history-table-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.2fr);

    column-gap: 15px;

    width: 100%;
    box-sizing: border-box;

    align-items: center;

    min-height: 40px;

    padding: 0 16px;

    background: #f8fafc;

    border-bottom: 1px solid #e5e7eb;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: #6b7280;
}


.inventory-history-row {

    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.2fr);

    column-gap: 15px;

    width: 100%;

    box-sizing: border-box;

    align-items: center;

    min-height: 66px;

    padding: 9px 16px;

    border-bottom: 1px solid #f0f1f3;

    font-size: 13px;

    transition: background-color 0.15s ease;
}


/* -------------------------------------------------------------------------- */
/* ALINEACIÓN DE LOS ENCABEZADOS                                              */
/* -------------------------------------------------------------------------- */

.inventory-history-table-header>div:nth-child(1) {
    text-align: left;
}

.inventory-history-table-header>div:nth-child(2) {
    text-align: center;
}

.inventory-history-table-header>div:nth-child(3) {
    text-align: right;
}

.inventory-history-table-header>div:nth-child(4) {
    text-align: left;
}

.inventory-history-table-header>div:nth-child(5) {
    text-align: left;
}


/* -------------------------------------------------------------------------- */
/* EVITAR QUE EL CONTENIDO FUERCE LAS COLUMNAS                                */
/* -------------------------------------------------------------------------- */

.inventory-history-row>div {
    min-width: 0;
}


/* -------------------------------------------------------------------------- */
/* FECHA                                                                       */
/* -------------------------------------------------------------------------- */

.inventory-history-date {
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}



/* -------------------------------------------------------------------------- */
/* TIPO DE MOVIMIENTO                                                         */
/* -------------------------------------------------------------------------- */

.inventory-history-type {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.inventory-history-type-icon {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 12px;

    cursor: help;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.inventory-history-type-icon:hover {
    transform: translateY(-1px);
}


/* ENTRADA */

.inventory-history-type-icon.entry {
    color: #15803d;
    background: #ecfdf3;
}


/* PÉRDIDA */

.inventory-history-type-icon.loss {
    color: #dc2626;
    background: #fef2f2;
}


/* AJUSTE */

.inventory-history-type-icon.adjustment {
    color: var(--royal-blue);
    background: #eef2ff;
}


/* DEVOLUCIÓN */

.inventory-history-type-icon.return {
    color: #64748b;
    background: #f1f3f5;
}


/* VENTA — para cuando se implemente */

.inventory-history-type-icon.sale {
    color: #7c3aed;
    background: #f5f3ff;
}


/* -------------------------------------------------------------------------- */
/* CANTIDAD                                                                    */
/* -------------------------------------------------------------------------- */

.inventory-history-quantity {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.inventory-history-quantity.positive {
    color: #15803d;
}

.inventory-history-quantity.negative {
    color: #dc2626;
}

.inventory-history-quantity.neutral {
    color: #6b7280;
}


/* -------------------------------------------------------------------------- */
/* MOTIVO Y USUARIO                                                            */
/* -------------------------------------------------------------------------- */

.inventory-history-reason,
.inventory-history-user {
    min-width: 0;

    font-size: 12px;

    line-height: 1.35;

    white-space: normal;

    overflow: hidden;

    overflow-wrap: break-word;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    line-clamp: 2;

    -webkit-line-clamp: 2;
}


/* -------------------------------------------------------------------------- */
/* ESTADO VACÍO                                                                */
/* -------------------------------------------------------------------------- */

.inventory-history-empty {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 54px;
    padding: 0 16px;

    border: 1px dashed #d1d5db;
    border-radius: 10px;

    background: #fafafa;

    color: #6b7280;

    font-size: 13px;
}

.inventory-history-empty i {
    font-size: 14px;
    color: #9ca3af;
}


/* -------------------------------------------------------------------------- */
/* RESPONSIVE                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 700px) {

    .inventory-history-table {
        overflow-x: auto;
    }

    .inventory-history-table-header,
    .inventory-history-row {
        min-width: 720px;
    }

}


.inventory-history-table {
    cursor: grab;
    user-select: none;
}

.inventory-history-table.is-dragging {
    cursor: grabbing;
}

.inventory-history-table.is-dragging * {
    cursor: grabbing;
}




/* -------------------------------------------------------------------------- */
/* BOTÓN FILTRAR INVENTARIO                                                   */
/* -------------------------------------------------------------------------- */

.inventory-history-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 36px;
    padding: 0 13px;

    border: 1px solid #d9dee7;
    border-radius: 8px;

    background: #ffffff;
    color: #475569;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.inventory-history-filter-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--royal-blue);
}

.inventory-history-filter-btn:active {
    transform: translateY(1px);
}

.inventory-history-filter-btn i {
    font-size: 12px;
}


/* -------------------------------------------------------------------------- */
/* BOTÓN FILTRAR INVENTARIO - FILTROS ACTIVOS                                */
/* -------------------------------------------------------------------------- */

.inventory-history-filter-btn-active {
    background: var(--royal-blue);
    border-color: var(--royal-blue);
    color: #ffffff;
}

.inventory-history-filter-btn-active:hover {
    background: var(--royal-blue);
    border-color: var(--royal-blue);
    color: #ffffff;
}


/* -------------------------------------------------------------------------- */
/* FILTRO DE FECHA                                                                 */
/* -------------------------------------------------------------------------- */

.inventory-filter-date-mode {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
}

.inventory-filter-radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 13px;
    font-weight: 600;
    color: #374151;

    cursor: pointer;
}

.inventory-filter-radio input {

    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: var(--royal-blue);

    cursor: pointer;
}

.inventory-filter-date-fields {
    width: 100%;
}

.inventory-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inventory-filter-field label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
}

.inventory-filter-field input[type="date"] {
    width: 100%;
    height: 40px;
    padding: 0 11px;

    border: 1px solid #d9dee7;
    border-radius: 8px;

    background: #ffffff;
    color: #111827;

    font-size: 13px;

    box-sizing: border-box;
}

.inventory-filter-field input[type="date"]:focus {
    outline: none;
    border-color: var(--royal-blue);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.08);
}

.inventory-filter-date-range {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 10px;
}

.inventory-filter-date-range-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 40px;

    color: #64748b;
    font-size: 12px;
}


.inventory-filter-input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}


/* ================================================================
   OPCIONES DE FILTROS
   ================================================================ */

.inventory-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 8px;
}


/* ================================================================
   OPCIÓN INDIVIDUAL
   ================================================================ */

.inventory-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    font-size: 13px;
    color: #374151;

    cursor: pointer;
    user-select: none;
}


/* ================================================================
   CHECKBOX
   ================================================================ */

.inventory-filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;

    margin: 0;

    accent-color: var(--royal-blue);

    cursor: pointer;
}


/* ================================================================
   ÍCONO DEL TIPO DE MOVIMIENTO
   ================================================================ */

.inventory-filter-option-icon {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 7px;

    font-size: 11px;
}


/* ================================================================
   COLORES DE LOS TIPOS
   ================================================================ */

.inventory-filter-option-icon.entry {
    color: #15803d;
    background: #ecfdf3;
}

.inventory-filter-option-icon.return {
    color: #64748b;
    background: #f1f3f5;
}

.inventory-filter-option-icon.loss {
    color: #dc2626;
    background: #fef2f2;
}

.inventory-filter-option-icon.adjustment {
    color: var(--royal-blue);
    background: #eef2ff;
}

.inventory-filter-option-icon.sale {
    color: #7c3aed;
    background: #f5f3ff;
}


/* ================================================================
   TEXTO DE LA OPCIÓN
   ================================================================ */

.inventory-filter-option-label {
    line-height: 1.3;
}


/* ================================================================
   SECCIONES DEL FILTRO
   ================================================================ */

.inventory-filter-section {
    padding: 0 0 20px;
    margin: 0 0 20px;

    border-bottom: 1px solid #e5e7eb;
}

.inventory-filter-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.inventory-filter-section-header {
    margin-bottom: 12px;
}

.inventory-filter-section-header h4 {
    margin: 0;

    font-size: 15px;
    font-weight: 700;
    color: #111827;
}



/* ==========================================================================
   OPCIONES DE ATRIBUTOS
   ========================================================================== */

.admin-pending-option {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 48px;
    box-sizing: border-box;

    padding: 7px 10px;

    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* --------------------------------------------------------------------------
   CONTROLADOR DE ARRASTRE
   -------------------------------------------------------------------------- */

.admin-option-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    flex: 0 0 20px;

    color: var(--text-muted);

    cursor: grab;
    user-select: none;

    transition: color 0.2s ease;
}

.admin-option-drag-handle:active {
    cursor: grabbing;
}

.admin-pending-option:hover .admin-option-drag-handle {
    color: var(--royal-blue);
}


/* --------------------------------------------------------------------------
   MUESTRA DE COLOR
   -------------------------------------------------------------------------- */

.admin-option-color-swatch {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    border-radius: 6px;

    border: 1px solid rgba(10, 15, 29, 0.15);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.25),
        var(--shadow-sm);
}


/* --------------------------------------------------------------------------
   NOMBRE DE LA OPCIÓN
   -------------------------------------------------------------------------- */

.admin-option-value {
    flex: 1;
    min-width: 0;

    color: var(--text-dark);

    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   CONTENEDOR DE BOTONES
   -------------------------------------------------------------------------- */

.admin-pending-option>div {
    display: flex;
    align-items: center;
    gap: 6px;

    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   BOTONES DE LA OPCIÓN
   -------------------------------------------------------------------------- */

.admin-pending-option .btn-secondary,
.admin-pending-option .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 34px;

    padding: 6px 10px;

    font-size: 12px;
    line-height: 1;

    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   ESTADO HOVER DE LA OPCIÓN
   -------------------------------------------------------------------------- */

.admin-pending-option:hover {
    background-color: var(--gray-100);
    border-color: var(--shellstone);
    box-shadow: var(--shadow-sm);
}


/* --------------------------------------------------------------------------
   OPCIÓN SIENDO ARRASTRADA
   -------------------------------------------------------------------------- */

.admin-pending-option.dragging {
    opacity: 0.55;

    border-style: dashed;

    transform: scale(0.99);
}


/* --------------------------------------------------------------------------
   SEPARACIÓN ENTRE OPCIONES
   -------------------------------------------------------------------------- */

#adminAttributeOptionsList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-pending-option>div {
    display: flex;
    align-items: center;
    gap: 6px;
}



.admin-color-name-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 8px;
}

.admin-color-name-header label {
    margin-bottom: 0;
}

.admin-color-name-header .btn-secondary {
    flex-shrink: 0;
    padding: 6px 10px;
    min-height: 32px;
    font-size: 12px;
}


/* ==========================================================================
   VALIDACIÓN DE DISPONIBILIDAD DE OPCIONES
   ========================================================================== */

.admin-option-availability {
    display: block;
    margin-top: 6px;
    min-height: 16px;

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}


/* --------------------------------------------------------------------------
   DISPONIBLE
   -------------------------------------------------------------------------- */

.admin-option-availability.available {
    color: var(--success);
}


/* --------------------------------------------------------------------------
   NO DISPONIBLE
   -------------------------------------------------------------------------- */

.admin-option-availability.unavailable {
    color: #dc2626;
}




/* =========================================================
   BOTÓN PUBLICAR / DESPUBLICAR
   ========================================================= */

.table-actions .btn-publish {
    width: 34px;
    height: 34px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

/* Producto publicado */
.table-actions .btn-publish.published {
    background: #dcfce7;
    color: #15803d;
}

/* Producto no publicado */
.table-actions .btn-publish.unpublished {
    background: #fef3c7;
    color: #b45309;
}

/* Hover */
.table-actions .btn-publish:hover {
    transform: translateY(-2px);
}

/* Hover publicado */
.table-actions .btn-publish.published:hover {
    background: #bbf7d0;
    box-shadow: 0 4px 10px rgba(21, 128, 61, 0.18);
}

/* Hover no publicado */
.table-actions .btn-publish.unpublished:hover {
    background: #fde68a;
    box-shadow: 0 4px 10px rgba(180, 83, 9, 0.18);
}

/* Click */
.table-actions .btn-publish:active {
    transform: translateY(0);
}