/* =========================================================
   APP THEME (COMPONENTES + LAYOUT)
   - NO define variables de theme
   - Usa las variables que ya existen en theme.css:
     --bg, --panel, --panel-2, --stroke, --txt, --muted, --heading,
     --brand, --brand-ink, --accent, --accent-ink, --ok, --warn, --danger
   ========================================================= */

/* ===========================
   RESET / BASE
   =========================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ min-height:100%; }

body{
  margin:0;
  font-family:"Inter","Segoe UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue",sans-serif;
  color:var(--txt);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{
  color: color-mix(in oklab, var(--brand), #fff 0%);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

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

/* Headings coherentes por theme */
h1,h2,h3{
  margin:0 0 .5rem;
  color:var(--heading);
  letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.04);
}
p{ margin:.35rem 0; }

/* ===========================
   BACKGROUND DECOR (Absolluty-friendly)
   =========================== */
.app-surface{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;

  /* En themes claros se ve suave; en absolluty queda tech */
  background:
    radial-gradient(1100px 640px at 50% -20%, color-mix(in oklab, var(--accent), transparent 75%), transparent 60%),
    radial-gradient(900px 520px at 12% 12%, color-mix(in oklab, var(--brand), transparent 82%), transparent 45%),
    var(--bg);
}

.app-surface__glow,
.app-surface__grid{
  position:absolute;
  inset:0;
  display:block;
}

.app-surface__glow{
  background:
    radial-gradient(900px 520px at 80% -10%, color-mix(in oklab, var(--brand), transparent 70%), transparent 55%),
    radial-gradient(900px 520px at -20% 45%, color-mix(in oklab, var(--accent), transparent 80%), transparent 60%);
  filter: blur(70px);
  opacity:.9;
}

.app-surface__grid{
  opacity:.12;
  background-image:
    linear-gradient(90deg, color-mix(in oklab, var(--stroke), transparent 55%) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in oklab, var(--stroke), transparent 55%) 1px, transparent 1px);
  background-size:120px 120px;
}

/* ===========================
   LAYOUT SHELL
   =========================== */
.app-shell{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding: clamp(18px, 3vw, 36px) clamp(18px, 4vw, 48px);
}

.app-header,
.app-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.app-main{
  flex:1 1 auto;
  width:100%;
}

.app-footer{
  font-size:.9rem;
  color:var(--muted);
  border-top:1px solid color-mix(in oklab, var(--stroke), transparent 35%);
  padding-top:14px;
}
.app-footer a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:color-mix(in oklab, var(--stroke), transparent 35%);
}

/* ===========================
   CARD / PANEL
   =========================== */
.card{
  width:100%;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--panel);
  box-shadow:0 10px 26px rgba(15,23,42,.08);
  padding:18px;
}

.card + .card{ margin-top:16px; }

.card > *:first-child{ margin-top:0; }
.card > *:last-child{ margin-bottom:0; }

/* “Glass” opcional (si lo usás) */
.glass-panel{
  border-radius:18px;
  border:1px solid color-mix(in oklab, var(--stroke), transparent 15%);
  background: color-mix(in oklab, var(--panel), transparent 30%);
  backdrop-filter: blur(10px);
  padding:18px;
}

/* ===========================
   TOPBARS / TOOLBARS
   =========================== */
.top,
.topbar,
.pagebar,
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.top h1,
.topbar h1{
  margin:0;
  font-size:clamp(1.35rem, 1rem + 1vw, 2rem);
}

/* ===========================
   BUTTONS (compat con tus clases)
   =========================== */
.btn,
button,
input[type="submit"],
input[type="button"]{
  font-family:inherit;
  border-radius:12px;
  border:1px solid var(--stroke);
  padding:11px 14px;
  font-weight:700;
  cursor:pointer;
  transition:filter .12s ease, transform .06s ease, box-shadow .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--txt);
  background:var(--panel-2);
  text-decoration:none;
  line-height:1.1;
  touch-action:manipulation;
}

.btn:focus-visible,
button:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand), transparent 70%);
  outline-offset:2px;
}

