/*
 * CORTANA-FEATURE:light-list-style-r87
 * CORTANA-FEATURE:user-avatar-placeholder-r99
 * CORTANA-FEATURE:row-click-navigation-r100
 */

:root {

    --bg: #eef5fc;

    --bg2: #f8fbff;

    --panel: #ffffff;

    --text: #172033;

    --muted: #667085;

    --line: #d8e4f0;

    --primary: #0786c8;

    --primary-dark: #064b78;

    --primary-soft: #e3f3ff;

    --accent: #f6a800;

    --danger: #b91c1c;

    --ok: #167245;

    --shadow: 0 14px 36px rgba(15, 44, 75, .10);

    --shadow-soft: 0 5px 16px rgba(15, 44, 75, .07);

    --tenant-font: Arial, Helvetica, sans-serif;

}



* { box-sizing: border-box; }

html { min-height: 100%; }

body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    font-family: var(--tenant-font);

    background: radial-gradient(circle at top left, rgba(var(--primary-rgb), .14), transparent 34%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 52%, #fff 100%);

    color: var(--text);

}



button, input, select, textarea { font-family: var(--tenant-font); }



a { color: var(--primary-dark); }

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



.topbar {

    min-height: 76px;

    background: rgba(255,255,255,.95);

    border-bottom: 1px solid rgba(var(--primary-rgb), .14);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    padding: 10px 26px;

    box-shadow: 0 4px 18px rgba(15,44,75,.07);

    position: sticky;

    top: 0;

    z-index: 100;

    backdrop-filter: blur(8px);

}

.topbar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }

.brand-logo { display: block; max-height: 54px; max-width: 210px; width: auto; object-fit: contain; }

