/* Panel de facturación.
   Sin fuentes ni scripts externos: todo se sirve desde el propio servidor. */

:root {
  --tinta: #1b2a3d;
  --tinta-suave: #4b5a6c;
  --fondo: #edf0f4;
  --papel: #ffffff;
  --linea: #d3d9e1;
  --acento: #1d4f91;
  --acento-oscuro: #153c6f;

  --borrador-fondo: #fdf0d2;  --borrador-texto: #6b4700;
  --validada-fondo: #dbe8fa;  --validada-texto: #123d75;
  --emitida-fondo:  #d9efe1;  --emitida-texto:  #14532d;
  --error-fondo:    #fde4e1;  --error-texto:    #9a1c10;
  --anulada-fondo:  #e6e8ec;  --anulada-texto:  #3b4654;

  --fuente: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  line-height: 1.5;
}

a { color: var(--acento); }
a:hover { color: var(--acento-oscuro); }

:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }

h1 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 .25rem; font-weight: 650; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; font-weight: 650; }

main { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.num { font-variant-numeric: tabular-nums; }
.der { text-align: right; }
.suave, .sub { color: var(--tinta-suave); }
.sub { display: block; font-size: .9rem; }
.oculto { position: absolute; left: -9999px; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: rgba(27, 42, 61, .08);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-size: .88em;
  word-break: break-all;
}

/* ---------- barra superior ---------- */
.barra { background: var(--tinta); color: #fff; }
.barra-in {
  max-width: 1240px; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; gap: 2rem; min-height: 3.2rem;
}
.marca { font-weight: 700; letter-spacing: .01em; }
.barra nav { display: flex; gap: .25rem; flex: 1; }
.barra nav a {
  color: #cdd7e4; text-decoration: none; padding: .9rem .8rem; border-bottom: 3px solid transparent;
}
.barra nav a:hover { color: #fff; }
.barra nav a[aria-current="page"] { color: #fff; border-bottom-color: #f2a900; }
.sesion { display: flex; align-items: center; gap: .9rem; font-size: .9rem; margin: 0; }
.btn-texto {
  background: none; border: 0; color: #cdd7e4; cursor: pointer; font: inherit;
  text-decoration: underline; padding: .25rem;
}
.btn-texto:hover { color: #fff; }

.sociedad { display: flex; align-items: center; gap: .5rem; margin: 0; }
.sociedad label { margin: 0; font-weight: 600; font-size: .85rem; color: #cdd7e4; }
.sociedad-aviso {
  background: #f2a900; color: #1b2a3d; font-weight: 600; font-size: .85rem; padding: .3rem .7rem;
  border-radius: 3px; text-decoration: none;
}
.sociedad-aviso:hover { background: #ffc233; color: #1b2a3d; }
.sociedad select {
  background: #fff; color: var(--tinta); border: 2px solid #f2a900; border-radius: 3px;
  font-weight: 600; padding: .3rem .5rem; max-width: 16rem;
}

/* ---------- botones y formularios ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--papel); color: var(--tinta);
  border: 1px solid #aab4c1; border-radius: 3px;
  padding: .5rem .95rem; text-decoration: none; line-height: 1.2;
}
.btn:hover { background: #f4f6f9; color: var(--tinta); }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-peq { padding: .3rem .65rem; font-size: .88rem; }

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="month"], input[type="tel"], select {
  font: inherit; padding: .45rem .6rem; border: 1px solid #aab4c1; border-radius: 3px;
  background: #fff; color: var(--tinta); max-width: 100%;
}
.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; margin: .5rem 0; }
.check input { margin-top: .3rem; }

.inline { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.inline label { margin: 0; }

/* ---------- avisos ---------- */
.aviso { padding: .7rem 1rem; border-left: 4px solid; border-radius: 2px; margin: 0 0 1rem; background: var(--papel); }
.aviso-ok { border-color: #2f855a; background: #e8f5ee; }
.aviso-error { border-color: #c0392b; background: var(--error-fondo); }
.aviso-info { border-color: var(--acento); background: #e6eef9; }

/* ---------- estados ---------- */
.pill {
  display: inline-block; padding: .1rem .6rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.pill-borrador { background: var(--borrador-fondo); color: var(--borrador-texto); }
.pill-validada { background: var(--validada-fondo); color: var(--validada-texto); }
.pill-emitida  { background: var(--emitida-fondo);  color: var(--emitida-texto); }
.pill-anulada  { background: var(--anulada-fondo);  color: var(--anulada-texto); }
.pill-error    { background: var(--error-fondo);    color: var(--error-texto); }

.inc span, .lista-inc li { display: block; font-size: .88rem; }
.inc-error { color: var(--error-texto); font-weight: 600; }
.inc-aviso { color: var(--borrador-texto); }

/* ---------- listado ---------- */
.cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

.barra-accion {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1rem; background: var(--papel); border: 1px solid var(--linea); margin-bottom: 1rem;
}
.barra-accion label { margin: 0; }

.resumen { margin: .25rem 0 1rem; }

.tabla-wrap { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); }
.tabla { width: 100%; border-collapse: collapse; min-width: 760px; }
.tabla th, .tabla td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla th { background: #f6f8fa; font-size: .9rem; color: var(--tinta-suave); font-weight: 600; }
.tabla tbody tr:hover { background: #f8fafc; }
.tabla .der { text-align: right; }
.tabla .chk { width: 2.2rem; }
.enlace-fila { font-weight: 600; text-decoration: none; }
.enlace-fila:hover { text-decoration: underline; }

.acciones-lote { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
.acciones-lote .check { margin: 0; }

.emitir { margin-top: 2rem; padding: 1.1rem 1.25rem; background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--acento); }
.emitir h2 { margin-top: 0; }
.emitir p { max-width: 62ch; }

.vacio { padding: 2.5rem 1.5rem; background: var(--papel); border: 1px dashed #aab4c1; }
.vacio p { max-width: 60ch; margin: .3rem 0; }

.filtros { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros a { padding: .3rem .8rem; border: 1px solid #aab4c1; border-radius: 999px; text-decoration: none; background: var(--papel); color: var(--tinta); }
.filtros a[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ---------- revisión ---------- */
.migas { margin: 0 0 .75rem; }
.fila-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-fichas { display: inline-flex; align-items: center; gap: .6rem; }
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.revision { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 1.5rem; align-items: start; }
.visor { background: var(--papel); border: 1px solid var(--linea); position: sticky; top: .75rem; }
.visor iframe { display: block; width: 100%; height: calc(100vh - 6rem); min-height: 560px; border: 0; }

.lateral { background: var(--papel); border: 1px solid var(--linea); padding: 1.25rem 1.4rem 1.5rem; }
.lateral > h2:first-of-type { margin-top: 1.2rem; }

.importes { width: 100%; border-collapse: collapse; }
.importes td { padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.importes .total td { font-weight: 700; font-size: 1.1rem; border-bottom: 0; padding-top: .6rem; }

.lista-inc, .lista-envios { list-style: none; padding: 0; margin: 0; }
.lista-inc li, .lista-envios li { padding: .35rem 0; }

.inline-form { display: grid; gap: .4rem; justify-items: start; }
.inline-form label { margin: 0; }

.acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.acciones p { flex-basis: 100%; margin: .2rem 0 0; }

/* ---------- fichas (cliente, contrato) ---------- */
.ficha { background: var(--papel); border: 1px solid var(--linea); padding: .5rem 1.4rem 1.5rem; max-width: 980px; }
.ficha input[type="text"], .ficha input[type="email"], .ficha input[type="date"], .ficha select { width: 100%; }
/* Todos los campos de las fichas, con la misma altura (el desplegable y las fechas medían distinto que los de texto) */
.ficha input[type="text"], .ficha input[type="email"], .ficha input[type="tel"], .ficha input[type="date"], .ficha select { width: 100%; height: 2.5rem; box-sizing: border-box; }
.ficha .acciones { margin-top: 1.4rem; }
.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.25rem; }
.rejilla .ancho2 { grid-column: span 2; }
.rejilla .ancho3 { grid-column: 1 / -1; }
.calculo { margin: 1rem 0; padding: .6rem .9rem; background: #f6f8fa; border-left: 4px solid var(--acento); }
input[type="email"], input[type="date"] {
  font: inherit; padding: .45rem .6rem; border: 1px solid #aab4c1; border-radius: 3px;
  background: #fff; color: var(--tinta); max-width: 100%;
}
@media (max-width: 700px) {
  .rejilla { grid-template-columns: 1fr; }
  .rejilla .ancho2, .rejilla .ancho3 { grid-column: auto; }
}

/* ---------- importación ---------- */
.tabla-lineas { min-width: 0; }
.tabla-lineas td { padding: .3rem .4rem; }
.tabla-lineas input { width: 100%; }
input[type="file"] { font: inherit; max-width: 100%; }
.texto-extraido {
  white-space: pre-wrap; word-break: break-word; font-size: .85rem; line-height: 1.45;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: #f6f8fa; border: 1px solid var(--linea); padding: .8rem; max-height: 70vh; overflow: auto; margin: 0;
}

.impuesto { display: flex; gap: .4rem; }
.impuesto select { width: auto; }
.impuesto input { flex: 1; min-width: 0; }

.logo-card { background: var(--papel); border: 1px solid var(--linea); padding: .2rem 1.4rem 1.2rem; max-width: 980px; margin: 1rem 0 1.2rem; }
.logo-fila { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.logo-caja {
  width: 320px; height: 130px; display: flex; align-items: center; justify-content: center; padding: 10px;
  border: 2px dashed #aab4c1; background: #fff;
}
.logo-caja.con-logo { border: 1px solid var(--linea); }
.logo-caja img { max-width: 100%; max-height: 100%; display: block; }
.logo-acciones { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.logo-acciones form { margin: 0; }
.logo-acciones label.btn { cursor: pointer; }
.logo-mini { height: 30px; width: auto; max-width: 120px; display: block; }

/* ---------- acceso ---------- */
.acceso { max-width: 380px; margin: 12vh auto 0; background: var(--papel); border: 1px solid var(--linea); padding: 1.75rem; }
.acceso input { width: 100%; }
.acceso .btn { width: 100%; margin-top: 1.25rem; }

/* ---------- pantallas estrechas ---------- */
@media (max-width: 960px) {
  .revision { grid-template-columns: 1fr; }
  .visor { position: static; }
  .visor iframe { height: 70vh; min-height: 420px; }
  .barra-in { gap: 1rem; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Tabla de conceptos del contrato */
.tabla-conceptos { min-width: 0; }
.tabla-conceptos td, .tabla-conceptos th { padding: .4rem .5rem; vertical-align: top; }
.tabla-conceptos td input { margin: 0; }
.tabla-conceptos td input { width: 100%; }
.tabla-conceptos td.der input { text-align: right; }
.tabla-conceptos td:nth-child(2), .tabla-conceptos th:nth-child(2) { width: 12rem; }
.tabla-conceptos td:nth-child(3), .tabla-conceptos th:nth-child(3) { width: 6.5rem; }
.tabla-conceptos tr.principal td { background: #f8fafc; }
.tabla-conceptos tfoot th { background: #f6f8fa; font-size: 1rem; }
button[hidden] { display: none !important; }
.solo-lectores { position: absolute; left: -9999px; }

/* Fila de fechas y serie del contrato: fechas estrechas y los tres campos a la misma altura */
.rejilla-fechas { display: grid; grid-template-columns: 11rem 11rem minmax(0, 1fr); gap: 0 1.25rem; align-items: end; }
@media (max-width: 700px) { .rejilla-fechas { grid-template-columns: 1fr; } }