:root {
  --fondo: #f6f5f3;
  --papel: #ffffff;
  --tinta: #1d1b19;
  --suave: #6b665f;
  --linea: #e3dfd8;
  --acento: #9c2a1f;
  --acento-claro: #f6e7e4;
  --ok: #2f6b3a;
  --ok-claro: #e5f1e6;
  --aviso: #8a5a00;
  --aviso-claro: #fdf1d8;
  --error: #a3221b;
  --error-claro: #fbe4e2;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--acento); }
h1 { font-size: 1.6rem; margin: 0.4rem 0 0.3rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.4rem; }
.suave { color: var(--suave); }
code { font-size: 0.9em; background: #efece7; padding: 0.15em 0.4em; border-radius: 4px; word-break: break-all; }

/* ---- barra superior ---- */
.barra {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 1.25rem; height: 52px;
  background: var(--tinta); color: #fff;
}
.marca { font-weight: 700; letter-spacing: 0.02em; }
.barra nav { display: flex; gap: 0.25rem; flex: 1; }
.barra nav a { color: #d8d3cb; text-decoration: none; padding: 0.45rem 0.75rem; border-radius: 6px; }
.barra nav a.activo, .barra nav a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.barra form { margin: 0; }
.barra .link { color: #d8d3cb; }

/* ---- estado de publicación ---- */
.estado {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--linea);
}
.estado form { margin: 0; }
.estado.pendiente { background: var(--aviso-claro); color: var(--aviso); }
.estado.al-dia { background: var(--ok-claro); color: var(--ok); }

main { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

/* ---- avisos ---- */
.aviso { padding: 0.7rem 0.9rem; border-radius: 8px; margin: 0 0 1rem; }
.aviso.ok { background: var(--ok-claro); color: var(--ok); }
.aviso.error { background: var(--error-claro); color: var(--error); }

/* ---- botones e inputs ---- */
button {
  font: inherit; cursor: pointer;
  padding: 0.45rem 0.9rem; border-radius: 7px;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
}
button:hover { border-color: #c9c3ba; }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
button.primario:hover { filter: brightness(1.08); }
button.link { border: 0; background: none; padding: 0.2rem 0.3rem; color: var(--acento); }
button.peligro { color: var(--error); }

input, select {
  font: inherit; color: inherit;
  padding: 0.35rem 0.5rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--papel);
}
input::placeholder { color: #c4bdb3; }
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--acento); }
input.ancho { width: 100%; min-width: 14rem; }
input.corto { width: 4.5rem; text-align: right; }
input.precio { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- tablas ---- */
.tabla { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.tabla th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--suave);
  padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--linea); background: #faf9f7; }
.tabla td { padding: 0.35rem 0.6rem; border-bottom: 1px solid #efece7; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.tabla .centro { text-align: center; }
.tabla .acciones a { margin-right: 0.8rem; white-space: nowrap; }
.tabla tr.inactivo td { opacity: 0.55; }
.tabla tr.con-excepcion { background: var(--acento-claro); }
.tabla tr.guardado { animation: guardado 1.2s ease-out; }
.tabla tr.con-error { background: var(--error-claro); }
.error-fila { color: var(--error); font-size: 0.85rem; margin-top: 0.2rem; }
@keyframes guardado { from { background: #d7ecd9; } to { background: transparent; } }

.etiqueta { display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #ebe7e1; color: var(--suave); }
.etiqueta.pendiente { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.ok { background: var(--ok-claro); color: var(--ok); }

/* ---- formularios de alta ---- */
.alta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 10px; padding: 0.9rem; }
.alta label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--suave); }
.alta label.check { flex-direction: row; align-items: center; padding-bottom: 0.45rem; color: var(--tinta); }

.resumen { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: center; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 10px; padding: 0.9rem 1.1rem; }
.resumen > div { display: flex; flex-direction: column; }
.resumen .acciones { flex-direction: row; gap: 1rem; margin-left: auto; }

.token { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 0.7rem 1rem; }
.token summary { cursor: pointer; }
.botones { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.botones form { margin: 0; }

/* ---- login ---- */
body.login { min-height: 100vh; display: grid; place-items: center; }
.tarjeta { width: min(360px, 92vw); background: var(--papel); border: 1px solid var(--linea); border-radius: 12px;
  padding: 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; }
.tarjeta h1 { margin: 0; }
.tarjeta p { margin: 0 0 0.4rem; }
.tarjeta label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }

@media (max-width: 760px) {
  .tabla { display: block; overflow-x: auto; }
  input.ancho { min-width: 10rem; }
}