.grid {
    display: grid;
    gap: 16px;
}

.grid.kpis {
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin: 17px 0;
}

.grid.two {
    grid-template-columns: 1.25fr .75fr;
}

.grid.three {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.card h3 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -.2px;
}

.card-sub {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.kpi {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 104px;
}

.kpi-icon,.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex: 0 0 auto;
}

.tone-mint {
    background: rgba(69,199,154,.13);
    color: #35a77d;
}

.tone-orange {
    background: rgba(244,163,64,.14);
    color: #d88823;
}

.tone-blue {
    background: rgba(88,120,238,.13);
    color: #4969dc;
}

.tone-red {
    background: rgba(239,100,105,.13);
    color: #df4f55;
}

.tone-cyan {
    background: rgba(57,185,208,.14);
    color: #2399b0;
}

.tone-purple {
    background: rgba(101,72,232,.13);
    color: #6044dc;
}

.kpi b {
    display: block;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.6px;
}

.kpi span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.metric-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.metric-line:last-child {
    border-bottom: 0;
}

.metric-line strong {
    font-size: 13px;
}

.metric-line span {
    color: var(--muted);
    font-size: 12px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
}

.dot-green {
    background: var(--mint);
}

.dot-yellow {
    background: var(--orange);
}

.dot-red {
    background: var(--red);
}

.btn {
    border: 1px solid transparent;
    background: var(--brand);
    color: #fff;
    font-weight: 750;
    padding: 10px 14px;
    border-radius: 12px;
    transition: .16s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
}

.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.btn.secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
}

.btn.ghost {
    background: transparent;
    color: var(--brand);
    border-color: rgba(54,89,233,.25);
}

.btn.danger {
    background: var(--red);
}

.btn.success {
    background: var(--mint);
}

.btn.small {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.btn.wide {
    width: 100%;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.toolbar .spacer {
    flex: 1;
}

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

.field label,.label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 800;
    letter-spacing: .2px;
}

.input,.select,.textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 12px;
    outline: 0;
}

.textarea {
    min-height: 92px;
    resize: vertical;
}

.input:focus,.select:focus,.textarea:focus {
    border-color: rgba(54,89,233,.55);
    box-shadow: 0 0 0 3px rgba(54,89,233,.08);
}

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

.form-grid.three {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.form-actions {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    margin-top: 14px;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 15px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    background: var(--surface);
}

.table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #8e96a8;
    text-align: left;
    padding: 11px 13px;
    background: var(--surface2);
    border-bottom: 1px solid var(--line);
}

.table td {
    padding: 12px 13px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

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

.table tr:hover td {
    background: color-mix(in srgb,var(--surface2) 58%,transparent);
}

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

.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    background: var(--surface2);
    border: 1px solid var(--line);
}

.tag.green {
    color: #238865;
    background: rgba(69,199,154,.10);
    border-color: rgba(69,199,154,.22);
}

.tag.red {
    color: #d34c52;
    background: rgba(239,100,105,.10);
    border-color: rgba(239,100,105,.22);
}

.tag.orange {
    color: #bd731b;
    background: rgba(244,163,64,.11);
    border-color: rgba(244,163,64,.22);
}

.tag.blue {
    color: #3d61d8;
    background: rgba(88,120,238,.10);
    border-color: rgba(88,120,238,.22);
}

.feature-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.feature-row:last-child {
    border-bottom: 0;
}

.feature-row h4 {
    margin: 0 0 2px;
    font-size: 14px;
}

.feature-row p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.switch {
    position: relative;
    width: 45px;
    height: 25px;
    display: inline-block;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch i {
    position: absolute;
    inset: 0;
    background: #cfd5e1;
    border-radius: 999px;
    transition: .2s;
}

.switch i:after {
    content: "";
    position: absolute;
    width: 19px;
    height: 19px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: .2s;
}

.switch input:checked+i {
    background: var(--brand);
}

.switch input:checked+i:after {
    transform: translateX(20px);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,18,31,.52);
    backdrop-filter: blur(4px);
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 16px;
}

.modal {
    width: min(680px,100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 25px 90px rgba(0,0,0,.25);
    padding: 22px;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.modal-head h3 {
    margin: 0;
}

.close {
    border: 0;
    background: var(--surface2);
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--muted);
}

.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: #172033;
    color: #fff;
    padding: 11px 14px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.2);
    max-width: 340px;
}

