:root{
  --bg0:#06070b;
  --bg1:#0b0d14;

  --txt:#f3f5ff;
  --muted:#a7adbf;

  --glass: rgba(255,255,255,0.06);
  --glass2: rgba(255,255,255,0.10);
  --stroke: rgba(255,255,255,0.10);

  /* Naranja más fuerte (tirando a rojo) */
  --orange:#ff4d00;
  --orange2:#ff2200;
  --amber:#ff7a1a;

  --shadow: 0 18px 60px rgba(0,0,0,0.55);
  --shadow2: 0 18px 75px rgba(255,77,0,0.10);

  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--txt);
}

.neo-bg{
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(255,77,0,0.16), transparent 62%),
    radial-gradient(780px 520px at 62% 60%, rgba(255,34,0,0.13), transparent 58%),
    radial-gradient(700px 520px at 40% 70%, rgba(255,122,26,0.08), transparent 55%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
}

.center{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.glass-card{
  width:min(520px, 92vw);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04));
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:28px 28px 22px;
  backdrop-filter: blur(10px);
  position:relative;
  overflow:hidden;
}

.glass-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 220px at 20% 10%, rgba(255,77,0,0.16), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  opacity:0.98;
  position:relative;
  z-index:1;
}

.brand--with-logo .brand-meta{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand-kicker{
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color: rgba(243,245,255,0.78);
}
.brand-name{
  font-weight:700;
  letter-spacing:0.2px;
  font-size:16px;
}

.brand-logo{
  width:44px;
  height:44px;
  border-radius:14px;
  object-fit:cover;
  box-shadow: 0 12px 40px rgba(255,77,0,0.18);
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
}

.brand-logo--sm{
  width:28px;
  height:28px;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(255,77,0,0.14);
}

.pill{
  margin-left:10px;
  font-size:11px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(243,245,255,0.85);
}

h1{
  margin:10px 0 6px;
  font-size:28px;
  position:relative;
  z-index:1;
}
.muted{color:var(--muted)}
.small{font-size:12px}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  border-radius:12px;
  padding:14px 14px;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
  outline:none;
}

.btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,77,0,0.22), 0 0 0 1px rgba(255,77,0,0.22) inset, var(--shadow2);
}

.btn-primary{
  margin-top:16px;
  background: linear-gradient(90deg, var(--orange2), var(--orange));
  color:#140a06;
  font-weight:800;
  letter-spacing:0.8px;
  box-shadow: 0 14px 40px rgba(255,77,0,0.20);
  position:relative;
  z-index:1;
}

.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 60px rgba(255,77,0,0.30);
  filter: saturate(1.05);
}

.btn-primary:active{ transform: translateY(0px) scale(0.99); }

.btn-glow{
  position:absolute; inset:-2px;
  border-radius:14px;
  filter: blur(12px);
  opacity:0;
  background: radial-gradient(420px 140px at 50% 50%, rgba(255,77,0,0.62), transparent 62%);
  transition: opacity .15s ease;
  pointer-events:none;
}
.btn-primary:hover .btn-glow{opacity:1}

.btn-inline{
  width:auto;
  padding:12px 14px;
}

.btn-ghost{
  width:auto;
  padding:10px 12px;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--txt);
}
.btn-ghost:hover{
  border-color: rgba(255,77,0,0.35);
  box-shadow: 0 10px 40px rgba(255,77,0,0.10);
  transform: translateY(-1px);
}

.footer-note{
  margin-top:14px;
  opacity:0.92;
  position:relative;
  z-index:1;
}

/* dashboard */
.topbar{
  position:sticky;
  top:0;
  background: rgba(0,0,0,0.30);
  border-bottom:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}

.topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;

  /* antes: space-between (dejaba el texto al centro si había 3 hijos) */
  justify-content:flex-start;
  gap:14px;
}

/* Asume estructura: (1) brand, (2) texto "Hola, ...", (3) botón Salir */
.topbar-inner > :nth-child(2){
  margin-left:auto;
}


