/* ============================================================================
 * custom-style.css - Tema Lavandería Express R&R
 * ----------------------------------------------------------------------------
 * Paleta de verdes específica para Lavandería Express R&R.
 * Sobrescribe colores de AdminLTE (skin-green-light) con tonos emerald/teal.
 *
 * Variables de paleta:
 *   --lvx-primary:  #047857  (emerald 700)  → barras y elementos principales
 *   --lvx-dark:     #064e3b  (emerald 900)  → sidebar oscuro / hover
 *   --lvx-accent:   #14b8a6  (teal 500)     → acentos / botones secundarios
 *   --lvx-light:    #d1fae5  (emerald 100)  → fondos suaves / hover claro
 *   --lvx-soft:     #ecfdf5  (emerald 50)   → fondos muy suaves
 *   --lvx-text:     #ffffff
 * ============================================================================ */

:root {
    --lvx-primary: #047857;
    --lvx-primary-hover: #065f46;
    --lvx-dark: #064e3b;
    --lvx-accent: #14b8a6;
    --lvx-accent-hover: #0d9488;
    --lvx-light: #d1fae5;
    --lvx-soft: #ecfdf5;
    --lvx-text: #ffffff;
}

/* ----------------------------------------------------------------------------
 * NAVBAR / HEADER (skin-green-light)
 * -------------------------------------------------------------------------- */
.skin-green-light .main-header .navbar,
.skin-green-light .main-header .logo {
    background-color: var(--lvx-primary) !important;
    color: var(--lvx-text) !important;
    border-bottom: 0;
}
.skin-green-light .main-header .navbar .nav > li > a,
.skin-green-light .main-header .logo,
.skin-green-light .main-header .logo:hover {
    color: var(--lvx-text) !important;
}
.skin-green-light .main-header .navbar .nav > li > a:hover,
.skin-green-light .main-header .navbar .nav > li > a:active,
.skin-green-light .main-header .navbar .nav > li > a:focus,
.skin-green-light .main-header .navbar .nav .open > a,
.skin-green-light .main-header .navbar .nav .open > a:hover,
.skin-green-light .main-header .navbar .nav .open > a:focus,
.skin-green-light .main-header .navbar .nav > .active > a {
    background-color: var(--lvx-primary-hover) !important;
    color: var(--lvx-text) !important;
}
.skin-green-light .main-header .navbar .sidebar-toggle {
    color: var(--lvx-text) !important;
}
.skin-green-light .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--lvx-primary-hover) !important;
    color: var(--lvx-text) !important;
}
.skin-green-light .main-header li.user-header {
    background-color: var(--lvx-primary) !important;
}

/* ----------------------------------------------------------------------------
 * SIDEBAR (skin-green-light)
 * -------------------------------------------------------------------------- */
.skin-green-light .main-sidebar,
.skin-green-light .left-side {
    background-color: #f4fbf7 !important;
    border-right: 1px solid var(--lvx-light) !important;
}
.skin-green-light .user-panel > .info,
.skin-green-light .user-panel > .info > a {
    color: var(--lvx-dark) !important;
}
.skin-green-light .sidebar-menu > li.header {
    color: var(--lvx-dark) !important;
    background: var(--lvx-soft) !important;
}
.skin-green-light .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    color: #1f2937 !important;
}
.skin-green-light .sidebar-menu > li:hover > a,
.skin-green-light .sidebar-menu > li.active > a,
.skin-green-light .sidebar-menu > li.menu-open > a {
    background-color: var(--lvx-light) !important;
    border-left-color: var(--lvx-primary) !important;
    color: var(--lvx-dark) !important;
}
.skin-green-light .sidebar-menu > li > .treeview-menu {
    background-color: #f4fbf7 !important;
}
.skin-green-light .sidebar a {
    color: #1f2937;
}
.skin-green-light .treeview-menu > li > a {
    color: #374151 !important;
}
.skin-green-light .treeview-menu > li.active > a,
.skin-green-light .treeview-menu > li > a:hover {
    color: var(--lvx-primary) !important;
}
.skin-green-light .sidebar-form {
    border-radius: 4px;
    border: 1px solid var(--lvx-light);
    margin: 10px;
}

/* ----------------------------------------------------------------------------
 * BOTONES PRIMARIOS / VINCULOS
 * -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--lvx-primary) !important;
    border-color: var(--lvx-primary) !important;
    color: var(--lvx-text) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--lvx-primary-hover) !important;
    border-color: var(--lvx-primary-hover) !important;
    color: var(--lvx-text) !important;
}

.btn-info,
.btn-info:focus {
    background-color: var(--lvx-accent) !important;
    border-color: var(--lvx-accent) !important;
}
.btn-info:hover,
.btn-info:active,
.btn-info.active {
    background-color: var(--lvx-accent-hover) !important;
    border-color: var(--lvx-accent-hover) !important;
}

a {
    color: var(--lvx-primary);
}
a:hover,
a:focus {
    color: var(--lvx-primary-hover);
}

/* ----------------------------------------------------------------------------
 * BOXES / CARDS / TABS
 * -------------------------------------------------------------------------- */
.box.box-primary {
    border-top-color: var(--lvx-primary) !important;
}
.box.box-info {
    border-top-color: var(--lvx-accent) !important;
}
.bg-light-blue,
.label-primary,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: var(--lvx-primary) !important;
    color: var(--lvx-text) !important;
}
.callout.callout-info {
    background-color: var(--lvx-accent) !important;
    border-color: var(--lvx-accent-hover) !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--lvx-primary) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    color: var(--lvx-primary) !important;
}

/* ----------------------------------------------------------------------------
 * PROGRESS / SMALL BOXES
 * -------------------------------------------------------------------------- */
.progress-bar-primary,
.progress-bar-light-blue {
    background-color: var(--lvx-primary) !important;
}
.small-box.bg-aqua,
.small-box.bg-light-blue {
    background-color: var(--lvx-primary) !important;
    color: var(--lvx-text) !important;
}
.small-box.bg-teal {
    background-color: var(--lvx-accent) !important;
    color: var(--lvx-text) !important;
}

/* ----------------------------------------------------------------------------
 * LOGIN / AUTH BACKDROP
 * -------------------------------------------------------------------------- */
.login-page,
.register-page,
body.hold-transition.login-page {
    background: linear-gradient(135deg, var(--lvx-primary) 0%, var(--lvx-accent) 100%) !important;
}
.login-box-msg,
.register-box-msg {
    color: var(--lvx-dark);
}

/* ----------------------------------------------------------------------------
 * POS / SELLS HIGHLIGHTS
 * -------------------------------------------------------------------------- */
.pos-tab-menu .nav-tabs li.active a,
.pos-tab-menu .nav-tabs li a:hover {
    background-color: var(--lvx-primary) !important;
    color: var(--lvx-text) !important;
}
.text-primary,
.text-light-blue {
    color: var(--lvx-primary) !important;
}
.bg-primary {
    background-color: var(--lvx-primary) !important;
    color: var(--lvx-text) !important;
}

/* ----------------------------------------------------------------------------
 * FORM CONTROLS FOCUS
 * -------------------------------------------------------------------------- */
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--lvx-accent) !important;
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.2) !important;
}