:root{
  --ink:#232323;
  --teal:#1F4B43;
  --teal-dark:#153731;
  --amber:#E2A33D;
  --amber-dark:#C6872A;
  --mist:#EFF1F0;
  --paper:#FBFAF8;
  --line:#DEDAD1;
  --danger:#B3432B;
  --ok:#3F7D58;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:'Inter',sans-serif;
  background:var(--mist);
  color:var(--ink);
  margin:0;
}
.font-display{ font-family:'Fraunces',serif; }

/* ---------- Estructura general ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:230px;
  flex-shrink:0;
  background:#fff;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.sidebar-marca{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:1.1rem 1rem;
  border-bottom:1px solid var(--line);
}
.sidebar-marca .escudo{
  width:36px; height:36px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600;
}
.sidebar-marca .nombre{ font-family:'Fraunces',serif; font-weight:600; line-height:1.1; font-size:.95rem; }
.sidebar-marca .subtitulo{ font-size:.72rem; color:#8a8a8a; }

.sidebar-nav{ padding:.75rem; flex:1; overflow-y:auto; }
.sidebar-nav a{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; margin-bottom:.15rem;
  border-radius:8px; text-decoration:none;
  color:#4b4b4b; font-size:.9rem; font-weight:500;
}
.sidebar-nav a:hover{ background:#e9ece9; }
.sidebar-nav a.activo{ background:var(--teal); color:#fff; }
.sidebar-nav .icono{ width:18px; text-align:center; }

.sidebar-pie{ padding:.9rem; border-top:1px solid var(--line); font-size:.8rem; }
.sidebar-pie .usuario{ font-weight:600; }
.sidebar-pie .rol{ color:#8a8a8a; font-size:.75rem; }
.sidebar-pie button{
  margin-top:.5rem; width:100%; padding:.4rem; font-size:.8rem;
  border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer;
}
.sidebar-pie button:hover{ background:#f2efe8; }

.contenido{ flex:1; padding:1.5rem; max-width:1400px; }

/* ---------- Componentes ---------- */
.tarjeta{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
}
.stitch{
  background-image: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  height:1px;
}
.btn-primario{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn-primario:hover{ background:var(--teal-dark); border-color:var(--teal-dark); color:#fff; }
.btn-ambar{ background:var(--amber); border-color:var(--amber); color:#1a1a1a; }
.btn-ambar:hover{ background:var(--amber-dark); border-color:var(--amber-dark); color:#1a1a1a; }
.texto-teal{ color:var(--teal); }

.chip-precio{
  border:1px solid var(--line); border-radius:999px; padding:.35rem .9rem;
  font-weight:600; font-size:.85rem; cursor:pointer; background:#fff; white-space:nowrap;
}
.chip-precio.activo{ background:var(--teal); color:#fff; border-color:var(--teal); }

.estado-punto{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.35rem; }
.estado-punto.abierta{ background:var(--ok); }
.estado-punto.cerrada{ background:var(--danger); }

.tabla-simple th{ font-size:.72rem; text-transform:none; color:#8a8a8a; border-bottom:1px solid var(--line); }
.tabla-simple td{ vertical-align:middle; border-bottom:1px solid var(--line); }

.pantalla-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--mist);
}
.tarjeta-login{ width:100%; max-width:380px; }

.vacio{
  text-align:center; padding:3rem 1.5rem; color:#8a8a8a;
}

@media (max-width: 860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; }
  .sidebar-nav{ display:flex; overflow-x:auto; padding:.5rem; flex:none; }
  .sidebar-nav a{ white-space:nowrap; margin-right:.25rem; margin-bottom:0; }
  .sidebar-pie{ display:none; }
  .contenido{ padding:1rem; }
}

#capa-carga{
  position:fixed; inset:0; background:rgba(255,255,255,.7);
  display:none; align-items:center; justify-content:center; z-index:2000;
  font-family:'Fraunces',serif;
}
#caja-alertas{ position:fixed; top:1rem; right:1rem; z-index:3000; width:320px; }