.topbar-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.topbar-title strong { font-size: 20px; color: var(--primary-dark); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-title span { color: var(--muted); font-size: 13px; white-space: nowrap; }

.usernav { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }

.user-pill { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px 7px 12px; box-shadow: var(--shadow-soft); white-space: nowrap; }

.user-pill span { font-weight: 800; }

.user-pill small { color: var(--primary-dark); background: var(--primary-soft); padding: 4px 8px; border-radius: 999px; font-weight: 800; }

.user-summary { max-width: none; }

.user-welcome { display: inline-flex; align-items: center; gap: 4px; }

.user-welcome strong { font-weight: 900; }

.nav-profile { background: #0b77bd !important; }

.nav-profile:hover { background: var(--primary-dark) !important; }





.btn, .nav-btn, button.btn, a.btn {

    background: var(--primary);

    color: white !important;

    border: 0;

    border-radius: 10px;

    height: 36px;

    min-height: 36px;

    padding: 0 14px;

    text-decoration: none;

    cursor: pointer;

    font-family: inherit;

    font-size: 15px;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    line-height: 1.15;

    white-space: nowrap;

    vertical-align: middle;

    appearance: none;

    -webkit-appearance: none;

    box-shadow: 0 8px 18px rgba(7,134,200,.16);

}

.btn:hover, .nav-btn:hover { background: var(--primary-dark); text-decoration: none; }

.btn-small { height: 30px; min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

.secondary, .nav-back { background: #475569 !important; color: #fff !important; }

.secondary:hover, .nav-back:hover { background: #334155 !important; color: #fff !important; }

.nav-menu { background: #0b77bd !important; color: #fff !important; }

.danger, .nav-logout { background: #9a3412 !important; color: #fff !important; }

.danger:hover, .nav-logout:hover { background: #7c2d12 !important; color: #fff !important; }

.ok { background: #15803d !important; color: #fff !important; }

.ok:hover { background: #166534 !important; color: #fff !important; }

.btn.dark { background: #111827 !important; color: #fff !important; }

.btn.dark:hover { background: #030712 !important; color: #fff !important; }



.container { width: 100%; max-width: 1500px; margin: 0 auto; padding: 24px; flex: 1 0 auto; }

.panel, .login-box { background: rgba(255,255,255,.96); border: 1px solid rgba(7,134,200,.13); border-radius: 18px; box-shadow: var(--shadow); }

.panel { padding: 20px; margin-bottom: 18px; overflow: visible; }

.panel h1, .panel h2, .login-box h1 { margin-top: 0; color: var(--primary-dark); letter-spacing: -.03em; }

.panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }

.muted { color: var(--muted); }

.one-line { white-space: nowrap; }

.ellipsis { overflow: hidden; text-overflow: ellipsis; }



.login-wrap { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 24px; }

.login-box { width: 100%; max-width: 430px; padding: 30px; }

.login-logo-wrap { text-align: center; margin-bottom: 16px; }

.login-logo { max-width: 300px; max-height: 150px; width: auto; height: auto; object-fit: contain; }



.field { margin-bottom: 14px; }

label { display: block; font-weight: 800; margin-bottom: 5px; color: #24364b; font-size: 13px; }

input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="datetime-local"], input[type="email"], select, textarea {

    width: 100%; border: 1px solid #cbd9e8; border-radius: 9px; padding: 9px 10px; font-size: 14px; background: white; color: var(--text); outline: none;

}

textarea { min-height: 74px; resize: vertical; }

input:focus, select:focus, textarea:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.16); }



/* v4.63: botones y controles en la misma línea con altura y fuente uniformes */

.toolbar .btn,

.actions-row .btn,

.row-actions .btn,

.stat-row .btn,

.panel-heading .btn {

    flex: 0 0 auto;

}

.toolbar input[type="search"],

.toolbar select,

.toolbar .btn {

    height: 36px;

    min-height: 36px;

}

.row-actions form,

.actions-row form,

.toolbar form {

    margin: 0;

}

.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; font-weight: 700; }



.password-field {

    position: relative;

    display: flex;

    align-items: center;

}

.password-field input[type="password"],

.password-field input[type="text"] {

    padding-right: 46px;

}

.password-toggle {

    position: absolute;

    right: 6px;

    top: 50%;

    transform: translateY(-50%);

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 8px;

    background: transparent;

    cursor: pointer;

    font-size: 17px;

    line-height: 1;

}

.password-toggle:hover,

.password-toggle:focus {

    background: rgba(7,134,200,.10);

    outline: none;

}



.error, .success, .notice { padding: 11px 12px; border-radius: 10px; margin-bottom: 14px; }

.error { background: #fee2e2; color: var(--danger); border: 1px solid #fecaca; }

.success { background: #dcfce7; color: var(--ok); border: 1px solid #bbf7d0; }

.notice { background: #eef6ff; color: var(--primary-dark); border: 1px solid #bfdbfe; }

.notice.ok, .notice.ok strong, .success.ok, .success.ok strong { color: #fff !important; }



.grid-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; margin-top: 22px; }

.card { display: flex; min-height: 132px; flex-direction: column; gap: 10px; background: linear-gradient(180deg,#fff 0%,#f7fbff 100%); color: var(--text); text-decoration: none; border: 1px solid rgba(var(--primary-rgb), .14); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; position: relative; overflow: hidden; }

.card::after { content: ""; position: absolute; right: -28px; top: -28px; width: 90px; height: 90px; border-radius: 999px; background: rgba(246,168,0,.14); }

.card:hover { transform: translateY(-3px); border-color: #60a5fa; box-shadow: 0 20px 44px rgba(15,44,75,.14); text-decoration: none; }

.card strong { font-size: 18px; color: var(--primary-dark); }

.card span:last-child { color: var(--muted); line-height: 1.35; }

.icon-square { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: white; background: linear-gradient(135deg,var(--primary),#0ea5e9); font-weight: 900; box-shadow: 0 8px 18px rgba(7,134,200,.20); }



.toolbar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 12px; }

.toolbar .field { margin-bottom: 0; min-width: 210px; }

.field-wide { min-width: 340px !important; flex: 1 1 340px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 16px; }

.form-grid .field { margin-bottom: 0; }

.field-full { grid-column: 1 / -1; }

.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

.row-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }

.inline-form { display: inline; margin: 0; }



.stat-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.stat-chip, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 13px; font-weight: 800; white-space: nowrap; }



.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid rgba(7,134,200,.13); border-radius: 16px; box-shadow: var(--shadow-soft); }

table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 980px; }

th, td { border-bottom: 1px solid rgba(216,228,240,.95); padding: 8px 10px; text-align: left; vertical-align: middle; font-size: 13px; }

th { background: linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #42617f; white-space: nowrap; position: static !important; top: auto !important; z-index: auto !important; }

tr:last-child td { border-bottom: 0; }

.nowrap-table th, .nowrap-table td { white-space: nowrap; }

.products-table tbody tr:hover td, .data-table tbody tr:hover td { background: #e8f2ff !important; }

.product-cell { min-width: 340px; max-width: 560px; }

.product-cell small { color: var(--muted); margin-top: 3px; max-width: 520px; display: block; }

.code-cell { font-weight: 900; color: var(--primary-dark); }

.small-cell { max-width: 170px; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

.family-band-0 td { background: #ffffff; }

.family-band-1 td { background: #f2f8ff; }

.family-band-2 td { background: #fff8e8; }

.family-band-3 td { background: #f3fff6; }

.family-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; background: rgba(7,134,200,.10); color: var(--primary-dark); font-weight: 800; font-size: 12px; white-space: nowrap; }

.status-ok { color: var(--ok); font-weight: 900; }

.status-no { color: var(--danger); font-weight: 900; }

.product-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: white; display: block; }

.photo-cell { min-width: 150px; max-width: 230px; }

.photo-chip { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; background: #dbeafe; color: #1e40af; font-size: 12px; font-weight: 900; margin-right: 6px; white-space: nowrap; }

.muted-chip { background: #f1f5f9; color: #475569; }

.photo-name { display: inline-block; max-width: 130px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }

.check-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 0; font-weight: 800; white-space: nowrap; }

.check-inline input { width: auto; }

.input-small, .input-money, .select-small { width: 82px; border: 1px solid #cbd9e8; border-radius: 8px; padding: 7px 8px; font-size: 14px; background: white; }

.input-money { width: 95px; }

.select-small { width: 130px; }

.center { text-align: center; }

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; min-width: 210px; }

.mini-grid label { font-size: 12px; margin: 0; }

.sticky-actions { position: static; background: rgba(248,251,255,.96); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow-soft); }

.editable-table { min-width: 1260px; }

.print-header { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow-soft); }

.document-note { margin: 18px 0; color: var(--muted); font-size: 13px; }



.site-footer { flex-shrink: 0; margin-top: 34px; padding: 16px 28px; background: linear-gradient(180deg,#fff 0%,#f8fbff 100%); border-top: 1px solid rgba(7,134,200,.13); }

.site-footer-inner { max-width: 1500px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.footer-powered, .footer-macopal { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; text-decoration: none; }

.footer-powered span { color: var(--muted); font-weight: 800; white-space: nowrap; }

.footer-logo-cortana { display: block; height: 48px; width: auto; max-width: 260px; object-fit: contain; }

.footer-logo-macopal { display: block; height: 48px; width: auto; max-width: 160px; object-fit: contain; }

.footer-web-link { color: var(--primary); font-weight: 900; text-decoration: none; white-space: nowrap; }

.footer-powered:hover, .footer-web-link:hover { opacity: .86; text-decoration: none; }



@media (max-width: 900px) {

    .topbar { align-items: flex-start; flex-direction: column; padding: 14px 18px; position: static; }

    .topbar-left { align-items: flex-start; flex-direction: column; gap: 8px; }

    .topbar-title span { white-space: normal; }

    .brand-logo { max-height: 70px; max-width: 210px; }

    .container { padding: 18px; }

    .site-footer { padding: 18px; }

    .site-footer-inner { align-items: flex-start; flex-direction: column; }

    .usernav { justify-content: flex-start; }

}

@media (max-width: 620px) {

    .user-pill { display: none; }

    .field-wide { min-width: 100% !important; }

    .toolbar .field { min-width: 100%; }

    .btn, .nav-btn { padding: 9px 11px; }

}

@media print {

    .topbar, .site-footer, .no-print, .usernav, .sticky-actions { display: none !important; }

    body { background: white; color: black; }

    .container { max-width: none; padding: 0; }

    .table-wrap, .print-header { border: 0; box-shadow: none; border-radius: 0; }

    table { min-width: 0; font-size: 11px; }

    th, td { padding: 5px 6px; white-space: normal; }

}



.btn.mini {

    height: 30px;

    min-height: 30px;

    padding: 0 10px;

    font-size: 12px;

    border-radius: 8px;

}



.actions-row {

    display: flex;

    gap: 10px;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 16px;

}



.inline-form {

    display: inline;

    margin: 0;

}



.hidden-form {

    display: none;

}



.permissions-table th,

.permissions-table td {

    text-align: center;

}



.permissions-table th:nth-child(2),

.permissions-table td:nth-child(2) {

    text-align: left;

}



.input-rol-name {

    min-width: 220px;

}



.permission-check {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin: 0;

    padding: 4px 6px;

    border-radius: 999px;

    background: #fff7ed;

    color: #9a3412;

    font-weight: 900;

}



.permission-check input {

    width: auto;

    margin: 0;

}



/* Ajustes bloque 8: cabeceras, logos, footer y permisos por rol */

th {

    position: static !important;

    top: auto !important;

    z-index: auto !important;

}



.brand-logo-commercial {

    max-height: 76px;

    max-width: 240px;

}



.topbar {

    border-top: 5px solid var(--primary);

}



.card-restricted .restricted-lock {

    position: absolute;

    right: 18px;

    top: 16px;

    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: rgba(246, 168, 0, .18);

    color: #9a3412;

    font-size: 18px;

    font-weight: 900;

}



.card::after {

    background: rgba(246, 168, 0, .16);

}



.icon-square {

    box-shadow: 0 10px 20px rgba(11, 98, 163, .18), inset 0 -4px 0 rgba(246,168,0,.35);

}



.lang-pill {

    background: #fff7ed !important;

    color: #9a3412 !important;

}



.site-footer {

    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

    border-top: 1px solid rgba(11, 98, 163, .16);

}



.site-footer-inner {

    align-items: center;

}



.footer-powered {

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    font-weight: 900;

}



.footer-powered span {

    color: #667085;

    font-weight: 900;

}



.footer-logo-cortana {

    height: 56px;

    max-width: 190px;

    object-fit: contain;

}



.footer-macopal {

    display: flex;

    align-items: center;

    text-decoration: none;

}



.footer-logo-macopal {

    height: 46px;

    max-width: 165px;

    object-fit: contain;

}



.footer-web-link { display: none !important; }



.role-summary {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin: 14px 0 18px;

}



.role-chip {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    border-radius: 999px;

    padding: 8px 12px;

    background: var(--primary-soft);

    color: var(--primary-dark);

    font-weight: 800;

    border: 1px solid rgba(11, 98, 163, .15);

    white-space: nowrap;

}



.role-chip strong {

    width: 22px;

    height: 22px;

    display: grid;

    place-items: center;

    border-radius: 999px;

    color: white;

    background: var(--primary);

}



.role-1 { background: #e4f2ff; }

.role-2 { background: #edf7ff; }

.role-3 { background: #fff7ed; }

.role-4 { background: #f8fafc; }



.input-menu-name { min-width: 220px; }

.input-page { min-width: 150px; }

.input-desc { min-width: 330px; }

.input-icon { width: 64px; text-align: center; }

.input-order { width: 80px; }

.select-role { min-width: 190px; }



.switch-check {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin: 0;

    padding: 4px 8px;

    border-radius: 999px;

    background: #fff7ed;

    color: #9a3412;

    font-weight: 900;

    white-space: nowrap;

}

.switch-check input { width: auto; margin: 0; }



.compact-form {

    align-items: end;

}



textarea {

    width: 100%;

    min-height: 120px;

    border: 1px solid #cbd9e8;

    border-radius: 10px;

    padding: 11px 12px;

    font-size: 15px;

    font-family: var(--tenant-font);

    resize: vertical;

}



@media (max-width: 900px) {

    .brand-logo-commercial { max-height: 92px; max-width: 240px; }

    .footer-logo-cortana { height: 50px; max-width: 180px; }

}





/* Footer versión visible - v2.00 */

.site-footer-inner.site-footer-grid {

    display: grid !important;

    grid-template-columns: 1fr auto 1fr;

    align-items: center !important;

    gap: 20px;

}



.site-footer-grid .footer-powered {

    justify-self: start;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

}



.footer-version {

    justify-self: center;

    color: var(--primary-dark);

    background: var(--primary-soft);

    border: 1px solid rgba(7, 134, 200, .18);

    border-radius: 999px;

    padding: 7px 13px;

    font-size: 13px;

    font-weight: 900;

    line-height: 1;

    white-space: nowrap;

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

}



.site-footer-grid .footer-macopal {

    justify-self: end;

}



@media (max-width: 900px) {

    .site-footer-inner.site-footer-grid {

        grid-template-columns: 1fr;

        justify-items: flex-start;

    }



    .footer-version,

    .site-footer-grid .footer-macopal,

    .site-footer-grid .footer-powered {

        justify-self: start;

    }

}





/* Macopal v2.02: cabecera con foto, menú sin Mi Perfil y administración más naranja */

.user-summary {

    gap: 9px;

}



.header-user-photo,

.header-user-initials {

    width: 34px;

    height: 34px;

    border-radius: 999px;

    flex: 0 0 auto;

    border: 2px solid rgba(246, 168, 0, .42);

    box-shadow: 0 8px 18px rgba(15, 44, 75, .12);

}



.header-user-photo {

    object-fit: cover;

    background: #fff;

}



.header-user-initials {

    display: inline-grid;

    place-items: center;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    color: #fff;

    font-weight: 900;

}


.header-user-placeholder {

    overflow: hidden;

}

.header-user-placeholder svg {

    width: 19px;

    height: 19px;

    display: block;

    fill: #d1d5db;

    filter: drop-shadow(0 1px 0 rgba(255,255,255,.18));

}



.menu-card-administracio {

    border-color: rgba(246, 168, 0, .38) !important;

    background:

        radial-gradient(circle at right top, rgba(246, 168, 0, .34), transparent 27%),

        linear-gradient(180deg, #fffdfa 0%, #fff5df 100%) !important;

}



.menu-card-administracio .menu-icon {

    background: linear-gradient(135deg, #f6a800, #c96f00) !important;

    color: #fff !important;

    box-shadow: 0 10px 20px rgba(201, 111, 0, .22) !important;

}



.menu-card-administracio .menu-marker-office {

    background: rgba(246, 168, 0, .24) !important;

    border-color: rgba(246, 168, 0, .52) !important;

}



.footer-version {

    min-width: 220px;

    text-align: center;

}



.profile-photo-box {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    padding: 14px;

    background: linear-gradient(135deg, #f8fbff, #fff7e6);

    border: 1px solid rgba(246, 168, 0, .22);

    border-radius: 16px;

    margin-bottom: 18px;

}



.profile-photo-preview,

.profile-photo-placeholder {

    width: 92px;

    height: 92px;

    border-radius: 18px;

    border: 2px solid rgba(11, 98, 163, .20);

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

    background: #fff;

    flex: 0 0 auto;

}



.profile-photo-preview {

    object-fit: cover;

}



.profile-photo-placeholder {

    display: grid;

    place-items: center;

    font-size: 36px;

    font-weight: 900;

    color: #fff;

    background: linear-gradient(135deg, var(--primary), var(--accent));

}



.profile-photo-help {

    color: var(--muted);

    font-size: 13px;

    margin-top: 5px;

}





/* Macopal Comercial v2.03: usuarios + empleados unificados y sombra naranja en pie */

.footer-logo-macopal {

    filter: drop-shadow(0 0 10px rgba(246, 168, 0, .45)) drop-shadow(0 6px 12px rgba(154, 52, 18, .10));

    border-radius: 10px;

    background: rgba(255, 247, 237, .35);

    padding: 3px 6px;

}



.admin-user-form {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}



.admin-form-block {

    border: 1px solid rgba(11, 98, 163, .14);

    border-radius: 16px;

    padding: 16px;

    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

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

}



.admin-form-block h2 {

    margin: 0 0 12px;

    color: var(--primary-dark);

    font-size: 18px;

}



.field-full-block {

    grid-column: 1 / -1;

}



.compact-fields {

    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

}



.slim-photo-box {

    margin-bottom: 0;

    padding: 0;

    border: 0;

    box-shadow: none;

    background: transparent;

}



.table-user-photo,

.table-user-initials {

    width: 38px;

    height: 38px;

    border-radius: 999px;

    border: 2px solid rgba(246, 168, 0, .38);

    box-shadow: 0 6px 14px rgba(15, 44, 75, .12);

}



.table-user-photo {

    object-fit: cover;

    background: #fff;

}



.table-user-initials {

    display: inline-grid;

    place-items: center;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    color: #fff;

    font-weight: 900;

}



@media (max-width: 980px) {

    .admin-user-form { grid-template-columns: 1fr; }

}



/* Macopal Comercial v2.05: perfil Comercial en modo solo visualización */

.view-only-chip {

    background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(11,98,163,.10)) !important;

    color: var(--primary-dark) !important;

    border: 1px solid rgba(14,165,233,.28) !important;

}



/* Macopal Comercial v2.08: avisos impost plàstic, fotos de producte i accions a la dreta */

.actions-row {

    justify-content: flex-end;

}



.row-actions.table-actions,

th.table-actions,

td.table-actions {

    text-align: right;

    justify-content: flex-end;

}



.row-actions.table-actions {

    min-width: 230px;

}



input[type="file"] {

    width: 100%;

    border: 1px dashed #cbd9e8;

    border-radius: 9px;

    padding: 9px 10px;

    background: #fffaf0;

    color: var(--text);

}



.plastic-warning {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: 7px;

    min-width: 26px;

    min-height: 24px;

    padding: 3px 7px;

    border-radius: 999px;

    background: #fff7ed;

    color: #9a3412;

    border: 1px solid rgba(246, 168, 0, .50);

    font-weight: 900;

    box-shadow: 0 4px 12px rgba(246, 168, 0, .18);

    white-space: nowrap;

}



.family-warning {

    font-size: 12px;

}



.data-table .photo-cell,

.products-table .photo-cell {

    min-width: 165px;

}





/* Macopal Comercial v3.00: control de llicències i sessions */

.config-grid {

    display: grid;

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

    gap: 16px;

}

.config-grid code {

    display: inline-block;

    padding: 3px 6px;

    border-radius: 6px;

    background: #f1f5f9;

    color: var(--primary-dark);

    font-size: 12px;

    white-space: normal;

}

@media (max-width: 800px) {

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

}



/* Macopal Comercial v3.01: SQL OVH compatible, permisos menú sin seccio/ordre */



/* Macopal Comercial v4.00 */

.license-pill-header {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    white-space: nowrap;

    border-radius: 999px;

    padding: 7px 12px;

    background: linear-gradient(135deg, rgba(11,98,163,.10), rgba(246,168,0,.18));

    border: 1px solid rgba(11,98,163,.18);

    color: var(--primary-dark);

    font-weight: 900;

    font-size: 13px;

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

}



.form-panel {

    margin-top: 18px;

}



.actions-right {

    justify-content: flex-end;

}



.menu-card-tarifes {

    background:

        radial-gradient(circle at right top, rgba(249,115,22,.20), transparent 25%),

        linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);

}



@media (max-width: 900px) {

    .license-pill-header { font-size: 12px; }

}





/* Macopal Comercial v4.05: detall en mode visualització i llistes compactes en dues línies */

.readonly-fieldset {

    border: 0;

    padding: 0;

    margin: 0;

}

.readonly-fieldset[disabled] {

    opacity: 1;

}

.readonly-fieldset[disabled] input,

.readonly-fieldset[disabled] select,

.readonly-fieldset[disabled] textarea {

    color: var(--text);

    background: #f8fbff;

    -webkit-text-fill-color: var(--text);

}

.fit-table {

    width: 100%;

    max-width: 100%;

}

.fit-table th {

    white-space: nowrap;

}

.fit-table td {

    white-space: normal;

    line-height: 1.25;

}

.fit-table .wrap-cell {

    white-space: normal !important;

    overflow: visible;

    text-overflow: clip;

}

.fit-table .product-cell {

    min-width: 250px;

    max-width: 360px;

}

.fit-table .small-cell {

    min-width: 110px;

    max-width: 220px;

}

.fit-table .table-actions {

    min-width: 130px;

    max-width: 180px;

}

.fit-table .row-actions.table-actions {

    flex-wrap: wrap;

    white-space: normal;

    gap: 5px;

}

.fit-table .btn-small {

    margin: 1px 0;

}

.clients-fit-table { min-width: 1180px; }

.productes-fit-table { min-width: 1480px; }

.tarifes-base-fit-table { min-width: 1580px; }

@media (max-width: 1500px) {

    .container { max-width: 100%; }

    .table-wrap { max-width: calc(100vw - 48px); }

}



/* Macopal Comercial v4.06: clients ordenables, baixes/inactius en vermell i millor aprofitament de l'espai */

.sort-link {

    color: inherit;

    text-decoration: none;

    border-bottom: 1px dotted rgba(11, 98, 163, .35);

}

.sort-link:hover {

    color: var(--primary);

    border-bottom-color: var(--primary);

}

.clients-fit-table {

    min-width: 1120px;

}

.clients-fit-table .client-name-col,

.clients-fit-table .client-name-cell {

    min-width: 270px;

    max-width: 440px;

}

.clients-fit-table .email-cell {

    max-width: 230px;

    word-break: break-word;

}

.baixa-row td,

.producte-inactiu-row td {

    background: #fff1f1 !important;

}

.baixa-row .client-name-cell a,

.producte-inactiu-row .product-cell a,

.producte-inactiu-row .code-cell a {

    color: var(--danger) !important;

}

.baixa-row .code-cell,

.producte-inactiu-row .code-cell {

    color: var(--danger) !important;

}

.inactive-row td {

    color: #7f1d1d;

}

.clients-fit-table td,

.productes-fit-table td {

    line-height: 1.28;

}

@media (max-width: 1500px) {

    .clients-fit-table { min-width: 1040px; }

    .clients-fit-table .client-name-col,

    .clients-fit-table .client-name-cell { min-width: 245px; }

}





/* Macopal Comercial v4.07: llistats més llegibles i foto de producte esborrable */

.clients-table-wrap {

    overflow-x: auto;

}

.clients-readable-table {

    width: 100%;

    min-width: 1160px;

    table-layout: fixed;

}

.clients-readable-table th,

.clients-readable-table td {

    white-space: normal !important;

    overflow: visible !important;

    text-overflow: clip !important;

    vertical-align: top;

}

.clients-readable-table th:nth-child(1),

.clients-readable-table td:nth-child(1) { width: 5%; }

.clients-readable-table th:nth-child(2),

.clients-readable-table td:nth-child(2) { width: 22%; }

.clients-readable-table th:nth-child(3),

.clients-readable-table td:nth-child(3) { width: 14%; }

.clients-readable-table th:nth-child(4),

.clients-readable-table td:nth-child(4) { width: 6%; }

.clients-readable-table th:nth-child(5),

.clients-readable-table td:nth-child(5) { width: 12%; }

.clients-readable-table th:nth-child(6),

.clients-readable-table td:nth-child(6) { width: 12%; }

.clients-readable-table th:nth-child(7),

.clients-readable-table td:nth-child(7) { width: 6%; }

.clients-readable-table th:nth-child(8),

.clients-readable-table td:nth-child(8) { width: 8%; }

.clients-readable-table th:nth-child(9),

.clients-readable-table td:nth-child(9) { width: 8%; }

.clients-readable-table th:nth-child(10),

.clients-readable-table td:nth-child(10) { width: 7%; }

.clients-readable-table th:nth-child(11),

.clients-readable-table td:nth-child(11) { width: 8%; }

.clients-readable-table .client-name-cell,

.clients-readable-table .contact-cell,

.clients-readable-table .poblacio-cell,

.clients-readable-table .observations-cell {

    overflow-wrap: anywhere;

    word-break: normal;

    line-height: 1.32;

}

.clients-readable-table .contact-cell a {

    color: var(--primary-dark);

    text-decoration: none;

}

.clients-readable-table .contact-cell a:hover {

    text-decoration: underline;

}

.clients-readable-table .table-actions {

    white-space: normal !important;

}

.clients-readable-table .row-actions.table-actions {

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

}

.clients-readable-table .row-actions.table-actions .btn-small {

    width: 100%;

    min-width: 0;

}

.danger-check {

    color: var(--danger);

}

@media (max-width: 1500px) {

    .clients-readable-table { min-width: 1120px; }

}



/* Macopal Comercial v4.08: canvi de tarifa per productes seleccionats */

.block-muted {

    display: block;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.25;

    margin-top: 3px;

}

.table-relaxed th,

.table-relaxed td {

    white-space: normal !important;

    vertical-align: top;

}

.table-relaxed .product-cell {

    min-width: 300px;

    max-width: 520px;

    overflow-wrap: anywhere;

}

.two-line-cell {

    display: block;

    max-width: 180px;

    overflow-wrap: anywhere;

    line-height: 1.28;

}



/* Macopal Comercial v4.10: ajust clients i canvi de tarifa per productes amb selecció persistent */

.clients-readable-table {

    min-width: 1180px;

    table-layout: fixed;

    border-collapse: collapse;

}

.clients-readable-table th,

.clients-readable-table td {

    border-bottom: 1px solid rgba(216, 228, 240, .95) !important;

    vertical-align: middle;

}

.clients-readable-table th:nth-child(1),

.clients-readable-table td:nth-child(1) { width: 5%; }

.clients-readable-table th:nth-child(2),

.clients-readable-table td:nth-child(2) { width: 25%; }

.clients-readable-table th:nth-child(3),

.clients-readable-table td:nth-child(3) { width: 18%; }

.clients-readable-table th:nth-child(4),

.clients-readable-table td:nth-child(4) { width: 7%; }

.clients-readable-table th:nth-child(5),

.clients-readable-table td:nth-child(5) { width: 14%; }

.clients-readable-table th:nth-child(6),

.clients-readable-table td:nth-child(6) { width: 7%; }

.clients-readable-table th:nth-child(7),

.clients-readable-table td:nth-child(7) { width: 8%; }

.clients-readable-table th:nth-child(8),

.clients-readable-table td:nth-child(8) { width: 7%; }

.clients-readable-table th:nth-child(9),

.clients-readable-table td:nth-child(9) { width: 7%; }

.clients-readable-table th:nth-child(10),

.clients-readable-table td:nth-child(10) { width: 6%; }

.clients-readable-table .client-name-cell,

.clients-readable-table .contact-cell,

.clients-readable-table .poblacio-cell,

.clients-readable-table .empleat-cell,

.clients-readable-table .conditions-cell,

.clients-readable-table .baixa-date-cell {

    overflow-wrap: anywhere;

    word-break: normal;

    line-height: 1.33;

}

.clients-readable-table td.table-actions {

    display: table-cell !important;

    vertical-align: middle;

    border-bottom: 1px solid rgba(216, 228, 240, .95) !important;

}

.action-stack {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

}

.action-stack .btn-small {

    width: 100%;

    min-width: 0;

}



.canvi-productes-actions {

    position: sticky;

    top: 94px;

    z-index: 20;

}

.canvi-productes-actions .small-help {

    margin: 8px 0 0;

    font-size: 13px;

}

.canvi-productes-table {

    min-width: 1450px;

}

.canvi-productes-table th,

.canvi-productes-table td {

    vertical-align: middle;

}

.canvi-productes-table .product-cell {

    min-width: 330px;

    max-width: 520px;

}

.canvi-productes-table .input-money {

    width: 108px;

}

.preview-panel {

    border: 1px solid rgba(22, 114, 69, .22);

    background: linear-gradient(180deg, #ffffff 0%, #f4fff8 100%);

}

.preview-change-table {

    min-width: 900px;

}

.preview-change-table td,

.preview-change-table th {

    white-space: normal;

}

.row-selected td {

    background: #eefbf4 !important;

}





/* Macopal Comercial v4.20: avisos foto antiga i Dte1 calculat */

.foto-review-row td {

    background: #fff1f1 !important;

}

.foto-review-row .code-cell,

.foto-review-row .code-cell a,

.foto-review-row .product-cell a {

    color: var(--danger) !important;

}

.photo-review-chip {

    display: inline-flex;

    margin-top: 4px;

    padding: 4px 8px;

    border-radius: 999px;

    background: #fee2e2;

    color: var(--danger);

    font-size: 12px;

    font-weight: 900;

    white-space: nowrap;

}

.legacy-photo-alert {

    font-weight: 800;

}





/* Macopal Comercial v4.21 */

.admin-user-form {

    grid-template-columns: minmax(560px, 1.15fr) minmax(470px, .85fr);

    align-items: stretch;

}



.admin-form-block {

    min-height: 100%;

}



.admin-photo-block .profile-photo-box.slim-photo-box {

    display: grid;

    grid-template-columns: 96px minmax(260px, 1fr) minmax(145px, 180px);

    align-items: center;

    gap: 18px;

}



.admin-photo-block .field {

    margin-bottom: 0;

}



.admin-photo-block input[type="file"] {

    max-width: 100%;

}



.compact-fields {

    grid-template-columns: minmax(180px, 1fr) minmax(210px, 1fr) minmax(190px, 220px);

    align-items: end;

}



.compact-fields .field:last-child {

    align-self: end;

}



.input-readonly-soft {

    background: #f1f5f9 !important;

    color: #64748b !important;

}



.history-json {

    max-width: 520px;

    white-space: pre-wrap;

    word-break: break-word;

    font-family: Consolas, Monaco, monospace;

    font-size: 12px;

    color: #334155;

}



.history-action-insert { color: #166534; font-weight: 900; }

.history-action-update { color: #0b62a3; font-weight: 900; }

.history-action-delete { color: #b91c1c; font-weight: 900; }



@media (max-width: 1180px) {

    .admin-user-form { grid-template-columns: 1fr; }

    .admin-photo-block .profile-photo-box.slim-photo-box { grid-template-columns: 96px 1fr; }

}



@media (max-width: 720px) {

    .admin-photo-block .profile-photo-box.slim-photo-box,

    .compact-fields { grid-template-columns: 1fr; }

}



/* Macopal Comercial v4.63: zona drag&drop de fotos y pie más cercano al contenido */

.container {

    flex: 0 0 auto;

    padding-top: 18px;

    padding-bottom: 10px;

}

.site-footer {

    margin-top: 12px !important;

}

.product-photo-dropzone {

    display: grid;

    gap: 7px;

    width: 100%;

    min-height: 118px;

    padding: 16px;

    border: 2px dashed rgba(7, 134, 200, .32);

    border-radius: 16px;

    background: linear-gradient(180deg, #f8fbff 0%, #eef7ff 100%);

    cursor: pointer;

    text-align: center;

    place-items: center;

    transition: border-color .15s ease, background .15s ease, transform .15s ease;

}

.product-photo-dropzone.is-dragover {

    border-color: var(--primary);

    background: #e4f2ff;

    transform: translateY(-1px);

}

.product-photo-input {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}

.product-photo-dropzone .dropzone-main {

    color: var(--primary-dark);

    font-weight: 900;

    font-size: 15px;

}

.product-photo-dropzone .dropzone-sub,

.product-photo-dropzone .dropzone-file {

    color: var(--muted);

    font-size: 13px;

    font-weight: 700;

}

.product-photo-dropzone .dropzone-file {

    color: #9a3412;

}

.dropzone-preview {

    max-width: 140px;

    max-height: 100px;

    object-fit: contain;

    border: 1px solid var(--line);

    border-radius: 12px;

    background: white;

    padding: 4px;

}



/* v5.01: avisos verdes con fondo verde y texto blanco en toda la aplicación */

.notice.ok,

.success.ok,

.notice.success,

.alert.ok,

.alert-success,

.flash.ok,

.flash-success,

.message.ok,

.message-success {

    background: #16883f !important;

    border-color: #16883f !important;

    color: #fff !important;

}

.notice.ok *,

.success.ok *,

.notice.success *,

.alert.ok *,

.alert-success *,

.flash.ok *,

.flash-success *,

.message.ok *,

.message-success * {

    color: #fff !important;

}



/* =============================================================

   v1.00-r26 · Tema global Cortana Operaciones

   Lleva la identidad visual de los Centros de Control al login,

   menú y pantallas funcionales sin cambiar su lógica.

   ============================================================= */

:root {

    --bg: #031321;

    --bg2: #061d30;

    --panel: #071d30;

    --text: #edfaff;

    --muted: #9ab8ca;

    --line: #195575;

    --primary: #149ed9;

    --primary-dark: #8fdcff;

    --primary-soft: rgba(20,158,217,.16);

    --accent: #f6a800;

    --danger: #ff5872;

    --ok: #53ed7c;

    --shadow: 0 14px 38px rgba(0,0,0,.38);

    --shadow-soft: 0 7px 20px rgba(0,0,0,.28);

}

html { background: #020b14; }

body {

    background:

        radial-gradient(circle at 78% -8%, rgba(18,112,171,.30), transparent 30%),

        radial-gradient(circle at 14% 6%, rgba(20,158,217,.16), transparent 23%),

        linear-gradient(180deg, #07253a 0%, #031321 35%, #020b14 100%);

    color: var(--text);

}

a { color: #90dcff; }

a:hover { color: #d4f3ff; }



/* Cabecera: contraste explícito para Benvingut/da y usuario */

.topbar {

    background: linear-gradient(180deg, rgba(8,35,55,.97), rgba(3,20,33,.97));

    border-top-color: var(--primary);

    border-bottom-color: rgba(41,186,255,.28);

    box-shadow: 0 7px 24px rgba(0,0,0,.38);

    backdrop-filter: blur(12px);

}

.topbar-title strong,

.topbar-title span,

.user-welcome,

.user-welcome strong,

.user-pill span {

    color: #ffffff !important;

    text-shadow: 0 1px 2px rgba(0,0,0,.55);

}

.topbar-title span { color: #b8d3e3 !important; }

.user-welcome { opacity: 1 !important; font-weight: 700; }

.user-welcome strong { font-weight: 900; }

.user-pill {

    background: rgba(10,38,61,.94);

    border-color: rgba(41,186,255,.34);

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), var(--shadow-soft);

}

.user-pill small {

    color: #dff6ff;

    background: rgba(20,158,217,.22);

    border: 1px solid rgba(41,186,255,.22);

}



/* Superficies generales */

.panel, .login-box, .card, .stat-card, .table-wrap, .modal-content,

.menu-hero-switch, .menu-list-sidebar, .menu-list-help, .menu-subgroup-panel {

    background: linear-gradient(180deg, rgba(10,38,61,.97), rgba(4,23,37,.97)) !important;

    border-color: rgba(41,186,255,.30) !important;

    color: var(--text) !important;

    box-shadow: var(--shadow) !important;

}

.panel h1, .panel h2, .panel h3, .panel h4,

.login-box h1, .login-box h2,

.card h1, .card h2, .card h3,

.menu-hero-switch h1, .menu-hero-switch h2,

legend, .section-title {

    color: #ffffff !important;

}

.panel p, .panel li, .panel td, .panel div,

.login-box p, .card p { color: inherit; }

.muted, .help, .hint, .description, small { color: var(--muted); }

hr { border-color: rgba(41,186,255,.20); }



/* Formularios */

label { color: #d9effa; }

input[type="text"], input[type="password"], input[type="search"], input[type="number"],

input[type="datetime-local"], input[type="date"], input[type="time"], input[type="email"],

input[type="tel"], input[type="url"], select, textarea {

    background: #061827;

    color: #f3fbff;

    border-color: #245b78;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);

}

input::placeholder, textarea::placeholder { color: #7196aa; }

input:focus, select:focus, textarea:focus {

    border-color: #29baff;

    box-shadow: 0 0 0 4px rgba(41,186,255,.16), 0 0 20px rgba(41,186,255,.10);

}

select option { background: #061827; color: #f3fbff; }

input[disabled], select[disabled], textarea[disabled] { background:#0b1b27; color:#7894a4; opacity:.8; }



/* Tablas */

table { color: var(--text); }

thead th, th {

    background: linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;

    color: #365a78 !important;

    border-color: #d7e5f1 !important;

}

td { border-color: #d8e4f0 !important; color: #24364b !important; }

tbody tr { background: #ffffff; }

tbody tr:nth-child(even) { background: #edf6ff; }

tbody tr:hover { background: #dfefff !important; }



/* Botones */

.btn, .nav-btn, button.btn, a.btn {

    background: linear-gradient(180deg, #149ed9, #0878b3);

    border: 1px solid rgba(122,220,255,.24);

    box-shadow: 0 8px 20px rgba(0,112,177,.25);

}

.btn:hover, .nav-btn:hover { background: linear-gradient(180deg,#25b8ef,#0a83c3); }

.secondary, .nav-back { background: linear-gradient(180deg,#53677a,#344758) !important; }

.danger, .nav-logout { background: linear-gradient(180deg,#9d2940,#701a2d) !important; }

.ok { background: linear-gradient(180deg,#1e9e55,#167440) !important; }



/* Mensajes */

.alert, .notice, .message, .flash {

    background: rgba(8,45,67,.92);

    color: #fff;

    border-color: rgba(41,186,255,.34);

}

.alert-danger, .error, .message-error { background:#67182c !important; color:#fff !important; border-color:#b93b55 !important; }

.alert-success, .success, .message-success { background:#123f2c !important; color:#eafff1 !important; border-color:#27885a !important; }

.alert-warning, .warning, .message-warning { background:#5a3b08 !important; color:#fff5d7 !important; border-color:#b77c13 !important; }



/* Login */

.login-wrap {

    background:

        radial-gradient(circle at 50% 20%, rgba(20,158,217,.20), transparent 32%),

        linear-gradient(180deg, rgba(3,19,33,.22), rgba(2,11,20,.58));

}

.login-box {

    border: 1px solid rgba(41,186,255,.38) !important;

    box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 32px rgba(41,186,255,.10) !important;

}

.login-box p { color: #a9c8d8 !important; }

.login-logo { filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }



/* Menú principal: fondo oscuro también en vistas gráfica, clásica y lista */

.menu-graph-board {

    background:

        radial-gradient(circle at 50% 44%, rgba(41,186,255,.12), transparent 22%),

        radial-gradient(circle at 14% 20%, rgba(246,168,0,.09), transparent 18%),

        linear-gradient(180deg, rgba(8,35,55,.98), rgba(3,20,33,.98)) !important;

    border-color: rgba(41,186,255,.28) !important;

    box-shadow: 0 25px 55px rgba(0,0,0,.38) !important;

}

.menu-graph-board::before { border-color: rgba(41,186,255,.14) !important; }

.menu-graph-board::after { background-image: radial-gradient(rgba(41,186,255,.14) 1px, transparent 1px) !important; }

.menu-graph-section, .menu-graph-subgroup-node, .menu-graph-item,

.menu-graph-subitem, .menu-subgroup-panel {

    background: linear-gradient(180deg,#0b3049,#061d30) !important;

    color: #ffffff !important;

    border-color: #d7a411 !important;

    box-shadow: 0 15px 34px rgba(0,0,0,.34) !important;

}

.menu-graph-section:hover, .menu-graph-section:focus-visible,

.menu-graph-subgroup-node:hover, .menu-graph-item:hover {

    background: linear-gradient(180deg,#10405f,#08263c) !important;

    box-shadow: 0 0 0 1px rgba(41,186,255,.20), 0 0 25px rgba(41,186,255,.18), 0 18px 36px rgba(0,0,0,.38) !important;

}

.menu-graph-section-label, .menu-graph-subgroup-node b,

.menu-graph-item strong, .menu-graph-item span { color:#fff !important; }

.menu-graph-subgroup-node small, .menu-graph-item small { color:#a7c6d7 !important; }

.menu-mode-pill, .role-chip {

    background: rgba(20,158,217,.18) !important;

    color: #d8f4ff !important;

    border: 1px solid rgba(41,186,255,.22);

}

.menu-list-sidebar { scrollbar-color:#195575 #04101a; }



/* Footer */

.site-footer {

    background: linear-gradient(180deg,#051827,#020b14) !important;

    border-top-color: rgba(41,186,255,.20) !important;

    color: #a9c7d7;

}

.footer-powered span { color:#9ab8ca !important; }



/* Modales y pestañas */

.modal, .modal-backdrop { color:var(--text); }

.tabs, .tab-list { border-color:rgba(41,186,255,.22); }

.tab, .tab-link { color:#a8cada; }

.tab.active, .tab-link.active { color:#fff; background:rgba(20,158,217,.20); }



/* Evita texto oscuro heredado invisible sobre el nuevo fondo */

.container > h1, .container > h2, .container > h3,

.panel-heading strong, .panel-heading span,

.toolbar, .actions-row, .filters, .pagination,

fieldset, fieldset p, fieldset span { color:var(--text); }



@media (max-width: 760px) {

    .topbar-title strong { color:#fff !important; }

    .user-welcome, .user-welcome strong { color:#fff !important; }

}



/* =============================================================

   v1.00-r27 · Hotfix árbol de menú global dark

   Los submenús y programas respetan siempre el ancho disponible.

   ============================================================= */

.menu-list-layout,

.menu-list-sidebar,

.menu-tree-module,

.menu-tree-submodule,

.menu-tree-programs,

.menu-tree-program {

    min-width: 0;

    max-width: 100%;

    box-sizing: border-box;

}

.menu-list-sidebar {

    width: 100%;

    padding-right: 14px;

    overflow-x: hidden !important;

}

.menu-tree-module {

    width: min(540px, 100%) !important;

    margin-right: 0 !important;

    overflow: hidden !important;

}

.menu-tree-module > summary,

.menu-tree-submodule > summary {

    min-width: 0;

    width: 100%;

}

.menu-tree-module > summary > span:last-child,

.menu-tree-submodule > summary > span:last-child {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.menu-tree-submodule {

    width: calc(100% - 24px) !important;

    max-width: calc(100% - 24px) !important;

    margin: 7px 8px 9px 16px !important;

    overflow: hidden !important;

}

.menu-tree-programs {

    width: 100%;

    padding: 0 8px 10px 24px !important;

    overflow: hidden;

}

.menu-tree-program {

    width: 100% !important;

    max-width: 100% !important;

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

}

.menu-tree-program > span:nth-child(3),

.menu-tree-program > span:nth-child(3) a {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.menu-tree-program .menu-tree-badge {

    flex: 0 0 auto;

}

@media (max-width: 760px) {

    .menu-tree-submodule {

        width: calc(100% - 12px) !important;

        max-width: calc(100% - 12px) !important;

        margin-left: 8px !important;

        margin-right: 4px !important;

    }

    .menu-tree-programs {

        padding-left: 12px !important;

        padding-right: 6px !important;

    }

    .menu-tree-program {

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

    }

    .menu-tree-program > .menu-tree-badge:last-child {

        display: none;

    }

}



/* =============================================================

   v1.00-r28 · Hotfix legibilidad dark + submenús contenidos

   - Mejora contraste en ayuda lateral y pills de cabecera.

   - Fuerza que el árbol del menú en lista no se salga del contenedor.

   ============================================================= */

body {

    --text: #e8f6ff;

    --muted: #a8c7d8;

    --line: rgba(41,186,255,.24);

    --primary-soft: rgba(20,158,217,.16);

}



/* Ayuda lateral: nunca usar rojo oscuro sobre fondo dark */

.menu-list-help,

.menu-list-help * {

    color: inherit;

}

.menu-list-help-logo,

.menu-list-help-logo span,

.menu-list-help h3,

.menu-help-section-title {

    color: #ffffff !important;

}

.menu-list-help-desc {

    color: #b8d5e4 !important;

}

.menu-help-meta {

    gap: 8px !important;

}

.menu-help-meta div {

    background: linear-gradient(180deg, rgba(15,44,70,.92), rgba(8,28,46,.96)) !important;

    border: 1px solid rgba(41,186,255,.18) !important;

    color: #c2dbe8 !important;

}

.menu-help-meta div span {

    color: #d6ebf5 !important;

    font-weight: 800 !important;

}

.menu-help-meta b,

[data-help-type], [data-help-module], [data-help-submodule],

[data-help-required], [data-help-user-level], [data-help-mode] {

    color: #ffd98a !important;

    font-weight: 900 !important;

}

.menu-help-list,

.menu-help-list li,

[data-help-can],

[data-help-cannot] {

    color: #eef8ff !important;

}



/* Pastillas de cabecera: más legibles sobre topbar oscura */

.topbar .stat-chip,

.topbar .badge,

.topbar .lang-pill,

.topbar .role-chip,

.topbar .user-pill small {

    background: rgba(246,168,0,.16) !important;

    color: #ffe5b0 !important;

    border: 1px solid rgba(246,168,0,.28) !important;

    box-shadow: none !important;

}

.topbar .stat-chip strong,

.topbar .badge strong,

.topbar .role-chip strong {

    color: #ffffff !important;

    background: rgba(20,158,217,.34) !important;

}

.topbar .brand-pill,

.topbar .tenant-pill,

.topbar .license-pill,

.topbar .company-pill,

.topbar .empresa-pill {

    background: rgba(246,168,0,.14) !important;

    color: #ffe5b0 !important;

    border: 1px solid rgba(246,168,0,.26) !important;

}



/* Árbol de menú: forzar contención real del ancho */

.menu-list-layout {

    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px) !important;

    align-items: start !important;

}

.menu-list-sidebar,

.menu-tree-module,

.menu-tree-submodule,

.menu-tree-programs,

.menu-tree-program,

.menu-tree-module > summary,

.menu-tree-submodule > summary {

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

}

.menu-list-sidebar {

    width: 100% !important;

    overflow-x: hidden !important;

    padding-right: 10px !important;

}

.menu-tree-module {

    display: block !important;

    width: 100% !important;

    margin-right: 0 !important;

    overflow: hidden !important;

}

.menu-tree-module > summary,

.menu-tree-submodule > summary {

    display: flex !important;

    width: 100% !important;

}

.menu-tree-module > *:not(summary),

.menu-tree-submodule > *:not(summary) {

    max-width: 100% !important;

}

.menu-tree-submodule {

    display: block !important;

    width: calc(100% - 20px) !important;

    max-width: calc(100% - 20px) !important;

    margin: 8px 6px 10px 14px !important;

    overflow: hidden !important;

}

.menu-tree-programs {

    display: grid !important;

    width: 100% !important;

    max-width: 100% !important;

    gap: 6px !important;

    padding: 0 6px 10px 12px !important;

    overflow: hidden !important;

}

.menu-tree-program {

    display: grid !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    grid-template-columns: auto auto minmax(0,1fr) auto !important;

}

.menu-tree-program > span:nth-child(3),

.menu-tree-program > span:nth-child(3) a,

.menu-tree-module > summary > span:last-child,

.menu-tree-submodule > summary > span:last-child {

    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

}



@media (max-width: 980px) {

    .menu-list-layout {

        grid-template-columns: 1fr !important;

    }

    .menu-list-help {

        grid-column: 1 !important;

        grid-row: auto !important;

    }

}

@media (max-width: 760px) {

    .menu-tree-submodule {

        width: calc(100% - 10px) !important;

        max-width: calc(100% - 10px) !important;

        margin: 6px 2px 8px 8px !important;

    }

    .menu-tree-programs {

        padding: 0 4px 8px 8px !important;

    }

    .menu-tree-program {

        grid-template-columns: auto auto minmax(0,1fr) !important;

    }

    .menu-tree-program > .menu-tree-badge:last-child {

        display: none !important;

    }

}



/* =============================================================

   v1.00-r29 · Contraste cabecera empresa y licencias

   ============================================================= */

.topbar .license-pill-header,

.topbar .company-pill-header,

.topbar .license-status-header,

.license-pill-header.company-pill-header,

.license-pill-header.license-status-header {

    background: linear-gradient(135deg, rgba(20,158,217,.30), rgba(246,168,0,.20)) !important;

    border: 1px solid rgba(98,211,255,.34) !important;

    color: #f4fbff !important;

    text-shadow: 0 1px 2px rgba(0,0,0,.62) !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 7px 18px rgba(0,0,0,.20) !important;

    opacity: 1 !important;

}

.topbar .license-pill-header *,

.topbar .company-pill-header *,

.topbar .license-status-header * {

    color: #f4fbff !important;

    opacity: 1 !important;

}

.topbar .company-pill-header {

    color: #dff6ff !important;

}

.topbar .license-status-header {

    color: #ffe7ad !important;

}

.topbar .topbar-left,

.topbar .topbar-left strong,

.topbar .topbar-left span,

.topbar .topbar-left small {

    opacity: 1 !important;

}



/* =============================================================

   v1.00-r31 · Menú lista dark equilibrado y logo ERP visible

   ============================================================= */



/* Composición equilibrada: opciones compactas, ayuda a la derecha. */

.menu-mode-panel-list .menu-list-layout {

    width: min(1240px, 100%) !important;

    margin-inline: auto !important;

    grid-template-columns: minmax(520px, 760px) minmax(310px, 420px) !important;

    justify-content: center !important;

    align-items: start !important;

    gap: 18px !important;

}

.menu-mode-panel-list .menu-list-sidebar {

    width: 100% !important;

    max-width: 760px !important;

    min-width: 0 !important;

    padding: 14px 16px !important;

    overflow-x: hidden !important;

}



/* Los módulos dejan de ocupar de punta a punta todo el panel. */

.menu-mode-panel-list .menu-tree-module {

    display: block !important;

    width: min(680px, calc(100% - 20px)) !important;

    max-width: calc(100% - 20px) !important;

    min-width: 0 !important;

    margin: 0 10px 10px !important;

    overflow: hidden !important;

}

.menu-mode-panel-list .menu-tree-module > summary,

.menu-mode-panel-list .menu-tree-submodule > summary {

    width: 100% !important;

    min-width: 0 !important;

}

.menu-mode-panel-list .menu-tree-module > summary > span:last-child,

.menu-mode-panel-list .menu-tree-submodule > summary > span:last-child {

    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

}

.menu-mode-panel-list .menu-tree-submodule {

    display: block !important;

    width: calc(100% - 26px) !important;

    max-width: calc(100% - 26px) !important;

    min-width: 0 !important;

    margin: 8px 8px 10px 18px !important;

    overflow: hidden !important;

}

.menu-mode-panel-list .menu-tree-programs {

    display: grid !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    gap: 7px !important;

    padding: 0 8px 10px 14px !important;

    overflow: hidden !important;

}

.menu-mode-panel-list .menu-tree-program {

    display: grid !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    grid-template-columns: auto auto minmax(0, 1fr) auto !important;

}

.menu-mode-panel-list .menu-tree-program > span:nth-child(3),

.menu-mode-panel-list .menu-tree-program > span:nth-child(3) a {

    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

}



/* La zona inferior deja de ser blanca/gris y comparte el dark theme. */

.menu-mode-panel-list .menu-list-center {

    background:

        radial-gradient(circle at 50% 40%, rgba(41,186,255,.13), transparent 30%),

        linear-gradient(180deg, rgba(9,38,60,.98), rgba(3,20,33,.99)) !important;

    border-color: rgba(41,186,255,.28) !important;

    box-shadow: 0 22px 48px rgba(0,0,0,.38) !important;

}

.menu-mode-panel-list .menu-list-center::before {

    border-color: rgba(41,186,255,.18) !important;

}



/* Logo corporativo visible: placa de cristal clara sobre el fondo oscuro. */

.menu-mode-panel-list .menu-list-watermark {

    opacity: 1 !important;

    width: min(390px, calc(100% - 72px));

    padding: 18px 24px 15px;

    border-radius: 22px;

    background: rgba(255,255,255,.92);

    border: 1px solid rgba(255,255,255,.82);

    box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 0 26px rgba(41,186,255,.10);

}

.menu-mode-panel-list .menu-list-watermark img {

    width: 100% !important;

    max-width: 330px !important;

    opacity: 1 !important;

    filter: saturate(1.08) contrast(1.04) !important;

}

.menu-mode-panel-list .menu-list-watermark strong {

    color: #0b4d7d !important;

    opacity: 1 !important;

}

.menu-mode-panel-list .menu-list-actions {

    background: rgba(5,28,45,.94) !important;

    border-color: rgba(41,186,255,.24) !important;

    color: #b9d7e7 !important;

    box-shadow: 0 8px 22px rgba(0,0,0,.22);

}



/* Ayuda lateral completamente legible. */

.menu-mode-panel-list .menu-list-help-logo,

.menu-mode-panel-list .menu-list-help-logo span,

.menu-mode-panel-list .menu-list-help h3,

.menu-mode-panel-list .menu-help-section-title {

    color: #ffffff !important;

}

.menu-mode-panel-list .menu-list-help-desc,

.menu-mode-panel-list .menu-help-list,

.menu-mode-panel-list .menu-help-list li {

    color: #c9e0ec !important;

}

.menu-mode-panel-list .menu-help-meta div {

    background: rgba(8,31,50,.96) !important;

    border: 1px solid rgba(41,186,255,.18) !important;

    color: #d8ebf5 !important;

}

.menu-mode-panel-list .menu-help-meta b {

    color: #ffd98a !important;

}



/* Cabecera DEV/Producción: conservar contraste incluso con CSS antiguo en caché. */

.topbar .license-pill-header,

.topbar .company-pill-header,

.topbar .license-status-header {

    background: linear-gradient(135deg, rgba(20,158,217,.30), rgba(246,168,0,.20)) !important;

    border: 1px solid rgba(98,211,255,.34) !important;

    color: #f4fbff !important;

    opacity: 1 !important;

    text-shadow: 0 1px 2px rgba(0,0,0,.62) !important;

}

.topbar .company-pill-header { color: #dff6ff !important; }

.topbar .license-status-header { color: #ffe7ad !important; }



@media (max-width: 1180px) {

    .menu-mode-panel-list .menu-list-layout {

        grid-template-columns: minmax(0, 1fr) minmax(290px, 360px) !important;

    }

}

@media (max-width: 940px) {

    .menu-mode-panel-list .menu-list-layout {

        grid-template-columns: 1fr !important;

    }

    .menu-mode-panel-list .menu-list-sidebar,

    .menu-mode-panel-list .menu-list-help {

        max-width: 760px !important;

        width: 100% !important;

        margin-inline: auto !important;

    }

    .menu-mode-panel-list .menu-list-help {

        grid-column: 1 !important;

        grid-row: auto !important;

        position: relative !important;

        top: auto !important;

    }

}

@media (max-width: 720px) {

    .menu-mode-panel-list .menu-tree-module {

        width: calc(100% - 8px) !important;

        max-width: calc(100% - 8px) !important;

        margin-inline: 4px !important;

    }

    .menu-mode-panel-list .menu-tree-submodule {

        width: calc(100% - 12px) !important;

        max-width: calc(100% - 12px) !important;

        margin-left: 8px !important;

        margin-right: 4px !important;

    }

    .menu-mode-panel-list .menu-tree-programs {

        padding-left: 8px !important;

        padding-right: 4px !important;

    }

    .menu-mode-panel-list .menu-tree-program {

        grid-template-columns: auto auto minmax(0, 1fr) !important;

    }

    .menu-mode-panel-list .menu-tree-program > .menu-tree-badge:last-child {

        display: none !important;

    }

}



/* =============================================================

   v1.00-r34 · Consolidado visual: menú lista compacto

   Las filas ya no ocupan casi toda la columna disponible.

   ============================================================= */

.menu-mode-panel-list .menu-list-layout {

    width: min(1080px, calc(100% - 32px)) !important;

    grid-template-columns: minmax(0, 650px) minmax(320px, 400px) !important;

    justify-content: center !important;

    gap: 20px !important;

}

.menu-mode-panel-list .menu-list-sidebar {

    width: 100% !important;

    max-width: 650px !important;

    padding: 16px 18px !important;

}

.menu-mode-panel-list .menu-tree-module {

    width: min(560px, calc(100% - 24px)) !important;

    max-width: 560px !important;

    margin: 0 auto 11px !important;

}

.menu-mode-panel-list .menu-tree-submodule {

    width: calc(100% - 24px) !important;

    max-width: calc(100% - 24px) !important;

    margin: 8px 8px 10px 16px !important;

}

.menu-mode-panel-list .menu-tree-programs {

    padding: 0 8px 10px 12px !important;

}

.menu-mode-panel-list .menu-tree-program {

    width: 100% !important;

    max-width: 100% !important;

}

.menu-mode-panel-list .menu-list-help {

    width: 100% !important;

    max-width: 400px !important;

}

@media (max-width: 1120px) {

    .menu-mode-panel-list .menu-list-layout {

        width: min(920px, calc(100% - 24px)) !important;

        grid-template-columns: minmax(0, 560px) minmax(290px, 340px) !important;

    }

    .menu-mode-panel-list .menu-list-sidebar { max-width: 560px !important; }

    .menu-mode-panel-list .menu-tree-module {

        width: min(500px, calc(100% - 18px)) !important;

        max-width: 500px !important;

    }

}

@media (max-width: 940px) {

    .menu-mode-panel-list .menu-list-layout {

        width: min(680px, calc(100% - 18px)) !important;

        grid-template-columns: 1fr !important;

    }

    .menu-mode-panel-list .menu-list-sidebar,

    .menu-mode-panel-list .menu-list-help {

        max-width: 680px !important;

        margin-inline: auto !important;

    }

    .menu-mode-panel-list .menu-tree-module {

        width: min(560px, calc(100% - 18px)) !important;

        max-width: 560px !important;

    }

}

@media (max-width: 640px) {

    .menu-mode-panel-list .menu-list-layout {

        width: calc(100% - 10px) !important;

    }

    .menu-mode-panel-list .menu-list-sidebar { padding: 10px !important; }

    .menu-mode-panel-list .menu-tree-module {

        width: 100% !important;

        max-width: 100% !important;

    }

}


/* r54 · Contraste transversal en superficies claras
   Evita que componentes heredados de vistas oscuras mantengan texto claro
   cuando se renderizan sobre tarjetas, tablas o formularios blancos. */
:root {
    --light-surface-text: #172033;
    --light-surface-heading: #123a5b;
    --light-surface-muted: #52677b;
    --light-surface-border: #c7d8e7;
    --light-surface-input: #ffffff;
}

:is(.panel,.login-box,.card,.erp-card,.table-wrap,.print-header,
    .project-overview-card,.project-column,.project-board-card,.project-gantt-shell,
    .project-doc-list li,.project-orphans,.viewer-item,.viewer-empty,
    .fac-flow,.fac-flow-stage,.fac-invoice-card,
    .tv-visual,.tv-kpi,.tv-box,.tv-item) {
    color: var(--light-surface-text);
}

:is(.panel,.login-box,.card,.erp-card,.table-wrap,.print-header,
    .project-overview-card,.project-column,.project-board-card,.project-gantt-shell,
    .project-doc-list li,.project-orphans,.viewer-item,.viewer-empty,
    .fac-flow,.fac-flow-stage,.fac-invoice-card,
    .tv-visual,.tv-kpi,.tv-box,.tv-item)
:is(h1,h2,h3,h4,h5,h6,strong,b) {
    color: var(--light-surface-heading);
}

:is(.muted,.erp-muted,.project-card-client,.project-card-code,
    .project-empty-column,.project-gantt-empty,.fac-empty) {
    color: var(--light-surface-muted) !important;
}

/* Controles: se incluyen tipos que antes quedaban fuera, especialmente date. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
.input-small,
.input-money,
.select-small {
    background: var(--light-surface-input) !important;
    color: var(--light-surface-text) !important;
    border-color: var(--light-surface-border) !important;
    -webkit-text-fill-color: var(--light-surface-text);
    color-scheme: light;
}
select option {
    background: #ffffff !important;
    color: var(--light-surface-text) !important;
}
input::placeholder,
textarea::placeholder {
    color: #697b8d !important;
    opacity: 1;
}
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    background: #edf2f6 !important;
    color: #52677b !important;
    -webkit-text-fill-color: #52677b !important;
    opacity: 1;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--light-surface-text) !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* Tablas claras: texto y enlaces siempre legibles. */
:is(.table-wrap,.erp-table,.data-table,.products-table,.nowrap-table) td {
    color: #24364b;
}
:is(.table-wrap,.erp-table,.data-table,.products-table,.nowrap-table) td a:not(.btn) {
    color: #075f98;
    font-weight: 750;
}
:is(.table-wrap,.erp-table,.data-table,.products-table,.nowrap-table) small {
    color: var(--light-surface-muted);
}

/* Los botones y estados conservan su contraste propio. */
:is(.btn,.nav-btn,.erp-badge,.badge,.stat-chip,.project-priority,
    .fac-state-pill,.tv-field-chip,.project-column-count),
:is(.btn,.nav-btn,.erp-badge,.badge,.stat-chip,.project-priority,
    .fac-state-pill,.tv-field-chip,.project-column-count) * {
    -webkit-text-fill-color: currentColor;
}

/* Superficies claras detectadas en la auditoría general de Operaciones. */
:is(.box,.portal-card,.hogar-card,.cal-day,.cal-agenda,
    .ai-map-card,.ai-stat,.ai-route-card,
    .bi-card,.bi-kpi,.bi-table,.bi-widget-row,
    .client-document-row,.continuity-card,
    .crm-card,.crm-kpi,.work-card,.work-kpi,.act-card,.act-kpi,
    .fc-panel,.fc-kpi,.obj-panel,.obj-kpi,
    .crm-detail-panel,.crm-side-panel,.crm-funnel-shell) {
    color: var(--light-surface-text);
}
:is(.box,.portal-card,.hogar-card,.cal-day,.cal-agenda,
    .ai-map-card,.ai-stat,.ai-route-card,
    .bi-card,.bi-kpi,.bi-table,.bi-widget-row,
    .client-document-row,.continuity-card,
    .crm-card,.crm-kpi,.work-card,.work-kpi,.act-card,.act-kpi,
    .fc-panel,.fc-kpi,.obj-panel,.obj-kpi,
    .crm-detail-panel,.crm-side-panel,.crm-funnel-shell)
:is(h1,h2,h3,h4,h5,h6,strong,b) {
    color: var(--light-surface-heading);
}


/* =============================================================
   v1.00-r62 · Auditoría transversal de contraste en Operaciones
   Aplicado desde la hoja común que cargan las vistas PHP. Corrige
   texto heredado claro sobre tarjetas/formularios blancos sin alterar
   los paneles de control diseñados expresamente en tema oscuro.
   ============================================================= */
:root{
    --op-light-text:#1c3045;
    --op-light-heading:#123a5b;
    --op-light-label:#243b53;
    --op-light-muted:#4d6378;
    --op-light-link:#075f98;
    --op-light-border:#b8cad9;
    --op-light-soft:#edf3f7;
}

body:not(.theme-control-body) :is(
    .panel,.login-box,.card,.erp-card,.table-wrap,.print-header,.box,
    .portal-card,.portal-kpi,.hogar-card,.cal-day,.cal-agenda,
    .ai-map-card,.ai-stat,.ai-route-card,.bi-card,.bi-kpi,.bi-table,.bi-widget-row,
    .client-document-row,.continuity-card,
    .crm-card,.crm-kpi,.work-card,.work-kpi,.act-card,.act-kpi,
    .fc-panel,.fc-kpi,.obj-panel,.obj-kpi,.crm-detail-panel,.crm-side-panel,
    .project-overview-card,.project-column,.project-board-card,.project-gantt-shell,
    .project-doc-list li,.project-orphans,.viewer-item,.viewer-empty,
    .fac-flow,.fac-flow-stage,.fac-invoice-card,.tv-visual,.tv-kpi,.tv-box,.tv-item
){
    color:var(--op-light-text)!important;
    -webkit-text-fill-color:var(--op-light-text)!important;
}
body:not(.theme-control-body) :is(
    .panel,.login-box,.card,.erp-card,.table-wrap,.print-header,.box,
    .portal-card,.hogar-card,.cal-day,.cal-agenda,.ai-map-card,.ai-stat,.ai-route-card,
    .bi-card,.bi-kpi,.client-document-row,.continuity-card,.crm-card,.crm-kpi,
    .work-card,.work-kpi,.act-card,.act-kpi,.fc-panel,.fc-kpi,.obj-panel,.obj-kpi,
    .crm-detail-panel,.crm-side-panel,.project-overview-card,.project-column,
    .project-board-card,.project-gantt-shell,.viewer-item,.viewer-empty
) :is(h1,h2,h3,h4,h5,h6){
    color:var(--op-light-heading)!important;
    -webkit-text-fill-color:var(--op-light-heading)!important;
}
body:not(.theme-control-body) :is(.panel,.login-box,.card,.erp-card,.box,.portal-card,.hogar-card,.crm-card,.project-board-card)
:is(label,legend,.field-label,.form-label,dt){
    color:var(--op-light-label)!important;
    -webkit-text-fill-color:var(--op-light-label)!important;
    opacity:1!important;
}
body:not(.theme-control-body) :is(.muted,.erp-muted,.erp-small,.small,.help-text,.field-help,.form-help,
    .project-card-client,.project-card-code,.project-empty-column,.project-gantt-empty,.fac-empty){
    color:var(--op-light-muted)!important;
    -webkit-text-fill-color:var(--op-light-muted)!important;
    opacity:1!important;
}

/* Todos los tipos de control de formulario, incluidos date/file/url/tel. */
body:not(.theme-control-body) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:not(.theme-control-body) select,
body:not(.theme-control-body) textarea,
body:not(.theme-control-body) .input-small,
body:not(.theme-control-body) .input-money,
body:not(.theme-control-body) .select-small{
    background:#fff!important;
    color:var(--op-light-text)!important;
    -webkit-text-fill-color:var(--op-light-text)!important;
    border-color:var(--op-light-border)!important;
    opacity:1!important;
    color-scheme:light;
}
body:not(.theme-control-body) input::placeholder,
body:not(.theme-control-body) textarea::placeholder{
    color:#60758a!important;
    -webkit-text-fill-color:#60758a!important;
    opacity:1!important;
}
body:not(.theme-control-body) :is(input,select,textarea):focus{
    border-color:#2584bd!important;
    box-shadow:0 0 0 3px rgba(37,132,189,.18)!important;
}
body:not(.theme-control-body) input[type="checkbox"],
body:not(.theme-control-body) input[type="radio"]{
    opacity:1!important;
    filter:none!important;
    accent-color:#087c55;
}
body:not(.theme-control-body) :is(input,select,textarea):disabled,
body:not(.theme-control-body) :is(input,textarea)[readonly]{
    background:#e9eff4!important;
    color:#4d6378!important;
    -webkit-text-fill-color:#4d6378!important;
    opacity:1!important;
}

/* Tablas y listados claros. */
body:not(.theme-control-body) :is(.erp-table,.data-table,.products-table,.nowrap-table,.table-wrap table) td{
    color:#24364b!important;
    -webkit-text-fill-color:#24364b!important;
}
body:not(.theme-control-body) :is(.erp-table,.data-table,.products-table,.nowrap-table,.table-wrap table) th{
    color:#17324a!important;
    -webkit-text-fill-color:#17324a!important;
    background:#e8f1f8;
}
body:not(.theme-control-body) :is(.erp-table,.data-table,.products-table,.nowrap-table,.table-wrap table) td a:not(.btn){
    color:var(--op-light-link)!important;
    -webkit-text-fill-color:var(--op-light-link)!important;
    font-weight:750;
}
body:not(.theme-control-body) :is(.erp-table,.data-table,.products-table,.nowrap-table,.table-wrap table) :is(small,.erp-small){
    color:var(--op-light-muted)!important;
    -webkit-text-fill-color:var(--op-light-muted)!important;
}

/* Restablecer contraste propio de elementos con fondo de estado/acción. */
body :is(.btn,.nav-btn,button.btn,a.btn),
body :is(.btn,.nav-btn,button.btn,a.btn) *{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    opacity:1!important;
}
body :is(.erp-badge,.badge,.stat-chip,.notice,.success,.error,.status-ok,.status-no),
body :is(.erp-badge,.badge,.stat-chip,.notice,.success,.error,.status-ok,.status-no) *{
    -webkit-text-fill-color:currentColor!important;
    opacity:1!important;
}
body:not(.theme-control-body) .erp-badge-neutral{color:#31506f!important;-webkit-text-fill-color:#31506f!important}
body:not(.theme-control-body) .erp-badge-warn{color:#6d4700!important;-webkit-text-fill-color:#6d4700!important}
body:not(.theme-control-body) .erp-badge-ok{color:#155d29!important;-webkit-text-fill-color:#155d29!important}
body:not(.theme-control-body) .erp-badge-danger{color:#8b2424!important;-webkit-text-fill-color:#8b2424!important}

/* Evita desbordes comunes encontrados durante la revisión de vistas PHP. */
body:not(.theme-control-body) :is(.erp-card,.panel,.card,.box){min-width:0}
body:not(.theme-control-body) :is(.erp-actions,.actions-row,.row-actions){max-width:100%}
body:not(.theme-control-body) :is(.erp-actions,.actions-row,.row-actions) .btn{flex:0 0 auto}


/* CORTANA-FEATURE:row-click-navigation-r100 */
table tbody tr.erp-row-link { cursor: pointer; }
table tbody tr.erp-row-link > td { transition: background-color .14s ease, box-shadow .14s ease, filter .14s ease; }
table tbody tr.erp-row-link:hover > td,
table tbody tr.erp-row-link:focus-visible > td {
    box-shadow: inset 0 0 0 9999px rgba(7,134,200,.075);
}
table tbody tr.erp-row-link:focus-visible {
    outline: 3px solid rgba(7,134,200,.38);
    outline-offset: -3px;
}