/* brand.css — sistema de diseño de Operation Hub.
   Paleta "cabaña al atardecer" (misma identidad de casas-sm.html) ejecutada
   como panel operativo: la información se escanea, no se lee de corrido —
   el estado debe reconocerse por forma y color, no solo por texto. */

:root{
  /* ---- superficie ---- */
  --pine:#16261F;
  --pine-light:#213627;
  --cedar:#8B4F2D;
  --cedar-light:#A8643E;
  --embers:#D98942;
  --embers-light:#F0A968;
  --parchment:#FBF7EF;
  --surface:#FFFFFF;
  --surface-sunken:#F4EEE2;
  --border:#E7DFCE;
  --ink:#231D16;
  --ink-soft:rgba(35,29,22,.62);
  --ink-faint:rgba(35,29,22,.4);
  --white:#FFFFFF;

  /* ---- semántico: separado del acento, no lo sustituye ---- */
  --good:#4F7A54;
  --good-bg:#E7F0E4;
  --warn:#B87A2E;
  --warn-bg:#FBEEDA;
  --critical:#B3462C;
  --critical-bg:#F7E1D8;
  --info:#3E5C6B;
  --info-bg:#E5EEF1;
  --cedar-bg:#F3E5D8;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'Space Mono', monospace;

  /* ---- escala tipográfica ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.875rem;
  --text-2xl: 2.375rem;

  --container: 1280px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(35,29,22,.06), 0 1px 1px rgba(35,29,22,.04);
  --shadow-md: 0 8px 24px -8px rgba(35,29,22,.16), 0 2px 6px -2px rgba(35,29,22,.08);
  --shadow-lg: 0 24px 48px -16px rgba(22,38,31,.28), 0 8px 16px -8px rgba(22,38,31,.12);

  --ease: cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --pine:#EDE7D8; --pine-light:#0E1712;
    --cedar:#D18F5E; --cedar-light:#E3AC80;
    --embers:#E39A57; --embers-light:#F0B47D;
    --parchment:#161310; --surface:#1E1A15; --surface-sunken:#252019;
    --border:#3A332A; --ink:#F1EBDF; --ink-soft:rgba(241,235,223,.66); --ink-faint:rgba(241,235,223,.42);
    --white:#161310;
    --good:#7FAE82; --good-bg:#1E2A1E;
    --warn:#D8A25C; --warn-bg:#2E2418;
    --critical:#E08165; --critical-bg:#2E1D16;
    --info:#8FB4C4; --info-bg:#1A2529;
    --cedar-bg:#2E2418;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.3);
    --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.6), 0 8px 16px -8px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --pine:#EDE7D8; --pine-light:#0E1712;
  --cedar:#D18F5E; --cedar-light:#E3AC80;
  --embers:#E39A57; --embers-light:#F0B47D;
  --parchment:#161310; --surface:#1E1A15; --surface-sunken:#252019;
  --border:#3A332A; --ink:#F1EBDF; --ink-soft:rgba(241,235,223,.66); --ink-faint:rgba(241,235,223,.42);
  --white:#161310;
  --good:#7FAE82; --good-bg:#1E2A1E;
  --warn:#D8A25C; --warn-bg:#2E2418;
  --critical:#E08165; --critical-bg:#2E1D16;
  --info:#8FB4C4; --info-bg:#1A2529;
  --cedar-bg:#2E2418;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 48px -16px rgba(0,0,0,.6), 0 8px 16px -8px rgba(0,0,0,.4);
}
:root[data-theme="light"]{
  --pine:#16261F; --pine-light:#213627;
  --cedar:#8B4F2D; --cedar-light:#A8643E;
  --embers:#D98942; --embers-light:#F0A968;
  --parchment:#FBF7EF; --surface:#FFFFFF; --surface-sunken:#F4EEE2;
  --border:#E7DFCE; --ink:#231D16; --ink-soft:rgba(35,29,22,.62); --ink-faint:rgba(35,29,22,.4);
  --white:#FFFFFF;
  --good:#4F7A54; --good-bg:#E7F0E4;
  --warn:#B87A2E; --warn-bg:#FBEEDA;
  --critical:#B3462C; --critical-bg:#F7E1D8;
  --info:#3E5C6B; --info-bg:#E5EEF1;
  --cedar-bg:#F3E5D8;
}

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
input,select,textarea{ font:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  font-family:var(--font-body);
  background:var(--parchment);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background .2s var(--ease), color .2s var(--ease);
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cedar);
  font-weight:700;
}

h1,h2,h3{ font-family:var(--font-display); color:var(--pine); text-wrap:balance; letter-spacing:-.01em; }
h1{ font-size:var(--text-2xl); font-weight:600; }
h2{ font-size:var(--text-xl); font-weight:600; }
h3{ font-size:var(--text-md); font-weight:600; }

/* ---- Topbar ---- */
.topbar{
  background:var(--pine);
  color:#FBF7EF;
  position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow-sm);
}
:root[data-theme="dark"] .topbar{ background:var(--surface); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .topbar{ background:var(--surface); } }
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:15px; padding-bottom:15px;
  gap:20px;
}
.topbar .brand{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.22rem;
  display:flex; align-items:center; gap:9px;
  color:#FBF7EF;
  letter-spacing:-.01em;
}
.topbar .brand .dot{
  width:8px; height:8px; border-radius:50%; background:var(--embers);
  box-shadow:0 0 0 3px rgba(217,137,66,.22);
}
.topbar nav{ display:flex; gap:2px; flex-wrap:wrap; }
.topbar nav a{
  padding:8px 16px; border-radius:999px; font-weight:500; font-size:var(--text-sm);
  color:rgba(251,247,239,.66);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.topbar nav a:hover{ color:#FBF7EF; background:rgba(251,247,239,.08); }
.topbar nav a.active{ color:var(--pine); background:var(--embers); font-weight:600; }
:root[data-theme="dark"] .topbar nav a.active{ color:var(--surface); }
.topbar .userbox{ display:flex; align-items:center; gap:14px; font-size:var(--text-sm); color:rgba(251,247,239,.72); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:var(--text-sm);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--embers); color:var(--white); box-shadow:0 4px 14px -4px rgba(217,137,66,.55); }
.btn-primary:hover{ background:var(--embers-light); transform:translateY(-1px); box-shadow:0 6px 18px -4px rgba(217,137,66,.6); }
.btn-primary:active{ transform:translateY(0); }
.btn-outline{ background:transparent; color:var(--pine); border:1.5px solid var(--border); }
.btn-outline:hover{ border-color:var(--pine); background:var(--surface-sunken); }
.btn-ghost{ background:transparent; color:var(--cedar); border:1.5px solid transparent; }
.btn-ghost:hover{ background:var(--surface-sunken); border-color:var(--border); }
.btn-danger{ background:var(--critical); color:var(--white); }
.btn-danger:hover{ filter:brightness(1.08); }
.btn-sm{ padding:7px 15px; font-size:var(--text-xs); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

:focus-visible{ outline:2.5px solid var(--embers); outline-offset:2px; border-radius:4px; }

/* ---- Cards ---- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}

/* ---- Status: color + shape, never color alone ---- */
.status-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:999px;
  font-size:var(--text-xs); font-weight:700; letter-spacing:.02em;
  font-family:var(--font-mono);
  text-transform:uppercase;
}
.status-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.status--lista{ background:var(--good-bg); color:var(--good); }
.status--ocupada{ background:var(--info-bg); color:var(--info); }
.status--sucia{ background:var(--warn-bg); color:var(--warn); }
.status--en_mantenimiento{ background:var(--critical-bg); color:var(--critical); }
.status--en_mantenimiento::before{ border-radius:2px; } /* triángulo visual vía forma distinta = urgencia */
.status--upcoming{ background:var(--cedar-bg); color:var(--cedar); }

.priority--baja{ color:var(--good); }
.priority--media{ color:var(--cedar); }
.priority--alta{ color:var(--warn); font-weight:700; }
.priority--urgente{ color:var(--critical); font-weight:700; }
.priority--urgente::before{ content:'● '; }

/* ---- Forms ---- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:var(--text-xs); font-weight:600; color:var(--pine); letter-spacing:.01em; }
.field input, .field select, .field textarea{
  padding:10px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
  font-size:var(--text-base);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--embers); outline:none; box-shadow:0 0 0 3px rgba(217,137,66,.14);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }

/* ---- Layout helpers ---- */
.page-head{ padding:36px 0 26px; }
.page-head h1{ font-size:clamp(1.7rem, 3vw, var(--text-2xl)); }
.page-head p{ color:var(--ink-soft); margin-top:7px; font-size:var(--text-base); }

.grid{ display:grid; gap:18px; }
.grid-kanban{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); align-items:start; }

.empty-state{
  padding:44px 20px; text-align:center; color:var(--ink-faint);
  border:1.5px dashed var(--border); border-radius:var(--radius);
  font-size:var(--text-sm);
}

.toast{
  position:fixed; bottom:22px; right:22px; z-index:500;
  background:var(--pine); color:var(--parchment); padding:13px 20px;
  border-radius:var(--radius-sm); font-size:var(--text-sm); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(8px) scale(.98); transition:opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0) scale(1); }
.toast.error{ background:var(--critical); }

/* ---- Entrance ---- */
@keyframes rise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.rise{ animation:rise .35s var(--ease) both; }

@media (max-width: 640px){
  .topbar .container{ flex-direction:column; align-items:flex-start; gap:12px; }
  .topbar nav{ width:100%; }
}