.toast.ok {
    background: #176b54;
}

.toast.err {
    background: #9e373d;
}

.camera-shell {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
    gap: 16px;
}

.camera-card {
    background: #101827;
    border-radius: 24px;
    overflow: hidden;
    min-height: 520px;
    position: relative;
    display: grid;
    place-items: center;
}

.camera-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.camera-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.face-guide {
    width: min(56%,320px);
    aspect-ratio: .78;
    border: 3px solid rgba(255,255,255,.75);
    border-radius: 48% 48% 43% 43%;
    box-shadow: 0 0 0 999px rgba(5,9,18,.28);
}

.camera-status {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    background: rgba(13,20,34,.72);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    padding: 12px 14px;
    border-radius: 14px;
}

.camera-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.terminal-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255,255,255,.9);
    color: #202638;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
}

.result-box {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    background: var(--surface2);
}

.result-box.big {
    text-align: center;
    padding: 22px;
}

.result-box.big b {
    display: block;
    font-size: 21px;
    margin-top: 7px;
}

.progress-ring {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(var(--mint) var(--pct,0%),var(--line) 0);
    display: grid;
    place-items: center;
    margin: auto;
}

.progress-ring:after {
    content: "";
    width: 72px;
    height: 72px;
    background: var(--surface);
    border-radius: 50%;
    position: absolute;
}

.progress-ring span {
    position: relative;
    z-index: 2;
    font-weight: 900;
    font-size: 18px;
}

.operation-score {
    display: flex;
    align-items: center;
    gap: 20px;
}

.score-circle {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--mint) var(--score,0%),var(--line) 0);
    position: relative;
}

.score-circle:after {
    content: "";
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--surface);
}

.score-circle b {
    position: relative;
    z-index: 1;
    font-size: 24px;
}

.score-circle small {
    position: absolute;
    z-index: 1;
    margin-top: 42px;
    color: var(--muted);
    font-size: 10px;
}

.empty {
    padding: 30px;
    text-align: center;
    color: var(--muted);
}

.skeleton {
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(90deg,var(--surface2),var(--line),var(--surface2));
    background-size: 200%;
    animation: sk 1.2s linear infinite;
}

@keyframes sk{
    to {
      background-position: -200%;
  }
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    background: var(--bg);
}

