/* Newbooks — hoja de estilos única */
:root {
  --fondo: #f5f3ee; --papel: #ffffff; --tinta: #1b1d22; --tenue: #6d7178; --linea: #e4e0d7;
  --acento: #1460aa; --acento-suave: #e8f0f8; --lateral: #17191e; --ok: #2f7d4f; --alerta: #b3402a; --aviso: #a36a00;
  --radio: 10px; --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: var(--fuente); color: var(--tinta); background: var(--fondo); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.02em; font-weight: 650; }
h2 { font-size: 1rem; margin: 0 0 .8rem; font-weight: 650; }
code { background: var(--fondo); padding: .25rem .45rem; border-radius: 6px; font-size: .85rem; word-break: break-all; }

.lateral { position: fixed; inset: 0 auto 0 0; width: 216px; background: var(--lateral); color: #c9ccd3; display: flex; flex-direction: column; padding: 1.4rem 0 1rem; z-index: 20; }
.lateral .marca { color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; padding: 0 1.4rem; }
.lateral .marca:hover { text-decoration: none; }
.lateral .empresa { padding: .2rem 1.4rem 1.2rem; font-size: .78rem; color: #8b8f98; }
.lateral nav { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
.lateral nav a { color: #c9ccd3; padding: .5rem 1.4rem; border-left: 3px solid transparent; transition: background .15s, color .15s; }
.lateral nav a:hover { background: #20232a; color: #fff; text-decoration: none; }
.lateral nav a.activo { color: #fff; border-left-color: #6aa5dc; background: #20232a; }
.lateral .salir { padding: .6rem 1.4rem 0; }
.lateral .salir button { background: none; border: 0; color: #8b8f98; cursor: pointer; padding: 0; font: inherit; }
.lateral .salir button:hover { color: #fff; }
.menu-movil { display: none; }

main { margin-left: 216px; padding: 2rem 2.4rem 4rem; max-width: 1320px; }
body.simple main { margin: 0 auto; padding: 8vh 1rem; max-width: 420px; }
.cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.cab .sub { margin: .35rem 0 0; color: var(--tenue); }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.en-linea { display: inline; }

.boton { display: inline-flex; align-items: center; justify-content: center; padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); font: inherit; font-weight: 550; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.boton:hover { border-color: #c9c4b8; text-decoration: none; background: #fbfaf7; }
.boton:active { transform: translateY(1px); }
.boton.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.principal:hover { background: #0f4f8d; }
.boton.peligro { color: var(--alerta); }
.boton.mini { padding: .2rem .55rem; font-size: .8rem; font-weight: 500; }
.enlace { font-size: .87rem; }

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; }
.tarjeta.sin-relleno { padding: 0; overflow-x: auto; }
.tarjeta.estrecha { max-width: 720px; }
.tarjeta.acceso { text-align: left; padding: 2rem; }
.tarjeta.acceso h1 { margin-bottom: .2rem; }
.tarjeta.acceso .sub { color: var(--tenue); margin: 0 0 1.4rem; }
.tarjeta.acceso .boton { width: 100%; margin-top: .6rem; }
.separador { text-align: center; color: var(--tenue); font-size: .8rem; margin: 1rem 0 .4rem; position: relative; }
.separador::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--linea); }
.separador span { background: var(--papel); padding: 0 .6rem; position: relative; }
.tarjeta.acceso .boton + .boton { margin-top: .5rem; }
.tarjeta.acceso p { margin: .6rem 0; }
.fila-titulo { display: flex; justify-content: space-between; align-items: center; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.cifra { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; color: var(--tinta); display: block; transition: border-color .15s, transform .15s; }
a.cifra:hover { text-decoration: none; border-color: var(--acento); transform: translateY(-1px); }
.cifra span { display: block; font-size: .8rem; color: var(--tenue); }
.cifra strong { display: block; font-size: 1.45rem; letter-spacing: -0.02em; margin: .2rem 0; font-weight: 650; }
.cifra em { font-style: normal; font-size: .8rem; color: var(--tenue); }
.cifra.alerta strong { color: var(--alerta); }

.barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: .6rem; height: 200px; align-items: end; padding-top: 1.2rem; }
.barra { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.barra i { display: block; width: 100%; max-width: 46px; background: var(--acento); border-radius: 5px 5px 0 0; min-height: 2px; opacity: .88; animation: crecer .5s ease-out; transform-origin: bottom; }
.barra b { font-weight: 500; font-size: .75rem; color: var(--tenue); margin-top: .35rem; }
.barra small { position: absolute; top: -1.1rem; font-size: .7rem; color: var(--tenue); }
@keyframes crecer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 600; padding: .7rem 1rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .65rem 1rem; border-bottom: 1px solid #f0ede6; vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tfoot td { font-weight: 650; border-top: 2px solid var(--linea); border-bottom: 0; }
.tabla .num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla.filas-enlace tbody tr[data-href] { cursor: pointer; transition: background .12s; }
.tabla.filas-enlace tbody tr[data-href]:hover { background: #faf9f5; }
.tenue { color: var(--tenue); font-size: .88rem; }
.vacio { color: var(--tenue); text-align: center; padding: 2rem !important; }
.resumen { color: var(--tenue); margin: 0 0 .8rem; font-size: .9rem; }

.estado { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; background: #eeece6; color: #55585f; white-space: nowrap; }
.estado-pagada, .estado-aceptado, .estado-facturado, .estado-activa { background: #e3f1e8; color: var(--ok); }
.estado-vencida, .estado-rechazado { background: #f8e4df; color: var(--alerta); }
.estado-enviada, .estado-enviado, .estado-vista, .estado-visto, .estado-emitido { background: var(--acento-suave); color: var(--acento); }
.estado-parcial { background: #f7ecd3; color: var(--aviso); }

.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .9rem; }
.filtros label { color: var(--tenue); font-size: .87rem; display: flex; align-items: center; gap: .35rem; }
input, select, textarea { font: inherit; color: inherit; padding: .5rem .65rem; border: 1px solid #d5d0c5; border-radius: 8px; background: #fff; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
input[type=search] { min-width: 260px; }
input[type=color] { padding: .15rem; height: 2.3rem; width: 4rem; }
textarea { width: 100%; resize: vertical; }
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.campo > span { font-size: .8rem; color: var(--tenue); font-weight: 550; }
.campo input, .campo select { width: 100%; }
.campo.casilla { flex-direction: row; align-items: center; gap: .5rem; }
.campo.casilla input { width: auto; }
.campo.casilla span { font-size: .9rem; color: var(--tinta); font-weight: 400; }
.casilla-linea { font-size: .88rem; color: var(--tenue); margin-left: .8rem; }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem; }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.ancho-2 { grid-column: span 2; } .ancho-4 { grid-column: 1 / -1; }
.botonera { display: flex; gap: .6rem; margin-top: .6rem; }
.pila { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.pila .boton { width: 100%; }
.pila form { display: block; }

.aviso { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; animation: aparecer .25s ease-out; }
.aviso-ok { background: #e9f4ed; border-color: #cbe5d5; color: #22603c; }
.aviso-error { background: #faeae6; border-color: #f0cdc5; color: #8f2f1d; }
.aviso-info { background: var(--acento-suave); border-color: #cfe0f1; color: #0f4f8d; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.doc-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.hoja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 2.4rem 2.6rem; }
.hoja-cab { display: flex; justify-content: space-between; gap: 2rem; font-size: .9rem; color: #44474d; }
.hoja-cab strong { color: var(--tinta); }
.hoja-datos { text-align: right; min-width: 230px; }
.hoja-datos h2 { font-size: 1.5rem; color: var(--acento); margin: 0 0 .6rem; letter-spacing: -0.02em; }
.hoja-datos dl { display: grid; grid-template-columns: auto auto; gap: .2rem 1rem; margin: 0; justify-content: end; }
.hoja-datos dt { color: var(--tenue); } .hoja-datos dd { margin: 0; font-weight: 600; color: var(--tinta); }
.hoja-cliente { margin: 2rem 0 1.4rem; font-size: .92rem; color: #44474d; }
.hoja-desc { font-size: 1rem; margin: 0 0 1rem; }
.hoja .logo, img.logo { max-height: 46px; max-width: 200px; display: block; margin-bottom: .7rem; }
img.logo { display: inline-block; vertical-align: middle; margin: 0; }
.lineas-ver th, .lineas-ver td { padding-left: 0; }
.lineas-ver th:last-child, .lineas-ver td:last-child { padding-right: 0; }
.totales { margin: 1.2rem 0 0 auto; border-collapse: collapse; min-width: 320px; }
.totales td { padding: .3rem 0 .3rem 1.6rem; color: #44474d; }
.totales td:first-child { padding-left: 0; }
.totales tr.total td { font-weight: 700; font-size: 1.1rem; color: var(--tinta); border-top: 2px solid var(--tinta); padding-top: .55rem; }
.hoja-notas { margin-top: 1.6rem; font-size: .9rem; color: #44474d; }
.doc-lado .tarjeta { padding: 1.1rem 1.2rem; }
.cobro { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid #f0ede6; }
.form-cobro { margin-top: 1rem; }
.form-cobro .boton { width: 100%; }
.evento { margin: 0 0 .5rem; font-size: .88rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem; }

.lineas-editar { margin: .6rem 0 .8rem; }
.lineas-editar td { padding: .45rem .4rem; }
.lineas-editar td:first-child { width: 46%; padding-left: 0; }
.lineas-editar input, .lineas-editar select, .lineas-editar textarea { width: 100%; }
.lineas-editar textarea { margin-top: .35rem; font-size: .88rem; }
.lineas-editar input.num { text-align: right; }
.lineas-editar [data-importe] { padding-top: .95rem; font-weight: 600; min-width: 90px; }
.pie-doc { margin-top: 1.4rem; }
.paginas { display: flex; gap: 1rem; align-items: center; justify-content: center; color: var(--tenue); font-size: .88rem; margin-top: .4rem; }

@media (max-width: 1000px) {
  .lateral { transform: translateX(-100%); transition: transform .2s; }
  body.menu-abierto .lateral { transform: none; }
  .menu-movil { display: block; position: fixed; top: .7rem; right: .7rem; z-index: 30; background: var(--lateral); color: #fff; border: 0; border-radius: 8px; padding: .45rem .8rem; font: inherit; }
  main { margin-left: 0; padding: 1.2rem 1rem 3rem; }
  .cifras, .dos, .rejilla-4, .rejilla-2, .doc-rejilla { grid-template-columns: 1fr; }
  .ancho-2 { grid-column: auto; }
  .hoja { padding: 1.4rem; } .hoja-cab { flex-direction: column; } .hoja-datos { text-align: left; } .hoja-datos dl { justify-content: start; }
  .tabla th, .tabla td { padding: .55rem .6rem; }
}
@media print { .lateral, .menu-movil, .cab .acciones, .doc-lado { display: none; } main { margin: 0; padding: 0; } .hoja { border: 0; } }