:root{
  /* Paleta corporativa */
  --blue: #002e5f;
  --orange: #f44516;

  /* ===== Modo noche por defecto ===== */
  --bg:#0B1220;
  --card:#0F182A;
  --text:#E6E7EB;
  --muted:#a9b3c3;
  --border:#1C2740;
  --ring:#f4451626;

  /* Accentos y enlaces solo noche */
  --link:#3B82F6;
  --link-hover:#60A5FA;

  /* Sizing */
  --control-h: 48px;
  --radius: 12px;
  --gap: 10px;

  --shadow-1: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  --btn-shadow: 0 6px 18px rgba(244,69,22,.35);
  --btn-sec-shadow: 0 6px 18px rgba(0,46,95,.35);

  /* HUD offset para no tapar el footer */
  --hud-offset: 56px;

  /* Alturas mínimas de card según modo */
  --card-minh-default: 340px;
  --card-minh-admin:   520px;
}

/* ===== Overlay variables para modo claro ===== */
body[data-theme="light"]{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#556178;
  --border:#e5e7eb;
  --ring:#f4451633;

  --link:#0b5bd3;
  --link-hover:#3984ff;

  --shadow-1: 0 10px 30px rgba(0,0,0,.08);
  --btn-shadow: 0 6px 16px rgba(244,69,22,.28);
  --btn-sec-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* ===== Utilidades de visibilidad por tema ===== */
.light-only { display: inline-block; }
.dark-only  { display: none; }
:is(html, body)[data-theme="dark"] .light-only { display: none !important; }
:is(html, body)[data-theme="dark"] .dark-only  { display: inline-block !important; }

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1100px 520px at 10% -10%, #0a233d 0%, transparent 60%),
    radial-gradient(900px 420px at 110% 10%, #082743 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  display:grid; place-items:center;
  padding:24px;
  transition: background .45s ease, color .25s ease;
}
body[data-theme="light"]{ background:#fff; }

.shell{ width:min(760px, 92vw); }

.card{
  position:relative;
  background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 85%, #000 15%));
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 18px 22px;
  box-shadow:var(--shadow-1);
  overflow:hidden;
  transition: background .35s ease, border-color .25s ease, box-shadow .35s ease, min-height .35s ease;
  min-height: var(--card-minh, var(--card-minh-default));
}

/* Resize automático por modo */
.card[data-mode="admin"]{ --card-minh: var(--card-minh-admin); }
.card:not([data-mode="admin"]){ --card-minh: var(--card-minh-default); }

body[data-theme="light"] .card{ background:#fff; }

/* Header con logos */
.brandbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 4px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:14px
}
body[data-theme="light"] .brandbar{ border-bottom:1px solid var(--border); }
.brandbar .brand{display:flex;align-items:center;gap:10px;min-height:42px}
.brandbar .title{font-size:18px;font-weight:600;letter-spacing:.2px}
.brandbar .logo { height:32px; width:auto; object-fit:contain; }

/* Panels */
.stage{ perspective:1200px; }
.panels{ position:relative; transition:height .6s ease; will-change:height; min-height:260px; overflow:hidden }
.panel{
  position:absolute; inset:0;
  padding:18px 8px 4px;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transform-origin:50% 50%;
  transform:rotateY(90deg);
  opacity:0; pointer-events:none;
  transition:transform .75s cubic-bezier(.2,.7,.1,1), opacity .6s ease;
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.panel.active{ transform:rotateY(0); opacity:1; pointer-events:auto; }
.panel.leave-left{ transform:rotateY(-90deg); opacity:0 }
.panel.leave-right{ transform:rotateY(90deg);  opacity:0 }
.panel.from-right{ transform:rotateY(90deg);   opacity:0 }
.panel.from-left{  transform:rotateY(-90deg);  opacity:0 }

/* Tipografía y layout */
h2{ margin:0 0 12px; font-size:20px; font-weight:600 }
p, label, small{ color:var(--muted); transition: color .25s ease }
label{ display:block; margin:8px 0 6px; font-size:13px; color:color-mix(in srgb, var(--muted) 35%, var(--text) 65%) }

.row{  display:grid;  gap:var(--gap); grid-template-columns:1fr 158px; align-items:center }
.stack{ display:grid; gap:10px }

/* Controles */
input, .btn{
  height:var(--control-h);
  border-radius:var(--radius);
  font:inherit;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease, background .25s ease, color .25s ease;
}
input{
  width:100%;
  border:1px solid #243247;
  background:#0a1626;
  color:#f3f6fb;
  padding:0 14px;
}
input::placeholder{ color:#7f8ba0 }
input:focus{ box-shadow:0 0 0 4px var(--ring); border-color:var(--orange) }
body[data-theme="light"] input{ background:#fff; border:1px solid var(--border); color:#111827 }
body[data-theme="light"] input::placeholder{ color:#9aa3b2 }

/* Botón primario */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 16px; border:0; cursor:pointer; color:#fff;
  background: linear-gradient(180deg, #ff6a3a, var(--orange));
  box-shadow: var(--btn-shadow);
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.99) }

/* Botón secundario */
.btn.secondary{
  background: linear-gradient(180deg, #073458, var(--blue));
  box-shadow: var(--btn-sec-shadow);
}
body[data-theme="light"] .btn.secondary{
  background:#ffffff; color:var(--orange);
  border:1px solid color-mix(in srgb, var(--orange) 60%, #000 0%);
  box-shadow:none;
}

/* AA noche */
:is(html, body)[data-theme="dark"] .btn{
  background: linear-gradient(180deg, #ff5a2b, #DC3A0E);
  color:#fff;
  box-shadow: 0 6px 18px rgba(220,58,14,.35);
}
:is(html, body)[data-theme="dark"] .btn.secondary{
  background: linear-gradient(180deg, #23476d, #1E3A5F);
  color:#fff;
  box-shadow: 0 6px 18px rgba(30,58,95,.35);
}

.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none }

.hint{ margin-top:6px; color:#99a7bd; font-size:12px }
body[data-theme="light"] .hint{ color:#6b7280 }
.msg{ margin-top:8px; color:#9aa7bd; min-height:18px }
body[data-theme="light"] .msg{ color:#6b7280 }

/* Listado de contratos */
.contracts{ display:grid; gap:12px }
.contract-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; border:1px solid var(--border); border-radius:12px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
}
.contract-row .name{ font-weight:600 }

/* Badges de estado */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid transparent;
}
.badge.warn{ background:#fff7e6; color:#a15a00; border-color:#f7d9a8 }
.badge.pending{ background:#fff0ec; color:#b43716; border-color:#f4b39f }
.badge.success{ background:#e7f7ef; color:#116b43; border-color:#bfe7d2 }
.badge.muted{ background:#eef2f7; color:#5e6a7e; border-color:#dde3eb }
:is(html, body)[data-theme="dark"] .badge.warn{ background:#2a1f11; color:#ffcd7b; border-color:#563a18 }
:is(html, body)[data-theme="dark"] .badge.pending{ background:#2a1410; color:#ff9d80; border-color:#5a2c22 }
:is(html, body)[data-theme="dark"] .badge.success{ background:#12261b; color:#7de0b3; border-color:#1f3c2c }
:is(html, body)[data-theme="dark"] .badge.muted{ background:#16202c; color:#a9b3c3; border-color:#233244 }

/* Firma */
.sig-wrap{ margin:8px 0 12px; }
#firma{
  display:block;
  width:100%;
  height:180px;
  background:#0a1626;
  border:1px dashed #31425c; border-radius:var(--radius);
  transition: background .25s ease, border-color .25s ease;
}
body[data-theme="light"] #firma{ background:#ffffff; border-color:#e2e8f0; }

.sig-head{
  display:flex; align-items:center; justify-content:space-between; margin:6px 0 6px
}
.sig-head a{ color:var(--orange); text-decoration:none; font-weight:700 }
:is(html, body)[data-theme="dark"] .sig-head a{ color:var(--link); }
:is(html, body)[data-theme="dark"] .sig-head a:hover{ color:var(--link-hover); }

.toolbar{ display:flex; gap:var(--gap); flex-wrap:wrap; align-items:center }

/* Footer */
.foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px }
.foot small{ font-size:12px }

/* Toggle de tema flotante */
.theme-toggle{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 10px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
  cursor:pointer;
  user-select:none;
}
.theme-toggle .switch{
  position:relative; width:64px; height:34px;
  border-radius:999px;
  background: color-mix(in srgb, #0b2845 70%, #0a1626 30%);
  transition: background .35s ease, border-color .25s ease;
  border:1px solid #223049;
}
body[data-theme="light"] .theme-toggle .switch{ background:#ffe7df; border-color:#ffd1c2 }
.theme-toggle .knob{
  position:absolute; top:3px; left:3px;
  width:28px; height:28px; border-radius:50%;
  background:#ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transform: translateX(0) rotateY(0deg);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.7,.1,1), box-shadow .25s ease, background .25s ease;
  will-change: transform;
}
body[data-theme="light"] .theme-toggle .knob{
  transform: translateX(30px) rotateY(180deg);
  box-shadow: 0 4px 12px rgba(244,69,22,.35);
  background: #fff8f6;
}
.theme-toggle .icon{ width:16px; height:16px; display:inline-block; opacity:.8 }
.theme-toggle .icon svg{ width:100%; height:100%; display:block }
:is(html, body)[data-theme="dark"] .theme-toggle{ color:#E6E7EB; }
.theme-toggle:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--ring) }

.linklike{
  background:none;border:0;padding:0;
  color:var(--orange);cursor:pointer;
  text-decoration:underline;
  font:inherit;
}

/* Bloque admin animado */
.pass-wrap{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
  margin-top:10px;
  will-change: max-height, opacity, transform;
}
.pass-wrap.open{ max-height:220px; opacity:1; transform: translateY(0); }
.pass-actions{ display:flex; gap:10px; margin-top:8px }
.hidden{ display:none !important; }

/* =========================
   HUD — indicador
   ========================= */
:root { --hud-offset: 56px; } 

.mode-hud{
  position:absolute;
  right:12px;
  bottom: var(--hud-offset);
  background: transparent;
  border: 0;
  padding: 0;
  pointer-events: none;          
  outline: 0;
}

/* Contenedor 3D que rota */
.mode-hud .mode-label{
  position: relative;
  display: inline-block;
  min-width: 92px;
  height: 28px;
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.2,.7,.1,1);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}


.mode-hud .pill{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; line-height:1;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}


.mode-hud .pill-cliente{
  transform: rotateY(0deg) translateZ(1px);
  background:#e7f7ef; color:#116b43; border-color:#bfe7d2;
}


.mode-hud .pill-admin{
  transform: rotateY(180deg) translateZ(1px);
  background:#fff0ec; color:#b43716; border-color:#f4b39f;
}

/* Tema oscuro */
:is(html, body)[data-theme="dark"] .mode-hud .pill-cliente{
  background:#12261b; color:#7de0b3; border-color:#1f3c2c;
}
:is(html, body)[data-theme="dark"] .mode-hud .pill-admin{
  background:#2a1410; color:#ff9d80; border-color:#5a2c22;
}


html[data-login-mode="admin"]   .mode-hud .mode-label{ transform: rotateY(180deg); }
html[data-login-mode="cliente"] .mode-hud .mode-label{ transform: rotateY(0deg); }