* { box-sizing: border-box; margin: 0; padding: 0; }

/* Nav tableros */
.nav-tableros { background: #0d1b2e; padding: 6px 16px; display: flex; gap: 6px; align-items: center; border-bottom: 1px solid #1a4a7a; flex-wrap: wrap; }
.nav-btn { background: none; border: 1px solid #1a4a7a; border-radius: 20px; color: #7986cb; padding: 4px 14px; font-size: 12px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.6; transition: all 0.15s; }
.nav-btn:hover { background: rgba(255,255,255,0.07); color: #fff; border-color: #7986cb; }
.nav-btn.activo { background: #1a4a7a; color: #fff; border-color: #4a7aaa; font-weight: bold; }
body { font-family: Arial, sans-serif; background: #1a1a2e; color: #eee; min-height: 100vh; }
.stats-bar { background: #16213e; padding: 8px 20px; display: flex; gap: 16px; font-size: 12px; border-bottom: 1px solid #0f3460; flex-wrap: wrap; }
.stat { color: #aaa; }
.stat span { color: #fff; font-weight: bold; }
.btn { border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; font-weight: bold; }
.btn-ver { background: #555; color: #ddd; }
.btn-avanzar { background: #7b2d8b; color: #fff; }
.btn-archivos { background: #1565c0; color: #fff; }
.empty { color: #555; font-size: 12px; text-align: center; padding: 20px; }

/* Card */
.card { background: #0f3460; border-radius: 6px; padding: 10px 12px; border-left: 4px solid #444; cursor: grab; }
.card:hover { filter: brightness(1.1); }
.card.dragging { opacity: 0.4; cursor: grabbing; }
.card.urgente { border-left-color: #f44336; }
.card.normal { border-left-color: #4caf50; }
.card.oculta { display: none; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-num { font-size: 13px; font-weight: bold; color: #90caf9; }
.card-cliente { font-size: 12px; color: #ddd; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-vendedor { font-size: 10px; color: #7986cb; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-total { font-size: 11px; color: #aaa; margin-top: 4px; }
.card-tiempo { font-size: 10px; color: #888; margin-top: 2px; }
.card-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* Menu 3 puntos */
.card-menu { position: relative; }
.card-menu-btn { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; border-radius: 4px; }
.card-menu-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.card-menu-dropdown { display: none; position: fixed; background: #0d2137; border: 1px solid #1a4a7a; border-radius: 6px; min-width: 160px; z-index: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.card-menu-dropdown.open { display: block; }
.card-menu-item { display: block; width: 100%; text-align: left; padding: 9px 14px; background: none; border: none; color: #ddd; font-size: 12px; cursor: pointer; }
.card-menu-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.card-menu-item.rojo { color: #ef9a9a; }
.card-menu-item.rojo:hover { background: rgba(183,28,28,0.3); }

/* Items */
.items-list { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid #1a3a6a; }
.items-list.open { display: block; }
.item-row { font-size: 11px; color: #bbb; padding: 4px 0; display: block; border-bottom: 1px solid #0d2137; }
.item-nombre { display: block; width: 100%; margin-bottom: 4px; cursor: pointer; text-decoration: underline dotted; }
.item-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.item-cant { font-size: 10px; color: #90caf9; white-space: nowrap; }
.item-etapa { font-size: 10px; padding: 1px 6px; border-radius: 3px; white-space: nowrap; background: #0d2137; color: #90caf9; border: 1px solid #1a4a7a; }
.item-ruta { font-size: 10px; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.ruta-interno { background: #1b5e20; color: #a5d6a7; }
.ruta-externo { background: #4a148c; color: #ce93d8; }
.btn-item-mover { background: #7b2d8b; color: #fff; border: none; border-radius: 3px; padding: 2px 7px; font-size: 10px; cursor: pointer; white-space: nowrap; }
.fase-tiempo { font-size: 9px; color: #90caf9; }
.item-drop-zone { border: 2px dashed transparent; border-radius: 4px; transition: border-color 0.2s, background 0.2s; }
.item-drop-zone.drag-over { border-color: #1976d2; background: rgba(25,118,210,0.1); }

/* Archivos */
.archivos-panel { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid #1a3a6a; }
.archivos-panel.open { display: block; }
.archivos-lista { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; min-height: 16px; }
.archivo-item { display: flex; align-items: center; gap: 8px; background: #0d2137; border-radius: 3px; padding: 4px 8px; font-size: 11px; }
.archivo-item a { color: #90caf9; text-decoration: none; flex: 1; word-break: break-all; }
.archivo-item a:hover { text-decoration: underline; }
.archivo-size { color: #666; font-size: 10px; white-space: nowrap; }
.btn-del-archivo { background: none; border: none; color: #ef5350; cursor: pointer; font-size: 12px; padding: 0 2px; }
.drop-zona { border: 2px dashed #1a4a7a; border-radius: 6px; padding: 8px; text-align: center; font-size: 11px; color: #5c8ab0; margin-top: 6px; cursor: pointer; }
.drop-zona:hover, .drop-zona.drag-over { border-color: #90caf9; color: #90caf9; }

/* Preview */
.preview-panel { margin-top: 8px; background: #0a1628; border-radius: 6px; overflow: hidden; display: none; }
.preview-panel.open { display: block; }
.preview-bar { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; background: #1a4a7a; font-size: 11px; }
.preview-bar span { color: #90caf9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.preview-bar button { background: none; border: none; color: #aaa; cursor: pointer; font-size: 14px; padding: 0 4px; }
.preview-bar a { color: #81c784; font-size: 11px; text-decoration: none; margin-left: 8px; }
.preview-content { width: 100%; background: #000; }
.preview-content iframe { width: 100%; height: 400px; border: none; display: block; }
.preview-content img { width: 100%; max-height: 400px; object-fit: contain; display: block; }
.preview-no-soporte { padding: 40px; text-align: center; color: #666; font-size: 13px; }
.preview-no-soporte a { color: #90caf9; }

/* Upload toast */
#upload-toast { position:fixed; bottom:20px; right:20px; background:#16213e; border:1px solid #1a4a7a; border-radius:8px; padding:12px 16px; min-width:220px; box-shadow:0 4px 20px rgba(0,0,0,0.5); z-index:9999; display:none; }
#upload-toast .toast-titulo { font-size:12px; color:#90caf9; margin-bottom:6px; }
#upload-toast .toast-archivo { font-size:11px; color:#aaa; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
#upload-toast .toast-barra-bg { background:#0d2137; border-radius:4px; height:6px; overflow:hidden; }
#upload-toast .toast-barra { background:#1976d2; height:6px; border-radius:4px; width:0%; transition:width 0.2s; }
#upload-toast .toast-pct { font-size:12px; color:#fff; font-weight:bold; margin-top:5px; text-align:right; }

/* Modales */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: #16213e; border-radius: 8px; padding: 24px; min-width: 360px; max-width: 520px; width: 90%; }
.modal h3 { color: #90caf9; margin-bottom: 16px; }
.modal-etapa-btn { padding: 10px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; font-size: 13px; color: #fff; }
.modal-close { float: right; background: none; border: none; color: #aaa; font-size: 20px; cursor: pointer; }
.modal-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.modal-item-campo { margin-bottom: 6px; }
.modal-item-label { font-size: 10px; color: #7986cb; margin-bottom: 2px; }
.modal-item-valor { font-size: 12px; color: #eee; line-height: 1.3; }
.modal-item-notas { width: 100%; background: #0d2137; border: 1px solid #1a4a7a; border-radius: 4px; color: #eee; font-size: 12px; padding: 6px 8px; resize: vertical; min-height: 52px; outline: none; font-family: Arial, sans-serif; }
.modal-item-notas:focus { border-color: #7b2d8b; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.btn-guardar-nota { background: #7b2d8b; color: #fff; border: none; border-radius: 4px; padding: 5px 14px; font-size: 12px; cursor: pointer; font-weight: bold; }
.btn-guardar-nota:hover { background: #9c3db5; }
.archivos-section { margin-top: 10px; border-top: 1px solid #1a4a7a; padding-top: 8px; }

/* Mini-card items en columnas de produccion */
.card-item { background: #0a2540; border-radius: 6px; padding: 8px 10px; border-left: 4px solid #7b2d8b; margin-bottom: 8px; }
.card-item-ref { font-size: 10px; color: #90caf9; font-weight: bold; margin-bottom: 3px; }
.card-item-prod { font-size: 11px; color: #ccc; margin-bottom: 5px; line-height: 1.3; }
.card-item-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

@keyframes pulsar { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* Buscador */
.buscador-wrap { position: relative; }
.buscador { background: #0f3460; border: 1px solid #1a4a7a; border-radius: 6px; color: #fff; padding: 6px 30px 6px 12px; font-size: 13px; width: 200px; outline: none; }
.buscador::placeholder { color: #557; }
.buscador:focus { border-color: #7b2d8b; }
.buscador-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #888; font-size: 14px; cursor: pointer; display: none; }

/* ── Express: parpadeo tipo señalizador (orden + item) ── */
@keyframes parpadeoExpress {
  0%, 49%   { box-shadow: 0 0 10px 2px rgba(255,23,68,0.95); }
  50%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
}
.card-express, .item-express { animation: parpadeoExpress 1.1s steps(1) infinite; }
.express-label { color: #ff1744; font-weight: bold; margin-left: 6px; text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.5px; }

/* ── Prueba de color: punto rojo parpadeante (solo item) ── */
@keyframes parpadeoPunto { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.1; } }
.prueba-color-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: #ff1744; box-shadow: 0 0 7px #ff1744; margin-right: 4px; flex-shrink: 0;
  animation: parpadeoPunto 0.8s steps(1) infinite;
}
.btn-prueba-color { cursor: pointer; background: none; border: none; font-size: 13px; padding: 0 3px; line-height: 1; opacity: 0.5; }
.btn-prueba-color.activa { opacity: 1; }

/* ── Tooltips al pasar el mouse ── */
.express-label, .prueba-color-dot { position: relative; }
.express-label:hover::after, .prueba-color-dot:hover::after {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #0d1b2e; color: #fff; border: 1px solid #ff1744; border-radius: 5px;
  padding: 3px 8px; font-size: 11px; font-weight: normal; white-space: nowrap;
  text-transform: none; letter-spacing: 0; z-index: 9999; pointer-events: none; animation: none;
}
.express-label:hover::after { content: "Urgente"; }
.prueba-color-dot:hover::after { content: "Prueba de color"; }
/* la burbuja no debe heredar el parpadeo del punto */
.prueba-color-dot::after { animation: none; }

/* ── Selector de orden por columna ── */
.col-sort {
  background: rgba(0,0,0,0.25); color: #fff; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px; font-size: 11px; padding: 2px 4px; cursor: pointer;
  margin-left: auto; margin-right: 6px; max-width: 120px; outline: none;
}
.col-sort option { background: #16213e; color: #eee; }