.brand--topbar{
  margin:0;
  gap:10px;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:22px 18px 48px;
}

.page-title{
  margin:10px 0 6px;
  font-size:26px;
}

.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
}

.card{
  display:block;
  text-decoration:none;
  color:var(--txt);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  padding:18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 220px at 30% 0%, rgba(255,77,0,0.20), transparent 58%);
  opacity:0.0;
  transition: opacity .14s ease;
  pointer-events:none;
}

.card-glow{
  position:absolute;
  inset:-2px;
  border-radius:18px;
  pointer-events:none;
  opacity:0;
  filter: blur(16px);
  background: radial-gradient(420px 180px at 20% 20%, rgba(255,77,0,0.35), transparent 60%);
  transition: opacity .14s ease;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,77,0,0.38);
  box-shadow: 0 22px 75px rgba(255,77,0,0.12);
  filter: saturate(1.03);
}
.card:hover::before{opacity:1}
.card:hover .card-glow{opacity:1}

.card:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,77,0,0.22), 0 0 0 1px rgba(255,77,0,0.22) inset, var(--shadow2);
}

.card-title{
  font-weight:900;
  letter-spacing:0.6px;
}
.card-desc{
  margin-top:8px;
  color:var(--muted);
}
.card-cta{
  margin-top:14px;
  color: rgba(255,77,0,0.95);
  font-weight:800;
}

/* ===== Forms (login) ===== */
.neo-form{
  margin-top:14px;
  position:relative;
  z-index:1;
}

.neo-form .field{
  margin-top:12px;
}

.neo-form label{
  display:block;
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color: rgba(243,245,255,0.78);
}

.neo-form select,
.neo-form input{
  width:100%;
  border-radius:12px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: var(--txt);
  outline:none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease, transform .14s ease;
}

.neo-form .neo-select{
  position:relative;
}

.neo-form .neo-select::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid rgba(255,141,92,0.95);
  border-bottom:2px solid rgba(255,141,92,0.95);
  transform: translateY(-62%) rotate(45deg);
  pointer-events:none;
  transition: border-color .14s ease, filter .14s ease;
}

.neo-form .neo-select select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  border-color: rgba(255,77,0,0.24);
  background:
    linear-gradient(180deg, rgba(255,110,52,0.08), rgba(0,0,0,0.26)),
    rgba(0,0,0,0.22);
}

.neo-form .neo-select select:hover{
  border-color: rgba(255,77,0,0.34);
  box-shadow: 0 10px 24px rgba(255,77,0,0.10);
}

.neo-form .neo-select:focus-within::after{
  border-color: rgba(255,173,131,0.98);
  filter: drop-shadow(0 0 6px rgba(255,77,0,0.35));
}

.neo-form .neo-select select option{
  background:#11131b;
  color:var(--txt);
}

.neo-form input::placeholder{
  color: rgba(167,173,191,0.65);
}

.neo-form select:focus,
.neo-form input:focus{
  border-color: rgba(255,77,0,0.42);
  box-shadow: 0 0 0 3px rgba(255,77,0,0.18);
  background: rgba(0,0,0,0.28);
}

.neo-form .input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.neo-form .icon-btn{
  flex:0 0 auto;
  height:44px;
  width:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}

.neo-form .icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,77,0,0.32);
  filter: brightness(1.06);
}

.neo-form .icon-btn:active{
  transform: translateY(0px);
}

.alert{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,77,0,0.30);
  background: rgba(255,77,0,0.10);
}

.alert--error,
.alert-error{
  color: rgba(255,205,200,0.95);
}

.alert-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background: rgba(255,77,0,0.95);
  margin-right:8px;
  box-shadow: 0 0 14px rgba(255,77,0,0.35);
}

/* --- tables & ui helpers --- */
.nav { display: flex; gap: 10px; margin-left: 18px; }
.nav-link { color: rgba(255,255,255,.8); text-decoration: none; font-size: 14px; }
.nav-link:hover { text-decoration: underline; }

