@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Figtree:wght@400;500;600;700&display=swap");

/* Paleta tomada del logo de By SK */
:root {
  --carbon: #1a1a1a;
  --carbon-2: #2c2c2c;
  --cabecera: #141414;
  --oro: #c9a84c;
  --oro-claro: #f0d080;
  --bronce: #a8722a;
  --oro-texto: #7a5a14;          /* dorado oscuro, legible sobre fondo claro */
  --degradado-oro: linear-gradient(135deg, #c9a84c 0%, #f0d080 50%, #a8722a 100%);

  /* nombres usados por el panel admin */
  --tinta: #1a1a1a;
  --tinta-2: #5a564b;
  --etiqueta: #c9a84c;
  --sello: #9a6a22;
  --piedra: #f2f2f0;
  --blanco: #ffffff;
  --linea: #dcdad3;
  --ok: #1f7a55;
  --vendido: #a23b2a;

  --radio: 12px;
  --display: Georgia, "Times New Roman", serif;
  --texto: "Figtree", system-ui, sans-serif;
  --codigo: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; }
dialog { margin: auto; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 1rem/1.55 var(--texto);
  color: var(--carbon);
  background: var(--piedra);
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.oculto { display: none !important; }

h1, h2, h3 { font-family: var(--display); line-height: 1.1; }
.codigo { font-family: var(--codigo); font-size: .82rem; letter-spacing: .02em; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 2px solid var(--carbon); background: var(--carbon); color: #fff;
  padding: .65rem 1.2rem; border-radius: 10px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: filter .12s ease, background .12s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn.claro { background: transparent; color: var(--carbon); }
.btn.claro:hover { background: rgba(26,26,26,.06); filter: none; }
.btn.sello { background: var(--sello); border-color: var(--sello); color: #fff; }
.btn.etiqueta, .btn.oro {
  background: var(--degradado-oro); border-color: var(--oro); color: var(--carbon); font-weight: 700;
}
.btn.chico { padding: .35rem .8rem; font-size: .9rem; border-radius: 8px; }

/* ---------- estados ---------- */
.estado {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; background: #fff; border: 1.5px solid var(--linea);
}
.estado.disponible { border-color: var(--ok); color: var(--ok); }
.estado.reservado { border-color: var(--bronce); color: var(--oro-texto); }
.estado.vendido { border-color: var(--vendido); color: var(--vendido); }

.sello-vendido {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: rgba(242,242,240,.55);
}
.sello-vendido span {
  rotate: -12deg; border: 3px solid var(--vendido); color: var(--vendido);
  font: italic 700 1.7rem/1 var(--display); padding: .3rem 1rem; border-radius: 6px;
  background: rgba(255,255,255,.88);
}

/* ---------- campos ---------- */
label.campo { display: grid; gap: .3rem; font-weight: 500; font-size: .92rem; }
.campo input, .campo select, .campo textarea {
  border: 1.5px solid var(--linea); background: #fff; border-radius: 10px;
  padding: .6rem .75rem; width: 100%;
}
.campo textarea { min-height: 84px; resize: vertical; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}