.btn:hover{
  filter:brightness(1.04);
  box-shadow:0 10px 26px rgba(15,23,42,.10);
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--brand);
  color:var(--brand-ink);
  border:0;
  box-shadow:0 10px 24px color-mix(in oklab, var(--brand), transparent 75%);
}

.btn-outline{
  background:transparent;
  border-color:color-mix(in oklab, var(--stroke), #000 10%);
  color:var(--txt);
}

.btn-ghost{
  background:transparent;
  border-color:color-mix(in oklab, var(--stroke), transparent 45%);
  color:var(--txt);
}

.btn-danger{
  background: color-mix(in oklab, var(--danger), #000 18%);
  color:#fff;
  border:0;
  box-shadow:0 10px 24px color-mix(in oklab, var(--danger), transparent 75%);
}

.btn-success{
  background: color-mix(in oklab, var(--ok), #000 5%);
  color: var(--ok-ink);
  border:0;
  box-shadow:0 10px 24px color-mix(in oklab, var(--ok), transparent 75%);
}

.btn.full,
.btn[data-submit]{ width:100%; }

@media (min-width:680px){
  .btn.full{ width:auto; min-width:190px; }
}

/* ===========================
   INPUTS
   =========================== */
input, select, textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--stroke);
  padding:10px 12px;
  background:var(--panel-2);
  color:var(--txt);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--brand), #000 10%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand), transparent 82%);
}

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

/* ===========================
   GRID HELPERS
   =========================== */
