/* Portal del asesor — hoja de estilos única, sin dependencias externas */
:root {
  --fondo: #f3f5f8;
  --panel: #ffffff;
  --tinta: #1f2a37;
  --tinta-2: #4b5563;
  --suave: #6b7280;
  --borde: #dde2ea;
  --borde-2: #eef1f5;
  --acento: #1d4e89;
  --acento-2: #2563a8;
  --acento-fondo: #e8f0fa;
  --ok: #157f3c;
  --ok-fondo: #e6f4ea;
  --aviso: #9a6400;
  --aviso-fondo: #fdf3dc;
  --error: #b42318;
  --error-fondo: #fdecea;
  --lateral: #13263f;
  --lateral-tinta: #c9d4e3;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--fuente); font-size: 15px; line-height: 1.5; color: var(--tinta); background: var(--fondo); }
a { color: var(--acento-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }
small, .suave { color: var(--suave); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; word-break: break-all; }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral { background: var(--lateral); color: var(--lateral-tinta); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; gap: 10px; align-items: center; padding: 4px 10px 18px; color: #fff; font-weight: 700; }
.marca .logo { width: 34px; height: 34px; border-radius: 8px; background: var(--acento-2); display: grid; place-items: center; font-size: 15px; }
.marca small { display: block; color: var(--lateral-tinta); font-weight: 400; font-size: .75rem; }
.nav-titulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #7f93ad; padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; color: var(--lateral-tinta); padding: 8px 10px; border-radius: 7px; font-size: .92rem; }
.nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav a.activo { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.nav .ico { width: 18px; text-align: center; opacity: .85; }
.nav .num { margin-left: auto; background: #e5484d; color: #fff; border-radius: 99px; font-size: .7rem; padding: 1px 7px; font-weight: 700; }
.cliente-actual { margin: 12px 4px 4px; padding: 10px; background: rgba(255,255,255,.06); border-radius: 8px; font-size: .85rem; color: #fff; }
.cliente-actual small { color: var(--lateral-tinta); display: block; }

.principal { padding: 26px 32px 60px; min-width: 0; }
.cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.cabecera .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.barra-movil { display: none; }

/* ---------- componentes ---------- */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; margin-bottom: 18px; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta > h2:first-child { display: flex; justify-content: space-between; align-items: center; }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; }
.rejilla-2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.cifra { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); }
.cifra .etq { font-size: .78rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.cifra .valor { font-size: 1.55rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cifra .det { font-size: .82rem; color: var(--suave); }
.cifra.alerta .valor { color: var(--error); }

.boton { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--panel); color: var(--tinta);
  padding: 8px 14px; border-radius: 8px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.boton:hover { background: #f7f9fb; text-decoration: none; }
.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.primario:hover { background: #173f70; }
.boton.peligro { color: var(--error); border-color: #f1b8b3; }
.boton.peligro:hover { background: var(--error-fondo); }
.boton.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.boton.peq { padding: 5px 10px; font-size: .8rem; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.en-linea { display: inline; }

.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .75rem; font-weight: 600; background: var(--borde-2); color: var(--tinta-2); white-space: nowrap; }
.etiqueta.borrador { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.emitida, .etiqueta.revisado, .etiqueta.cobrada { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.anulada, .etiqueta.pendiente-cobro { background: var(--error-fondo); color: var(--error); }
.etiqueta.pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.contabilizado { background: var(--acento-fondo); color: var(--acento); }
.etiqueta.nuevo { background: #e5484d; color: #fff; }

table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--borde); background: #fafbfc; white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde-2); vertical-align: middle; overflow-wrap: anywhere; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: #fafcff; }
.tabla .num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { font-weight: 700; background: #fafbfc; }
.tabla-scroll { overflow-x: auto; }
.vacio { text-align: center; color: var(--suave); padding: 34px 12px; }

/* ---------- formularios ---------- */
.form-rejilla { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
.campo .ayuda { font-size: .76rem; color: var(--suave); }
.campo .errorlist { list-style: none; margin: 0; padding: 0; color: var(--error); font-size: .8rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url],
select, textarea {
  font: inherit; font-size: .92rem; color: var(--tinta); background: #fff; border: 1px solid #cfd6e0; border-radius: 7px; padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b9d0ee; border-color: var(--acento-2); }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--acento); }
.campo.check { flex-direction: row; align-items: center; gap: 8px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filtros select, .filtros input { width: auto; }
.filtros input[type=search] { min-width: 220px; }
.errores-form { background: var(--error-fondo); color: var(--error); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }

/* mensajes flash */
.mensajes-flash { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.mensajes-flash li { padding: 11px 14px; border-radius: 8px; border: 1px solid; font-size: .92rem; }
.mensajes-flash .success { background: var(--ok-fondo); border-color: #b6dfc2; color: #0f5c2c; }
.mensajes-flash .error { background: var(--error-fondo); border-color: #f1b8b3; color: #8c1d14; }
.mensajes-flash .warning { background: var(--aviso-fondo); border-color: #f0d79a; color: #7a4f00; }
.mensajes-flash .info { background: var(--acento-fondo); border-color: #bfd3ee; color: #173f70; }

/* ---------- carpetas ---------- */
.anio-bloque { margin-bottom: 22px; }
.anio-bloque > h2 { font-size: 1rem; color: var(--tinta-2); }
.carpetas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.carpeta { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px; color: var(--tinta); box-shadow: var(--sombra); position: relative; }
.carpeta:hover { border-color: var(--acento-2); text-decoration: none; background: #fbfdff; }
.carpeta .icono { font-size: 28px; line-height: 1; }
.carpeta > span:last-of-type, .carpeta > span:nth-child(2) { min-width: 0; }
.carpeta .nombre { font-weight: 700; font-size: .9rem; overflow-wrap: break-word; padding-right: 14px; }
.carpeta .info { font-size: .78rem; color: var(--suave); }
.carpeta .etiqueta.nuevo { position: absolute; top: 8px; right: 8px; }
.carpeta.asesoria { background: #f7faff; }
.ruta { font-size: .85rem; color: var(--suave); margin-bottom: 4px; }
.ruta a { color: var(--suave); }

.zona-subida { border: 2px dashed #b9c6d8; border-radius: var(--radio); padding: 22px; text-align: center; background: #fafcff; transition: .15s; }
.zona-subida.encima { border-color: var(--acento-2); background: var(--acento-fondo); }
.zona-subida input[type=file] { margin: 10px auto; display: block; max-width: 100%; }
.zona-subida .lista-ficheros { font-size: .85rem; color: var(--tinta-2); margin-top: 6px; }

/* ---------- mensajes (chat) ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.burbuja { max-width: 75%; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--borde); white-space: pre-wrap; }
.burbuja.mia { align-self: flex-end; background: var(--acento-fondo); border-color: #c7d9f0; }
.burbuja .meta { font-size: .72rem; color: var(--suave); margin-top: 4px; }
.aviso-item { border-left: 3px solid var(--acento-2); padding: 6px 12px; margin-bottom: 10px; background: #fafcff; }

/* ---------- factura ---------- */
.lineas-tabla input { padding: 6px 8px; }
.lineas-tabla td { padding: 6px 6px; vertical-align: top; }
.lineas-tabla .c-desc { min-width: 260px; }
.lineas-tabla .c-n { width: 95px; }
.lineas-tabla .c-p { width: 70px; }
.lineas-tabla .c-imp { width: 110px; text-align: right; padding-top: 14px; font-weight: 600; }
.totales { margin-left: auto; max-width: 340px; }
.totales div { display: flex; justify-content: space-between; gap: 18px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.totales .total { border-top: 2px solid var(--acento); margin-top: 6px; padding-top: 8px; font-size: 1.2rem; font-weight: 700; color: var(--acento); }
.vista-factura { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dato { font-size: .9rem; }
.dato b { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.barra-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
details.desplegable { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; margin-top: 10px; background: #fff; }
details.desplegable summary { cursor: pointer; font-weight: 600; }
.aviso-legal { font-size: .82rem; color: var(--tinta-2); background: var(--aviso-fondo); border-radius: 8px; padding: 10px 14px; }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 500px at 10% -10%, #2a5b96 0%, transparent 60%), linear-gradient(160deg, #13263f, #0d1b2d); }
.acceso .caja { background: #fff; border-radius: 14px; padding: 32px 30px; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.acceso .caja h1 { font-size: 1.3rem; }
.acceso .caja .campo { margin-bottom: 14px; }
.acceso .boton { width: 100%; justify-content: center; padding: 11px; }

/* ---------- móvil ---------- */
.pestanas-movil { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .pestanas-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff;
    border-top: 1px solid var(--borde); padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(16,24,40,.06); }
  .pestanas-movil a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: .68rem; font-weight: 600;
    color: var(--suave); padding: 5px 0; border-radius: 8px; text-decoration: none; }
  .pestanas-movil a span { font-size: 1.15rem; line-height: 1.2; }
  .pestanas-movil a.activo { color: var(--acento); background: var(--acento-fondo); }
  body:has(.pestanas-movil) .principal { padding-bottom: 90px; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 270px; transform: translateX(-100%); transition: transform .2s; z-index: 50; height: 100%; }
  body.menu-abierto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .barra-movil { display: flex; align-items: center; gap: 12px; background: var(--lateral); color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 40; }
  .barra-movil button { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 0 4px; }
  .principal { padding: 18px 16px 50px; }
  .carpetas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .carpeta { padding: 12px; gap: 8px; }
  .carpeta .icono { font-size: 22px; }
  .carpeta .nombre { font-size: .76rem; letter-spacing: -.01em; }
  .carpeta .etiqueta.nuevo { top: 5px; right: 5px; padding: 1px 7px; }
  .rejilla-2, .vista-factura { grid-template-columns: 1fr; }
  .burbuja { max-width: 92%; }
  .ocultar-movil { display: none; }
  .filtros input[type=search] { min-width: 0; flex: 1; }
  .rejilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* líneas de factura en tarjetas */
  .lineas-tabla thead { display: none; }
  .lineas-tabla, .lineas-tabla tbody { display: block; }
  .lineas-tabla tr.fila-linea { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .lineas-tabla tr.fila-linea td { display: block; padding: 0; border: 0; width: auto; min-width: 0; }
  .lineas-tabla td.c-desc { grid-column: 1 / -1; }
  .lineas-tabla td[data-etq]::before { content: attr(data-etq); display: block; font-size: .72rem; color: var(--suave); font-weight: 600; }
  .lineas-tabla td.c-imp { grid-column: 1 / 3; text-align: left; padding-top: 6px; }
  .cifra { padding: 12px 14px; }
  .cifra .valor { font-size: 1.2rem; }
  .cabecera .acciones { width: 100%; }
  .cabecera .acciones .boton { flex: 1; justify-content: center; }
}

@media print {
  .lateral, .barra-movil, .cabecera .acciones, .no-imprimir { display: none !important; }
  .app { display: block; }
  .principal { padding: 0; }
  .tarjeta { box-shadow: none; border: 0; }
}