/* ======================= AURORA UI (vanilla CSS) ======================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif }

/* ===== Layout: top nav + contenido centrado ===== */

/* Contenedor centrado */
.container{
    width: min(1200px, 92vw);
    margin: 0 auto;
}

body.has-topnav{
    display: flex !important;
    flex-direction: column;
    min-height: 100vh;
}

/* Barra superior */
.topnav__menu i{
    font-size: .95em;
    width: 1.1em;
    text-align: center;
    opacity: .9;
}
.topnav__menu a{ gap: .45rem; }

.topnav{
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in oklab, var(--panel) 92%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

.topnav__inner{
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem 0;                 /* padding lateral lo da .container */
}
.topnav__brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; }
.topnav__meta{ color: var(--muted); font-size:.85rem; }

/* Menú centrado */
.topnav__menu{
    flex: 1 1 auto;
    display:flex; align-items:center; justify-content:center;
    gap:.25rem; overflow:auto; scrollbar-width: thin;
}
.topnav__menu a{
    display:flex; align-items:center; gap:.5rem;
    color:inherit; text-decoration:none;
    padding:.5rem .7rem; border-radius:.7rem; border:1px solid transparent;
    white-space: nowrap;
}
.topnav__menu a:hover{ background: var(--panel-2); }
.topnav__menu a.active{ background: var(--panel-2); border-color: var(--border); font-weight:600; }

/* Acciones a la derecha */
.topnav__right{ display:flex; align-items:center; gap:.5rem; }

/* Área de alertas y contenido centrados */
.alerts{ padding: .75rem 0 0; }
main{ padding: 1rem 0 2rem; }

/* Modo móvil: permite hacer scroll horizontal del menú si no cabe */
@media (max-width: 720px){
    .topnav__menu{ justify-content: flex-start; }
}

/* ---- Tokens & themes ---- */
:root{
    --bg: oklch(98% 0.01 250);
    --panel: oklch(98% 0.02 250);
    --panel-2: oklch(96% 0.02 250);
    --ink: oklch(20% 0.02 250);
    --muted: oklch(45% 0.02 250);
    --border: oklch(88% 0.01 250);
    --accent: oklch(60% 0.15 250);
    --accent-2: oklch(65% 0.12 280);
    --good: oklch(70% 0.12 150);
    --bad:  oklch(60% 0.18 20);
    --radius: 14px;
    --shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px -20px rgba(0,0,0,.25);
    --ring: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
    --fs: clamp(14px, 1.15vw, 15.5px);
    --lh: 1.45;
    color-scheme: light;
}
:root[data-theme="dark"]{
    --bg: oklch(16% 0.02 250);
    --panel: oklch(20% 0.02 250);
    --panel-2: oklch(24% 0.02 250);
    --ink: oklch(92% 0.02 250);
    --muted: oklch(72% 0.02 250);
    --border: oklch(28% 0.02 250);
    --accent: oklch(75% 0.15 250);
    --accent-2: oklch(75% 0.10 300);
    --good: oklch(80% 0.12 150);
    --bad:  oklch(70% 0.18 20);
    color-scheme: dark;
}

html{ font-size: var(--fs) }
body{
    color:var(--ink);
    background:
            radial-gradient(1200px 1200px at 10% -10%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
            radial-gradient(1000px 1000px at 120% 20%, color-mix(in oklab, var(--accent-2) 12%, transparent), transparent 60%),
            var(--bg);
    line-height: var(--lh);
    display:grid; grid-template-columns: 240px 1fr; min-height:100vh;
}

/* ---- Sidebar (glass) ---- */
aside{
    position:sticky; top:0;
    backdrop-filter: blur(10px);
    background: color-mix(in oklab, var(--panel) 85%, transparent);
    border-right:1px solid var(--border);
    padding: 1rem .9rem; display:flex; flex-direction:column; gap:.8rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px; }
.email{ color:var(--muted); font-size:.85rem }
nav.menu{ display:grid; gap:.25rem; margin:.2rem 0 .6rem }
nav.menu a{
    display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit;
    padding:.55rem .7rem; border-radius:.7rem; border:1px solid transparent;
}
nav.menu a:hover{ background:var(--panel-2) }
nav.menu a.active{ background:var(--panel-2); border-color:var(--border); font-weight:600 }

.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; padding:.2rem .55rem;
    background: var(--panel-2); border:1px solid var(--border); border-radius:999px; color: var(--muted) }

