:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#e0eafe;
  --bg:#f4f6fa; --surface:#ffffff; --surface-alt:#f1f5f9;
  --border:#e2e8f0; --text:#1e293b; --text-muted:#64748b; --text-faint:#94a3b8;
  --danger:#dc2626; --danger-bg:#fbe1e1;
  --success:#059669; --success-bg:#d9f5e8;
  --warning:#d97706; --warning-bg:#fef1d6;
  --info:#0891b2; --info-bg:#d7f3f7;
  --purple:#7c3aed; --purple-bg:#ece5fd;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 20px 40px -12px rgba(15,23,42,.25);
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;}

.app-shell{display:flex;min-height:100vh;}
.sidebar{width:230px;background:var(--surface);border-right:1px solid var(--border);flex-shrink:0;padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.marca{display:flex;align-items:center;gap:10px;padding:4px 6px 18px;font-weight:700;font-size:16px;}
.marca-letra{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#0891b2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.menu-seccion{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;padding:14px 10px 6px;}
.menu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text-muted);font-size:13.5px;font-weight:600;margin-bottom:2px;}
.menu-item svg{flex-shrink:0;}
.menu-item:hover{background:var(--surface-alt);color:var(--text);text-decoration:none;}
.menu-item.activo{background:var(--primary-light);color:var(--primary-dark);}

.main-area{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 26px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:15;}
.topbar h1{font-size:16.5px;margin:0;}
.usuario-caja{display:flex;align-items:center;gap:10px;font-size:13px;}
.usuario-nombre{font-weight:600;}
.usuario-rol{background:var(--surface-alt);border:1px solid var(--border);border-radius:999px;padding:5px 11px;color:var(--text-muted);font-size:11.5px;font-weight:700;}
.contenido{padding:24px 26px 60px;max-width:1220px;}

.flash{padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.5px;}
.flash-ok{background:var(--success-bg);color:var(--success);}
.flash-error{background:var(--danger-bg);color:var(--danger);}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.tarjeta{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.tarjeta .valor{font-size:24px;font-weight:700;}
.tarjeta .etiqueta{color:var(--text-muted);font-size:12.5px;}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:18px;box-shadow:var(--shadow);}
.block-title{font-weight:700;font-size:13.5px;margin:0 0 10px;}

/* ---------- encabezado de sección (título + descripción + acción) ---------- */
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.section-title h2{font-size:16px;margin:0;display:flex;align-items:center;gap:8px;}
.section-title p{margin:2px 0 0;font-size:12.5px;color:var(--text-muted);}
.section-title .count-badge{background:var(--primary-light);color:var(--primary-dark);font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;}

table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;font-size:13.2px;}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;}
th{background:var(--surface-alt);font-weight:700;color:var(--text-muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.03em;white-space:nowrap;}
tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#fafbfe;}
.tabla-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.row-click{cursor:pointer;}
.row-click:hover{background:var(--primary-light) !important;}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap;}
.b-green{background:var(--success-bg);color:var(--success);}
.b-amber{background:var(--warning-bg);color:var(--warning);}
.b-red{background:var(--danger-bg);color:var(--danger);}
.b-cyan{background:var(--info-bg);color:var(--info);}
.b-gray{background:var(--surface-alt);color:var(--text-muted);}
.b-purple{background:var(--purple-bg);color:var(--purple);}
.b-blue{background:var(--primary-light);color:var(--primary-dark);}

