/* Design system "Jornada" — tokens base. Papel nunca #fff, tinta nunca #000, sin border-radius. */
:root {
  --papel: #F2EFE9;
  --tinta: #26241F;
  --teal: #0E6A64;
  --ambar: #8A5A00;
  --fuente-texto: Lora, Georgia, serif;
  --fuente-ui: Archivo, system-ui, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --papel: #1F1E1B; --tinta: #EDE8DF; }
}
html { background: var(--papel); color: var(--tinta); font-family: var(--fuente-texto); font-size: 112.5%; }
body { margin: 0; }
.cabecera { display: flex; gap: 1rem; align-items: center; padding: .75rem 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 20%, transparent); font-family: var(--fuente-ui); }
.marca { color: var(--teal); text-decoration: none; font-weight: 600; }
main { padding: 1.25rem; max-width: 72ch; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
button, .boton { background: var(--teal); color: var(--papel); border: 0; padding: .6rem 1rem; font-family: var(--fuente-ui); cursor: pointer; }
.aviso { color: var(--ambar); }

/* --- Fase 1: cabecera autenticada, selector de negocio y panel --- */
.cabecera { flex-wrap: wrap; }
.selector-negocio { display: flex; gap: .5rem; align-items: center; margin-left: auto; }
.selector-negocio label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.selector-negocio select {
  font-family: var(--fuente-ui); font-size: 1rem; padding: .45rem .6rem;
  background: var(--papel); color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--tinta) 35%, transparent);
}
.selector-negocio button { padding: .45rem .8rem; }
.negocio-fijo { margin-left: auto; font-family: var(--fuente-ui); font-weight: 600; }
.identidad { display: flex; flex-direction: column; line-height: 1.25; font-size: .85rem; }
.rol-etiqueta { color: var(--teal); font-weight: 600; }
.persona { opacity: .75; }

main { max-width: 78ch; }
h1 { font-size: 1.75rem; margin: 0 0 .25rem; }
h2 { font-family: var(--fuente-ui); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }
.sub { margin: 0 0 1.5rem; opacity: .8; }
section { margin-bottom: 2rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--tinta) 15%, transparent); }
.vacio { opacity: .7; font-style: italic; }

table.resumen { border-collapse: collapse; width: 100%; font-family: var(--fuente-ui); font-size: .95rem; }
table.resumen th, table.resumen td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 15%, transparent); }
table.resumen th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
table.resumen .num { text-align: right; font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; }

ul.permisos { font-family: var(--fuente-ui); font-size: .95rem; columns: 2; margin: 0; padding-left: 1.2rem; }
ul.permisos li { margin-bottom: .3rem; }

@media (max-width: 34rem) {
  .selector-negocio { margin-left: 0; width: 100%; }
  .selector-negocio select { flex: 1; }
  ul.permisos { columns: 1; }
}