.login-art {
    background: linear-gradient(135deg,#243dc5,#6b43e6);
    padding: 56px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.login-art:after {
    content: "";
    width: 420px;
    height: 420px;
    border: 70px solid rgba(255,255,255,.06);
    border-radius: 50%;
    position: absolute;
    right: -170px;
    top: -120px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 2;
}

.login-brand img {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    padding: 3px;
}

.login-art h1 {
    font-size: 42px;
    line-height: 1.05;
    max-width: 550px;
    margin: 0 0 16px;
    letter-spacing: -1.4px;
}

.login-art p {
    font-size: 16px;
    opacity: .84;
    max-width: 570px;
}

.login-points {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px;
    margin-top: 25px;
}

.login-point {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    padding: 13px;
    font-size: 12px;
}

.login-form-wrap {
    display: grid;
    place-items: center;
    padding: 36px;
}

.login-box {
    width: min(420px,100%);
}

.login-box h2 {
    font-size: 28px;
    margin: 0 0 5px;
}

.login-box>p {
    color: var(--muted);
    margin: 0 0 25px;
}

.login-box .field {
    margin-bottom: 13px;
}

.login-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

@media (max-width:1200px){
    .grid.kpis {
      grid-template-columns: repeat(2,minmax(0,1fr));
  }

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

    .camera-shell {
      grid-template-columns: 1fr;
  }
}

/* =========================================================
   Pixel Assistance · Admin visual system v2.1
   Pulido transversal para módulos operativos/gestión.
   ========================================================= */

body[data-page] .content {
    --module-gap: 18px;
}

body[data-page] .content > * + * {
    margin-top: var(--module-gap);
}

body[data-page] .content > .toolbar + *,
body[data-page] .content > .hero + * {
    margin-top: var(--module-gap);
}

/* Toolbars que antes quedaban "flotando" en crudo. */
body[data-page]:not([data-page="dashboard"]) .content > .toolbar {
    margin-bottom: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    min-height: 64px;
}

body[data-page]:not([data-page="dashboard"]) .content > .toolbar .input,
body[data-page]:not([data-page="dashboard"]) .content > .toolbar .select {
    min-width: 190px;
}

body[data-page] .card {
    border-color: color-mix(in srgb, var(--line) 94%, transparent);
    box-shadow: 0 11px 30px rgba(29, 42, 78, .055);
}

body[data-page]:not([data-page="dashboard"]) .content > .card,
body[data-page]:not([data-page="dashboard"]) .content > .grid > .card {
    position: relative;
    overflow: hidden;
}

body[data-page]:not([data-page="dashboard"]) .content > .card::before,
body[data-page]:not([data-page="dashboard"]) .content > .grid > .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    opacity: .72;
}

body[data-page] .card-head {
    min-height: 38px;
}

body[data-page] .card-head h3,
body[data-page] .card > h3 {
    color: var(--text);
    font-weight: 800;
}

body[data-page] .card-sub {
    line-height: 1.55;
}

body[data-page] .btn {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 7px 16px rgba(54, 89, 233, .11);
}

body[data-page] .btn:not(.secondary):not(.ghost):not(.danger):not(.success) {
    background: linear-gradient(135deg, #3659e9, #4a62ed);
}

body[data-page] .btn.secondary,
body[data-page] .btn.ghost {
    box-shadow: none;
}

body[data-page] .btn.secondary:hover,
body[data-page] .btn.ghost:hover {
    border-color: rgba(54, 89, 233, .27);
    color: var(--brand);
    background: color-mix(in srgb, var(--surface) 94%, var(--brand) 6%);
}

body[data-page] .btn:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
    filter: none;
}

body[data-page] .input,
body[data-page] .select,
body[data-page] .textarea {
    border-color: color-mix(in srgb, var(--line) 94%, transparent);
    background: color-mix(in srgb, var(--surface) 97%, var(--surface2) 3%);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

body[data-page] .input:hover,
body[data-page] .select:hover,
body[data-page] .textarea:hover {
    border-color: color-mix(in srgb, var(--line) 68%, var(--brand) 32%);
}

body[data-page] input[type="checkbox"],
body[data-page] input[type="radio"] {
    accent-color: var(--brand);
}

body[data-page] .field label,
body[data-page] .label {
    color: color-mix(in srgb, var(--muted) 90%, var(--text) 10%);
}

body[data-page] .table-wrap {
    border-color: color-mix(in srgb, var(--line) 94%, transparent);
    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

body[data-page] .table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #7d879b;
    font-weight: 850;
    background: color-mix(in srgb, var(--surface2) 86%, var(--surface) 14%);
}

body[data-page] .table td {
    color: var(--text);
}

body[data-page] .table tbody tr {
    transition: background .14s ease;
}

body[data-page] .table tbody tr:hover td {
    background: color-mix(in srgb, var(--surface2) 72%, transparent);
}

body[data-page] .table td:last-child {
    text-align: right;
}

body[data-page] .tag {
    letter-spacing: .15px;
}

body[data-page] .empty {
    margin: 4px 0;
    border: 1px dashed color-mix(in srgb, var(--line) 92%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface2) 72%, transparent);
}

body[data-page] .result-box {
    border-color: color-mix(in srgb, var(--line) 92%, transparent);
    background: color-mix(in srgb, var(--surface2) 84%, var(--surface) 16%);
}

body[data-page] .feature-row {
    border-bottom-color: color-mix(in srgb, var(--line) 88%, transparent);
}

/* Modales: jerarquía, contraste y controles alineados al sistema. */
body[data-page] .modal-backdrop {
    background: rgba(12, 19, 34, .48);
    backdrop-filter: blur(7px);
}

body[data-page] .modal {
    width: min(760px, 100%);
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 28px 90px rgba(12, 19, 34, .28);
}

body[data-page] .modal-head {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0;
    padding: 20px 22px 16px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

body[data-page] .modal-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
}

body[data-page] .modal-head h3 {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.25px;
}

body[data-page] .modal > .modal-head + div {
    padding: 20px 22px 22px;
    max-height: calc(90vh - 76px);
    overflow: auto;
}

body[data-page] .modal .close {
    flex: 0 0 auto;
    color: #778197;
    border: 1px solid transparent;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

body[data-page] .modal .close:hover {
    color: var(--brand);
    background: rgba(54, 89, 233, .08);
    transform: rotate(4deg);
}

body[data-page] .modal .form-actions {
    padding-top: 4px;
}

body[data-page] .toast-stack {
    right: 18px;
    bottom: 18px;
}

body[data-page] .toast {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(10, 18, 31, .2);
}

body[data-page] .toast.err {
    background: #a53b43;
}

body[data-page] .toast.ok {
    background: #18715a;
}

/* Dashboard conserva su composición, solo recibe consistencia fina. */
body[data-page="dashboard"] .kpi {
    box-shadow: 0 11px 30px rgba(29, 42, 78, .055);
}

@media (max-width: 900px) {
    body[data-page] .modal {
        width: min(720px, 100%);
        max-height: calc(100vh - 28px);
    }

    body[data-page] .modal > .modal-head + div {
        max-height: calc(100vh - 104px);
    }

    body[data-page] .table {
        min-width: 700px;
    }
}

@media (max-width: 620px) {
    body[data-page] .content {
        --module-gap: 14px;
    }

    body[data-page]:not([data-page="dashboard"]) .content > .toolbar {
        padding: 10px;
        border-radius: 15px;
    }

    body[data-page]:not([data-page="dashboard"]) .content > .toolbar > * {
        width: 100%;
    }

    body[data-page] .modal-backdrop {
        padding: 10px;
        align-items: end;
    }

    body[data-page] .modal {
        border-radius: 22px 22px 16px 16px;
        max-height: calc(100vh - 20px);
    }

    body[data-page] .modal-head {
        padding: 18px 18px 14px;
    }

    body[data-page] .modal > .modal-head + div {
        padding: 18px;
        max-height: calc(100vh - 90px);
    }

    body[data-page] .form-actions .btn {
        width: 100%;
    }

    body[data-page] .toast-stack {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    body[data-page] .toast {
        max-width: none;
        width: 100%;
    }
}

/* =========================================================
   Pixel Assistance · tablas + controles adaptativos v3
   ========================================================= */
body[data-page] .table-wrap {
    position: relative;
    overflow: auto;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--brand) 18%);
    box-shadow: 0 12px 28px rgba(29, 42, 78, .055);
}

body[data-page] .table-wrap::before {
    content: "";
    position: sticky;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 4;
    background: linear-gradient(90deg, var(--brand), var(--brand2), var(--cyan));
}

body[data-page] .table {
    border-spacing: 0;
}

body[data-page] .table th {
    padding: 13px 14px;
    color: color-mix(in srgb, var(--brand) 38%, var(--muted) 62%);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface) 84%, var(--brand) 16%),
        color-mix(in srgb, var(--surface2) 92%, var(--brand) 8%));
    border-bottom-color: color-mix(in srgb, var(--line) 70%, var(--brand) 30%);
}

