/* ============================================================
   MONOCUCO UI THEME - Carnaval Pro Claro
   ============================================================ */

:root {
    --mono-green: #63ff7a;
    --mono-green-dark: #16a34a;
    --mono-yellow: #ffd43b;
    --mono-fuchsia: #e6009c;
    --mono-cyan: #20c7ff;
    --mono-blue: #2563eb;
    --mono-purple: #7c3aed;
    --mono-ink: #111827;
    --mono-muted: #64748b;
    --mono-bg: #f6f8fc;
    --mono-card: #ffffff;
    --mono-border: #e5e7eb;
    --mono-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--mono-bg);
    color: var(--mono-ink);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.content-wrapper {
    background:
        radial-gradient(circle at top left, rgba(99, 255, 122, .13), transparent 28%),
        radial-gradient(circle at top right, rgba(230, 0, 156, .10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, var(--mono-bg) 38%, #f8fafc 100%);
}

.content-header h1 {
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--mono-ink);
}

.text-muted {
    color: var(--mono-muted) !important;
}

/* Navbar */
.main-header.navbar {
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    background: rgba(255, 255, 255, .90);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.main-header .nav-link {
    color: #334155 !important;
    font-weight: 700;
}

.main-header .nav-link:hover {
    color: var(--mono-purple) !important;
}

/* Sidebar claro */
.sidebar-light-mono {
    background:
        radial-gradient(circle at 20% 0%, rgba(99, 255, 122, .20), transparent 36%),
        radial-gradient(circle at 100% 30%, rgba(230, 0, 156, .13), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    border-right: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 10px 0 30px rgba(15, 23, 42, .05);
}

.sidebar-light-mono .sidebar a,
.sidebar-light-mono .nav-sidebar > .nav-item > .nav-link {
    color: #334155;
}

.brand-link {
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.brand-link .brand-text {
    color: var(--mono-ink);
    font-weight: 900 !important;
    letter-spacing: -0.04em;
}

.mono-logo-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    margin-right: 8px;
    background: conic-gradient(from 0deg, var(--mono-green), var(--mono-yellow), var(--mono-fuchsia), var(--mono-cyan), var(--mono-green));
    box-shadow: 0 0 18px rgba(230, 0, 156, .28);
}

.user-panel {
    border-bottom: 1px solid rgba(226, 232, 240, .85) !important;
}

.user-panel .info a {
    color: var(--mono-ink) !important;
    font-weight: 800;
}

.user-panel small {
    color: var(--mono-muted) !important;
}

/* Menú */
.nav-sidebar .nav-header {
    color: #94a3b8;
    font-weight: 900;
    letter-spacing: .08em;
    font-size: .72rem;
    padding-top: 1rem;
}

.nav-sidebar .nav-link {
    border-radius: 14px;
    margin: 4px 10px;
    transition: all .18s ease;
}

.nav-sidebar .nav-link p {
    font-weight: 800;
}

.nav-sidebar .nav-link:hover {
    background: rgba(124, 58, 237, .08) !important;
    color: var(--mono-purple) !important;
    transform: translateX(2px);
}

.nav-sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--mono-purple), var(--mono-fuchsia)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(124, 58, 237, .25);
}

.nav-sidebar .nav-link.active i,
.nav-sidebar .nav-link.active p {
    color: #ffffff !important;
}

.nav-treeview {
    padding-left: .45rem;
}

.nav-treeview .nav-link {
    background: transparent !important;
    margin-left: 18px;
    border-left: 2px solid rgba(124, 58, 237, .10);
}

.nav-treeview .nav-link.active {
    background: rgba(124, 58, 237, .10) !important;
    color: var(--mono-purple) !important;
    box-shadow: none;
    border-left-color: var(--mono-fuchsia);
}

.nav-treeview .nav-link.active i,
.nav-treeview .nav-link.active p {
    color: var(--mono-purple) !important;
}

/* Cards */
.card {
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 20px;
    box-shadow: var(--mono-shadow);
    overflow: hidden;
}

.card-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, .85);
}

.card-title {
    font-weight: 900;
    color: var(--mono-ink);
}

/* Dashboard boxes */
.small-box {
    border-radius: 22px;
    box-shadow: var(--mono-shadow);
    overflow: hidden;
}

.small-box .inner h3 {
    font-weight: 900;
    letter-spacing: -0.04em;
}

.small-box .inner p {
    font-weight: 800;
}

.small-box .icon {
    opacity: .32;
}

.small-box.bg-info,
.bg-info {
    background: linear-gradient(135deg, var(--mono-cyan), var(--mono-blue)) !important;
}

