/* ============================================================================
   Service System — sistema de diseño compartido
   Tema "taller": fondo cálido oscuro, amarillo señalética, acento óxido.
   ========================================================================== */

:root{
  color-scheme: dark;

  --bg:#141310;
  --bg-2:#1b1915;
  --surface:#201e18;
  --surface-2:#29261f;
  --surface-3:#322e25;
  --border:#3b372e;
  --border-strong:#4a4539;

  --text:#F4F1E8;
  --text-muted:#A79F8E;
  --text-dim:#7f7768;

  --brand:#F0B429;
  --brand-2:#f6c85a;
  --brand-ink:#141310;

  --rust:#D5602C;
  --rust-fg:#f0906a;
  --rust-bg:#2c1a12;

  --green:#57A968;
  --green-fg:#8fd39c;
  --green-bg:#1c2a1e;

  --amber:#D6A500;
  --amber-fg:#e8c25f;
  --amber-bg:#2a2513;

  --wa:#25D366;
  --wa-ink:#08150d;

  --radius:14px;
  --radius-sm:9px;
  --radius-xs:6px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 6px 20px -10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 30px 70px -24px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(240,180,41,.30);

  --ease:cubic-bezier(.4,0,.2,1);
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-head:'Oswald',var(--font);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 50% -8%, var(--bg-2), transparent 70%),
    linear-gradient(180deg, rgba(240,180,41,.03), transparent 240px);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--font-head); letter-spacing:.3px; font-weight:600;}
h1{font-weight:700; letter-spacing:-.01em;}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background:rgba(240,180,41,.28);}

/* micro-etiqueta tipo "[ TEXTO ]" antes de un título de sección */
.kicker{
  display:block; font-family:var(--font-head); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
  margin:0 0 8px;
}

/* franja de seguridad — motivo de taller, arriba de cada página */
.hazard-bar{
  height:4px;
  background:repeating-linear-gradient(45deg, var(--brand) 0 10px, var(--brand-ink) 10px 20px);
}

[hidden]{display:none !important;}
.hidden{display:none !important;}

/* ------------------------------------------------------------------ layout */
.page{max-width:960px; margin:0 auto; padding:32px 24px 72px;}
.page--narrow{max-width:540px;}
.page--client{max-width:480px; padding-top:26px;}

.stack{display:flex; flex-direction:column; gap:22px;}
.row{display:flex; gap:20px; flex-wrap:wrap;}
.row > *{flex:1; min-width:240px;}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 24px;
  background:rgba(27,25,21,.78);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--brand), rgba(240,180,41,0) 55%);
}
.topbar__actions{display:flex; align-items:center; gap:10px;}
a.btn:hover{text-decoration:none;}
.brand{display:flex; align-items:center; gap:12px; min-width:0;}
.brand__mark{
  width:36px; height:36px; flex-shrink:0;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:16px;
  color:var(--brand-ink);
  background:linear-gradient(145deg, var(--brand-2), var(--brand));
  box-shadow:0 2px 12px -2px rgba(240,180,41,.5);
}
.brand__name{font-size:18px; margin:0; line-height:1.15;}
.brand__sub{display:block; font-size:12px; color:var(--text-muted); margin-top:1px;}

/* ------------------------------------------------------------------ card */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
}
.card:hover{transform:translateY(-1px); box-shadow:var(--shadow);}
.card__title{
  font-size:15px; margin:0 0 16px;
  display:flex; align-items:center; gap:9px;
}
.card--sub{background:var(--surface-2); border-radius:var(--radius-sm); padding:18px;}

/* zona = bloque temático con borde de color a la izquierda */
.zona{
  border:1px solid var(--border);
  border-left:4px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--surface);
  padding:20px 22px;
}
.zona--cliente{border-left-color:var(--brand);}
.zona--service{border-left-color:var(--rust);}
.zona--taller{border-left-color:var(--text-dim); background:var(--surface-2);}
.zona__title{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted);
  margin-bottom:16px;
}
.zona__title .icon{font-size:16px; display:inline-flex;}
.icon svg{display:block; width:1em; height:1em;}
.card__title .icon{display:inline-flex; margin-right:2px;}