.grid{ display:grid; gap:16px; }
.grid-2{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

/* ===========================
   TABLES
   =========================== */
.table-wrap,
.tbl-wrap{
  border-radius:16px;
  border:1px solid var(--stroke);
  overflow:auto;
  background:var(--panel);
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

table, .tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.95rem;
}

table thead th,
.tbl thead th{
  text-align:left;
  padding:12px 14px;
  background:var(--thead, color-mix(in oklab, var(--panel), var(--panel-2) 55%));
  color:var(--heading);
  font-weight:800;
  border-bottom:1px solid var(--stroke);
  position:sticky;
  top:0;
  z-index:2;
}

table tbody td,
.tbl tbody td{
  padding:12px 14px;
  border-bottom:1px solid color-mix(in oklab, var(--stroke), #000 6%);
  background:var(--panel);
  color:var(--txt);
}

table tbody tr:nth-child(even) td,
.tbl tbody tr:nth-child(even) td{
  background: color-mix(in oklab, var(--panel), var(--panel-2) 40%);
}

table tbody tr:hover td,
.tbl tbody tr:hover td{
  background: color-mix(in oklab, var(--brand), transparent 92%);
}

/* ===========================
   BADGES / PILLS / CHIPS
   =========================== */
.badge, .pill, .tag, .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:.78rem;
  padding:4px 10px;
  border:1px solid transparent;
  font-weight:800;
  gap:6px;
  line-height:1.1;
}

.badge{
  background: color-mix(in oklab, var(--panel-2), var(--panel) 20%);
  border-color: color-mix(in oklab, var(--stroke), transparent 20%);
  color:var(--txt);
}

.badge.st-entregado{ background: color-mix(in oklab, var(--ok), transparent 85%); border-color: color-mix(in oklab, var(--ok), transparent 55%); color: color-mix(in oklab, var(--ok), #000 20%); }
.badge.st-pendiente{ background: color-mix(in oklab, var(--warn), transparent 82%); border-color: color-mix(in oklab, var(--warn), transparent 55%); color: color-mix(in oklab, var(--warn), #000 30%); }
.badge.st-cancelado{ background: color-mix(in oklab, var(--danger), transparent 86%); border-color: color-mix(in oklab, var(--danger), transparent 55%); color: color-mix(in oklab, var(--danger), #000 25%); }

.pill{
  background: color-mix(in oklab, var(--accent), transparent 78%);
  border-color: color-mix(in oklab, var(--accent), transparent 55%);
  color: var(--accent-ink);
}

.chip{
  background: color-mix(in oklab, var(--brand), transparent 86%);
  border-color: color-mix(in oklab, var(--brand), transparent 65%);
  color: var(--brand-ink);
}

/* ===========================
   STATUS DOTS
   =========================== */
.status-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--muted);
  border:1px solid color-mix(in oklab, var(--stroke), transparent 35%);
}
.status-dot.warn{ background:var(--warn); border-color:var(--warn); }
.status-dot.danger{ background:var(--danger); border-color:var(--danger); }
.status-dot.ok{ background:var(--ok); border-color:var(--ok); }

/* ===========================
   WIZARD (Wizard Inicio + Auth)
   - Sin overrides por template
   - Se adapta a absolluty automáticamente
   =========================== */
.wizard-landing,
.wizard-shell,
.auth-wrap{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 16px;
}

/* contenedor “hero” del wizard (el panel grande) */
.wizard-hero{
  width:100%;
  max-width:1024px;
  border-radius:28px;
  padding:28px;
  border:1px solid color-mix(in oklab, var(--stroke), transparent 10%);
  background:
    linear-gradient(
      135deg,
      color-mix(in oklab, var(--accent), transparent 86%),
      color-mix(in oklab, var(--brand),  transparent 92%)
    );
  box-shadow:0 35px 80px rgba(15,23,42,.18);
}

/* header wizard */
.wizard-hero header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.wizard-hero p{ color:var(--muted); max-width:640px; }

.step-pill{
  padding:8px 14px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid color-mix(in oklab, var(--stroke), transparent 10%);
  color:var(--heading);
  font-weight:800;
  white-space:nowrap;
}

/* grid de roles */
.role-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:720px){
  .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:1024px){
  .role-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* cards de roles (oscuro cuando theme es oscuro, claro cuando theme es claro) */
.role-card{
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--panel);
  padding:18px;
  box-shadow:0 18px 35px rgba(15,23,42,.12);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.role-card h3{ margin:0; font-size:1.06rem; color:var(--heading); }

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

.role-card ul{
  margin:0;
  padding-left:1.1rem;
  color:var(--muted);
  display:grid;
  gap:4px;
  font-size:.95rem;
}
.role-card ul li{ list-style:disc; }

.role-card button,
.role-card a.btn{
  width:100%;
  justify-content:center;
}

/* iconito de rol */
.role-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background: color-mix(in oklab, var(--brand), #fff 82%);
  color: var(--brand-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  font-weight:900;
}

/* ADMIN centrado en desktop */
@media (min-width:1024px){
  .role-card-admin{
    grid-column:1 / -1;
    max-width:340px;
    justify-self:center;
  }
}

/* ===========================
   AUTH CARD (login)
   =========================== */
.auth-card,
.wizard-panel{
  width:100%;
  max-width:520px;
  background:var(--panel);
  border-radius:18px;
  padding:22px;
  border:1px solid var(--stroke);
  box-shadow:0 30px 60px rgba(15,23,42,.18);
}

/* ===========================
   MISC
   =========================== */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  background:var(--panel);
  border:1px solid var(--stroke);
  padding:14px;
  border-radius:16px;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}

.table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.list-inline{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0;
  margin:0;
  list-style:none;
}

/* evita overlays “click-through” si los tenés */
.overlay,
.loader,
[data-overlay]{
  pointer-events:none !important;
}

/* tap highlight */
*{ -webkit-tap-highlight-color:rgba(0,0,0,.12); }

/* ===========================
   Mensajes (si los usás)
   =========================== */
.msg-card-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; cursor:pointer;
}
.msg-title-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.msg-dot{
  width:10px; height:10px; border-radius:999px;
  background: color-mix(in oklab, var(--warn), #000 10%);
  flex-shrink:0;
}
.msg-dot.read{ opacity:.25; }
.msg-pill{
  font-size:.8rem;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--panel-2);
  color:var(--muted);
}
.msg-chevron{
  font-size:.9rem;
  color:var(--muted);
  transition:transform .18s ease;
}
.msg-chevron.open{ transform:rotate(90deg); }
.msg-list{
  list-style:none; margin:10px 0 0; padding:0;
  border-top:1px solid var(--stroke);
  display:none;
}
.msg-item{
  padding:10px 0;
  border-top:1px solid var(--stroke);
}
.msg-item.read .msg-text{ color:var(--muted); }
.msg-meta{ font-size:.82rem; color:var(--muted); margin-top:2px; }
.msg-text{ margin-top:6px; }