/* ============================================================
   ideas_senaletica.css — Ideas Preventivas

   Se suma a ideas_estilo.css, no lo reemplaza. Todo lo de acá va
   con prefijo .sen- para que no choque con nada del portal.

   Los colores propios se declaran como variables dentro de
   .sen-wrap y se redefinen en modo oscuro: así el módulo no
   depende de variables del portal que puedan cambiar de nombre.
   El naranjo sí se toma del portal, con respaldo por si acaso.
   ============================================================ */

.sen-wrap{
  /* El contenedor sólo declaraba colores y el contenido quedaba
     pegado a la barra lateral, como si estuviera cortado. El resto
     del portal respira porque sus pantallas van dentro de .ti-card,
     que trae su propio margen; las de este módulo no.
     Los valores son los mismos de Mis cotizaciones. */
  max-width:1100px;
  margin:0 auto;
  padding:0 18px 24px;

  --sen-fondo:#ffffff;
  --sen-fondo2:#f7f7f8;
  --sen-borde:#e4e4e7;
  --sen-texto:#1a1a1a;
  --sen-tenue:#6b7280;
  --sen-naranjo:var(--ti-naranja,#FF5722);
  --sen-rojo:#D3151B;
  --sen-amarillo:#F2C500;
  --sen-azul:#00559B;
  --sen-verde:#009540;
}
body.dark-mode .sen-wrap{
  --sen-fondo:#1e1e20;
  --sen-fondo2:#252528;
  --sen-borde:#3a3a3e;
  --sen-texto:#EAEAEA;
  --sen-tenue:#9b9ba1;
}

@media (min-width: 720px){
  .sen-wrap{ padding:0 26px 32px; }
}

/* ---------- Encabezado del módulo ---------- */
.sen-cab{margin:0 0 18px}
.sen-cab h1{margin:0 0 4px;font-size:1.45em;color:var(--sen-texto)}
.sen-cab p{margin:0;color:var(--sen-tenue);font-size:.95em;max-width:60ch}

/* ---------- Las tres puertas ---------- */
.sen-puertas{
  display:grid;gap:12px;margin:0 0 26px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.sen-puerta{
  display:block;padding:16px 16px 14px;border-radius:12px;text-decoration:none;
  background:var(--sen-fondo);border:1px solid var(--sen-borde);
  border-left:4px solid var(--sen-naranjo);
  transition:transform .12s ease,box-shadow .12s ease;
}
.sen-puerta:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.sen-puerta:focus-visible{outline:2px solid var(--sen-naranjo);outline-offset:2px}
.sen-puerta.urgencia{border-left-color:var(--sen-rojo)}
.sen-puerta.vigente{border-left-color:var(--sen-verde)}
.sen-puerta b{display:block;color:var(--sen-texto);font-size:1.05em;margin-bottom:4px}
.sen-puerta span{display:block;color:var(--sen-tenue);font-size:.88em;line-height:1.45}

/* ---------- Tarjetas y listas ---------- */
.sen-card{
  background:var(--sen-fondo);border:1px solid var(--sen-borde);
  border-radius:12px;padding:14px 16px;margin-bottom:12px;
}
.sen-card h3{margin:0 0 8px;font-size:1.02em;color:var(--sen-texto)}
.sen-fila{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--sen-borde);
}
.sen-fila:last-child{border-bottom:0}
.sen-fila .info{min-width:0}
.sen-fila b{display:block;color:var(--sen-texto);font-size:.98em}
.sen-fila small{color:var(--sen-tenue);font-size:.83em}

/* ---------- Estado ---------- */
.sen-estado{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:.75em;font-weight:700;white-space:nowrap;
}
.sen-estado.borrador{background:#EEE;color:#555}
.sen-estado.revision{background:#FFF0E6;color:#C1400F}
.sen-estado.informe,
.sen-estado.cotizado{background:#E7F1FB;color:#00559B}
.sen-estado.aprobado,
.sen-estado.cerrado{background:#E6F5EC;color:#00713A}
body.dark-mode .sen-estado.borrador{background:#3a3a3e;color:#c9c9cf}

/* ---------- Recorrido ---------- */
.sen-paso{display:none}
.sen-paso.ver{display:block}

.sen-progreso{
  display:flex;gap:6px;margin:0 0 16px;font-size:.78em;color:var(--sen-tenue);
  flex-wrap:wrap;align-items:center;
}
.sen-progreso i{
  font-style:normal;padding:3px 10px;border-radius:999px;
  background:var(--sen-fondo2);border:1px solid var(--sen-borde);
}
.sen-progreso i.act{background:var(--sen-naranjo);border-color:var(--sen-naranjo);color:#fff;font-weight:700}

.sen-campo{margin:0 0 14px}
.sen-campo label{display:block;font-size:.85em;font-weight:600;margin-bottom:5px;color:var(--sen-texto)}
.sen-campo .pista{display:block;font-weight:400;color:var(--sen-tenue);font-size:.95em;margin-top:2px}
.sen-campo input[type=text],
.sen-campo input[type=number],
.sen-campo select,
.sen-campo textarea{
  width:100%;padding:11px 12px;border-radius:9px;font:inherit;font-size:16px;
  background:var(--sen-fondo);color:var(--sen-texto);border:1px solid var(--sen-borde);
}
.sen-campo textarea{min-height:96px;resize:vertical}
.sen-campo input:focus,.sen-campo select:focus,.sen-campo textarea:focus{
  outline:2px solid var(--sen-naranjo);outline-offset:-1px;border-color:var(--sen-naranjo);
}

/* Opciones tocables: en terreno se usa con una mano */
.sen-ops{display:flex;flex-wrap:wrap;gap:8px}
.sen-op{
  display:inline-flex;align-items:center;gap:7px;padding:10px 13px;
  border-radius:9px;border:1px solid var(--sen-borde);background:var(--sen-fondo);
  color:var(--sen-texto);font-size:.9em;cursor:pointer;min-height:44px;
}
.sen-op:hover{border-color:var(--sen-naranjo)}
.sen-op.act{background:var(--sen-naranjo);border-color:var(--sen-naranjo);color:#fff;font-weight:600}
.sen-op input{margin:0}

/* Señales derivadas */
.sen-senal{
  display:flex;gap:11px;align-items:flex-start;padding:11px;
  border:1px solid var(--sen-borde);border-radius:10px;margin-bottom:8px;
  background:var(--sen-fondo);
}
.sen-senal.act{border-color:var(--sen-naranjo);background:var(--sen-fondo2)}
.sen-senal .marca{width:14px;border-radius:4px;align-self:stretch;flex:0 0 14px}
.sen-senal .marca.rojo{background:var(--sen-rojo)}
.sen-senal .marca.amarillo{background:var(--sen-amarillo)}
.sen-senal .marca.azul{background:var(--sen-azul)}
.sen-senal .marca.verde{background:var(--sen-verde)}
.sen-senal .marca.naranjo{background:var(--sen-naranjo)}
.sen-senal .txt{flex:1;min-width:0}
.sen-senal .txt b{display:block;font-size:.95em;color:var(--sen-texto)}
.sen-senal .txt small{display:block;color:var(--sen-tenue);font-size:.82em;margin-top:2px}
.sen-senal .cant{width:64px;padding:7px;border-radius:8px;font-size:16px;
  border:1px solid var(--sen-borde);background:var(--sen-fondo);color:var(--sen-texto);text-align:center}

/* ---------- Fotos ---------- */
.sen-fotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sen-fotos figure{position:relative;margin:0;width:82px;height:82px;border-radius:9px;overflow:hidden;border:1px solid var(--sen-borde)}
.sen-fotos img{width:100%;height:100%;object-fit:cover;display:block}
.sen-fotos button{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer;
}

/* ---------- Placas ---------- */
.sen-placas{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sen-placa{text-align:center}
.sen-placa img{width:100%;height:auto;border-radius:6px}
.sen-placa small{display:block;margin-top:6px;color:var(--sen-tenue);font-size:.78em;line-height:1.35}

/* ---------- Avisos ---------- */
.sen-aviso{
  border-radius:10px;padding:11px 13px;font-size:.88em;line-height:1.5;
  border-left:3px solid var(--sen-naranjo);background:var(--sen-fondo2);
  color:var(--sen-texto);margin:0 0 14px;
}
.sen-aviso.ojo{border-left-color:var(--sen-amarillo)}
.sen-aviso.mal{border-left-color:var(--sen-rojo)}
.sen-aviso b{display:block;margin-bottom:2px}

/* Estado de la conexión: en faena importa y tiene que verse siempre */
.sen-conexion{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:8px 12px;margin:0 0 14px;border-radius:9px;font-size:.83em;
  background:var(--sen-fondo2);border:1px solid var(--sen-borde);color:var(--sen-tenue);
}
.sen-conexion .punto{width:9px;height:9px;border-radius:50%;background:var(--sen-verde);flex:0 0 9px}
.sen-conexion.sinred .punto{background:var(--sen-tenue)}
.sen-conexion.pendiente .punto{background:var(--sen-naranjo)}
.sen-conexion .der{margin-left:auto}

/* ---------- Pie de acciones ---------- */
.sen-acciones{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding-top:14px;margin-top:6px;border-top:1px solid var(--sen-borde);
}
.sen-acciones .der{margin-left:auto}

.sen-vacio{
  text-align:center;padding:30px 16px;color:var(--sen-tenue);
  border:1px dashed var(--sen-borde);border-radius:12px;font-size:.92em;line-height:1.6;
}

/* ---------- Biblioteca de íconos ---------- */
.sen-iconos{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sen-ico{
  border:1px solid var(--sen-borde);border-radius:10px;padding:10px;text-align:center;
  background:var(--sen-fondo);min-width:0;overflow-wrap:anywhere;
}
.sen-ico .caja{
  height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;
  background:var(--sen-fondo2);border-radius:7px;
}
.sen-ico .caja img{max-width:52px;max-height:52px}
.sen-ico code{font-size:.76em;color:var(--sen-tenue);display:block}
.sen-ico b{font-size:.8em;display:block;color:var(--sen-texto);line-height:1.3;margin-top:2px}
.sen-ico.pendiente{border-style:dashed;opacity:.75}

@media (max-width:600px){
  .sen-puertas{grid-template-columns:1fr}
  .sen-acciones .der{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sen-puerta{transition:none}
  .sen-puerta:hover{transform:none}
}

/* ---- Montos en la lista de producción ---------------------- */
/* El monto va después de la cantidad y no en columna propia: en
   un teléfono una tabla de cuatro columnas se corta o se achica
   hasta ser ilegible. */
.sen-monto{
  display:block;
  font-weight:600;
  font-size:.92rem;
  color:var(--sen-acento, var(--ti-naranja, #FF5722));
}
.sen-monto.gris{
  color:var(--ti-suave, #8a8a8a);
  font-weight:500;
  font-style:italic;
}
.sen-totales{
  margin-top:14px;
  padding-top:10px;
  border-top:2px solid var(--ti-borde, #e3e3e3);
}
.sen-totales .sen-fila:last-child{
  border-bottom:none;
  font-size:1.05rem;
}
body.dark-mode .sen-totales{ border-top-color:#3a3a3a; }

/* ---- Acciones por ícono en la biblioteca -------------------- */
/* Botones chicos y sin peso visual: la tarjeta la protagoniza el
   pictograma, no la botonera. */
.ico-acciones{
  display:flex; flex-wrap:wrap; gap:5px; justify-content:center;
  margin-top:7px;
  /* Tres botones no caben en una tarjeta angosta: se van a una
     segunda línea en vez de salirse del recuadro. */
}
.ico-btn{
  font:inherit; font-size:.7rem; line-height:1;
  padding:5px 8px; border-radius:6px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--ti-borde, #d8d8d8);
  background:transparent; color:var(--sen-tenue, #7a7a7a);
  transition:border-color .15s, color .15s;
}
.ico-btn:hover:not(:disabled){
  border-color:var(--sen-acento, var(--ti-naranja, #FF5722));
  color:var(--sen-acento, var(--ti-naranja, #FF5722));
}
.ico-btn:disabled{ opacity:.55; cursor:default; }
.ico-btn.quitar:hover{
  border-color:var(--sen-rojo, #C8102E);
  color:var(--sen-rojo, #C8102E);
}
body.dark-mode .ico-btn{ border-color:#3f3f3f; color:#9a9a9a; }

@media (prefers-reduced-motion: reduce){
  .ico-btn{ transition:none; }
}

/* ---- Tabla de enlace de precios ---------------------------- */
/* El scroll horizontal es a propósito: en un teléfono una tabla de
   cinco columnas o se corta o se achica hasta ser ilegible. Mejor
   que se desplace y se lea bien. */
.sen-tabla-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sen-tabla{
  width:100%; min-width:640px;
  border-collapse:collapse; font-size:.9rem;
}
.sen-tabla th{
  text-align:left; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--sen-tenue, #7a7a7a);
  padding:8px 10px; border-bottom:2px solid var(--ti-borde, #e3e3e3);
}
.sen-tabla td{
  padding:10px; vertical-align:top;
  border-bottom:1px solid var(--ti-borde, #ececec);
}
.sen-tabla tr.inactivo{ opacity:.5; }
.sen-tabla select{ max-width:200px; font-size:.85rem; }
.sen-mal{ color:var(--sen-rojo, #C8102E); font-size:.85rem; }

.sen-pasos{ margin:0 0 10px; padding-left:20px; }
.sen-pasos li{ margin-bottom:7px; line-height:1.5; }

body.dark-mode .sen-tabla th{ border-bottom-color:#3a3a3a; }
body.dark-mode .sen-tabla td{ border-bottom-color:#2e2e2e; }


/* ---- Revisión del taller ----------------------------------- */
.sen-volver{
  font-size:.86rem; color:var(--sen-tenue, #7a7a7a); text-decoration:none;
}
.sen-volver:hover{ color:var(--sen-acento, var(--ti-naranja, #FF5722)); }

.sen-fila.enlace{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
  padding:12px 14px; border-radius:9px;
  border:1px solid var(--ti-borde, #e6e6e6);
  margin-bottom:8px; background:var(--ti-fondo-2, #fff);
}
.sen-fila.enlace:hover{ border-color:var(--sen-acento, var(--ti-naranja, #FF5722)); }
/* Los recién llegados llevan barra al costado: en una bandeja de
   veinte, lo que importa es distinguir lo no atendido de un vistazo. */
.sen-fila.enlace.destaca{ border-left:4px solid var(--sen-acento, var(--ti-naranja, #FF5722)); }
.sen-fila .info{ flex:1; min-width:0; }
.sen-fila .info small{ display:block; color:var(--sen-tenue, #7a7a7a); font-size:.82rem; }

.sen-estado{
  display:inline-block; font-size:.72rem; padding:3px 8px; border-radius:99px;
  background:var(--ti-borde, #eee); color:var(--sen-tenue, #666);
}
.sen-estado.revision{ background:#FFF0E8; color:#C4501C; }
.sen-estado.revisado{ background:#E8F4EC; color:#1E7A45; }
.sen-estado.cotizado, .sen-estado.aprobado{ background:#E8EFF6; color:#28527A; }

.sen-tabla input.chico{ width:64px; font-size:.85rem; }
/* Verde un momento al guardar: sin eso no hay forma de saber si el
   cambio quedó, y el revisor termina recargando por las dudas. */
.sen-tabla .it.guardado{ box-shadow:0 0 0 2px rgba(0,150,64,.5); }
.sen-tabla .it.fallo{ box-shadow:0 0 0 2px rgba(200,16,46,.6); }

body.dark-mode .sen-fila.enlace{ background:#232323; border-color:#383838; }
body.dark-mode .sen-estado{ background:#333; color:#bbb; }
body.dark-mode .sen-estado.revision{ background:#4a2a18; color:#FFB48A; }
body.dark-mode .sen-estado.revisado{ background:#1c3a28; color:#7FD3A0; }


/* ---- Campos editables en la tabla de precios ---------------- */
.sen-tabla input.mat{
  font:inherit; font-size:.86rem;
  padding:4px 6px; border-radius:5px;
  border:1px solid transparent; background:transparent;
  color:inherit;
}
/* Sin borde hasta que se apunta: una tabla con veinte cajas de
   texto se ve como un formulario y no como una lista. */
.sen-tabla input.mat:hover{ border-color:var(--ti-borde, #ddd); }
.sen-tabla input.mat:focus{
  border-color:var(--sen-acento, var(--ti-naranja, #FF5722));
  background:var(--sen-fondo, #fff); outline:none;
}
.sen-tabla input.mat.guardado{ box-shadow:0 0 0 2px rgba(0,150,64,.45); }
.sen-check{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.76rem; color:var(--sen-tenue, #7a7a7a); margin-top:4px;
}
body.dark-mode .sen-tabla input.mat:focus{ background:#2a2a2c; }
body.dark-mode .sen-modal{
  --sen-fondo:#1e1e20; --sen-fondo2:#252528;
  --sen-borde:#3a3a3e; --sen-texto:#EAEAEA; --sen-tenue:#9b9ba1;
}


/* ---- Botón de eliminar -------------------------------------- */
/* Discreto hasta que se apunta: un aspa roja permanente en cada
   fila invita a apretarla, y esto no tiene deshacer. */
.sen-borrar{
  flex:none; width:32px; height:32px; line-height:1;
  font-size:1.25rem; font-family:inherit;
  border-radius:8px; cursor:pointer;
  border:1px solid transparent; background:transparent;
  color:var(--sen-tenue, #8a8a8a);
  transition:color .15s, border-color .15s;
}
.sen-borrar:hover:not(:disabled){
  color:var(--sen-rojo, #C8102E);
  border-color:var(--sen-rojo, #C8102E);
}
.sen-borrar:disabled{ opacity:.4; cursor:default; }
.ti-btn.sen-borrar{ width:auto; height:auto; font-size:.9rem; }

.sen-fila-borrable{ display:flex; align-items:center; gap:6px; }
.sen-fila-borrable .sen-fila{ flex:1; margin-bottom:0; }
.sen-fila-borrable{ margin-bottom:8px; }


/* ---- Señal sin agregar vs agregada -------------------------- */
/* La versión anterior sólo cambiaba el color del borde y nadie
   notaba la diferencia. Ahora la que no está agregada se ve
   apagada, y el signo dice qué pasa si la tocas. */
.sen-senal{ cursor:pointer; opacity:.62; transition:opacity .15s, border-color .15s; }
.sen-senal:hover{ opacity:.85; }
.sen-senal.act{ opacity:1; }
.sen-senal .sig{
  flex:0 0 26px; width:26px; height:26px; align-self:center;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-weight:700; font-size:1rem;
  border:1.5px solid var(--sen-borde);
  color:var(--sen-tenue);
}
.sen-senal.act .sig{
  border-color:var(--sen-naranjo); color:#fff;
  background:var(--sen-naranjo);
}
.sen-senal .marca.gris{ background:var(--sen-tenue); }
.sen-senal .quitar-libre{
  flex:none; width:28px; height:28px; align-self:center;
  border:none; background:transparent; cursor:pointer;
  font-size:1.2rem; color:var(--sen-tenue);
}
.sen-senal .quitar-libre:hover{ color:var(--sen-rojo); }

/* ---- «Falta una señal» -------------------------------------- */
.sen-falta{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--sen-borde); }
.sen-falta-fila{ display:flex; gap:8px; }
.sen-falta-fila input{
  flex:1; min-width:0; font:inherit; font-size:.92rem;
  padding:9px 11px; border-radius:9px;
  border:1px solid var(--sen-borde);
  background:var(--sen-fondo); color:var(--sen-texto);
}
.sen-falta-fila .ti-btn{ flex:none; }

@media (prefers-reduced-motion: reduce){ .sen-senal{ transition:none; } }


/* ---- Logo de la empresa ------------------------------------- */
.sen-logo-caja{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* Fondo a cuadros: deja ver si el PNG trae fondo blanco en vez de
   transparencia, que es el error más común al subir un logo. */
.sen-logo-vista{
  max-width:180px; max-height:70px; border-radius:8px; padding:8px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%),
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%, transparent 75%, #e8e8e8 75%);
  background-size:14px 14px;
  background-position:0 0, 7px 7px;
  border:1px solid var(--sen-borde);
}
.sen-logo-vacio{
  padding:18px 22px; border-radius:9px; font-size:.9rem;
  border:1px dashed var(--sen-borde); color:var(--sen-tenue);
}


/* ---- Armado manual ------------------------------------------ */
.sen-buscador{
  width:100%; font:inherit; font-size:1rem;
  padding:12px 14px; border-radius:10px;
  border:1px solid var(--sen-borde);
  background:var(--sen-fondo); color:var(--sen-texto);
}
.sen-buscador:focus{ outline:none; border-color:var(--sen-naranjo); }

/* Grilla de elección: la placa manda, el texto acompaña. Se elige
   señalética mirando, no leyendo. */
.sen-grilla{
  display:grid; gap:10px; margin-top:14px;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  max-height:52vh; overflow-y:auto;
}
.sen-tarjeta{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 6px; border-radius:10px; cursor:pointer;
  border:1px solid var(--sen-borde); background:var(--sen-fondo);
  font:inherit; text-align:center;
}
.sen-tarjeta:hover{ border-color:var(--sen-naranjo); }
.sen-tarjeta img{ width:100%; max-width:70px; height:auto; }
.sen-tarjeta small{ font-size:.72rem; line-height:1.25; color:var(--sen-texto); }
.sen-tarjeta code{ font-size:.65rem; color:var(--sen-tenue); }

/* Línea de la lista armada */
.sen-armado{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; margin-bottom:10px; border-radius:11px;
  border:1px solid var(--sen-borde); background:var(--sen-fondo);
}
.sen-armado img{ width:56px; height:auto; flex:none; }
.sen-armado .datos{ flex:1; min-width:0; }
.sen-armado .datos b{ display:block; font-size:.95rem; }
.sen-armado .datos code,
.sen-armado .datos small{ font-size:.74rem; color:var(--sen-tenue); }
.sen-armado .campos{
  display:grid; gap:8px; margin-top:9px;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
}
.sen-armado .campos label{
  display:flex; flex-direction:column; gap:3px;
  font-size:.72rem; color:var(--sen-tenue);
}
.sen-armado .campos select,
.sen-armado .campos input{
  font:inherit; font-size:.85rem; padding:7px 9px;
  border-radius:7px; border:1px solid var(--sen-borde);
  background:var(--sen-fondo2); color:var(--sen-texto);
  max-width:100%;
}
.sen-campo{ display:block; margin-bottom:14px; }
.sen-campo span{ display:block; font-size:.86rem; margin-bottom:5px; color:var(--sen-texto); }
.sen-campo input, .sen-campo textarea{
  width:100%; font:inherit; font-size:.95rem;
  padding:10px 12px; border-radius:9px;
  border:1px solid var(--sen-borde);
  background:var(--sen-fondo); color:var(--sen-texto);
}


/* ---- Editor de paneles -------------------------------------- */
/* En pantalla ancha, la vista previa al lado y fija: el cliente
   necesita ver el efecto de cada cambio sin subir y bajar. */
.sen-panel-editor{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width: 900px){
  .sen-panel-editor{ grid-template-columns:minmax(0,1fr) minmax(0,420px); }
  .sen-panel-vista{ position:sticky; top:78px; align-self:start; }
}
.sen-panel-marco{
  border:1px solid var(--sen-borde); border-radius:10px; padding:10px;
  background:var(--sen-fondo2); min-height:160px;
  display:flex; align-items:center; justify-content:center;
}
.sen-panel-marco img{ width:100%; height:auto; display:block; border-radius:4px; }

.sen-campos-fila{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }

.sen-seccion{ margin-bottom:14px; }
.sen-seccion > b{ display:block; font-size:.88rem; margin-bottom:7px; }
.sen-seccion .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sen-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.78rem; padding:6px 8px 6px 11px; border-radius:99px;
  border:1px solid var(--sen-borde); background:var(--sen-fondo);
  color:var(--sen-texto);
}
.sen-chip button{
  border:none; background:transparent; cursor:pointer;
  font-size:1rem; line-height:1; color:var(--sen-tenue); padding:0 2px;
}
.sen-chip button:hover{ color:var(--sen-rojo); }
.sen-chip.mas{
  cursor:pointer; border-style:dashed; padding:6px 11px;
  color:var(--sen-naranjo); font-family:inherit;
}

/* Buscador sobre el editor. Va como capa y no empujando la página:
   se elige un ícono y se vuelve al mismo punto donde se estaba. */
.sen-modal{
  /* La capa cuelga del body, no de .sen-wrap, así que no hereda sus
     variables: hay que repetirlas o todo sale del color de fallback. */
  --sen-fondo:#ffffff; --sen-fondo2:#f7f7f8;
  --sen-borde:#e4e4e7; --sen-texto:#1a1a1a; --sen-tenue:#6b7280;
  position:fixed; inset:0; z-index:120;
  background:rgba(0,0,0,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
/* El fondo sale de la variable del módulo, que ya cambia con el
   modo oscuro. Antes estaba fijo en blanco y la capa quedaba
   deslumbrante encima de una interfaz oscura. */
.sen-modal-caja{
  background:var(--sen-fondo); color:var(--sen-texto);
  width:100%; max-width:640px;
  max-height:86vh; overflow-y:auto; padding:16px;
  border-radius:16px 16px 0 0;
}
@media (min-width: 720px){
  .sen-modal{ align-items:center; }
  .sen-modal-caja{ border-radius:16px; }
}
.sen-modal-cab{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}


/* La medida bajo la vista previa: sin ajuste se cortaba como
   «00 x 60 cm» al no caber en el ancho del contenedor. */
.sen-panel-vista .sen-meta{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}


/* ---- Panel dentro del informe ------------------------------- */
.sen-panel-item{ margin-bottom:18px; }
.sen-panel-item img{
  width:100%; height:auto; display:block; border-radius:9px;
  border:1px solid var(--sen-borde); background:#fff;
}
.sen-panel-item .sen-fila{ margin-top:8px; }

/* ============================================================
   IMPRESIÓN
   El informe se guarda como PDF desde el navegador y ese archivo
   es el que se adjunta a la cotización. Así que la hoja impresa no
   es un extra: es un entregable.
   ============================================================ */
@media print {
  /* Fuera todo lo que no es el informe */
  .ti-sidebar, .ti-header, .ti-pie, .sen-acciones,
  #ti-instalar, .ti-flotantes, [class*="whatsapp"], [class*="asistente"] {
    display:none !important;
  }
  body, body.dark-mode {
    background:#fff !important; color:#000 !important;
    margin:0; padding:0;
  }
  .sen-wrap { max-width:none; margin:0; padding:0; }

  /* Cada tarjeta entera o en la página siguiente: una estación
     partida entre dos hojas obliga a dar vuelta la página para
     saber de qué zona se hablaba. */
  .sen-card, .sen-estacion, .sen-fila, .sen-ico {
    break-inside:avoid; page-break-inside:avoid;
  }
  .sen-card {
    border:1px solid #ccc !important; background:#fff !important;
    box-shadow:none !important; margin-bottom:14px;
  }
  h1 { font-size:20pt; }
  h3 { font-size:12pt; break-after:avoid; page-break-after:avoid; }
  body { font-size:10pt; }

  /* La lista de producción es lo que se cotiza: empieza en hoja
     propia para poder mandarla sola si hace falta. */
  .sen-produccion { break-before:page; page-break-before:always; }

  /* Los enlaces impresos no llevan a ninguna parte: se muestra
     el destino sólo si es externo. */
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  a { color:#000 !important; text-decoration:none; }

  .sen-monto, .sen-totales b { color:#000 !important; }
  .sen-aviso { border-left:3px solid #999 !important; background:#f6f6f6 !important; }

  @page { margin:14mm 12mm; }
}

/* ---------- Selector visual de figura de EPP ----------
   Mismo lenguaje que .sen-ico (biblioteca de íconos): caja con la
   miniatura arriba, texto abajo. Se agrega .act para la elegida,
   igual que .sen-senal en el buscador de señales. */
.sen-fig-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:10px;margin-top:8px;
}
.sen-fig-opt{
  border:1px solid var(--sen-borde);border-radius:10px;padding:10px;text-align:center;
  background:var(--sen-fondo);cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s,background .15s;
}
.sen-fig-opt:hover{border-color:var(--sen-naranjo)}
.sen-fig-opt:focus-visible{outline:2px solid var(--sen-naranjo);outline-offset:-1px}
.sen-fig-opt.act{border-color:var(--sen-naranjo);background:var(--sen-fondo2)}
.sen-fig-miniatura{
  height:78px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  background:var(--sen-fondo2);border-radius:7px;
}
.sen-fig-miniatura img{max-width:100%;max-height:74px}
.sen-fig-sin{font-size:.72em;color:var(--sen-tenue)}
.sen-fig-opt.vacia{border-style:dashed;opacity:.7}
.sen-fig-opt b{font-size:.85em;display:block;color:var(--sen-texto);line-height:1.3}
.sen-fig-opt small{display:block;color:var(--sen-tenue);font-size:.76em;margin-top:2px}

@media (max-width:600px){
  .sen-fig-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* ---------- Croquis de plantilla de panel ----------
   Sólo dentro de #pn-plantillas: .sen-op se usa en todo el portal
   (modo de EPP, sugerencias) y no hay que tocarlo ahí. */
#pn-plantillas .sen-op{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 8px 9px;min-width:88px;
}
#pn-plantillas .sen-plant-croquis{
  width:60px;height:auto;color:inherit;
}
#pn-plantillas .sen-op.act .sen-plant-croquis{color:#fff}

/* Celda que viene de una sección que esta plantilla no tiene: se
   muestra en la primera para que no desaparezca, pero conserva su
   sección real. El borde discontinuo avisa que es "prestada". */
.sen-chip.ajena{border-style:dashed;opacity:.8}

/* ---------- Sustancia NFPA (formulario en línea dentro de la sección) ---------- */
.sen-nfpa-form{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  margin-top:10px;padding:10px;border:1px dashed var(--sen-borde);border-radius:8px;
}
.sen-nfpa-form label{display:flex;flex-direction:column;gap:4px;font-size:.78em;color:var(--sen-tenue)}
.sen-nfpa-form label.nombre{flex:1 1 180px}
.sen-nfpa-form input,.sen-nfpa-form select{
  font:inherit;padding:6px 8px;border:1px solid var(--sen-borde);border-radius:6px;
  background:var(--sen-fondo);color:var(--sen-texto);min-width:64px;
}
.sen-nfpa-form label.nombre input{width:100%}
.sen-nfpa-form .acciones{display:flex;gap:8px;flex-basis:100%}


/* ---------- Catálogo público (ideas_senaletica_catalogo.php) ---------- */
.cat-wrap{max-width:1100px;margin:0 auto}
.cat-publico{padding:18px 16px 40px}
.cat-cabecera{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.cat-cabecera .cat-logo{height:46px;width:auto}
.cat-cabecera b{display:block;font-size:1.05em}
.cat-cabecera small{color:var(--sen-tenue)}
.cat-secciones{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:14px}
.cat-seccion{display:block;text-decoration:none;color:inherit}
.cat-seccion:hover{border-color:var(--sen-naranjo)}
.cat-seccion h3{margin:8px 0 2px}
.cat-muestras{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.cat-muestras img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--sen-fondo2);border-radius:6px}
.cat-plantillas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cat-salidas{margin-top:26px}
.cat-salidas .ti-btn{margin:4px 6px 0 0}
.cat-wrap #cat-buscar{margin:10px 0 12px}
.cat-links{display:grid;gap:8px;margin-top:10px}
.cat-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--sen-borde);border-radius:8px}
.cat-link b{flex:1 1 180px}
.cat-link code{font-size:.78em;color:var(--sen-tenue);flex:1 1 100%;word-break:break-all}

/* Selección para «Mi solicitud» */
.cat-pista{margin:6px 0 0;color:var(--sen-tenue);font-size:.9em}
.cat-pista b{color:var(--sen-texto)}
.cat-elegible{position:relative;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cat-elegible:hover{border-color:var(--sen-naranjo)}
.cat-elegible:focus-visible{outline:2px solid var(--sen-naranjo);outline-offset:-1px}
.cat-elegible.sel{border-color:var(--sen-naranjo);box-shadow:0 0 0 2px var(--sen-naranjo) inset}
.cat-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  background:var(--sen-naranjo);color:#fff;font-size:13px;line-height:22px;font-weight:700;display:none}
.cat-elegible.sel .cat-check{display:block}
.cat-barra{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;
  background:var(--sen-naranjo);color:#fff;text-decoration:none;padding:12px 18px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);white-space:nowrap;max-width:calc(100% - 32px);
  overflow:hidden;text-overflow:ellipsis;font-size:.95em}
.cat-barra:hover{filter:brightness(1.07)}
body.cat-con-barra{padding-bottom:76px}
.cat-sol-lista{display:grid;gap:8px;margin:14px 0}
.cat-sol-linea{display:grid;grid-template-columns:56px minmax(140px,1.4fr) 84px 190px minmax(160px,2fr) 34px;
  gap:10px;align-items:end;padding:10px;border:1px solid var(--sen-borde);border-radius:10px;background:var(--sen-fondo)}
.cat-sol-linea img{width:56px;height:56px;object-fit:contain;background:var(--sen-fondo2);border-radius:7px;align-self:center}
.cat-sol-nom{align-self:center;min-width:0}
.cat-sol-nom b{display:block;line-height:1.25}
.cat-sol-nom code{font-size:.76em;color:var(--sen-tenue)}
.cat-sol-linea label,.cat-sol-form label{display:flex;flex-direction:column;gap:4px;font-size:.78em;color:var(--sen-tenue);min-width:0}
.cat-sol-linea input,.cat-sol-linea select,.cat-sol-form input,.cat-sol-form textarea{
  font:inherit;font-size:1rem;padding:7px 9px;border:1px solid var(--sen-borde);border-radius:7px;
  background:var(--sen-fondo);color:var(--sen-texto);width:100%;box-sizing:border-box}
.cat-sol-quitar{border:1px solid var(--sen-borde);background:none;color:var(--sen-tenue);border-radius:7px;
  height:36px;cursor:pointer;font:inherit}
.cat-sol-quitar:hover{color:#c0392b;border-color:#c0392b}
.cat-sol-form{display:grid;gap:12px}
.cat-sol-2{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cat-sol-form .ti-btn{justify-self:start}
.sol-filtros{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.sol-filtros .sen-chip{text-decoration:none;color:inherit}
.sol-filtros .sen-chip.act{border-color:var(--sen-naranjo);color:var(--sen-naranjo);font-weight:600}
.sol-caja{margin-bottom:14px}
.sol-caja.est-nueva{border-left:4px solid var(--sen-naranjo)}
.sol-caja.est-descartada{opacity:.6}
.sol-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start}
.sol-estado select{font:inherit;padding:6px 8px;border:1px solid var(--sen-borde);border-radius:6px;background:var(--sen-fondo);color:var(--sen-texto)}
.sol-contacto{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.sol-contacto > span{flex:1 1 220px}
.sol-com{background:var(--sen-fondo2);border-radius:8px;padding:8px 10px;margin:8px 0}
.sol-items img{display:block;object-fit:contain;background:var(--sen-fondo2);border-radius:6px}
.cat-sol-form .cat-sol-wsp{justify-self:start;text-decoration:none;text-align:center}
@media (max-width:600px){ .cat-sol-form .ti-btn{justify-self:stretch;text-align:center} }
.sol-detalle{white-space:pre-wrap;font:inherit;font-size:.92em;line-height:1.55;background:var(--sen-fondo2);
  border-radius:8px;padding:10px 12px;margin:8px 0;overflow-wrap:anywhere}
.cat-trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media (max-width:760px){
  .cat-sol-linea{grid-template-columns:48px 1fr 34px;align-items:center}
  .cat-sol-linea img{width:48px;height:48px}
  .cat-sol-linea label{grid-column:1 / -1}
  .cat-sol-linea .cat-sol-quitar{grid-column:3;grid-row:1}
}

/* ---------- Catálogo público suelto (sin sesión) ----------
   Documento propio: no hereda nada del portal, así que define su
   tipografía, sus colores y su fondo. El modo lo lleva .cat-oscuro en
   <html>, puesto antes de pintar para que no haya destello. */
html.cat-oscuro{color-scheme:dark}
body.cat-suelto{
  margin:0;padding:20px 16px 48px;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:#F4F5F7;color:#1B1B1F;
}
html.cat-oscuro body.cat-suelto{background:#121214;color:#EAEAEA}
body.cat-suelto .cat-publico{
  --sen-fondo:#FFFFFF;--sen-fondo2:#ECEEF1;--sen-borde:#D3D7DE;
  --sen-texto:#1B1B1F;--sen-tenue:#5B6068;--sen-naranjo:#FF5722;
  background:none;padding:0;max-width:1100px;margin:0 auto;
}
html.cat-oscuro body.cat-suelto .cat-publico{
  --sen-fondo:#1C1C1F;--sen-fondo2:#26262B;--sen-borde:#3A3A40;
  --sen-texto:#F2F2F3;--sen-tenue:#9B9BA1;
}
body.cat-suelto h1{font-size:1.6rem;line-height:1.2;margin:.2em 0 .4em;color:var(--sen-texto)}
body.cat-suelto h3{margin:.3em 0 .2em;color:var(--sen-texto)}
body.cat-suelto p{line-height:1.5}
body.cat-suelto a{color:var(--sen-naranjo)}
body.cat-suelto .sen-meta{color:var(--sen-tenue);font-size:.92em}
body.cat-suelto .sen-card{
  background:var(--sen-fondo);border:1px solid var(--sen-borde);
  border-radius:12px;padding:14px;color:var(--sen-texto);
}
body.cat-suelto .sen-buscador{
  width:100%;box-sizing:border-box;font:inherit;padding:11px 13px;
  border-radius:10px;border:1px solid var(--sen-borde);
  background:var(--sen-fondo);color:var(--sen-texto);
}
body.cat-suelto .sen-ico b{color:var(--sen-texto)}
body.cat-suelto .ti-btn{
  display:inline-block;font:inherit;font-size:.92rem;text-decoration:none;
  padding:10px 16px;border-radius:999px;border:1px solid var(--sen-borde);
  background:var(--sen-fondo);color:var(--sen-texto);cursor:pointer;
}
body.cat-suelto .ti-btn.der{background:var(--sen-naranjo);border-color:var(--sen-naranjo);color:#fff;font-weight:700}
.cat-modo{
  position:fixed;top:12px;right:12px;z-index:20;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--sen-borde,#D3D7DE);
  background:#fff;cursor:pointer;font-size:1.1rem;line-height:1;
}
html.cat-oscuro .cat-modo{background:#26262B;border-color:#3A3A40}
.cat-modo-sol{display:none} html.cat-oscuro .cat-modo-luna{display:none}
html.cat-oscuro .cat-modo-sol{display:inline}
.cat-pie{
  max-width:1100px;margin:34px auto 0;text-align:center;
  font-size:.82rem;color:#7A7F87;line-height:1.5;
}

/* ---------- Grilla del catálogo ----------
   Dos columnas desde el teléfono; el alto de la caja acompaña al ancho
   para que las tarjetas queden parejas y no salga una lista infinita. */
.cat-publico .sen-iconos{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
@media (max-width:420px){
  .cat-publico .sen-iconos{grid-template-columns:repeat(2,1fr);gap:8px}
}
.cat-publico .sen-ico{
  border:1px solid var(--sen-borde);border-radius:10px;padding:8px;
  text-align:center;background:var(--sen-fondo);min-width:0;overflow-wrap:anywhere;
}
.cat-publico .sen-ico .caja{
  aspect-ratio:1;height:auto;display:flex;align-items:center;justify-content:center;
  /* Fondo claro fijo, también en modo oscuro: las señales están dibujadas
     para leerse sobre blanco. Una silueta negra o una placa blanca con
     transparencia, sobre gris oscuro, desaparece. */
  background:#F2F3F5;border-radius:8px;margin-bottom:6px;padding:8px;
}
.cat-publico .sen-ico .caja img{max-width:100%;max-height:100%;width:auto;height:auto}
.cat-publico .sen-ico code{font-size:.7em;color:var(--sen-tenue);display:block}
.cat-publico .sen-ico b{font-size:.76em;display:block;line-height:1.25;margin-top:2px}
.cat-publico .cat-salidas .ti-btn{display:block;text-align:center;margin:8px 0 0}
@media (min-width:520px){
  .cat-publico .cat-salidas .ti-btn{display:inline-block;margin:8px 8px 0 0}
}

/* Muestras de paneles en el catálogo: bocetos reales, con marca de agua. */
.cat-muestras-paneles{grid-template-columns:repeat(2,1fr)}
.cat-muestras-paneles img{aspect-ratio:5/3;object-fit:cover;background:#fff}
.cat-boceto{width:100%;height:auto;border-radius:8px;background:#fff;margin-bottom:8px;display:block}