/* ------------------------------------------------------------------ forms */
label{
  display:block; font-size:12px; font-weight:500; letter-spacing:.2px;
  color:var(--text-muted); margin:14px 0 6px;
}
label:first-of-type{margin-top:0;}

input,select,textarea{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:11px 13px;
  border-radius:var(--radius-xs);
  font-size:16px;
  font-family:inherit;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--text-dim);}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:var(--ring);
}
textarea{resize:vertical; min-height:84px;}
select{appearance:none; background-image:
  linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
  linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px;}

/* ------------------------------------------------------------------ buttons */
.btn{
  --_bg:var(--surface-2);
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:14px; font-weight:600;
  padding:12px 20px; min-height:46px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--text);
  transition:transform .12s var(--ease), box-shadow .2s var(--ease),
             background .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease);
}
.btn:hover{background:var(--surface-3); border-color:var(--border-strong);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}

.btn--primary{
  border-color:transparent; color:var(--brand-ink);
  background:linear-gradient(145deg, var(--brand-2), var(--brand));
  box-shadow:0 2px 14px -5px rgba(240,180,41,.6);
}
.btn--primary:hover{
  background:linear-gradient(145deg, var(--brand-2), var(--brand));
  filter:brightness(1.05); border-color:transparent;
  box-shadow:0 8px 22px -8px rgba(240,180,41,.65); transform:translateY(-1px);
}
.btn--primary:disabled{filter:grayscale(.4) brightness(.85); box-shadow:none; transform:none;}

.btn--danger{border-color:var(--rust); color:var(--rust-fg); background:transparent;}
.btn--danger:hover{background:var(--rust-bg); border-color:var(--rust);}

.btn--wa{
  border-color:transparent; color:var(--wa-ink);
  background:linear-gradient(145deg, #2fe07a, var(--wa));
  box-shadow:0 2px 14px -5px rgba(37,211,102,.55);
}
.btn--wa:hover{filter:brightness(1.05); border-color:transparent; transform:translateY(-1px);}

.btn--sm{min-height:0; padding:7px 12px; font-size:12px; font-weight:600;}
.btn--block{width:100%;}

.btn-row{display:flex; gap:10px; flex-wrap:wrap;}

/* ------------------------------------------------------------------ messages */
.msg{
  font-size:13px; line-height:1.5;
  padding:11px 14px; border-radius:var(--radius-xs);
  border:1px solid transparent;
}
.msg + .msg{margin-top:10px;}
.msg p{margin:0;}
.msg p + p, .msg p + a{margin-top:8px;}
.msg--error{background:var(--rust-bg); color:var(--rust-fg); border-color:rgba(213,96,44,.35);}
.msg--ok{background:var(--green-bg); color:var(--green-fg); border-color:rgba(87,169,104,.3);}
.msg--warn{background:var(--amber-bg); color:var(--amber-fg); border-color:rgba(214,165,0,.3);}

/* ------------------------------------------------------------------ pills */
.pill{
  display:inline-block; font-size:10.5px; font-weight:600;
  letter-spacing:.4px; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.pill--ok{background:var(--green-bg); color:var(--green-fg);}
.pill--warn{background:var(--amber-bg); color:var(--amber-fg);}
.pill--bad{background:var(--rust-bg); color:var(--rust-fg);}
.pill--muted{background:var(--surface-3); color:var(--text-muted);}

/* ------------------------------------------------------------------ misc */
.muted{color:var(--text-muted);}
.dim{color:var(--text-dim);}
.tiny{font-size:12px;}

@media (min-width:641px){
  .stack{gap:28px;}
}

@media (max-width:640px){
  .page{padding:22px 15px 56px;}
  .topbar{padding:13px 16px;}
  .card{padding:18px;}
  .zona{padding:16px 16px 6px;}
  .row > *{min-width:100%;}
  .btn--auto-block{width:100%;}
}