body[data-page] .table td {
    padding: 13px 14px;
    background: var(--surface);
    transition: background .16s ease, transform .16s ease;
}

body[data-page] .table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface) 97%, var(--brand) 3%);
}

body[data-page] .table tbody tr:hover td {
    background: color-mix(in srgb, var(--surface) 91%, var(--brand) 9%);
}

body[data-page] .table tbody tr td:first-child {
    box-shadow: inset 3px 0 0 transparent;
}

body[data-page] .table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 78%, var(--brand2) 22%);
}

/* El select/date real conserva valor y eventos, pero no abre UI nativa del SO. */
body[data-page] .pa-native-control {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

body[data-page] .pa-control-trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--line) 91%, var(--brand) 9%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 97%, var(--surface2) 3%);
    color: var(--text);
    text-align: left;
    outline: 0;
    box-shadow: 0 5px 14px rgba(29, 42, 78, .025);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

body[data-page] .pa-control-trigger:hover,
body[data-page] .pa-control-trigger:focus-visible,
body[data-page] .pa-control-trigger[aria-expanded="true"] {
    border-color: rgba(54, 89, 233, .48);
    background: color-mix(in srgb, var(--surface) 94%, var(--brand) 6%);
    box-shadow: 0 0 0 3px rgba(54, 89, 233, .08), 0 8px 20px rgba(29, 42, 78, .055);
}

