/* ============================================================
   GestionaB2B - sistema visual
   Registro corporativo B2B: azul marino + azul de accion,
   superficies blancas, tipografia clara y densa.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&display=swap');

:root{
  --marino:      #12395B;
  --marino2:     #1B4D77;
  --azul:        #1B72C4;
  --azul-fuerte: #145AA0;
  --azul-claro:  #4BA3E3;
  --azul-suave:  #EAF3FB;

  --fondo:   #F2F5F8;
  --papel:   #FFFFFF;
  --linea:   #DCE3EA;
  --linea2:  #EDF1F5;

  --tinta:   #1E2A36;
  --tinta2:  #47576A;
  --suave:   #7C8B9B;

  --rojo:        #B02A1E;
  --rojo-suave:  #FDECEA;
  --verde:       #1E7E4F;
  --verde-suave: #E7F5EE;
  --ambar:       #8A6100;
  --ambar-suave: #FDF3DF;

  --tipo: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sombra: 0 1px 2px rgba(18,57,91,.06), 0 1px 3px rgba(18,57,91,.08);
}

*{ box-sizing:border-box }

body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--tipo); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--azul); text-decoration:none }
a:hover{ text-decoration:underline }

/* ---------------- Barra superior ---------------- */
/* ============================================================
   Armazon de la aplicacion: menu fijo a la izquierda, contenido
   al centro, indicadores a la derecha. Las paginas no cambian:
   siguen escribiendo .nav y .marco como antes.
   ============================================================ */
.nav{
  position:fixed; left:0; top:0; bottom:0; width:224px; z-index:60;
  background:var(--papel); border-right:1px solid var(--linea);
  display:flex; flex-direction:column; align-items:stretch;
  padding:0; overflow-y:auto;
}
.nav-marca{
  font-size:19px; font-weight:700; color:var(--marino);
  letter-spacing:-.02em; white-space:nowrap;
  padding:16px 16px 13px; border-bottom:1px solid var(--linea2);
  display:block;
}
.nav-marca span{ color:var(--azul-claro) }
.nav-marca img{ display:block; width:100%; max-width:186px; height:auto }
.nav-marca:hover{ text-decoration:none }
@media(max-width:900px){
  .nav-marca{ border-bottom:0; padding:10px 0 }
  .nav-marca img{ max-width:150px }
}

/* En la portada y en el acceso el logo va mas grande y centrado */
.portada .logo-portada{ display:block; margin:0 auto 22px; width:100%; max-width:360px; height:auto }

.nav-menu{
  display:flex; flex-direction:column; align-items:stretch; gap:1px;
  padding:10px; flex:1;
}
.nav-menu a{
  color:var(--tinta2); font-size:14.5px; padding:9px 12px; border-radius:6px;
  white-space:nowrap;
}
.nav-menu a:hover{ background:var(--linea2); color:var(--marino); text-decoration:none }
.nav-menu a.activo{ color:var(--azul); font-weight:600; background:var(--azul-suave) }

.nav-fin{
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  padding:12px 14px; border-top:1px solid var(--linea2);
}
.nav-usuario{ color:var(--tinta2); font-size:13.5px; overflow:hidden; text-overflow:ellipsis }
.nav-usuario b{ color:var(--marino); font-weight:600 }

/* ---------------- Columna derecha de indicadores ---------------- */
/* Las paginas sin menu (acceso, cambio de clave) no llevan barra
   lateral: una columna alta con un solo enlace se ve rara y corta el
   texto de abajo. Ahi la barra vuelve a ser una franja arriba. */
.nav.simple{
  position:static; width:auto; flex-direction:row; align-items:center;
  border-right:0; border-bottom:1px solid var(--linea);
  padding:0 22px; overflow:visible;
}
.nav.simple .nav-marca{ border-bottom:0; padding:14px 0 }
.nav.simple .nav-fin{
  flex-direction:row; align-items:center; margin-left:auto;
  border-top:0; padding:0;
}
.nav.simple + .marco, .nav.simple ~ .marco{ margin:0 auto; max-width:1240px }