.topbar-right { display: flex; gap: 12px; align-items: center; }

.toolbar { margin: 18px 0; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { min-width: 180px; }

.panel { margin: 18px 0; padding: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(0,0,0,.12); }

.form-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px; }
.form-grid textarea { grid-column: 1 / -1; min-height: 88px; resize: vertical; }

.table-wrap { overflow: auto; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.row-actions { white-space: nowrap; }

.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); font-size: 12px; }

.flash { padding: 10px 12px; border-radius: 12px; margin: 10px 0 18px; border: 1px solid rgba(255,255,255,.12); }
.flash.ok { background: rgba(0,255,120,.10); }
.flash.err { background: rgba(255,60,60,.12); }

/* ===== compact toolbar / filters ===== */
.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}

/* MUY IMPORTANTE: tu CSS actual pone .btn { width:100% }.
   Eso hace el botón gigante dentro del form. Lo anulamos acá: */
.toolbar .btn {
  width: auto !important;
}

.filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.filters input,
.filters select {
  width: 170px;
  height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
}

.filters-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.btn-sm {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-top: 0 !important; /* pisa margin-top:16px del btn-primary */
}

/* ===== modal ===== */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.modal.is-open { display: block; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  max-width: 820px;
  margin: 52px auto;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  padding: 16px;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 6px 12px;
}

.modal-title { font-weight: 900; letter-spacing: .4px; }

.modal-body { padding: 0 6px 6px; }

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

/* ===== items editor ===== */
.items-editor{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}

.items-editor table{ width:100%; border-collapse: collapse; }
.items-editor th, .items-editor td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.items-editor input{
  width:100%;
  height: 38px;
  border-radius:10px;
  padding:8px 10px;
}

.items-editor .qty{ width: 120px; }

/* ===== Mejor contraste en formularios de ALTA (modal) ===== */

/* Contenedor del form dentro del modal */
.modal-card .neo-form{
  background: rgba(0,0,0,0.72);              /* menos transparente */
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

/* Inputs/select/textarea dentro del modal */
.modal-card input,
.modal-card select,
.modal-card textarea{
  background: rgba(12, 12, 16, 0.78);        /* sube opacidad */
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(243,245,255,0.92);
}

/* Placeholder más visible */
.modal-card input::placeholder,
.modal-card textarea::placeholder{
  color: rgba(167,173,191,0.80);
}

/* Labels un poco más claros */
.modal-card label{
  color: rgba(243,245,255,0.82);
}

/* Encabezado del modal un poco más sólido */
.modal-card{
  background: rgba(0,0,0,0.70);              /* sube opacidad */
  border: 1px solid rgba(255,255,255,0.14);
}

.row-actions-inline{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:nowrap;
}

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

.modal-card .field label{
  display:block;
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(243,245,255,0.78);
}

/* Compras: filtros en encabezado */
.table-filter{
  width: 100%;
  min-width: 140px;
  margin-top: 6px;
  height: 34px;
  border-radius: 8px;
  background: rgba(12,12,16,.85);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(243,245,255,.92);
  padding: 6px 8px;
}

.table-filter-actions{
  margin-top: 6px;
  display:flex;
  gap:8px;
}

.compra-form-grid{
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

/* Mejor estética para selector SKU en items */
.items-editor select{
  width: 100%;
  height: 38px;
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(18,20,28,.95), rgba(10,11,16,.95));
  border: 1px solid rgba(255,120,40,.45);
  color: rgba(245,247,255,.96);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.82) 50%),
    linear-gradient(135deg, rgba(255,255,255,.82) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.items-editor select:focus{
  outline: none;
  border-color: rgba(255,122,26,.75);
  box-shadow: 0 0 0 2px rgba(255,122,26,.18);
}

.items-editor select option{
  background: #0f1118;
  color: #f3f5ff;
}


.json-preview{
  margin:0;
  max-height:420px;
  overflow:auto;
  padding:12px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  background: rgba(0,0,0,0.25);
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--txt);
}