/* ===========================================================
   Genba 現場 — sistema visual
   Referencia: faena. Hormigón, acero, amarillo de seguridad,
   marcas de replanteo. Tipografía técnica, retículas visibles.
   =========================================================== */
:root{
  --tinta:#141A1F;        /* casi negro azulado: texto */
  --acero:#33454F;        /* azul acero: superficies oscuras */
  --hormigon:#EDEEEC;     /* gris cálido claro: fondo */
  --cal:#FFFFFF;          /* blanco: paneles */
  --linea:#C9CEC9;        /* gris línea: bordes */
  --seguridad:#F2B705;    /* amarillo seguridad: acento único */
  --alerta:#B3402B;       /* rojo óxido: errores */
  --ok:#2E6B4F;           /* verde: estados activos */

  --r:3px;                /* radio mínimo: lenguaje técnico, no blando */
  --f-tit:'Archivo',system-ui,sans-serif;
  --f-txt:'IBM Plex Sans',system-ui,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--hormigon); color:var(--tinta);
  font-family:var(--f-txt); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-tit); font-weight:600; letter-spacing:-.01em; margin:0}
a{color:var(--acero)}

/* ---------- Estructura ---------- */
.marco{display:grid; grid-template-columns:224px 1fr; min-height:100vh}
.lateral{
  background:var(--acero); color:#DDE3E6; padding:22px 0;
  /* marcas de replanteo: ticks verticales */
  background-image:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.10) 0 1px, transparent 1px 34px);
  background-position:right; background-size:9px 100%; background-repeat:no-repeat;
}
.marca{padding:0 22px 22px; display:flex; align-items:baseline; gap:9px}
.marca b{font-family:var(--f-tit); font-size:21px; color:#fff; letter-spacing:.02em}
.marca span{font-size:16px; color:var(--seguridad)}
.nav a{
  display:block; padding:9px 22px; color:#B9C4CA; text-decoration:none;
  border-left:3px solid transparent; font-size:14px;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.05)}