body[data-page] .pa-control-trigger:disabled {
    opacity: .58;
    cursor: not-allowed;
}

body[data-page] .pa-control-trigger.is-placeholder .pa-control-value {
    color: var(--muted);
}

body[data-page] .pa-control-value {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body[data-page] .pa-control-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--brand);
    background: rgba(54, 89, 233, .08);
    font-size: 17px;
    font-weight: 900;
}

body[data-page] .pa-calendar-icon::before {
    content: "";
    width: 13px;
    height: 12px;
    border: 1.7px solid currentColor;
    border-radius: 3px;
    box-shadow: inset 0 3px 0 color-mix(in srgb, currentColor 22%, transparent);
}

.pa-popover {
    position: fixed;
    z-index: 160;
    max-height: min(430px, calc(100vh - 24px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--line) 80%, var(--brand) 20%);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 98%, var(--brand) 2%);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(15, 25, 49, .22);
    backdrop-filter: blur(16px);
    animation: paPopoverIn .14s ease-out;
}

.pa-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 15px 12px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--surface) 94%, var(--brand) 6%),
        color-mix(in srgb, var(--surface) 96%, var(--brand2) 4%));
}

.pa-popover-head b {
    display: block;
    font-size: 13px;
    letter-spacing: -.1px;
}

.pa-popover-head span {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 10px;
}

.pa-popover-close,
.pa-calendar-arrow {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.pa-popover-close:hover,
.pa-calendar-arrow:hover {
    color: var(--brand);
    border-color: rgba(54, 89, 233, .25);
    background: rgba(54, 89, 233, .07);
}

.pa-popover-search-wrap {
    padding: 10px 12px 2px;
}

.pa-popover-search {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 8px 10px;
    outline: 0;
    background: var(--surface2);
    color: var(--text);
}

.pa-popover-search:focus {
    border-color: rgba(54, 89, 233, .45);
    box-shadow: 0 0 0 3px rgba(54, 89, 233, .07);
}

.pa-select-options {
    overflow: auto;
    padding: 8px;
}

.pa-select-option {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 11px;
    padding: 9px 10px;
    background: transparent;
    color: var(--text);
    text-align: left;
}

.pa-select-option + .pa-select-option {
    margin-top: 2px;
}

.pa-select-option:hover {
    background: color-mix(in srgb, var(--surface2) 82%, var(--brand) 18%);
}

.pa-select-option.is-selected {
    color: var(--brand);
    font-weight: 800;
    background: linear-gradient(135deg, rgba(54, 89, 233, .11), rgba(101, 72, 232, .07));
}

.pa-select-option i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-style: normal;
    background: rgba(54, 89, 233, .08);
}

.pa-popover-empty {
    padding: 22px 14px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

.pa-calendar-popover {
    width: min(350px, calc(100vw - 24px));
}

.pa-calendar-nav {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
    padding: 11px 13px 8px;
}

.pa-calendar-nav strong {
    text-align: center;
    font-size: 13px;
    text-transform: capitalize;
}

.pa-calendar-weekdays,
.pa-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 0 12px;
}

.pa-calendar-weekdays {
    padding-top: 4px;
    padding-bottom: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    text-align: center;
}

.pa-calendar-day,
.pa-calendar-blank {
    aspect-ratio: 1;
    min-width: 0;
}

.pa-calendar-day {
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.pa-calendar-day:hover {
    border-color: rgba(54, 89, 233, .20);
    background: rgba(54, 89, 233, .07);
    color: var(--brand);
}

.pa-calendar-day.is-today {
    border-color: rgba(54, 89, 233, .25);
    color: var(--brand);
}

.pa-calendar-day.is-selected {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 7px 16px rgba(54, 89, 233, .22);
}

.pa-calendar-day:disabled {
    opacity: .27;
    cursor: not-allowed;
}

.pa-calendar-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
}

.pa-calendar-actions .btn {
    width: auto !important;
    flex: 1;
    box-shadow: none !important;
}