.lateral{
  position:fixed; right:0; top:0; bottom:0; width:262px; z-index:55;
  background:var(--papel); border-left:1px solid var(--linea);
  padding:18px 16px 40px; overflow-y:auto;
}
.lateral h4{
  margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--suave);
}
.lateral .caja{
  background:var(--fondo); border:1px solid var(--linea);
  border-radius:6px; padding:14px; margin-bottom:16px;
}
.lateral .fila{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; padding:6px 0; border-bottom:1px solid var(--linea2);
}
.lateral .fila:last-child{ border-bottom:0 }
.lateral .fila b{ font-weight:600; color:var(--tinta2); font-size:13.5px }
.lateral .fila span{ font-weight:700; color:var(--marino);
  font-variant-numeric:tabular-nums; font-size:14px }
.lateral .fila .cuando{ font-size:12px; color:var(--suave); font-weight:400 }
.lateral .vacio-mini{ color:var(--suave); font-size:13px; padding:4px 0 }

@media(max-width:1280px){
  .lateral{ display:none }
}
@media(max-width:900px){
  .nav{
    position:static; width:auto; flex-direction:row; flex-wrap:wrap;
    align-items:center; border-right:0; border-bottom:1px solid var(--linea);
    padding:0 16px; overflow:visible;
  }
  .nav-marca{ border-bottom:0; padding:12px 0 }
  .nav-menu{ order:3; flex-basis:100%; flex-direction:row; flex-wrap:nowrap;
    overflow-x:auto; padding:0 0 8px }
  .nav-fin{ flex-direction:row; align-items:center; margin-left:auto;
    border-top:0; padding:0 }
}

/* ---------------- Estructura ---------------- */
.marco{ margin:0 262px 0 224px; padding:26px 26px 70px }
@media(max-width:1280px){ .marco{ margin-right:0 } }
@media(max-width:900px){ .marco{ margin:0; padding:22px 16px 60px } }
.marco.angosto{ max-width:520px }

.cabecera{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:20px; flex-wrap:wrap;
}
h1{
  font-size:31px; font-weight:300; color:var(--marino);
  margin:0; letter-spacing:-.01em;
}
.cabecera p{ margin:4px 0 0; color:var(--suave); font-size:14.5px }

h2{ font-size:19px; font-weight:600; color:var(--marino); margin:0 0 14px }
h3{ font-size:15.5px; font-weight:600; margin:0 }
p{ margin:0 }
.nota{ color:var(--tinta2); font-size:14px }