.small-box.bg-success,
.bg-success {
    background: linear-gradient(135deg, var(--mono-green-dark), #22c55e) !important;
}

.small-box.bg-primary,
.bg-primary {
    background: linear-gradient(135deg, var(--mono-purple), var(--mono-blue)) !important;
}

.small-box.bg-warning,
.bg-warning {
    background: linear-gradient(135deg, var(--mono-yellow), #fb923c) !important;
    color: #3b2600 !important;
}

.small-box.bg-danger,
.bg-danger {
    background: linear-gradient(135deg, var(--mono-fuchsia), #ef4444) !important;
}

.small-box-footer {
    background: rgba(255, 255, 255, .18) !important;
    font-weight: 800;
}

/* Botones */
.btn {
    border-radius: 14px;
    font-weight: 800;
    border: 0;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.btn-primary {
    background: linear-gradient(135deg, var(--mono-purple), var(--mono-fuchsia)) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--mono-green-dark), #22c55e) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, var(--mono-fuchsia)) !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--mono-yellow), #fb923c) !important;
    color: #3b2600 !important;
}

/* Formularios */
.form-control,
.custom-select,
select.form-control {
    border-radius: 14px;
    border: 1px solid #dbe3ef;
    background: #ffffff;
    min-height: 42px;
}

.form-control:focus {
    border-color: var(--mono-purple);
    box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .12);
}

label {
    color: #334155;
    font-weight: 800;
    font-size: .88rem;
}

/* Tablas */
.table thead th {
    border-top: 0;
    border-bottom: 1px solid #e5e7eb;
    color: #334155;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #f8fafc;
}

.table td,
.table th {
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fbfdff;
}

.badge {
    border-radius: 999px;
    padding: .45rem .7rem;
    font-weight: 800;
}

/* Login */
.login-page {
    background:
        radial-gradient(circle at 10% 20%, rgba(99, 255, 122, .45), transparent 24%),
        radial-gradient(circle at 84% 18%, rgba(255, 212, 59, .40), transparent 22%),
        radial-gradient(circle at 72% 86%, rgba(230, 0, 156, .32), transparent 26%),
        linear-gradient(135deg, #eff6ff 0%, #ffffff 40%, #fdf2f8 100%);
}

.login-logo .brand-monocuco {
    color: var(--mono-ink);
    font-weight: 950;
    letter-spacing: -0.05em;
    text-shadow: 0 10px 24px rgba(124, 58, 237, .16);
}

.login-box .card {
    border-radius: 26px;
}

.login-card-body {
    border-radius: 24px;
}

/* Hero */
.mono-hero {
    border-radius: 26px;
    padding: 1.4rem;
    margin-bottom: 1rem;
    background:
        radial-gradient(circle at 10% 10%, rgba(99, 255, 122, .22), transparent 32%),
        radial-gradient(circle at 90% 20%, rgba(230, 0, 156, .16), transparent 30%),
        linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: var(--mono-shadow);
}

.mono-hero h1,
.mono-hero h2,
.mono-hero h3 {
    font-weight: 950;
    letter-spacing: -0.05em;
    margin-bottom: .25rem;
}

.mono-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #fff0fa;
    color: var(--mono-fuchsia);
    font-weight: 900;
    font-size: .78rem;
}

@media (max-width: 767.98px) {
    .content-header h1 {
        font-size: 1.65rem;
    }

    .small-box .inner h3 {
        font-size: 1.55rem;
    }

    .card {
        border-radius: 16px;
    }
}


/* Empresa activa */
.mono-company-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: #ecfbff;
    color: #075985;
    font-weight: 900;
    font-size: .82rem;
}

.mono-company-form select {
    border-radius: 999px !important;
    border: 1px solid #dbe3ef;
    font-weight: 800;
    min-width: 210px;
    background: #ffffff;
    color: #334155;
}

@media (max-width: 767.98px) {
    .mono-company-form select {
        min-width: 145px;
        max-width: 145px;
    }
}


/* ============================================================
   V6 - Personalización por empresa activa
   ============================================================ */

:root {
    --tenant-primary: var(--tenant-primary, #7c3aed);
    --tenant-secondary: var(--tenant-secondary, #e6009c);
}

.mono-brand-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 8px;
    margin-right: 8px;
    vertical-align: middle;
}

.nav-sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(17, 24, 39, .16);
}

.nav-treeview .nav-link.active {
    background: color-mix(in srgb, var(--tenant-primary) 12%, white) !important;
    color: var(--tenant-primary) !important;
    border-left-color: var(--tenant-secondary);
}

.btn-primary {
    background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary)) !important;
}

.mono-chip {
    background: color-mix(in srgb, var(--tenant-secondary) 10%, white);
    color: var(--tenant-secondary);
}

.mono-company-pill {
    background: color-mix(in srgb, var(--tenant-primary) 12%, white);
    color: var(--tenant-primary);
}

/* Estilo 1: Carnaval Pro */
body.theme-carnaval_pro .content-wrapper {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--tenant-secondary) 13%, transparent), transparent 28%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--tenant-primary) 12%, transparent), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 38%, #f8fafc 100%);
}

/* Estilo 2: Repostería suave */
body.theme_reposteria,
body.theme-reposteria {
    --mono-bg: #fff7fb;
}

body.theme_reposteria .content-wrapper,
body.theme-reposteria .content-wrapper {
    background:
        radial-gradient(circle at top left, rgba(248, 168, 200, .24), transparent 28%),
        radial-gradient(circle at top right, rgba(139, 94, 60, .13), transparent 26%),
        linear-gradient(180deg, #fffafd 0%, #fff7fb 50%, #ffffff 100%);
}

body.theme_reposteria .card,
body.theme-reposteria .card {
    border-radius: 26px;
}

/* Estilo 3: Restaurante */
body.theme_restaurante,
body.theme-restaurante {
    --mono-bg: #fffaf0;
}

body.theme_restaurante .content-wrapper,
body.theme-restaurante .content-wrapper {
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, .14), transparent 28%),
        radial-gradient(circle at top right, rgba(250, 204, 21, .18), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fffaf0 50%, #ffffff 100%);
}

/* Estilo 4: Ferretería */
body.theme_ferreteria,
body.theme-ferreteria {
    --mono-bg: #f3f7ff;
}

body.theme_ferreteria .content-wrapper,
body.theme-ferreteria .content-wrapper {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .14), transparent 28%),
        radial-gradient(circle at top right, rgba(249, 115, 22, .14), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f3f7ff 48%, #ffffff 100%);
}

/* Estilo 5: Minimal claro */
body.theme_minimal,
body.theme-minimal .content-wrapper {
    background: #f8fafc !important;
}

body.theme_minimal .card,
body.theme-minimal .card {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}