.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,transform .05s;font-family:inherit;}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.55;cursor:default;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{background:var(--surface);border-color:var(--border);color:var(--text);}
.btn-outline:hover{background:var(--surface-alt);}
.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:transparent;}
.btn-danger:hover{background:#f5c7c7;}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:transparent;}
.btn-ghost:hover{background:var(--surface-alt);}
.btn-sm{padding:6px 10px;font-size:12px;}

.campo{margin-bottom:12px;}
.campo label{display:block;font-size:11.5px;font-weight:700;margin-bottom:5px;color:var(--text-muted);}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;font-family:inherit;background:#fff;color:var(--text);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
textarea{min-height:70px;resize:vertical;}
.campo-otro{margin-top:6px;}
.campo-otro.oculto{display:none;}
.fila-campos{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fila-campos-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;}
.checkbox-linea{display:flex;align-items:flex-start;gap:8px;font-size:12.8px;padding:3px 0;}

.filtros-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:.12s;}
.chip:hover{border-color:var(--primary);color:var(--primary-dark);}
.chip.activo{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ---------- buscador con resultados en vivo (Clientes, etc.) ---------- */
.search-box{position:relative;min-width:210px;flex:1;max-width:280px;}
.search-box input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:20px;font-size:13px;}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none;}
.search-resultados{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:60;max-height:320px;overflow-y:auto;}
.search-resultados.oculto{display:none;}
.search-resultado{display:block;padding:9px 12px;font-size:12.8px;color:var(--text);border-bottom:1px solid var(--border);cursor:pointer;}
.search-resultado:last-child{border-bottom:none;}
.search-resultado:hover,.search-resultado.activo{background:var(--primary-light);text-decoration:none;}
.search-resultado .sr-nombre{font-weight:600;}
.search-resultado .sr-meta{color:var(--text-muted);font-size:11.5px;margin-top:1px;}
.search-vacio{padding:14px 12px;font-size:12.5px;color:var(--text-muted);text-align:center;}

.timeline{border-left:2px solid var(--border);margin-left:8px;padding-left:18px;}
.tl-item{position:relative;margin-bottom:16px;}
.tl-item:last-child{margin-bottom:0;}
.tl-item.clickable{cursor:pointer;}
.tl-item.clickable .tl-card{transition:.12s;border:1px solid transparent;}
.tl-item.clickable:hover .tl-card{border-color:var(--primary);background:var(--primary-light);}
.tl-dot{position:absolute;left:-23px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--info);border:2px solid #fff;box-shadow:0 0 0 2px var(--info);}
.tl-dot.compromiso{background:var(--purple);box-shadow:0 0 0 2px var(--purple);}
.tl-dot.en_proceso{background:var(--warning);box-shadow:0 0 0 2px var(--warning);}
.tl-dot.finalizado{background:var(--success);box-shadow:0 0 0 2px var(--success);}
.tl-card{background:var(--surface-alt);border-radius:var(--radius-sm);padding:10px 12px;}
.tl-date{font-size:11.5px;color:var(--text-muted);margin-bottom:3px;font-weight:600;}

.cell-muted{color:var(--text-muted);font-size:12px;}
.cell-strong{font-weight:700;}
.cell-neg{color:var(--danger);font-weight:700;}
.item-linea{font-size:13px;}
.item-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;background:var(--surface);}
.empty-state{padding:32px;text-align:center;color:var(--text-muted);font-size:13px;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);}
.stat-card .num{font-size:22px;font-weight:700;}
.stat-card .lbl{color:var(--text-muted);font-size:11.5px;margin-top:2px;}
.stat-card.warn .num{color:var(--danger);}

.totales-box{background:var(--surface-alt);border-radius:var(--radius-sm);padding:12px 14px;}
.trow{display:flex;justify-content:space-between;padding:3px 0;font-size:12.8px;}
.trow.grand{font-weight:700;font-size:15px;border-top:1px solid var(--border);margin-top:6px;padding-top:8px;}

/* ---------- líneas de artículos de una cotización ---------- */
.lineas-table{width:100%;border-collapse:collapse;font-size:12.8px;margin-bottom:10px;background:transparent;}
.lineas-table th{text-align:left;font-size:10.5px;text-transform:uppercase;color:var(--text-muted);padding:6px 8px;border-bottom:1px solid var(--border);background:transparent;}
.lineas-table td{padding:6px 8px;border-bottom:1px solid var(--border);}
.lineas-table select,.lineas-table input{padding:6px 8px;font-size:12.5px;border:1px solid var(--border);border-radius:6px;width:100%;}
.lineas-table .col-quitar{width:36px;text-align:center;}