@keyframes paPopoverIn {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    body[data-page].pa-ui-enhanced .card:has(.table-wrap) {
        padding: 14px;
    }

    body[data-page].pa-ui-enhanced .table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    body[data-page].pa-ui-enhanced .table-wrap::before {
        display: none;
    }

    body[data-page].pa-ui-enhanced .table {
        min-width: 0;
        width: 100%;
        display: block;
        background: transparent;
    }

    body[data-page].pa-ui-enhanced .table thead {
        display: none;
    }

    body[data-page].pa-ui-enhanced .table tbody {
        display: grid;
        gap: 11px;
    }

    body[data-page].pa-ui-enhanced .table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--line) 80%, var(--brand) 20%);
        border-radius: 16px;
        background: var(--surface);
        box-shadow: 0 9px 24px rgba(29, 42, 78, .055);
    }

    body[data-page].pa-ui-enhanced .table tbody tr::before {
        content: "";
        grid-column: 1 / -1;
        height: 3px;
        background: linear-gradient(90deg, var(--brand), var(--brand2));
    }

    body[data-page].pa-ui-enhanced .table td,
    body[data-page].pa-ui-enhanced .table tbody tr:nth-child(even) td,
    body[data-page].pa-ui-enhanced .table tbody tr:hover td {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(88px, .75fr) minmax(0, 1.25fr);
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border-bottom: 1px solid var(--line);
        background: transparent;
        text-align: right;
        box-shadow: none !important;
        overflow-wrap: anywhere;
    }

    body[data-page].pa-ui-enhanced .table td:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    body[data-page].pa-ui-enhanced .table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 9px;
        font-weight: 850;
        line-height: 1.25;
        letter-spacing: .55px;
        text-transform: uppercase;
        text-align: left;
    }

    body[data-page].pa-ui-enhanced .table td > * {
        min-width: 0;
    }

    body[data-page].pa-ui-enhanced .table .card-sub {
        text-align: right;
    }

    body[data-page].pa-ui-enhanced .table .tag {
        justify-self: end;
    }

    /* Columnas de acciones con encabezado vacío: en tablet/móvil no deben
       conservar la rejilla etiqueta/valor porque desplaza los botones. */
    body[data-page].pa-ui-enhanced .table td:last-child:not([data-label]) {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        border-bottom: 0;
    }

    body[data-page].pa-ui-enhanced .table td:last-child:not([data-label]) > .btn:only-child {
        width: min(100%, 420px);
        justify-content: center;
    }

    body[data-page].pa-ui-enhanced .table tbody tr.pa-table-empty-row {
        display: block;
    }

    body[data-page].pa-ui-enhanced .table tbody tr.pa-table-empty-row::before {
        display: block;
    }

    body[data-page].pa-ui-enhanced .table tbody tr.pa-table-empty-row td {
        display: block;
        border: 0;
        text-align: center;
        padding: 28px 16px;
    }

    body[data-page].pa-ui-enhanced .table tbody tr.pa-table-empty-row td::before {
        display: none;
    }
}

@media (max-width: 620px) {
    body[data-page].pa-ui-enhanced .table tbody tr {
        grid-template-columns: 1fr;
    }

    body[data-page].pa-ui-enhanced .table td,
    body[data-page].pa-ui-enhanced .table tbody tr:nth-child(even) td,
    body[data-page].pa-ui-enhanced .table tbody tr:hover td {
        grid-template-columns: minmax(96px, .82fr) minmax(0, 1.18fr);
        border-bottom: 1px solid var(--line);
    }

    body[data-page].pa-ui-enhanced .table td:last-child {
        border-bottom: 0;
    }

    .pa-popover-sheet {
        max-height: min(72vh, 560px);
        border-radius: 22px;
        box-shadow: 0 28px 90px rgba(12, 19, 34, .30);
        animation: paSheetIn .17s ease-out;
    }

    .pa-popover-sheet::before {
        content: "";
        width: 42px;
        height: 4px;
        margin: 7px auto -3px;
        border-radius: 99px;
        background: color-mix(in srgb, var(--muted) 30%, transparent);
    }

    .pa-calendar-day {
        border-radius: 10px;
        font-size: 13px;
    }

    .pa-calendar-weekdays,
    .pa-calendar-grid {
        gap: 3px;
    }
}

@keyframes paSheetIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}