/* ---- Topbar ---- */
header.top{
    position:sticky; top:0; z-index:10;
    background: color-mix(in oklab, var(--panel) 92%, transparent);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.6rem 1rem; backdrop-filter: blur(8px);
}
.flash{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .7rem;
    background: var(--panel-2); border:1px solid var(--border); border-radius: .7rem; box-shadow: var(--shadow) }

/* ---- Main ---- */
main{ padding: 1rem 1.6rem 2rem }

/* ---- Cards ---- */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow) }
.card--pad{ padding:1rem }

/* ---- Forms ---- */
form{ display:grid; gap:.9rem }
.row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:end }
label{ color:var(--muted); font-size:.9rem; display:grid; gap:.25rem; min-width: 180px }
input, select, textarea{
    background:var(--panel); color:inherit; border:1px solid var(--border);
    border-radius:12px; padding:.55rem .7rem; height:36px; outline:0;
    transition:border .15s ease, box-shadow .15s ease, background .2s ease;
}
textarea{ min-height:120px; height:auto }
input:focus, select:focus, textarea:focus{ border-color:var(--accent); box-shadow: var(--ring) }
:root{ accent-color: var(--accent) }

/* ---- Buttons ---- */
button, [role="button"], .btn{
    appearance:none; border:1px solid transparent; border-radius:12px; cursor:pointer;
    padding:.5rem .95rem; font-weight:700; box-shadow:var(--shadow); text-decoration:none; user-select:none;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:white;
    transition: transform .05s ease, filter .2s ease, background .2s ease, border-color .2s;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn.secondary, button.secondary, a.secondary[role="button"]{ background:transparent; color:inherit; border-color:var(--border) }
button:hover, [role="button"]:hover, .btn:hover{ filter:brightness(.98) }
button:active, [role="button"]:active, .btn:active{ transform: translateY(1px) }
.btn.xs{ padding:.3rem .55rem; border-radius:10px; font-weight:600 }
.btn.sm{ padding:.4rem .7rem; border-radius:10px; font-weight:600 }

/* Ripple (opcional) */
.ripple{ position:relative; overflow:hidden }
.ripple span.r{ position:absolute; border-radius:50%; transform:scale(0); background:#fff3; animation:ripple .6s ease-out; pointer-events:none }
@keyframes ripple{ to{ transform:scale(10); opacity:0 } }

/* ---- Tables ---- */
.table-wrap{ overflow:auto; border-radius:var(--radius); border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow) }
table{ width:100%; border-collapse:separate; border-spacing:0 }
thead th{
    position:sticky; top:0; z-index:1; background:var(--panel-2); color:var(--muted);
    text-align:left; text-transform:uppercase; letter-spacing:.02em; font-size:.8rem;
    padding:.55rem .7rem; border-bottom:1px solid var(--border)
}
tbody td{ padding:.55rem .7rem; border-top:1px solid var(--border) }
tbody tr:hover{ background: color-mix(in oklab, var(--panel-2) 70%, transparent) }

/* ---- Responsive ---- */
@media (max-width: 980px){
    body{ grid-template-columns: 1fr }
    aside{ position:static; display:flex; align-items:center; justify-content:space-between; gap:1rem }
    nav.menu{ grid-auto-flow:column; overflow:auto }
}

/* ===== Modal estilo SweetAlert (vanilla) ===== */
.dlg-backdrop{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background: color-mix(in oklab, black 35%, transparent);
    backdrop-filter: blur(2px);
    opacity:0; pointer-events:none; transition: opacity .18s ease;
    z-index: 50;
}
.dlg-backdrop.is-open{ opacity:1; pointer-events:auto; }
.dlg{
    width:min(520px, 92vw);
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
    overflow:hidden;
}
.is-open .dlg{ transform: none; }
.dlg__header{ padding:1rem 1.1rem .5rem; font-weight:800; font-size:1.05rem; }
.dlg__body{ padding: .25rem 1.1rem 1rem; color: var(--ink); }
.dlg__actions{
    padding: .75rem 1.1rem 1.1rem; display:flex; justify-content:flex-end; gap:.5rem;
    background: var(--panel-2); border-top:1px solid var(--border);
}
.btn.ghost{ background:transparent; color:inherit; margin-left:auto; align-self:flex-start;}
.btn.danger{
    background: linear-gradient(135deg, color-mix(in oklab, var(--bad) 70%, red), var(--bad));
    color:white;
}
/* ===== Chips multi-select (roles) ===== */
.chips { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.chip  {
    --chip-bg: var(--panel-2);
    display:inline-flex; align-items:center; gap:.45rem;
    border:1px solid var(--border); background:var(--chip-bg);
    border-radius:999px; padding:.35rem .7rem; cursor:pointer; user-select:none;
    transition: background .2s ease, border-color .2s ease, transform .05s ease;
    line-height: 1;
}
.chip:hover { background: color-mix(in oklab, var(--accent) 10%, var(--panel-2)); }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip .dot {
    width:.9rem; height:.9rem; border-radius:50%;
    border:2px solid var(--border); background:transparent; display:inline-block;
    transition: background .2s ease, border-color .2s ease;
}
.chip input:checked + .dot {
    background: var(--accent);
    border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.chip__label {               /* 👈 nuevo nombre para evitar colisión con .label de formularios */
    font-weight:600; letter-spacing:.2px; line-height:1; display:inline-block;
}

/* Alert de error (rojo bonito) */
.alert--error{
    background: var(--bad);
    border-color: color-mix(in oklab, var(--bad) 32%, var(--border));
    color: white;
}

.alert-container{
    border: 1px solid var(--border);
    border-radius: 12px;
}

.alert-content {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    width:100%;
    padding: 5px
}

/* ===== Chips de estado (payments) ===== */
.chip-status{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.38rem .7rem; border-radius:999px;
    background: var(--bg, var(--panel-2));
    color: var(--c, var(--muted));
    border:1px solid color-mix(in oklab, var(--c, var(--border)) 25%, var(--border));
    font-weight:700; white-space:nowrap;
}
.chip-status i{ font-size:.92em; width:1.1em; text-align:center; }

/* Paletas por estado */
.status-created   { --c:#2196F3; --bg: rgba(33,150,243,.12); }
.status-initiated { --c:#FF9800; --bg: rgba(255,152,0,.12); }
.status-confirmed { --c:#4CAF50; --bg: rgba(76,175,80,.14); }
.status-failed    { --c:#F44336; --bg: rgba(244,67,54,.12); }
.status-canceled  { --c:#9E9E9E; --bg: rgba(158,158,158,.14); }
.status-expired   { --c:#FF5722; --bg: rgba(255,87,34,.12); }
.status-unknown   { --c:#607D8B; --bg: rgba(96,125,139,.14); }

/* ===== Chosen-lite (vanilla) ===== */
.chosen-lite{ position: relative; }
.chosen-lite .cl-control{
    display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
    border:1px solid var(--border); border-radius:12px; padding:.35rem .5rem; background:var(--panel);
}
.chosen-lite .cl-input{
    border:0; outline:0; background:transparent; padding:.3rem .2rem;
    min-width:120px; flex:1 1 auto; height:28px; color:inherit; font:inherit;
}
.chosen-lite .cl-tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.chosen-lite .cl-tag{
    display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem;
    border-radius:999px; background:var(--panel-2); border:1px solid var(--border);
}
.chosen-lite .cl-tag .cl-x{ appearance:none; border:0; background:transparent; cursor:pointer; line-height:1; font-weight:700; color:inherit; }
.chosen-lite.is-open .cl-control{ box-shadow: var(--ring); border-color: var(--accent); }

.chosen-lite .cl-dropdown{
    position:absolute; left:0; right:0; top: calc(100% + 4px);
    background: var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow);
    display:none; max-height:240px; overflow:auto; z-index: 15;
}
.chosen-lite.is-open .cl-dropdown{ display:block; }
.chosen-lite .cl-list{ list-style:none; margin:0; padding:.25rem; }
.chosen-lite .cl-item{
    display:flex; align-items:center; gap:.5rem; padding:.45rem .55rem; border-radius:.6rem; cursor:pointer;
}
.chosen-lite .cl-item.is-highlighted{ background: var(--panel-2); }
.chosen-lite .cl-item.is-selected{ color: var(--muted); }
.chosen-lite .cl-empty{ padding:.55rem; color: var(--muted); }

/* Oculta el <select multiple> pero mantiene accesibilidad/validación server-side */
.select-hidden {
    position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;
}

/* Estilo del contenedor principal */
.topnav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

/* Estilo para el logo y el título */
.topnav__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Estilo para el menú de navegación */
.topnav__menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.topnav__menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px;
    transition: color 0.2s, border-bottom 0.2s;
}

.topnav__menu a.active {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.topnav__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slim-select {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    height: auto;
}