:root {
  --fondo: #f6f5f1;
  --tarjeta: #ffffff;
  --texto: #1f1d1a;
  --suave: #6b665e;
  --borde: #e2ddd2;
  --acento: #0f6e56;
  --acento-suave: #e1f5ee;
  --peligro: #a32d2d;
  --peligro-suave: #fcebeb;
  --info-suave: #e6f1fb;
  --info: #0c447c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--acento); }
code { font-size: 13px; background: #efece5; padding: 1px 5px; border-radius: 4px; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 32px 0 12px; }
.suave { color: var(--suave); }

.barra {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; font-size: 17px; color: var(--texto); text-decoration: none; }
.barra nav { display: flex; gap: 4px; flex: 1; }
.barra nav a { padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--suave); }
.barra nav a.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.yo { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.yo form { margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--acento); font: inherit; cursor: pointer; text-decoration: underline; }

.pagina { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
.angosto { max-width: 560px; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.encabezado p { margin: 0; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.volver { display: inline-block; margin-bottom: 12px; text-decoration: none; font-size: 14px; }

.btn {
  display: inline-block; border: 0; border-radius: 8px; padding: 10px 18px;
  background: var(--acento); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn-sec { background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); }
.btn-peligro { background: var(--peligro); }
.btn-mini { padding: 5px 10px; font-size: 13px; }

.aviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.aviso-ok { background: var(--acento-suave); color: #085041; }
.aviso-error { background: var(--peligro-suave); color: #791f1f; }
.aviso-info { background: var(--info-suave); color: var(--info); }

.vacio { background: var(--tarjeta); border: 1px dashed var(--borde); border-radius: 12px; padding: 32px; text-align: center; color: var(--suave); }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tarjeta {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 18px;
  text-decoration: none; color: inherit;
}
a.tarjeta:hover { border-color: var(--acento); }
.tarjeta-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 17px; }
.resumen { font-size: 13px; }
.etiqueta { align-self: flex-start; font-size: 12px; background: #efece5; padding: 2px 8px; border-radius: 99px; }

.estado { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: #efece5; color: var(--suave); white-space: nowrap; }
.estado.ok { background: var(--acento-suave); color: #085041; }
.estado.error { background: var(--peligro-suave); color: #791f1f; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cifras div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; }
.cifras span { display: block; font-size: 13px; color: var(--suave); }
.cifras strong { font-size: 24px; }

.tabla-envoltura { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.agotado td { background: #fdf7f5; }
.tabla .der { text-align: right; white-space: nowrap; }
.miniatura { width: 56px; }
.miniatura img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.stock-rapido { display: flex; gap: 6px; margin: 0; }
.stock-rapido input { width: 74px; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }

.formulario { display: flex; flex-direction: column; gap: 16px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 22px; margin-top: 16px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.formulario small { font-weight: 400; color: var(--suave); }
.formulario input:not([type=checkbox]), .formulario select {
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-weight: 400; background: #fff;
}
.formulario input:focus, .formulario select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.formulario .check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario .btn { align-self: flex-start; }
.vista-previa { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); }
.zona-peligro { margin-top: 24px; }
.lista-simple { padding-left: 18px; }

.acceso { max-width: 460px; margin: 40px auto; }
.acceso h1 { font-size: 30px; }
.lista-acceso { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.opcion-acceso {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px;
  text-decoration: none; color: inherit;
}
.opcion-acceso:hover { border-color: var(--acento); }
.opcion-acceso small { display: block; color: var(--suave); }
.opcion-acceso .inicial {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #efece5; font-weight: 700; font-size: 17px;
}
.opcion-acceso.admin .inicial { background: var(--acento); color: #fff; }

@media (max-width: 640px) {
  .pagina { padding: 20px 16px 48px; }
  .barra { padding: 12px 16px; gap: 12px; }
  .formulario .fila { grid-template-columns: 1fr; }
}