/* ---------------- Paneles ---------------- */
.panel{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:6px; box-shadow:var(--sombra); margin-bottom:18px; overflow:hidden;
}
.panel-cab{
  background:var(--marino); color:#fff; padding:11px 18px;
  font-size:14.5px; font-weight:600; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.panel-cab.claro{ background:var(--azul-suave); color:var(--marino); border-bottom:1px solid var(--linea) }
.panel-cuerpo{ padding:20px }
.panel-pie{
  padding:14px 20px; background:#FAFCFD; border-top:1px solid var(--linea);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

/* ---------------- Rejillas ---------------- */
.rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.rejilla-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px }
@media(max-width:640px){ .rejilla{ grid-template-columns:1fr } }

/* ---------------- Formularios ---------------- */
label{
  display:block; font-size:12px; font-weight:600; color:var(--tinta2);
  text-transform:uppercase; letter-spacing:.04em; margin:0 0 5px;
}
.campo{ margin-bottom:15px }
input,select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--linea);
  border-radius:5px; font-size:15px; font-family:inherit;
  background:#fff; color:var(--tinta); transition:border-color .12s,box-shadow .12s;
}
input:hover,select:hover{ border-color:#C4CFDA }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(27,114,196,.14);
}
input[type=checkbox]{ width:auto; margin-right:8px; accent-color:var(--azul) }
.marca-check{
  display:flex; align-items:center; font-size:15px; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--tinta); margin:0;
}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--azul); color:#fff; border:1px solid var(--azul);
  border-radius:5px; padding:9px 18px; font-size:14.5px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:background .12s,border-color .12s;
}
.btn:hover{ background:var(--azul-fuerte); border-color:var(--azul-fuerte); text-decoration:none; color:#fff }
.btn:disabled{ opacity:.55; cursor:default }
.btn.marino{ background:var(--marino); border-color:var(--marino) }
.btn.marino:hover{ background:var(--marino2); border-color:var(--marino2) }
.btn.linea{ background:#fff; color:var(--azul) }
.btn.linea:hover{ background:var(--azul-suave); color:var(--azul-fuerte) }
.btn.chico{ padding:6px 12px; font-size:13.5px }
.btn.ancho{ width:100% }

.enlace{
  background:none; border:0; color:var(--azul); font-family:inherit;
  font-size:14.5px; font-weight:600; cursor:pointer; padding:0;
}
.enlace:hover{ text-decoration:underline }

/* ---------------- Pestanas ---------------- */
.pestanas{
  display:flex; gap:4px; border-bottom:1px solid var(--linea); margin-bottom:0;
  overflow-x:auto;
}
.pestanas button{
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--suave); font-family:inherit; font-size:14.5px; font-weight:600;
  padding:11px 16px; cursor:pointer; white-space:nowrap;
}
.pestanas button:hover{ color:var(--marino) }
.pestanas button.activa{ color:var(--azul); border-bottom-color:var(--azul) }

/* ---------------- Filas de datos ---------------- */
.dato{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:10px 0; border-bottom:1px solid var(--linea2);
}
.dato:last-child{ border-bottom:0 }
.dato b{ font-weight:600; color:var(--tinta2); font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap }
.dato span{ text-align:right; color:var(--tinta) }

/* ---------------- Tabla ---------------- */
.tabla-marco{ overflow-x:auto }
table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px }
th{
  background:#F7F9FB; text-align:left; color:var(--tinta2);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:10px 14px; border-bottom:1px solid var(--linea);
}
td{ padding:12px 14px; border-bottom:1px solid var(--linea2); vertical-align:top }
tbody tr:hover{ background:#FAFCFE }

/* ---------------- Distintivos ---------------- */
.marca-estado{
  display:inline-block; padding:3px 10px; border-radius:3px;
  font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}
.marca-estado.nuevo{ background:var(--marino); color:#fff }
.marca-estado.activo{ background:var(--verde-suave); color:var(--verde) }
.marca-estado.espera{ background:var(--ambar-suave); color:var(--ambar) }
.marca-estado.cerrado{ background:var(--linea2); color:var(--suave) }
.marca-estado.malo{ background:var(--rojo-suave); color:var(--rojo) }

/* ---------------- Avisos ---------------- */
.aviso{ padding:11px 15px; border-radius:5px; font-size:14px; margin-top:14px; display:none }
.aviso.error{ display:block; background:var(--rojo-suave); color:var(--rojo); border:1px solid #F3C9C4 }
.aviso.ok{ display:block; background:var(--verde-suave); color:var(--verde); border:1px solid #BEE3D0 }
.aviso.dato{ display:block; background:var(--azul-suave); color:var(--marino); border:1px solid #C9E0F3 }

/* ---------------- Modulos ---------------- */
.modulo{
  background:var(--papel); border:1px solid var(--linea); border-radius:6px;
  padding:18px; box-shadow:var(--sombra); border-top:3px solid var(--azul-claro);
}
.modulo h3{ color:var(--marino); margin-bottom:5px }
.modulo p{ font-size:14px; color:var(--suave) }
.modulo.pendiente{ border-top-color:var(--linea); opacity:.7 }

/* ---------------- Portada ---------------- */
.portada{
  background:linear-gradient(135deg, var(--marino) 0%, #1B5E92 55%, var(--azul) 100%);
  color:#fff; padding:70px 22px 78px; text-align:center;
}
.portada h1{ color:#fff; font-size:41px; font-weight:300; max-width:16ch; margin:0 auto }
.portada p{ color:#D5E6F4; font-size:18px; max-width:56ch; margin:16px auto 28px }
.portada .btn{ background:#fff; color:var(--marino); border-color:#fff; padding:12px 26px; font-size:16px }
.portada .btn:hover{ background:#EAF3FB; color:var(--marino-fuerte) }

.pie{ color:var(--suave); font-size:13.5px; text-align:center; margin-top:34px }

/* ---------------- Logo empresa ---------------- */
.logo-empresa{
  max-height:60px; max-width:150px; border-radius:4px; background:#fff;
}
.logo-caja{
  border:1px dashed var(--linea); border-radius:6px; padding:14px;
  display:inline-block; margin-bottom:14px; background:#FAFCFD;
}

/* ---------------- Indicadores ---------------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px }
.kpi{
  background:var(--papel); border:1px solid var(--linea); border-left:3px solid var(--azul);
  border-radius:6px; padding:15px 17px; box-shadow:var(--sombra);
}
.kpi .n{ font-size:29px; font-weight:300; color:var(--marino); line-height:1.15 }
.kpi .r{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--suave); margin-top:3px }
.kpi.aviso-kpi{ border-left-color:var(--ambar) }
.kpi.ok-kpi{ border-left-color:var(--verde) }

.barra-acciones{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.vacio{ padding:40px 20px; text-align:center; color:var(--suave) }
.vacio b{ display:block; color:var(--tinta2); font-size:16px; margin-bottom:6px }

.linea-item{
  display:grid; grid-template-columns:1fr 110px 130px 40px; gap:10px;
  align-items:end; margin-bottom:10px;
}
@media(max-width:640px){ .linea-item{ grid-template-columns:1fr } }
.quitar{
  background:none; border:1px solid var(--linea); color:var(--rojo);
  border-radius:5px; width:38px; height:37px; cursor:pointer; font-size:16px;
}
.quitar:hover{ background:var(--rojo-suave) }
.mini{ font-size:12.5px; color:var(--suave) }
.cierra-hoy{ color:var(--rojo); font-weight:600 }

/* ---------------- Adjuntos ---------------- */
.zona-suelta{
  border:2px dashed var(--linea); border-radius:8px; padding:26px 20px;
  text-align:center; background:#FAFCFD; transition:border-color .15s, background .15s;
}
.zona-suelta.encima{ border-color:var(--azul); background:var(--azul-suave) }
.zona-suelta p{ color:var(--suave); font-size:14px; margin:8px 0 0 }

.archivo{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  border:1px solid var(--linea); border-radius:6px; margin-bottom:9px; background:#fff;
}
.archivo .icono{
  width:38px; height:38px; border-radius:5px; flex:none; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:var(--azul-suave); color:var(--marino); letter-spacing:.02em;
}
.archivo .icono.img{ background:var(--verde-suave); color:var(--verde) }
.archivo .icono.pdf{ background:var(--rojo-suave); color:var(--rojo) }
.archivo img.previa{ width:38px; height:38px; object-fit:cover; border-radius:5px; flex:none }
.archivo .med{ flex:1; min-width:0 }
.archivo .med b{ display:block; font-weight:600; font-size:14.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.archivo .acc{ display:flex; gap:8px; flex:none }
.etiqueta-cat{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--suave); background:var(--linea2);
  padding:2px 7px; border-radius:3px; margin-right:6px;
}

select.cat-fila{
  padding:5px 8px; font-size:12.5px; border-radius:4px; border:1px solid var(--linea);
  color:var(--tinta2); background:#fff; width:100%;
}

/* ---------------- Visor de archivos ---------------- */
.velo{
  position:fixed; inset:0; background:rgba(12,28,44,.72); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.visor{
  background:var(--papel); border-radius:8px; width:100%; max-width:1000px;
  height:88vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.visor-cab{
  background:var(--marino); color:#fff; padding:12px 18px;
  display:flex; align-items:center; gap:14px; flex:none;
}
.visor-cab .nom{ flex:1; min-width:0; font-weight:600; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.visor-cab .cerrar{
  background:none; border:0; color:#fff; font-size:26px; line-height:1;
  cursor:pointer; padding:0 4px;
}
.visor-cuerpo{ flex:1; overflow:auto; background:#F0F3F6; display:flex;
  align-items:center; justify-content:center; padding:0 }
.visor-cuerpo iframe{ width:100%; height:100%; border:0; background:#fff }
.visor-cuerpo img{ max-width:100%; max-height:100%; object-fit:contain }
.visor-nada{ text-align:center; padding:40px 26px; color:var(--tinta2); max-width:520px }
.visor-nada b{ display:block; font-size:17px; color:var(--marino); margin-bottom:8px }
.visor-nada .barra-acciones{ justify-content:center; margin-top:18px }

/* ============================================================
   Orden de compra: el documento
   ============================================================ */
.hoja{ border-top:3px solid var(--marino) }

.tarjeta-parte{
  border:1px solid var(--linea); border-radius:5px;
  padding:14px 16px; background:#FBFCFD;
}
.rotulo-parte{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--suave); margin-bottom:8px;
}

.totales{ max-width:340px; margin-left:auto }
.totales .dato b{ font-size:12px }
.totales .total-final{ border-top:2px solid var(--marino); border-bottom:0; margin-top:4px }
.totales .total-final b{ color:var(--marino); font-size:14px }
.totales .total-final span{ font-size:19px; font-weight:700; color:var(--marino) }

/* ============================================================
   Impresion: la orden sale como documento, sin cromo de la app
   ============================================================ */
@media print{
  body{ background:#fff; font-size:12.5px }
  .nav, .no-imprimir, .pie, .velo{ display:none !important }
  .marco{ max-width:none; margin:0; padding:0 }
  .cabecera{ border:0; padding:0 0 10px }
  .cabecera h1{ font-size:20px }
  .panel{ box-shadow:none; border:1px solid #CCC; break-inside:avoid; margin-bottom:12px }
  .panel-cab{ background:#fff; color:#000; border-bottom:2px solid #000 }
  .tarjeta-parte{ background:#fff }
  table{ min-width:0 }
  thead{ display:table-header-group }
  tr{ break-inside:avoid }
  a{ color:#000; text-decoration:none }
}


/* ============================================================
   Pie de firma: contacto y los dos banners del ecosistema.
   El contenido lo arma comun/pie.js; aca solo vive el aspecto.
   ============================================================ */
.pie-firma{ margin-top:34px; border-top:1px solid var(--linea); padding-top:26px }
.pie-marco{
  display:grid; grid-template-columns:minmax(260px,1fr) minmax(320px,1.15fr);
  gap:34px; align-items:start;
}
@media(max-width:820px){ .pie-marco{ grid-template-columns:1fr } }

.pie-logo{ display:block; width:100%; max-width:196px; height:auto; margin-bottom:12px }
.pie-lema{ color:var(--tinta2); font-size:14px; margin:0 0 14px; max-width:340px }
.pie-dato{ display:flex; gap:9px; align-items:baseline; font-size:14px; color:var(--tinta2); padding:3px 0 }
.pie-dato b{ color:var(--marino); font-weight:600; white-space:nowrap }
.pie-dato a{ color:var(--azul); text-decoration:none }
.pie-dato a:hover{ text-decoration:underline }

.pie-banners{ display:flex; flex-direction:column; gap:12px }
.banner{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--marino); color:#fff; border-radius:8px; padding:14px 16px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.banner:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(18,57,91,.18); text-decoration:none }
.banner.verde{ background:#17543A }
.banner .icono{
  flex:none; width:76px; height:58px; border-radius:8px; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:7px 9px;
}
.banner .icono img{ max-width:100%; max-height:100%; object-fit:contain; display:block; margin:auto }
/* El de Licibox es casi cuadrado y llena a lo alto; el de D&D es apaisado
   y llena a lo ancho. Con una sola regla, el apaisado quedaba diminuto. */
.banner .icono.cuadrado img{ height:100%; width:auto }
.banner .icono.ancho img{ width:100%; height:auto }
.banner .texto{ flex:1; min-width:0 }
.banner .texto b{ display:block; font-size:14.5px; font-weight:700; line-height:1.3 }
.banner .texto span{ display:block; font-size:13px; opacity:.86; line-height:1.35; margin-top:2px }
.banner .ir{
  flex:none; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28);
  border-radius:5px; padding:6px 11px; font-size:12.5px; font-weight:600; white-space:nowrap;
}
@media(max-width:520px){
  .banner{ flex-wrap:wrap }
  .banner .ir{ margin-left:90px }
}

.pie-legal{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--linea2);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--suave); font-size:13px;
}

@media print{ .pie-firma{ display:none } }


/* ============================================================
   Asistente IA
   ------------------------------------------------------------
   Entrada en el menu, tarjeta al pie de la barra izquierda y
   un panel que entra por la derecha. Todo lo inyecta
   comun/asistente.js: las paginas no cambian.
   ============================================================ */

.nav-menu a.nav-ia{ color:var(--azul); font-weight:600 }
.chispa{ color:var(--azul-claro) }
.nav-menu a.nav-ia:hover .chispa{ color:var(--azul) }

.ia-promo{
  margin:12px 12px 0; padding:14px; border-radius:10px;
  background:linear-gradient(160deg, var(--marino), var(--marino2));
  color:#fff;
}
.ia-promo b{ display:block; font-size:14px; margin-bottom:5px }
.ia-promo b .chispa{ color:var(--azul-claro) }
.ia-promo p{ margin:0 0 11px; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.86) }
.ia-promo button{
  width:100%; border:0; border-radius:7px; background:#fff; color:var(--marino);
  font-family:var(--tipo); font-weight:600; font-size:13px; padding:8px; cursor:pointer;
}
.ia-promo button:hover{ background:var(--azul-suave) }

.ia-velo{
  position:fixed; inset:0; background:rgba(18,57,91,.30);
  z-index:95; display:none;
}
.ia-velo.abierto{ display:block }

.ia-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(440px,100%);
  z-index:96; background:var(--papel); border-left:1px solid var(--linea);
  box-shadow:-8px 0 28px rgba(18,57,91,.14);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .18s ease;
}
.ia-panel.abierto{ transform:none }

.ia-cab{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--linea);
  background:var(--marino); color:#fff;
}
.ia-titulo{ flex:1; font-weight:600; font-size:15px }
.ia-cab button{
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff;
  font-family:var(--tipo); border-radius:6px; cursor:pointer;
}
.ia-cab button:hover{ background:rgba(255,255,255,.22) }
.ia-limpiar{ font-size:12.5px; padding:4px 10px }
.ia-cerrar{ font-size:20px; line-height:1; padding:1px 9px 4px }

.ia-hilo{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:11px;
  background:var(--fondo);
}
.ia-bienvenida{
  background:var(--papel); border:1px solid var(--linea); border-radius:10px;
  padding:14px; color:var(--tinta2); font-size:13.5px;
}
.ia-bienvenida b{ display:block; color:var(--marino); font-size:14.5px; margin-bottom:6px }
.ia-bienvenida p{ margin:0; line-height:1.5 }

.ia-msg{
  max-width:88%; padding:10px 13px; border-radius:12px;
  font-size:14px; line-height:1.52; word-wrap:break-word;
}
.ia-msg.yo{ align-self:flex-end; background:var(--azul); color:#fff; border-bottom-right-radius:4px }
.ia-msg.el{ align-self:flex-start; background:var(--papel); border:1px solid var(--linea); border-bottom-left-radius:4px }
.ia-msg.malo{ background:var(--rojo-suave); border-color:#F3C9C4; color:var(--rojo) }
.ia-msg p{ margin:0 0 8px } .ia-msg p:last-child{ margin:0 }
.ia-msg ul{ margin:6px 0; padding-left:19px } .ia-msg li{ margin:2px 0 }
.ia-msg.yo a{ color:#fff; text-decoration:underline }

.ia-pensando{ display:flex; gap:5px; align-items:center; padding:14px }
.ia-pensando span{
  width:7px; height:7px; border-radius:50%; background:var(--azul-claro);
  animation:iaLatir 1s infinite ease-in-out;
}
.ia-pensando span:nth-child(2){ animation-delay:.15s }
.ia-pensando span:nth-child(3){ animation-delay:.3s }
@keyframes iaLatir{ 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }

.ia-sug{ display:flex; flex-wrap:wrap; gap:7px; padding:12px 16px 0; background:var(--fondo) }
.ia-sug button{
  border:1px solid var(--linea); background:var(--papel); color:var(--azul);
  font-family:var(--tipo); font-size:12.5px; padding:6px 11px;
  border-radius:14px; cursor:pointer;
}
.ia-sug button:hover{ background:var(--azul-suave); border-color:var(--azul-claro) }

.ia-pie{
  border-top:1px solid var(--linea); padding:12px 14px 8px;
  display:flex; gap:8px; align-items:flex-end;
}
.ia-pie textarea{
  flex:1; resize:none; height:42px; max-height:120px; overflow-y:auto;
  border:1px solid var(--linea); border-radius:8px; padding:10px 12px;
  font-family:var(--tipo); font-size:14px; color:var(--tinta); line-height:1.4;
}
.ia-pie textarea:focus{ outline:0; border-color:var(--azul-claro); box-shadow:0 0 0 3px var(--azul-suave) }
.ia-nota{ font-size:11.5px; color:var(--suave); padding:0 14px 12px; line-height:1.4 }

@media(max-width:900px){
  .ia-panel{ width:100% }
}

@media print{
  .ia-promo, .ia-velo, .ia-panel{ display:none !important }
}

/* ============================================================
   Paneles compactos
   ------------------------------------------------------------
   Mismos datos, menos alto. Para las fichas de solo lectura
   (la de la empresa, la del banco), donde son siete u ocho
   renglones cortos y no hay para que darle a cada uno el alto
   de una fila de formulario.
   ============================================================ */
.panel.compacto .panel-cab{ padding:9px 15px; font-size:13.5px }
.panel.compacto .panel-cuerpo{ padding:8px 15px 12px }
.panel.compacto .dato{ padding:6px 0; gap:14px }
.panel.compacto .dato b{ font-size:11px; letter-spacing:.05em }
.panel.compacto .dato span{ font-size:13.5px }
.panel.compacto .aviso{ font-size:12.5px; padding:8px 11px; line-height:1.4 }

/* ============================================================
   De la vitrina
   ------------------------------------------------------------
   La ultima caja de la columna derecha no es un indicador: es
   el producto de otra empresa, sorteado en cada pagina. Va con
   la foto arriba y a sangre, porque en 230 px de ancho la foto
   es lo unico que alcanza a llamar la atencion.
   ============================================================ */
.lateral .caja.vitrina{ padding:0; overflow:hidden }
.lat-prod{ display:block; text-decoration:none; color:inherit }
.lat-prod:hover{ text-decoration:none }
.lat-prod img{
  display:block; width:100%; height:132px; object-fit:cover;
  background:var(--linea2); border-bottom:1px solid var(--linea);
}
.lat-prod b{
  display:block; padding:11px 13px 0; font-size:13.5px; font-weight:600;
  color:var(--marino); line-height:1.32;
}
.lat-prod span{
  display:block; padding:3px 13px 0; font-size:12.5px; color:var(--tinta2);
}
.lat-prod em{
  display:block; padding:8px 13px 12px; font-style:normal;
  font-size:12.5px; font-weight:600; color:var(--azul);
}
.lat-prod:hover b{ color:var(--azul) }
.lat-prod:hover em{ text-decoration:underline }