/* ---------- lotes / características (Pedidos, Pintura) ---------- */
.lote-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;background:var(--surface);}
.lote-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;}
.lote-head b{font-size:13.5px;}
.carac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px;font-size:11.8px;color:var(--text-muted);}
.carac-grid div b{color:var(--text);font-weight:600;}
.opciones-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin-top:4px;}
.opcion-chk{display:flex;align-items:center;gap:7px;font-size:12.3px;padding:3px 0;cursor:pointer;font-weight:400;}
.opcion-chk input{width:auto;flex-shrink:0;}
.lock-banner{background:var(--warning-bg);color:#92400e;border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px;}

/* ---------- programación de procesos (proyección por área) ---------- */
.proc-area-block{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;}
.proc-item-row{display:flex;align-items:center;gap:10px;padding:5px 0;flex-wrap:wrap;font-size:12.5px;border-bottom:1px solid var(--border);}
.proc-item-row:last-child{border-bottom:none;}
.proc-row{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;margin-bottom:7px;font-size:12.8px;}
.proc-row .proc-name{font-weight:700;min-width:110px;}
.proc-row .proc-detail{color:var(--text-muted);flex:1;}
.proc-row .proc-dates{color:var(--text-faint);font-size:11.5px;white-space:nowrap;}

.pantalla-login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1e3a8a,#1d4ed8);}
.tarjeta-login{background:#fff;padding:32px;border-radius:16px;width:340px;box-shadow:0 20px 40px rgba(0,0,0,.2);}
.marca-login{justify-content:center;margin-bottom:6px;}
.subtitulo{color:var(--text-muted);font-size:12.5px;margin:0 0 18px;text-align:center;}

.pantalla-error{max-width:480px;margin:80px auto;text-align:center;}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.tab-link{padding:9px 14px;font-size:13px;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;}
.tab-link.activo{color:var(--primary);border-bottom-color:var(--primary);}

/* Barra de progreso de la navegación PJAX (assets/js/app.js): una línea
   fina en la parte superior de la pantalla mientras se trae la próxima
   pantalla por fetch(), para que el cambio de página se sienta
   instantáneo en vez de un parpadeo en blanco. */
#pjax-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--primary);z-index:9999;opacity:0;transition:width .3s ease,opacity .2s ease;}
#pjax-bar.activa{width:75%;opacity:1;}
#pjax-bar.lista{width:100%;opacity:1;}

/* Panel modal flotante (assets/js/app.js): usado para las pantallas de
   detalle que en el prototipo aparecían como una ventana flotante sobre
   la lista (ficha de cliente CRM, características de artículo, detalle
   de pedido/programación, nueva cotización/edición). El fondo
   (#app-content) permanece intacto detrás mientras el panel está
   abierto, y se vuelve a pedir al servidor cada vez que el panel se
   cierra (ver comentario en app.js). */
#modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(15,23,42,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;overflow-y:auto;
}
#modal-overlay.oculto{display:none;}
body.modal-abierto{overflow:hidden;}
.modal-caja{
  position:relative;background:var(--surface);border-radius:16px;
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  padding:26px 24px 24px;box-shadow:var(--shadow-lg);
  animation:modal-pop .15s ease-out;
}
.modal-caja.wide{max-width:840px;}
.modal-caja.xwide{max-width:980px;}
@keyframes modal-pop{from{transform:scale(.97);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-cerrar{
  position:absolute;top:12px;right:12px;width:30px;height:30px;
  border:none;border-radius:50%;background:var(--surface-alt);color:var(--text-muted);
  font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.modal-cerrar:hover{background:var(--border);color:var(--text);}
#modal-content{min-height:40px;}

/* Aviso flotante breve (assets/js/app.js: mostrarToast()) — usado, por
   ejemplo, al crear/editar un cliente: el modal se cierra solo y este
   aviso confirma la acción, igual que en el prototipo. */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;box-shadow:var(--shadow-lg);z-index:1200;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

@media (max-width: 800px){
  .app-shell{flex-direction:column;}
  .sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);position:static;height:auto;}
  .fila-campos,.fila-campos-3,.two-col{grid-template-columns:1fr;}
  .modal-caja,.modal-caja.wide,.modal-caja.xwide{max-width:100%;padding:22px 16px 18px;}
  .carac-grid{grid-template-columns:1fr 1fr;}
  .opciones-grid{grid-template-columns:1fr;}
  thead{display:none;}
  table,tbody,tr,td{display:block;width:100%;}
  tbody tr{border-bottom:2px solid var(--border);padding:8px 4px;}
  tbody td{border-bottom:none;padding:3px 12px;}
}

/* Nota: cotizacion_pdf.php y cronograma_pedidos.php ya no se renderizan
   como HTML imprimible — generan un PDF real en el servidor (motor propio
   includes/pdf/MiniPdf.php) y se abren en una ventana emergente. Las
   reglas @media print y .grupo-semana que existían aquí para el enfoque
   anterior ("Guardar como PDF" del navegador) ya no las usa ninguna
   página y se quitaron para no dejar CSS muerto/confuso.