/*
   ==========================================================================
   IDENTIDAD VISUAL: ADM COMERCIAL
   ==========================================================================
   Este bloque concentra la paleta y los ajustes de marca. Las vistas deben
   consumir estas variables en lugar de declarar colores de marca propios.
*/
:root {
    --adm-primary: #e76518;
    --adm-primary-hover: #c94f0f;
    --adm-primary-bright: #f47a22;
    --adm-primary-light: #fff0e5;
    --adm-primary-lighter: #fff7ed;
    --adm-primary-border: #fed7aa;
    --adm-primary-rgb: 231, 101, 24;
    --adm-amber: #f59e0b;
    --adm-ink: #252525;
    --adm-muted: #6f6863;
    --adm-surface: #fffaf6;

    /* Variables consumidas por la plantilla base. */
    --theme-default: var(--adm-primary);
    --theme-secondary: #6f6863;
    --rgb-primary: rgb(var(--adm-primary-rgb));
    --primary-70: rgba(var(--adm-primary-rgb), 0.7);
    --light-bg-primary: var(--adm-primary-light);
    --light-shade-primary: var(--adm-primary-lighter);
    --view-border-marker: var(--adm-primary-border);
}

::selection {
    color: #fff;
    background: var(--adm-primary);
}

a,
.link {
    text-underline-offset: 2px;
}

.btn-primary {
    --bs-btn-bg: var(--adm-primary);
    --bs-btn-border-color: var(--adm-primary);
    --bs-btn-hover-bg: var(--adm-primary-hover);
    --bs-btn-hover-border-color: var(--adm-primary-hover);
    --bs-btn-active-bg: var(--adm-primary-hover);
    --bs-btn-active-border-color: var(--adm-primary-hover);
    --bs-btn-disabled-bg: var(--adm-primary);
    --bs-btn-disabled-border-color: var(--adm-primary);
    color: #fff !important;
    background-color: var(--adm-primary) !important;
    border-color: var(--adm-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
    color: #fff !important;
    background-color: var(--adm-primary-hover) !important;
    border-color: var(--adm-primary-hover) !important;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--adm-primary-rgb), .22) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--adm-primary-bright);
    box-shadow: 0 0 0 .2rem rgba(var(--adm-primary-rgb), .15);
}

.form-check-input:checked {
    background-color: var(--adm-primary);
    border-color: var(--adm-primary);
}

.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    width: 200px;
}

.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li a span {
    white-space: nowrap;
}

.sidebar-wrapper .logo-wrapper a {
    background-image: none !important;
}

.sidebar-wrapper .logo-wrapper .sidebar-brand-logo {
    width: 190px;
    max-width: 100%;
    height: 48px;
    margin: 0 auto;
    object-fit: contain;
}

body.dark-only .sidebar-wrapper .logo-wrapper .sidebar-brand-logo,
body.dark-sidebar .sidebar-wrapper .logo-wrapper .sidebar-brand-logo {
    padding: 4px 8px;
    background: rgba(255, 255, 255, .94);
    border-radius: 10px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.active {
    color: var(--adm-primary) !important;
    background-color: var(--adm-primary-light) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.active span {
    color: var(--adm-primary) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.active svg.stroke-icon {
    stroke: var(--adm-primary) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.active svg.fill-icon {
    fill: var(--adm-primary) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-link.active::after {
    background-color: var(--adm-primary) !important;
}

.payment-methods .bg-payment.active,
.payment-methods .bg-payment:hover,
.payment-methods .bg-payment:focus-visible {
    outline: none !important;
    color: var(--adm-primary);
    background-color: var(--adm-primary-light) !important;
    border-color: var(--adm-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--adm-primary-rgb), .12);
}

.sidebar-brand-icon {
    width: 42px;
    height: 42px;
}

.header-brand-logo {
    width: 172px;
    height: 44px;
    object-fit: contain;
}

.auth-brand-logo {
    width: 220px;
    max-width: 100%;
    height: auto;
}

.login-card {
    background: linear-gradient(145deg, #fff 0%, var(--adm-primary-lighter) 100%);
}

.login-card .login-main {
    border-top: 4px solid var(--adm-primary);
    box-shadow: 0 18px 50px rgba(79, 47, 27, .1);
}

.login-card .logo {
    display: inline-flex;
    margin-bottom: 24px;
}

.legacy-auth-page {
    min-height: 100vh;
    background: linear-gradient(145deg, #fff 0%, var(--adm-primary-lighter) 100%);
}

.legacy-auth-shell .navbar {
    border-bottom: 1px solid var(--adm-primary-border);
    box-shadow: 0 8px 28px rgba(79, 47, 27, .07) !important;
}

.legacy-auth-shell .navbar-brand img {
    display: block;
    width: 185px;
    height: 46px;
    object-fit: contain;
}

.legacy-auth-shell main .card {
    overflow: hidden;
    border: 1px solid var(--adm-primary-border);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(79, 47, 27, .09);
}

.legacy-auth-shell main .card-header {
    padding: 1rem 1.25rem;
    color: var(--adm-ink);
    font-weight: 700;
    background: var(--adm-primary-lighter);
    border-bottom-color: var(--adm-primary-border);
}

.login-hero-column {
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    background: var(--adm-primary-lighter);
}

.login-hero-image {
    display: block;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1199.98px) {
    .login-hero-column {
        display: none;
    }
}

/* 
   ==========================================================================
   VISTA: resources/views/atributos/form.blade.php
   ========================================================================== 
*/

/* Componente: Input Circular de Color */
/* Descripción: Transforma el input type="color" en un círculo perfecto y oculta la apariencia por defecto */
.circle-color-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    width: 50px;
    height: 50px;
    min-width: 50px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
}

/* Estilo interno del selector de color (Webkit) */
.circle-color-input::-webkit-color-swatch {
    border-radius: 50%;
    border: 1px solid #ced4da;
    /* Borde sutil para colores claros */
    padding: 0;
}

/* Wrapper interno del selector (Webkit) */
.circle-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

/* Estilo interno del selector de color (Mozilla) */
.circle-color-input::-moz-color-swatch {
    border-radius: 50%;
    border: 1px solid #ced4da;
}