.nav a.on{color:#fff; border-left-color:var(--seguridad); background:rgba(242,183,5,.09)}
.pie{margin-top:auto; padding:16px 22px; font-size:12px; color:#8FA0A9}

.lienzo{padding:30px 38px; max-width:1180px}
.encabezado{display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; padding-bottom:14px; border-bottom:2px solid var(--tinta); margin-bottom:26px}
.encabezado h1{font-size:27px}
.encabezado p{margin:5px 0 0; color:#5C6A72; font-size:14px}

/* ---------- Paneles y tablas ---------- */
.panel{background:var(--cal); border:1px solid var(--linea); border-radius:var(--r); padding:22px; margin-bottom:20px}
.panel h2{font-size:17px; margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid var(--linea)}

/* Las tablas anchas se desplazan dentro de su panel en vez de desbordarlo.
   El envoltorio lo pone solo tabla-filtro.js sobre cada <table>. */
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
table{width:100%; border-collapse:collapse; background:var(--cal)}
th{
  text-align:left; font-family:var(--f-tit); font-size:13px; font-weight:600;
  padding:11px 13px; border-bottom:2px solid var(--tinta); white-space:nowrap;
}
td{padding:12px 13px; border-bottom:1px solid var(--linea); font-size:14px; vertical-align:middle}
tbody tr:hover{background:#F6F7F5}

/* ---------- DataTables con la piel de Genba ---------- */
.dt-container{width:100%; max-width:100%; overflow-x:auto}
/* En tablas densas cada celda va en una línea y la tabla se desplaza: se lee
   mucho mejor que con los nombres partidos en tres renglones. */
table.dataTable td, table.dataTable th{white-space:nowrap}
table.dataTable td.envuelve{white-space:normal; min-width:220px}
.dt-container table.dataTable{width:100% !important; border-collapse:collapse; margin:0}
/* encabezado ordenable */
table.dataTable thead th{background:none; border-bottom:2px solid var(--tinta); color:var(--tinta)}
table.dataTable thead th.dt-orderable-asc:hover, table.dataTable thead th.dt-orderable-desc:hover{color:#000; background:#FAFAF9}
table.dataTable thead th span.dt-column-order::before,
table.dataTable thead th span.dt-column-order::after{opacity:.3}
table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead th.dt-ordering-desc span.dt-column-order::after{opacity:1; color:var(--seguridad)}
table.dataTable tbody tr{background:transparent}
table.dataTable tbody tr:hover{background:#F6F7F5}
table.dataTable tbody td{border-bottom:1px solid var(--linea)}
table.dataTable tfoot td{border-top:2px solid var(--tinta)}
/* pie: filas por página + paginación */
.dt-layout-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.dt-layout-row:last-child{margin-top:12px; padding-top:12px; border-top:1px solid var(--linea);
  font-size:13px; color:#5C6A72}
.dt-length label, .dt-info{font-size:13px; color:#5C6A72}
.dt-length select{padding:5px 8px; border:1px solid var(--linea); border-radius:var(--r);
  font-size:13px; background:#fff; margin:0 5px}
.dt-paging{margin-left:auto}
.dt-paging .dt-paging-button{min-width:30px; padding:5px 10px; margin-left:3px; border:1px solid var(--linea);
  background:#fff; border-radius:var(--r); font-size:13px; color:var(--tinta) !important; cursor:pointer}
.dt-paging .dt-paging-button:hover:not(.disabled){background:var(--hormigon) !important; border-color:var(--linea)}
.dt-paging .dt-paging-button.current{background:var(--tinta) !important; color:#fff !important;
  border-color:var(--tinta); font-weight:600}
.dt-paging .dt-paging-button.disabled{opacity:.4; cursor:default}
.dt-empty{padding:34px; text-align:center; color:#5C6A72}
.vacio{padding:44px 22px; text-align:center; color:#5C6A72; background:var(--cal);
  border:1px dashed var(--linea); border-radius:var(--r)}

/* ---------- Formularios ---------- */
.rejilla{display:grid; grid-template-columns:repeat(2,1fr); gap:15px 20px}
.rejilla.tres{grid-template-columns:repeat(3,1fr)}
.campo{display:flex; flex-direction:column; gap:5px}
.campo.ancho{grid-column:1/-1}
label{font-size:13px; font-weight:500; color:#3E4A52}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{
  font-family:var(--f-txt); font-size:14px; padding:9px 11px;
  border:1px solid var(--linea); border-radius:var(--r); background:var(--cal); color:var(--tinta);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--seguridad); outline-offset:-1px; border-color:var(--seguridad);
}
input[type=color]{width:100%; height:38px; padding:3px; border:1px solid var(--linea); border-radius:var(--r)}
.pista{font-size:12px; color:#6B777E}

/* casillas de módulos: retícula de opciones */
.opciones{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:9px}
.opcion{display:flex; gap:9px; align-items:flex-start; padding:11px 13px;
  border:1px solid var(--linea); border-radius:var(--r); cursor:pointer; background:var(--cal)}
.opcion:has(input:checked){border-color:var(--tinta); background:#FDF8E7; box-shadow:inset 3px 0 0 var(--seguridad)}
.opcion input{margin-top:3px}
.opcion b{display:block; font-size:14px; font-weight:600}
.opcion small{color:#6B777E; font-size:12px; line-height:1.4}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--f-tit); font-size:14px; font-weight:600; padding:10px 19px;
  border:1px solid var(--tinta); border-radius:var(--r); background:var(--tinta); color:#fff;
  cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover{background:#000}
.btn.claro{background:var(--cal); color:var(--tinta)}
.btn.claro:hover{background:var(--hormigon)}
.btn.acento{background:var(--seguridad); border-color:var(--seguridad); color:var(--tinta)}
.btn.acento:hover{background:#DCA504}
.btn.peligro{background:var(--cal); border-color:var(--linea); color:#8A3F2E}
.btn.peligro:hover{background:#FBEDEA; border-color:var(--alerta); color:var(--alerta)}
.btn:disabled,.btn[disabled]{opacity:.5; cursor:not-allowed}

/* Celda de acciones al final de una fila: botones chicos, alineados, sin saltos */
td.acciones{white-space:nowrap; text-align:right}
td.acciones > *{vertical-align:middle}
td.acciones form{display:inline; margin:0}
td.acciones .btn + .btn, td.acciones .btn + form, td.acciones form + form, td.acciones form + .btn{margin-left:5px}

/* ---------- Señales de estado ---------- */
.marbete{display:inline-block; font-size:12px; font-weight:600; padding:3px 9px;
  border-radius:2px; border:1px solid currentColor}
.marbete.activa{color:var(--ok)}
.marbete.inactiva{color:#7A868D}
.aviso{padding:12px 15px; border-radius:var(--r); margin-bottom:18px; font-size:14px;
  border-left:3px solid var(--alerta); background:#FBEDEA; color:#7A2C1D}

/* ---------- Acceso ---------- */
.acceso{min-height:100vh; display:grid; place-items:center; background:var(--acero);
  background-image:repeating-linear-gradient(45deg,
    rgba(0,0,0,.05) 0 12px, transparent 12px 24px);}
.acceso .caja{width:100%; max-width:372px; background:var(--cal);
  border-radius:var(--r); padding:34px; border-top:4px solid var(--seguridad)}
.acceso .marca{padding:0 0 6px}
.acceso .marca b{color:var(--tinta)}
.acceso p.sub{margin:0 0 22px; color:#5C6A72; font-size:14px}
.acceso .campo{margin-bottom:14px}
.acceso .btn{width:100%; text-align:center; margin-top:6px}

@media (max-width:880px){
  .marco{grid-template-columns:1fr}
  .lateral{display:flex; flex-wrap:wrap; align-items:center; padding:12px; background-image:none}
  .nav{display:flex; flex-wrap:wrap}
  .nav a{border-left:none; border-bottom:3px solid transparent; padding:8px 13px}
  .nav a.on{border-left:none; border-bottom-color:var(--seguridad)}
  .lienzo{padding:20px}
  .rejilla,.rejilla.tres{grid-template-columns:1fr}
}

/* ---------- Validación ---------- */
.campo.malo input,.campo.malo select{border-color:var(--alerta); background:#FDF6F4}
.campo.malo input:focus,.campo.malo select:focus{outline-color:var(--alerta)}
.error{font-size:12.5px; color:var(--alerta); font-weight:500}
.requerido{color:var(--alerta); margin-left:2px}
.exito{padding:12px 15px; border-radius:var(--r); margin-bottom:18px; font-size:14px;
  border-left:3px solid var(--ok); background:#EAF3EE; color:#1E4A36}
.resumen-error{border-left-color:var(--alerta); background:#FBEDEA; color:#7A2C1D;
  padding:12px 15px; border-left-width:3px; border-left-style:solid; border-radius:var(--r); margin-bottom:18px}
.resumen-error ul{margin:6px 0 0; padding-left:18px}

/* módulo con dependencias activadas automáticamente */
.opcion.auto{background:#F4F6F4; border-style:dashed}
.opcion .req{display:block; font-size:11.5px; color:#6B777E; margin-top:3px; font-style:italic}
.opcion.fijo{background:#F1F2F0; cursor:default; opacity:.85}

/* ---------- Buscador de giros ---------- */
.giros{position:relative}
.giro-etiquetas{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px; min-height:26px}
.etiqueta{display:inline-flex; align-items:center; gap:7px; font-size:13px;
  background:var(--cal); border:1px solid var(--linea); border-left:3px solid var(--seguridad);
  border-radius:var(--r); padding:5px 9px}
.etiqueta b{font-family:var(--f-tit); font-size:12px; color:#5C6A72}
.etiqueta .quitar{border:0; background:none; cursor:pointer; font-size:17px; line-height:1;
  color:#7A868D; padding:0 2px}
.etiqueta .quitar:hover{color:var(--alerta)}
.giro-resultados{position:absolute; z-index:20; left:0; right:0; margin-top:3px; max-height:290px;
  overflow-y:auto; background:var(--cal); border:1px solid var(--tinta); border-radius:var(--r);
  box-shadow:0 6px 18px rgba(20,26,31,.14)}
.giro-item{display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  padding:9px 12px; border-bottom:1px solid var(--linea); font-family:var(--f-txt)}
.giro-item:hover,.giro-item.activo{background:#FDF8E7}
.giro-item b{font-family:var(--f-tit); font-size:12px; color:#5C6A72; margin-right:7px}
.giro-item span{font-size:13.5px}
.giro-item small{display:block; font-size:11.5px; color:#8B959B; margin-top:2px}
.giro-vacio{padding:14px; color:#6B777E; font-size:13px; text-align:center}

/* ---------- Logo ---------- */
.logo-caja{display:flex; gap:18px; align-items:flex-start}
.logo-marco{width:132px; height:88px; border:1px dashed var(--linea); border-radius:var(--r);
  display:grid; place-items:center; background:var(--cal); flex-shrink:0; padding:7px}
.logo-marco img{max-width:100%; max-height:100%; object-fit:contain}
.logo-marco .sin{font-size:11.5px; color:#8B959B; text-align:center}
.logo-campos{flex:1; display:flex; flex-direction:column; gap:11px}
.logo-o{display:flex; align-items:center; gap:10px; color:#8B959B; font-size:12px; margin:1px 0}
.logo-o::before,.logo-o::after{content:''; flex:1; height:1px; background:var(--linea)}
input[type=file]{font-size:13px; font-family:var(--f-txt)}
.logo-aviso{font-size:12.5px; color:var(--alerta); font-weight:500}

/* ---------- Plan y prueba ---------- */
.plan{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:13px 16px; border-radius:var(--r); border:1px solid var(--linea); background:var(--cal)}
.plan.enprueba{border-left:3px solid var(--seguridad); background:#FFFDF5}
.plan.vencida{border-left:3px solid var(--alerta); background:#FBEDEA}
.plan.activa{border-left:3px solid var(--ok); background:#F3F8F5}
.plan .dias{font-family:var(--f-tit); font-size:25px; line-height:1}
.plan .txt{font-size:13.5px; color:#4A555C}
.plan .txt b{display:block; font-family:var(--f-tit); font-size:14.5px; color:var(--tinta)}
.garantia{margin-top:9px; padding:9px 12px; background:#F3F8F5; border-left:3px solid var(--ok);
  border-radius:var(--r); font-size:12.5px; color:#1E4A36}

/* ---------- Ubicaciones ---------- */
.ubic-fila{border:1px solid var(--linea); border-radius:var(--r); padding:14px;
  margin-bottom:11px; background:var(--cal); position:relative}
.ubic-fila:has(input[name="ubic_principal"]:checked){border-left:3px solid var(--seguridad)}
.ubic-cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:11px}
.ubic-cab span{font-family:var(--f-tit); font-size:13px; color:#5C6A72}
.ubic-quitar{border:1px solid var(--linea); background:none; cursor:pointer; border-radius:var(--r);
  padding:3px 10px; font-size:12.5px; color:#7A868D; font-family:var(--f-txt)}
.ubic-quitar:hover{border-color:var(--alerta); color:var(--alerta)}
.ubic-opts{display:flex; gap:18px; flex-wrap:wrap; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--linea)}
.ubic-opts label{display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer}
.ubic-vacio{padding:26px; text-align:center; color:#6B777E; font-size:13.5px;
  border:1px dashed var(--linea); border-radius:var(--r); margin-bottom:11px}
.nota-footer{padding:11px 14px; background:#FDF8E7; border-left:3px solid var(--seguridad);
  border-radius:var(--r); font-size:13px; color:#5A4A10; margin-bottom:15px}
.plan-elegir{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:11px}
.plan-op{border:1px solid var(--linea); border-radius:var(--r); padding:14px; cursor:pointer;
  background:var(--cal); display:flex; gap:11px; align-items:flex-start}
.plan-op:has(input:checked){border-color:var(--tinta); background:#FDF8E7; box-shadow:inset 3px 0 0 var(--seguridad)}
.plan-op b{display:block; font-family:var(--f-tit); font-size:14.5px}
.plan-op small{color:#6B777E; font-size:12.5px; line-height:1.45; display:block; margin-top:3px}

/* ===========================================================
   Login de usuarios de empresa — dos paneles
   =========================================================== */
.acceso2{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
.acceso2 .marca-lado{
  background:var(--acero); color:#DDE3E6; padding:56px 52px;
  display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.acceso2 .marca-lado::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.acceso2 .marca-top{display:flex; align-items:baseline; gap:10px; position:relative; z-index:1}
.acceso2 .marca-top b{font-family:var(--f-tit); font-size:27px; color:#fff}
.acceso2 .marca-top span{font-size:20px; color:var(--seguridad)}
.acceso2 .lema{position:relative; z-index:1; max-width:400px}
.acceso2 .lema h2{font-family:var(--f-tit); font-size:31px; line-height:1.2; color:#fff; margin-bottom:14px}
.acceso2 .lema p{font-size:15px; color:#AEB9BF; line-height:1.6}
.acceso2 .marca-pie{position:relative; z-index:1; font-size:12.5px; color:#8FA0A9}

.acceso2 .form-lado{display:grid; place-items:center; padding:40px; background:var(--hormigon)}
.acceso2 .form-caja{width:100%; max-width:376px}
.acceso2 .form-caja h1{font-size:25px; margin-bottom:5px}
.acceso2 .form-caja .sub{color:#5C6A72; font-size:14px; margin:0 0 26px}
.acceso2 .campo{margin-bottom:15px}
.acceso2 .btn{width:100%; text-align:center; margin-top:6px; padding:12px}
.acceso2 .ayuda{margin-top:20px; font-size:12.5px; color:#6B777E; text-align:center; line-height:1.6}

@media (max-width:820px){
  .acceso2{grid-template-columns:1fr}
  .acceso2 .marca-lado{display:none}
}

/* ===========================================================
   App de empresa — navbar con branding del tenant
   =========================================================== */
.app-top{
  display:flex; align-items:center; gap:20px; padding:0 26px; height:60px;
  background:var(--acero); color:#fff; position:sticky; top:0; z-index:30;
}
.app-top .logo-emp{display:flex; align-items:center; gap:11px; font-family:var(--f-tit); font-weight:600}
.app-top .logo-emp img{height:34px; max-width:150px; object-fit:contain; background:#fff; border-radius:3px; padding:3px}
.app-top .marca-genba{margin-left:auto; font-size:12px; color:#8FA0A9; display:flex; align-items:baseline; gap:5px}
.app-top .marca-genba b{font-family:var(--f-tit); color:#C7CED2; font-size:14px}
.app-top .usuario{display:flex; align-items:center; gap:12px; font-size:13px; color:#C7CED2}
.app-top form{margin:0}

.app-nav{display:flex; flex-wrap:wrap; gap:2px; padding:0 22px; background:var(--tinta); position:relative; z-index:20}
.app-nav > a, .app-nav .nav-item > a{display:block; color:#AEB9BF; text-decoration:none; padding:12px 15px; font-size:13.5px;
  border-bottom:3px solid transparent; white-space:nowrap}
.app-nav > a:hover, .app-nav .nav-item > a:hover{color:#fff}
.app-nav > a.on, .app-nav .nav-item > a.on{color:#fff; border-bottom-color:var(--seguridad)}
.app-nav .caret{font-size:10px; opacity:.7; margin-left:2px}
.nav-item{position:relative}
.nav-menu{display:none; position:absolute; left:0; top:100%; min-width:230px; background:#fff;
  border:1px solid var(--linea); border-radius:0 0 var(--r) var(--r); box-shadow:0 10px 24px rgba(20,26,31,.16); padding:6px 0; z-index:30}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu, .nav-item.abierto .nav-menu{display:block}
/* el submenú del último módulo se abre hacia la izquierda para no salirse de la pantalla */
.nav-item:last-child .nav-menu{left:auto; right:0}
.nav-menu a{display:block; color:var(--tinta); text-decoration:none; padding:9px 16px; font-size:13.5px; white-space:nowrap}
.nav-menu a:hover{background:var(--cal); color:var(--tinta)}
@media (max-width:760px){
  .app-nav{padding:0 12px}
  .app-nav > a, .app-nav .nav-item > a{padding:11px 12px; font-size:13px}
  .nav-menu{position:absolute; left:0; right:auto; min-width:min(230px, calc(100vw - 24px))}
}

.app-cuerpo{padding:30px 38px; max-width:1180px}
.bienvenida{display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  padding-bottom:14px; border-bottom:2px solid var(--tinta); margin-bottom:26px}
.bienvenida h1{font-size:26px}
.bienvenida p{margin:5px 0 0; color:#5C6A72; font-size:14px}

.tarjetas{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; align-items:start}
.tarjeta{display:block; text-decoration:none; color:var(--tinta); background:var(--cal);
  border:1px solid var(--linea); border-radius:var(--r); padding:20px;
  border-left:3px solid var(--seguridad); transition:box-shadow .12s}
.tarjeta:hover{box-shadow:0 4px 14px rgba(20,26,31,.10)}
.tarjeta b{font-family:var(--f-tit); font-size:16px; display:block; margin-bottom:4px}
.tarjeta small{color:#6B777E; font-size:12.5px; display:block; line-height:1.45}

/* Tarjeta de módulo del inicio: título + descripción arriba, accesos directos abajo */
.tarjeta-mod{padding:0; display:flex; flex-direction:column}
.tarjeta-mod .tm-cabeza{display:block; padding:18px 20px 14px; text-decoration:none; color:inherit}
.tarjeta-mod .tm-cabeza:hover b{color:#000}
.tarjeta-mod .tm-atajos{list-style:none; margin:0; padding:0 20px 6px; border-top:1px solid var(--linea)}
.tarjeta-mod .tm-atajos li{border-bottom:1px solid #F0F1EF}
.tarjeta-mod .tm-atajos li:last-child{border-bottom:0}
.tarjeta-mod .tm-atajos a{display:block; padding:9px 0; font-size:13px; color:#5C6A72;
  text-decoration:none; position:relative; padding-left:14px; transition:color .12s}
.tarjeta-mod .tm-atajos a::before{content:'›'; position:absolute; left:2px; color:var(--linea); transition:color .12s}
.tarjeta-mod .tm-atajos a:hover{color:var(--tinta)}
.tarjeta-mod .tm-atajos a:hover::before{color:var(--seguridad)}

.franja-prueba{padding:11px 16px; border-radius:var(--r); margin-bottom:22px; font-size:13.5px;
  background:#FDF8E7; border-left:3px solid var(--seguridad); color:#5A4A10}
.franja-prueba.vencida{background:#FBEDEA; border-left-color:var(--alerta); color:#7A2C1D}

/* ---------- Cotizador / precios ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:24px}
.kpi{background:var(--cal); border:1px solid var(--linea); border-radius:var(--r);
  padding:18px 20px; border-left:3px solid var(--seguridad)}
.kpi .n{font-family:var(--f-tit); font-size:27px; line-height:1.1; margin-top:4px}
.kpi small{color:#6B777E; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em}
.kpi.total{border-left-color:var(--ok)}
.precio-tabla input{width:130px; text-align:right}
.precio-tabla td.n, .precio-tabla th.n{text-align:right}
.coti{background:var(--cal); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.coti .linea{display:flex; justify-content:space-between; padding:9px 15px; border-bottom:1px solid var(--linea); font-size:14px}
.coti .linea.base{background:#FBFBFA; font-weight:500}
.coti .linea .m{font-variant-numeric:tabular-nums}
.coti .tot{display:flex; justify-content:space-between; padding:13px 15px; background:var(--tinta); color:#fff}
.coti .tot b{font-family:var(--f-tit); font-size:18px}
.coti .ipc{display:flex; justify-content:space-between; padding:9px 15px; background:#FDF8E7; font-size:13px; color:#5A4A10}

/* ---------- Tablero de KPIs ---------- */
.kpi .sub2{font-size:11.5px; color:#8B959B; margin-top:3px}
.kpi.alerta{border-left-color:var(--alerta)}
.kpi.alerta .n{color:var(--alerta)}
.kpi.ok2{border-left-color:var(--ok)}
.mini{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:24px}
.mini .celda{background:var(--cal); border:1px solid var(--linea); border-radius:var(--r); padding:12px 14px}
.mini .celda .n{font-family:var(--f-tit); font-size:20px}
.mini .celda small{font-size:11.5px; color:#6B777E; text-transform:uppercase; letter-spacing:.02em}

.graf{display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:24px}
@media (max-width:820px){ .graf{grid-template-columns:1fr} }
.graf .panel{margin-bottom:0}
.barras{display:flex; flex-direction:column; gap:9px}
.barra-fila{display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:10px; font-size:13px}
.barra-fila .et{color:#4A555C; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barra-track{background:var(--hormigon); border-radius:2px; height:20px; overflow:hidden}
.barra-fill{height:100%; background:var(--seguridad); border-radius:2px 0 0 2px}
.barra-fila .v{font-variant-numeric:tabular-nums; color:var(--tinta); font-weight:500}
.dona{display:flex; flex-direction:column; gap:8px}
.dona .item{display:flex; align-items:center; gap:9px; font-size:13px}
.dona .punto{width:11px; height:11px; border-radius:2px; flex-shrink:0}
.dona .item .n{margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- Cotizaciones ---------- */
.barra-acciones{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px}
.barra-acciones form{display:flex; gap:7px; align-items:center; margin:0}
.est{display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:2px; border:1px solid currentColor}
.est.borrador{color:#8A6D00} .est.emitida{color:#2E6B4F} .est.pagada{color:#1E4A36} .est.anulada{color:#7A868D}
.filtros{display:flex; gap:6px; margin-bottom:16px}
.filtros a{font-size:13px; padding:5px 12px; border:1px solid var(--linea); border-radius:var(--r); text-decoration:none; color:#4A555C; background:var(--cal)}
.filtros a.on{border-color:var(--tinta); background:var(--tinta); color:#fff}
.linea-edit{display:grid; grid-template-columns:1fr 80px 130px 130px 40px; gap:8px; align-items:center; margin-bottom:7px}
.linea-edit input{width:100%}
.linea-edit .lt{text-align:right; font-variant-numeric:tabular-nums; font-size:13px; color:#4A555C}
.linea-edit .quitar{border:1px solid var(--linea); background:none; cursor:pointer; border-radius:var(--r); color:#7A868D; padding:6px}
.linea-cab{display:grid; grid-template-columns:1fr 80px 130px 130px 40px; gap:8px; font-size:12px; color:#6B777E; font-family:var(--f-tit); margin-bottom:6px}
.totales{max-width:320px; margin-left:auto; margin-top:14px}
.totales .fila{display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px solid var(--linea)}
.totales .fila.grande{font-family:var(--f-tit); font-size:18px; border-bottom:0; padding-top:11px}

/* ---------- Compras ---------- */
.cl-fila{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap}
.cl-fila select,.cl-fila input[type=text]{flex:1; min-width:120px}
.cl-badge{font-size:11px; font-weight:600; padding:3px 8px; border-radius:2px; border:1px solid currentColor}
.cl-badge.producto{color:#0F6E56} .cl-badge.equipo{color:#854F0B}
.cl-lt{min-width:90px; text-align:right; font-variant-numeric:tabular-nums; font-size:13px}
.est.recibida{color:#2E6B4F} .est.emitida{color:#854F0B}

/* ---------- Barra de filtro de tablas ---------- */
.tf-barra{display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap; margin-bottom:14px;
  padding:12px; background:#FAFAF9; border:1px solid var(--linea); border-radius:var(--r)}
.tf-barra .tf-buscar{flex:1 1 260px; min-width:200px; padding:9px 12px; border:1px solid var(--linea);
  border-radius:var(--r); font-family:var(--f-txt); font-size:14px; background:#fff}
.tf-barra .tf-buscar:focus{outline:2px solid var(--seguridad); outline-offset:-1px}
.tf-barra select{padding:8px 11px; border:1px solid var(--linea); border-radius:var(--r);
  font-size:13.5px; background:#fff; max-width:190px}
.tf-barra select:focus, .tf-barra input:focus{outline:2px solid var(--seguridad); outline-offset:-1px}
.tf-barra .tf-limpiar{padding:8px 12px; border:1px solid var(--linea); background:#fff;
  border-radius:var(--r); font-size:13px; cursor:pointer; font-family:var(--f-txt)}
.tf-barra .tf-limpiar:hover{background:var(--hormigon)}
.filtro-reportes label{display:flex; align-items:center; gap:6px; font-size:13px; color:#5C6A72}
.filtro-reportes input[type=month]{padding:7px 10px; border:1px solid var(--linea); border-radius:var(--r); font-size:13.5px}
.tf-barra .tf-rango{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#6B777E;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:3px 8px 3px 10px}
.tf-barra .tf-rango label{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap}
.tf-barra .tf-rango input{padding:5px 6px; border:0; font-size:13px; width:120px; background:transparent;
  font-family:var(--f-txt); color:var(--tinta)}
.tf-barra .tf-rango input[type=number]{width:88px; text-align:right}
.tf-barra .tf-rango input:focus{outline:0}
.tf-barra .tf-rango:focus-within{border-color:var(--seguridad); box-shadow:0 0 0 1px var(--seguridad)}
tfoot td{padding:10px 12px; font-size:13px; color:var(--tinta); background:#FAFAF9;
  border-top:2px solid var(--tinta); font-variant-numeric:tabular-nums}
tfoot .tf-total{font-weight:700; text-align:right}
tfoot td:first-child{font-family:var(--f-tit); font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:#6B777E}
.tf-contador{font-size:12.5px; color:#6B777E; margin-left:auto; white-space:nowrap}
/* La barra de filtros se ordena en dos filas legibles, sin inputs sueltos */
.tf-barra{align-items:flex-end}
.tf-barra .tf-buscar{flex:1 1 100%}
@media (min-width:900px){ .tf-barra .tf-buscar{flex:1 1 280px} }

/* ---------- Funnel / Kanban ---------- */
.kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}
.kanban-col{background:#F1F3F0; border-radius:var(--r); padding:10px; min-height:200px}
.kanban-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--f-tit); font-size:14px; color:var(--tinta); padding:4px 6px 10px}
.kanban-cont{font-size:11.5px; color:#6B777E; font-family:var(--f-txt)}
.kanban-cards{display:flex; flex-direction:column; gap:9px}
.kcard{background:#fff; border:1px solid var(--linea); border-radius:8px; padding:10px}
.kcard-top{display:flex; justify-content:space-between; align-items:center}
.kcard-cli{font-size:13px; margin-top:3px}
.kcard-meta{font-size:11.5px; color:#6B777E; margin-top:2px}
.kcard-alertas{display:flex; flex-wrap:wrap; gap:4px; margin-top:7px}
.al{font-size:10px; padding:2px 6px; border-radius:10px; font-weight:600}
.al-rojo{background:#FBEEE9; color:#B3402B} .al-amar{background:#FDF4DC; color:#8A6D00}
.al-gris{background:#EEF0EE; color:#6B777E} .al-azul{background:#E7F0F8; color:#185FA5}
.kcard-acc{margin-top:8px; text-align:right}
.mini-btn{font-size:11px; padding:4px 9px; border:1px solid var(--linea); background:#fff; border-radius:6px; cursor:pointer}
.mini-btn:hover{background:var(--acento); border-color:var(--acento)}
.kanban-vacio{text-align:center; color:#B4BCB4; padding:20px 0}
@media(max-width:900px){ .kanban{grid-template-columns:1fr} }

/* ---------- Archivos: galería, miniaturas y subida ---------- */
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; margin-bottom:4px}
.galeria .foto{margin:0; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
  background:#fff; transition:box-shadow .12s}
.galeria .foto:hover{box-shadow:0 4px 14px rgba(20,26,31,.12)}
.galeria .foto img{display:block; width:100%; height:118px; object-fit:cover; background:var(--hormigon)}
.galeria figcaption{display:flex; justify-content:space-between; align-items:center; gap:6px;
  padding:7px 9px; font-size:12px; color:#5C6A72; border-top:1px solid var(--linea)}
.galeria figcaption span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.galeria figcaption form{margin:0}
.galeria figcaption .btn{padding:2px 7px; font-size:11px; line-height:1.4}

.fila-subir{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px;
  padding:12px; background:#FAFAF9; border:1px dashed var(--linea); border-radius:var(--r)}
.fila-subir input[type=text]{flex:1 1 200px; min-width:170px; padding:8px 10px;
  border:1px solid var(--linea); border-radius:var(--r); font-size:13.5px; background:#fff}
.fila-subir input[type=file]{font-size:12.5px; max-width:100%}
.fila-subir input[type=file]::file-selector-button{font-family:var(--f-tit); font-size:12.5px;
  padding:7px 12px; margin-right:9px; border:1px solid var(--linea); border-radius:var(--r);
  background:#fff; color:var(--tinta); cursor:pointer}
.fila-subir input[type=file]::file-selector-button:hover{background:var(--hormigon)}

.btn.mini{padding:5px 10px; font-size:12px}
.miniatura{width:42px; height:42px; object-fit:cover; border-radius:var(--r);
  border:1px solid var(--linea); display:block; background:var(--hormigon)}
.miniatura.vacia{display:flex; align-items:center; justify-content:center; color:#AEB9BF;
  font-size:10px; text-align:center; line-height:1.1}
.aviso.ok{background:#E6F2EC; color:#2E6B4F; border-color:#BFE0CE}