/* FiscalInbox · demo pública (sin login) · colores de marca existentes */
:root {
  --color-canvas: #F7F6F1;
  --color-ink: #173047;
  --color-primary: #075D60;
  --color-primary-hover: #03494C;
  --color-success: #176647;
  --color-warning: #855000;
  --color-danger: #A32E32;
  --color-line: #CBD5D9;
  --color-surface: #FFFFFF;
  --color-muted: #486074;
  --color-focus: #155EEF;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-canvas); color: var(--color-ink); font: 400 1rem/1.6 var(--font-sans); }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
code { font-family: var(--font-mono); font-size: .9em; }
h1 { font-size: 1.6rem; letter-spacing: -.03em; margin: 0 0 .5rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: .5rem; top: .5rem; z-index: 10; background: var(--color-surface); padding: .5rem 1rem; border: 2px solid var(--color-primary); }

/* Banner de demostración: siempre visible */
.demo-banner {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-warning); color: #fff;
  text-align: center; padding: .45rem 1rem; font-size: .9rem;
}

.layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 40px); }
.sidebar { background: var(--color-ink); color: var(--color-canvas); padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.navbtn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; color: var(--color-canvas);
  border: 0; border-left: 3px solid transparent; padding: .5rem .75rem; border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
}
.navbtn:hover { background: rgba(255,255,255,.08); }
.navbtn[aria-selected="true"] { background: rgba(255,255,255,.12); border-left-color: var(--color-canvas); font-weight: 600; }
.sidebar-note { font-size: .85rem; color: #C9D6DE; margin-top: auto; }

main { padding: 1.5rem; max-width: 1100px; width: 100%; }

/* Tags */
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 3px; border: 1px solid var(--color-line); vertical-align: middle; }
.tag-sim { background: #EDF2EF; color: var(--color-primary); border-color: var(--color-primary); }
.tag-ok { background: #E7F2EB; color: var(--color-success); border-color: var(--color-success); }
.tag-danger { background: #F7E9E9; color: var(--color-danger); border-color: var(--color-danger); }
.tag-amber { background: #F6EEE3; color: var(--color-warning); border-color: var(--color-warning); }

/* Filtros */
.filters { background: var(--color-surface); border: 1px solid var(--color-line); padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.filters fieldset { border: 1px solid var(--color-line); margin: 0; padding: .5rem .75rem .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.filters legend { font-size: .8rem; padding: 0 .25rem; }
.filters label { font-size: .85rem; display: flex; flex-direction: column; gap: .25rem; }
.chk { flex-direction: row !important; align-items: center; gap: .35rem !important; }
input[type="search"], select { padding: .4rem .5rem; border: 1px solid var(--color-line); border-radius: 4px; background: #fff; }
.result-count { font-size: .9rem; color: var(--color-muted); }

/* Tabla */
.bandeja-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-line); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .55rem .65rem; text-align: left; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
th { background: #EDF2EF; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #F7FBF8; }
tbody tr[aria-selected="true"] { background: #E7F2EB; }
tbody tr button { cursor: pointer; background: none; border: 1px solid var(--color-line); border-radius: 4px; padding: .2rem .5rem; }

/* Detalle */
.detalle { background: var(--color-surface); border: 1px solid var(--color-line); padding: 1rem; font-size: .9rem; }
.detalle dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0; }
.detalle dt { color: var(--color-muted); }
.detalle dd { margin: 0; font-variant-numeric: tabular-nums; }
.detalle .btn-row { margin-top: .75rem; }

/* Botones */
.btn { cursor: pointer; border-radius: 4px; padding: .5rem 1rem; border: 1px solid transparent; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }

/* Tarjetas y avisos */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { background: var(--color-surface); border: 1px solid var(--color-line); padding: 1rem; }
.card h3 { margin: 0 0 .25rem; font-size: .85rem; color: var(--color-muted); }
.card p { margin: 0; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.callout { border: 1px solid var(--color-line); border-left-width: 4px; padding: .75rem 1rem; background: var(--color-surface); }
.callout-amber { border-left-color: var(--color-warning); }
.callout-danger { border-left-color: var(--color-danger); }
.jobs, .activity { list-style: none; padding: 0; border: 1px solid var(--color-line); background: var(--color-surface); }
.jobs li, .activity li { padding: .6rem .9rem; border-bottom: 1px solid var(--color-line); font-size: .9rem; }
.page-foot { margin-top: 2rem; font-size: .8rem; color: var(--color-muted); }

/* Error de carga */
.carga-error { border: 1px solid var(--color-danger); border-left-width: 4px; background: #F7E9E9; padding: .75rem 1rem; }
.carga-error p { margin: 0 0 .5rem; }
.filters[aria-disabled="true"] { opacity: .55; }

/* Responsivo */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar ul { flex-direction: row; flex-wrap: wrap; }
  .navbtn { width: auto; border-left: 0; border-bottom: 3px solid transparent; }
  .navbtn[aria-selected="true"] { border-left: 0; border-bottom-color: var(--color-canvas); }
  .sidebar-note { margin-top: 0; width: 100%; }
  .bandeja-grid { grid-template-columns: 1fr; }
  .detalle { order: -1; }
}