/* Visor de facturas. Base shadcn neutra, densidad Tabler, acento teal (Tailwind v3). Ver diseno/DISENO.md */
:root {
  color-scheme: light dark;
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #6f6f6f;
  --border: #e5e5e5;
  --ring: #a3a3a3;
  --hover: #f5f5f5;
  --acento: #0f766e; /* teal-700 */
  --urgente: #dc2626;
  --radius: 0.625rem;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05);
  --primary: #0f766e;
  --primary-foreground: #ffffff;
  --primary-hover: #115e59; /* teal-800 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #fafafa;
    --card: #171717;
    --muted: #262626;
    --muted-foreground: #a3a3a3;
    --border: rgba(255, 255, 255, .1);
    --ring: #737373;
    --hover: #262626;
    --acento: #2dd4bf; /* teal-400 */
    --urgente: #f87171;
    --sombra: none;
    --primary: #2dd4bf;
    --primary-foreground: #042f2e; /* teal-950 */
    --primary-hover: #5eead4; /* teal-300 */
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 14px/20px Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted-foreground); }
.num { font-variant-numeric: tabular-nums; }
.lnk { position: relative; color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.lnk::after { content: ""; position: absolute; left: -4px; right: -4px; top: -13px; bottom: -13px; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Barra superior */
.top { border-bottom: 1px solid var(--border); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.marca { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; min-height: 44px; }
.logo { display: inline-flex; padding: 5px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); }
.logo .i { width: 18px; height: 18px; }
.lista-tabs { display: flex; width: 100%; gap: 2px; padding: 3px; background: var(--muted); border-radius: 10px; }
.lista-tabs a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 12px; border-radius: 7px; font-size: 14px; font-weight: 500;
  color: var(--muted-foreground); text-decoration: none; border: 1px solid transparent;
}
.lista-tabs a:hover { color: var(--foreground); }
.lista-tabs a[aria-current] { background: var(--background); color: var(--acento); box-shadow: var(--sombra); border-color: var(--border); }

/* Botones */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground); box-shadow: var(--sombra);
}
.btn:hover { background: var(--hover); }
.btn.pri { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.btn.pri:hover { background: var(--primary-hover); }
.btn.icono { width: 44px; padding: 0; border-color: transparent; background: none; box-shadow: none; }
.btn.icono:hover { background: var(--hover); }

/* Página */
.pagina { padding-top: 20px; padding-bottom: 40px; display: grid; gap: 16px; }
.enc h1, .enc h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.enc p { color: var(--muted-foreground); margin-top: 4px; max-width: 64ch; }

/* Zona para soltar */
.zona {
  display: grid; justify-items: start; gap: 12px; padding: 20px 16px;
  border: 1px dashed var(--ring); border-radius: 12px; background: var(--background);
}
.zona.sobre { border-style: solid; border-color: var(--acento); background: var(--muted); }
.zona-t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.zona p:not(.zona-t) { color: var(--muted-foreground); }
.priv { font-size: 13px; font-weight: 500; margin-top: -8px; }

/* Resultado */
.app, #salida { display: grid; gap: 16px; }
.estado:empty { display: none; }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra .sep { flex: 1; }
.barra .btn { flex: 1 1 auto; }
.cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.cabeza h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cabeza p { font-size: 13px; color: var(--muted-foreground); }
.estado { font-size: 13px; color: var(--muted-foreground); }

.avisos h3 { font-size: 13px; font-weight: 600; color: var(--urgente); }
.avisos li { color: var(--urgente); font-size: 13px; padding: 2px 0; overflow-wrap: anywhere; }
.avisos li b { font-weight: 600; }

/* Tabla de documentos */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted-foreground); padding: 8px 12px; height: 32px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tr.fila { cursor: pointer; }
.tabla tr.fila:hover { background: var(--hover); }
.tabla .t { font-weight: 500; text-align: left; }
.tabla tr.fila:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.tabla .der { text-align: right; }
.tabla .tot { font-weight: 600; white-space: nowrap; }
.tabla .cor { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { display: none; color: var(--muted-foreground); }
.c-tp, .c-fm { display: none; }
.urge { color: var(--urgente); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* La factura: un documento */
.hoja {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sombra);
  padding: 20px 16px; display: grid; gap: 20px; overflow-wrap: anywhere;
}
.h-cab { display: grid; gap: 16px; align-items: start; }
.h-emisor h2 { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.h-emisor p { color: var(--muted-foreground); }
.h-emisor p.id { color: var(--foreground); }
.h-tipo { border: 1px solid var(--foreground); border-radius: 8px; padding: 12px 16px; text-align: center; display: grid; gap: 2px; }
.h-tipo .k { font-size: 13px; color: var(--muted-foreground); }
.h-tipo strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.h-tipo .n { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.h-dos { display: grid; gap: 20px; }
.h-sec h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
dl.d { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 12px; }
dl.d dt { color: var(--muted-foreground); }

.items { width: 100%; border-collapse: collapse; }
.items th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted-foreground); padding: 8px 8px; border-bottom: 1px solid var(--foreground); }
.items td { padding: 8px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.items th:first-child, .items td:first-child { padding-left: 0; }
.items th:last-child, .items td:last-child { padding-right: 0; }
.items .r { text-align: right; }
.items td.r { white-space: nowrap; }

.totales { justify-self: end; width: 100%; max-width: 340px; display: grid; gap: 6px; }
.totales div { display: flex; justify-content: space-between; gap: 16px; }
.totales dt { color: var(--muted-foreground); }
.totales dd { font-weight: 500; text-align: right; }
.totales .gran { border-top: 1px solid var(--foreground); padding-top: 8px; margin-top: 4px; }
.totales .gran dt { color: var(--foreground); font-weight: 600; }
.totales .gran dd { font-size: 17px; line-height: 24px; font-weight: 600; }

.extra { display: grid; gap: 16px; }
.extra h3 { font-size: 13px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 2px; }
.mono { font: 400 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
.pie-hoja { font-size: 12px; color: var(--muted-foreground); border-top: 1px solid var(--border); padding-top: 12px; }

/* Texto y preguntas */
.texto { display: grid; gap: 12px; max-width: 68ch; padding-top: 8px; }
.texto h2 { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; margin-top: 12px; }
.texto h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.texto p, .texto li { color: var(--foreground); }
.texto ul, .texto ol { padding-left: 20px; display: grid; gap: 4px; }
.texto ul { list-style: disc; }
.texto ol { list-style: decimal; }
.texto details { border-top: 1px solid var(--border); }
.texto details:last-of-type { border-bottom: 1px solid var(--border); }
.texto summary { min-height: 48px; display: flex; align-items: center; padding: 8px 0; font-weight: 500; cursor: pointer; }
.texto summary::after { content: ""; margin-left: auto; flex: none; width: 7px; height: 7px; border: solid var(--muted-foreground); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.texto details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.texto summary { list-style: none; gap: 12px; }
.texto summary::-webkit-details-marker { display: none; }
.texto details p { padding-bottom: 12px; color: var(--muted-foreground); }

/* Pie */
.pie { border-top: 1px solid var(--border); margin-top: 24px; }
.pie .wrap { padding-top: 20px; padding-bottom: 28px; display: grid; gap: 12px; font-size: 13px; color: var(--muted-foreground); }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--foreground); font-weight: 500; }
.pie nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Teléfono: filas de lista en vez de tabla, líneas de factura apiladas */
@media screen and (max-width: 719px) {
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "e t c" "n n c" "r r c"; column-gap: 8px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); position: relative; min-height: 64px; }
  .tabla tbody tr:last-child { border-bottom: 1px solid var(--border); }
  .tabla td, .tabla td:first-child, .tabla td:last-child { padding: 0; border: 0; }
  .tabla td.c-e { grid-area: e; font-weight: 500; font-size: 15px; line-height: 22px; max-width: none; }
  .tabla td.c-t { grid-area: t; font-weight: 600; text-align: right; }
  .tabla td.c-n { grid-area: n; color: var(--muted-foreground); font-size: 13px; }
  .tabla td.c-n .t::after { content: ""; position: absolute; inset: 0; }
  .tabla td.c-r { grid-area: r; color: var(--muted-foreground); font-size: 13px; max-width: none; }
  .tabla td.c-f, .tabla td.c-ti { display: none; }
  .c-tp, .c-fm { display: inline; }
  .tabla td.c-ch { grid-area: c; align-self: center; }
  .chev { display: block; }
  .tabla .t { font-weight: 400; }
  .tabla tr.fila:hover .t { text-decoration: none; }

  .items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .items, .items tbody, .items tr, .items td { display: block; }
  .items tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d i" "m m"; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .items td { padding: 0; border: 0; }
  .items td.c-d { grid-area: d; }
  .items td.c-i { grid-area: i; font-weight: 600; text-align: right; }
  .items td.c-m { grid-area: m; font-size: 13px; color: var(--muted-foreground); }
  .items td.c-c, .items td.c-u, .items td.c-p, .items td.c-x { display: none; }
}
@media screen and (min-width: 720px), print {
  .items td.c-m { display: none; }
  .top .wrap { flex-wrap: nowrap; }
  .lista-tabs { width: auto; margin-left: 8px; }
  .lista-tabs a { height: 30px; flex: none; }
  .btn { height: 36px; }
  .btn.icono { width: 36px; }
  .barra .btn { flex: none; }
  .barra .sep { display: block; }
  .pagina { padding-top: 24px; gap: 20px; }
  .enc h1, .enc h2 { font-size: 24px; line-height: 32px; }
  .zona { padding: 28px 24px; }
  .hoja { padding: 28px 32px; gap: 24px; }
  .h-cab { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
  .h-dos { grid-template-columns: 1fr 1fr; gap: 32px; }
  dl.d { grid-template-columns: 120px minmax(0, 1fr); }
}

/* Impresión: solo la factura, en claro */
@media print {
  :root { --background: #fff; --foreground: #000; --card: #fff; --muted: #f5f5f5; --muted-foreground: #555; --border: #d4d4d4; --sombra: none; --acento: #0f766e; color-scheme: light; }
  @page { margin: 14mm; }
  body { font-size: 12px; line-height: 17px; }
  .top, .pie, .enc, .texto, .zona, .priv, #salida > :not(.hoja) { display: none !important; }
  .pagina { padding: 0; display: block; }
  .wrap { max-width: none; padding: 0; }
  .hoja { border: 0; border-radius: 0; padding: 0; }
  .h-cab { grid-template-columns: minmax(0, 1fr) 240px; }
  .h-dos { grid-template-columns: 1fr 1fr; }
  .items tr, .totales { break-inside: avoid; }
  .items thead { display: table-header-group; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}