/* NAF Digital Trust. Brand: black + orange #e06d00 (New Art Foundation). */
:root {
  --ink: #111;
  --muted: #6b6b6b;
  --line: #e4e2dd;
  --bg: #f7f6f3;
  --card: #fff;
  --accent: #e06d00;
  --ok: #2f7d32;
  --warn: #b26a00;
  --bad: #b3261e;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--sans); color: var(--ink); background: var(--bg); }
a { color: inherit; }
a:hover { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .75rem; }
.muted, .hint { color: var(--muted); }
.code { font-family: var(--mono); font-size: .9em; }
.empty { color: var(--muted); text-align: center; padding: 1.25rem; }
.error { color: var(--bad); }

/* Brand */
.brand { display: flex; flex-direction: column; text-decoration: none; margin: 0 0 1.5rem; }
.brand-mark { font: 700 1.35rem/1 var(--mono); letter-spacing: .02em; }
.brand-sub { font: .8rem var(--mono); color: var(--accent); margin-top: .25rem; }

/* App shell: sidebar + main */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: var(--ink); color: #fff; padding: 1.5rem 1rem; display: flex; flex-direction: column; }
.sidebar nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.sidebar nav a, .sidebar nav span { padding: .5rem .75rem; border-radius: 6px; text-decoration: none; }
.sidebar nav a:hover { background: #222; color: #fff; }
.sidebar nav a.active { background: var(--accent); color: #fff; }
.sidebar nav .disabled { color: #777; cursor: default; }
.signout { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #bbb; }

/* Phone menu button (hidden on desktop, where the sidebar shows everything) */
.menu-toggle {
  display: none; align-items: center; gap: .5rem;
  background: none; color: #fff; border: 1px solid #444; border-radius: 6px; padding: .5rem .8rem; cursor: pointer;
}
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .15s;
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-toggle .when-open { display: none; }
.menu-open .menu-toggle .when-open { display: inline; }
.menu-open .menu-toggle .when-closed { display: none; }
.menu-open .menu-icon { background: transparent; }
.menu-open .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
.topbar { padding: .75rem 2rem; border-bottom: 1px solid var(--line); background: var(--card); }
.topbar input { width: min(420px, 100%); }
.content { padding: 1.5rem 2rem 3rem; max-width: 1200px; }

/* Forms */
input, select, button { font: inherit; }
input, select { padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.filter { width: min(480px, 100%); margin-bottom: 1rem; }
.filter-label { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
button.primary { background: var(--ink); color: #fff; border: 0; border-radius: 6px; padding: .6rem 1rem; cursor: pointer; }
button.primary:hover { background: var(--accent); }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

.button { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); text-decoration: none; }
.button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.button.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.notice { background: #fbf0dc; border: 1px solid #f0dcb4; border-radius: 8px; padding: .6rem .9rem; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.form legend { font-weight: 600; margin-bottom: .5rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.form label.check { flex-direction: row; align-items: center; gap: .5rem; }
.form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.form textarea { font: inherit; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 6px; }
.form .error { font-size: .85rem; }
.form .actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
.nfc-image { width: 100%; border-radius: 8px; margin-bottom: .75rem; }

/* Cards, tables, badges */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #fbfaf8; }
tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; font-size: .78rem; padding: .15rem .5rem; border-radius: 999px; background: #eee; white-space: nowrap; }
.badge.sealed, .badge.bueno, .badge.integra, .badge.cerrada { background: #e5f4e4; color: var(--ok); }
.badge.por_reparar, .badge.abierta, .badge.esp_material, .badge.esp_artista, .badge.pendiente_cierre { background: #fbf0dc; color: var(--warn); }
.badge.en_restauracion, .badge.en_ejecucion { background: #e7f1fb; color: #1d5fa8; }
.badge.manipulada { background: #fbebeb; color: var(--bad); }

/* Panel */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; text-decoration: none; display: flex; flex-direction: column; }
.kpi strong { font: 700 1.75rem/1.2 var(--mono); }
.kpi span { color: var(--muted); font-size: .9rem; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; }
.columns h2 { margin-top: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }

/* Artwork record */
.breadcrumb { color: var(--muted); margin: 0 0 .5rem; }
.work-header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.work-header h1 { margin-bottom: .25rem; }
.work-header p { margin: 0; }
.tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs span { padding: .5rem 0; }
.tabs .active { border-bottom: 2px solid var(--accent); font-weight: 600; }
.tabs .disabled { color: var(--muted); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* Public pages: login and the NFC page, phone first */
.public { display: flex; justify-content: center; padding: 2rem 1rem; }
.public-frame { width: min(440px, 100%); }
.login { display: flex; flex-direction: column; gap: 1rem; }
.login h1 { font-size: 1.2rem; margin: 0; }
.login label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.nfc h1 { margin: .25rem 0; }
.nfc .artists { margin: 0 0 1rem; color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 0 0 1rem; }
.checks li { padding: .35rem 0; }
.checks .ok::before { content: '✓ '; color: var(--ok); font-weight: 700; }
.checks .bad { color: var(--bad); font-weight: 600; }
.checks .bad::before { content: '! '; }
.checks .warn { color: var(--warn); }
.checks .warn::before { content: '! '; font-weight: 700; }
.staff { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.staff h2 { margin-top: 0; font-size: .95rem; color: var(--accent); }

/* Long codes and chip IDs wrap instead of pushing the page wider */
.code, .facts dd { overflow-wrap: anywhere; }
.content { min-width: 0; }

/* ── Phones ─────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  .app { display: block; }

  /* Header: logo and a Menú button. The button opens the sections and sign-out below it. */
  .sidebar {
    position: sticky; top: 0; z-index: 10;
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand toggle" "nav nav" "signout signout";
    align-items: center; padding: .7rem 1rem;
  }
  .brand { grid-area: brand; margin: 0; }
  .menu-toggle { grid-area: toggle; display: inline-flex; }
  .sidebar nav { grid-area: nav; }
  .sidebar .signout { grid-area: signout; }
  .sidebar nav, .sidebar .signout { display: none; }

  .sidebar.menu-open { max-height: 100dvh; overflow-y: auto; }
  .sidebar.menu-open nav { display: flex; flex-direction: column; gap: .25rem; margin-top: .9rem; }
  .sidebar.menu-open nav a, .sidebar.menu-open nav span { padding: .8rem 1rem; font-size: 1.05rem; }
  .sidebar.menu-open .signout {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .75rem; padding: .9rem 1rem .2rem; border-top: 1px solid #333; font-size: .95rem;
  }

  .topbar { padding: .75rem 1rem; }
  .topbar input { width: 100%; }
  .content { padding: 1.25rem 1rem 3rem; }
  h1 { font-size: 1.3rem; }

  /* 16px fields: iPhone zooms in on anything smaller */
  input, select, textarea, button,
  .app input, .app select, .app textarea { font-size: 16px; }
  .filter, .filter-label, .filter-label select { width: 100%; }
  .page-header { flex-wrap: wrap; margin-bottom: 1rem; }
  .page-header h1 { margin: 0; }
  .button, button.primary { padding: .7rem 1rem; }

  /* Tables become one card per row, each value with its column name */
  table, tbody, tr, td { display: block; width: 100%; }
  table { border: 0; background: none; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: .75rem; padding: .6rem .9rem;
  }
  td { border: 0; padding: .3rem 0; }
  /* The title leads the card */
  td.primary { order: -1; font-size: 1.05rem; padding-bottom: .4rem; }
  td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  }
  td.empty { padding: 1rem 0; }

  .work-header { flex-direction: column; }
  .badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .tabs { overflow-x: auto; white-space: nowrap; gap: 1rem; scrollbar-width: none; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { font-size: .8rem; margin-top: .5rem; }
  .columns { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .kpi { padding: .8rem 1rem; }
  .kpi strong { font-size: 1.4rem; }
  .kpi span { font-size: .82rem; }
  .form .actions { justify-content: space-between; }
  .form .actions button { flex: 1; }
}