/* LowCostCopy CMS - UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --sidebar:#0e1526; --sidebar-hover:#1a2338; --sidebar-active:#2563eb;
  --bg:#f4f6fa; --card:#ffffff; --border:#e6eaf1;
  --text:#0f172a; --text-2:#5b6474; --text-3:#8b93a5;
  --primary:#2563eb; --primary-2:#1d4ed8; --primary-soft:#eef4ff;
  --green:#16a34a; --green-soft:#e8f7ee; --amber:#d97706; --amber-soft:#fdf3e3;
  --red:#dc2626; --red-soft:#fdecec; --indigo:#4f46e5; --indigo-soft:#eef0fe;
  --gray-soft:#f1f3f7;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.05);
  --shadow-lg:0 8px 30px rgba(15,23,42,.12);
}
[data-theme="dark"]{
  --sidebar:#0b101d; --sidebar-hover:#161d30;
  --bg:#0f1420; --card:#161c2c; --border:#232b40;
  --text:#e8ecf5; --text-2:#a3adc2; --text-3:#6b7590;
  --primary-soft:#1a2542; --green-soft:#12291c; --amber-soft:#2d2314;
  --red-soft:#2e1717; --indigo-soft:#1c1e3a; --gray-soft:#1b2234;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
i[data-lucide],svg.lucide{width:18px;height:18px;flex-shrink:0}

/* ===== Layout ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:236px;background:var(--sidebar);color:#cdd5e4;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:40;transition:transform .25s}
.main{margin-left:236px;flex:1;min-width:0;display:flex;flex-direction:column}
.content{padding:26px 30px;flex:1}
@media(max-width:960px){.sidebar{transform:translateX(-100%)}.sidebar.abierto{transform:none;box-shadow:var(--shadow-lg)}.main{margin-left:0}.content{padding:18px 14px}}

/* ===== Sidebar ===== */
.logo{padding:20px 22px 14px;font-size:21px;font-weight:800;color:#fff;letter-spacing:-.5px}
.logo span{color:#4f8bff;font-weight:600}
.nav{flex:1;overflow-y:auto;padding:6px 12px 20px}
.nav-seccion{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:#5f6b85;text-transform:uppercase;padding:16px 12px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:#cdd5e4;font-weight:500;margin-bottom:2px;transition:background .15s}
.nav a:hover{background:var(--sidebar-hover);color:#fff}
.nav a.activo{background:var(--sidebar-active);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.35)}
.nav a .contador{margin-left:auto;background:#f59e0b;color:#161616;font-size:11px;font-weight:700;border-radius:99px;padding:1px 8px}
.sidebar-pie{padding:14px 16px;border-top:1px solid #1c2438;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:99px;background:linear-gradient(135deg,#2563eb,#4f46e5);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.sidebar-pie .info{line-height:1.25;min-width:0}
.sidebar-pie .info b{color:#fff;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-pie .info span{font-size:11.5px;color:#7c87a0}

/* ===== Topbar ===== */
.topbar{height:62px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:30}
.topbar .titulo-mini{font-weight:600;color:var(--text-2);font-size:13px}
.hamburguesa{display:none;background:none;border:none;color:var(--text);cursor:pointer}
@media(max-width:960px){.hamburguesa{display:block}}
.topbar-derecha{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn-icono{position:relative;background:none;border:1px solid transparent;border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--text-2);cursor:pointer}
.btn-icono:hover{background:var(--gray-soft);color:var(--text)}
.punto{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:99px;background:var(--red);border:2px solid var(--card)}

/* Panel notificaciones */
.panel-notif{position:absolute;top:52px;right:70px;width:360px;max-width:92vw;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);display:none;z-index:60;overflow:hidden}
.panel-notif.abierto{display:block}
.panel-notif header{padding:13px 16px;font-weight:700;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.panel-notif .lista{max-height:380px;overflow-y:auto}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border)}
.notif-item:last-child{border-bottom:none}
.notif-item.noleida{background:var(--primary-soft)}
.notif-item .t{font-weight:600;font-size:13px}
.notif-item .m{color:var(--text-2);font-size:12.5px;margin-top:2px}
.notif-item .f{color:var(--text-3);font-size:11px;margin-top:3px}

/* ===== Componentes ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px 22px}
.card h3{font-size:15px;font-weight:700;margin-bottom:2px}
.card-cab{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.card-cab h3{margin:0}

.pagina-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.pagina-cab h1{font-size:23px;font-weight:800;letter-spacing:-.4px}
.pagina-cab p{color:var(--text-2);margin-top:3px}

.grid-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;gap:14px;align-items:center}
.kpi .icono{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.kpi .icono i,.kpi .icono svg{width:21px;height:21px}
.kpi b{font-size:22px;font-weight:800;display:block;letter-spacing:-.5px}
.kpi span{color:var(--text-2);font-size:12.5px}
.ic-azul{background:var(--primary-soft);color:var(--primary)}
.ic-verde{background:var(--green-soft);color:var(--green)}
.ic-ambar{background:var(--amber-soft);color:var(--amber)}
.ic-rojo{background:var(--red-soft);color:var(--red)}
.ic-indigo{background:var(--indigo-soft);color:var(--indigo)}
.ic-gris{background:var(--gray-soft);color:var(--text-2)}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px;white-space:nowrap}
.badge i,.badge svg{width:13px;height:13px}
.badge-green{background:var(--green-soft);color:var(--green)}
.badge-amber{background:var(--amber-soft);color:var(--amber)}
.badge-red{background:var(--red-soft);color:var(--red)}
.badge-blue{background:var(--primary-soft);color:var(--primary)}
.badge-indigo{background:var(--indigo-soft);color:var(--indigo)}
.badge-gray{background:var(--gray-soft);color:var(--text-2)}

.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:10px;padding:9px 16px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:filter .15s;text-decoration:none}
.btn i,.btn svg{width:16px;height:16px}
.btn-primario{background:var(--primary);color:#fff}
.btn-primario:hover{filter:brightness(1.08)}
.btn-suave{background:var(--gray-soft);color:var(--text)}
.btn-borde{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-peligro{background:var(--red-soft);color:var(--red)}
.btn-verde{background:var(--green-soft);color:var(--green)}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px}

/* ===== Formularios ===== */
label.campo{display:block;margin-bottom:14px}
label.campo>span{display:block;font-weight:600;font-size:12.5px;color:var(--text-2);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],select,textarea{
  width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13.5px;color:var(--text);outline:none;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 18px}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:flex-end}
.filtros label.campo{margin-bottom:0;min-width:150px;flex:1;max-width:220px}
.filtros .buscador{position:relative;flex:2;max-width:320px}

/* Interruptor ON/OFF */
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .pista{position:absolute;inset:0;background:#c9d2e0;border-radius:99px;transition:.2s;cursor:pointer}
[data-theme="dark"] .switch .pista{background:#39445e}
.switch .pista:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:99px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked+.pista{background:var(--primary)}
.switch input:checked+.pista:before{transform:translateX(18px)}
.fila-permiso{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-bottom:1px dashed var(--border);gap:12px}
.fila-permiso span{font-weight:500}

/* ===== Tablas ===== */
.tabla-wrap{overflow-x:auto}
table.tabla{width:100%;border-collapse:collapse;min-width:640px}
.tabla th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tabla tbody tr:hover{background:var(--gray-soft)}
.tabla tbody tr:last-child td{border-bottom:none}
.tabla .mono{font-variant-numeric:tabular-nums;font-weight:600}
.acciones-fila{display:flex;gap:6px}

/* ===== Timeline ===== */
.timeline{position:relative;padding-left:34px}
.timeline:before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--border)}
.tl-paso{position:relative;padding:0 0 22px}
.tl-paso:last-child{padding-bottom:0}
.tl-punto{position:absolute;left:-34px;top:0;width:28px;height:28px;border-radius:99px;background:var(--gray-soft);color:var(--text-3);display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.tl-punto i,.tl-punto svg{width:14px;height:14px}
.tl-paso.hecho .tl-punto{background:var(--green-soft);color:var(--green)}
.tl-paso.actual .tl-punto{background:var(--primary);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.tl-paso b{font-size:13.5px;display:block}
.tl-paso small{color:var(--text-2);font-size:12px}

/* ===== Varios ===== */
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1100px){.grid-2,.grid-3{grid-template-columns:1fr}}
.lista-simple{list-style:none}
.lista-simple li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)}
.lista-simple li:last-child{border-bottom:none}
.alerta{border-radius:var(--radius-sm);padding:11px 14px;font-weight:500;margin-bottom:16px;display:flex;gap:9px;align-items:center}
.alerta-ok{background:var(--green-soft);color:var(--green)}
.alerta-error{background:var(--red-soft);color:var(--red)}
.alerta-info{background:var(--primary-soft);color:var(--primary)}
.vacio{text-align:center;padding:44px 20px;color:var(--text-3)}
.vacio i,.vacio svg{width:34px;height:34px;margin-bottom:10px}
.tag-logo{width:30px;height:30px;border-radius:8px;background:var(--primary-soft);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.chart-caja{position:relative;height:260px}
.paginacion{display:flex;gap:6px;justify-content:flex-end;padding:14px 18px}
.paginacion a{border:1px solid var(--border);border-radius:8px;padding:5px 11px;color:var(--text-2);font-weight:600;font-size:12.5px}
.paginacion a.activa{background:var(--primary);border-color:var(--primary);color:#fff}
.modal-fondo{position:fixed;inset:0;background:rgba(10,15,28,.55);z-index:80;display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.modal-fondo.abierto{display:flex}
.modal{background:var(--card);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;animation:sube .22s ease}
.modal-cab{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700}
.modal-cuerpo{padding:20px}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade-in{animation:sube .3s ease}

/* ===== Login / instalador ===== */
.auth-fondo{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1100px 500px at 20% -10%,rgba(37,99,235,.25),transparent),var(--sidebar);padding:20px}
.auth-caja{background:var(--card);border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:34px 32px}
.auth-caja.ancha{max-width:640px}
.auth-logo{font-size:24px;font-weight:800;margin-bottom:4px;letter-spacing:-.5px}
.auth-logo span{color:var(--primary)}
.pasos{display:flex;gap:6px;margin:18px 0 24px}
.pasos i{flex:1;height:5px;border-radius:99px;background:var(--border)}
.pasos i.hecho{background:var(--primary)}

/* ===== Catálogo con variantes ===== */
.prod-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.prod-cab { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 12px; }
.prod-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary-soft); color: var(--primary); }
.prod-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.prod-cab h4 { font-size: 15.5px; font-weight: 700; }
.prod-cab .sub { color: var(--text-3); font-size: 12.5px; margin-bottom: 6px; }
.prod-uds { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip-uds { font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--gray-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.prod-aviso { display: flex; align-items: center; gap: 8px; background: #fdf6e3; color: #92600a; font-size: 12.5px; font-weight: 600; padding: 9px 18px; border-top: 1px solid #f3e5bd; border-bottom: 1px solid #f3e5bd; }
[data-theme="dark"] .prod-aviso { background: #2e2712; color: #eac36b; border-color: #423a1c; }
.prod-aviso svg { width: 15px; height: 15px; }
.var-medida { padding: 12px 18px; border-bottom: 1px dashed var(--border); }
.var-medida:last-of-type { border-bottom: none; }
.var-medida h5 { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.var-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px 14px; }
.var-celda label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; white-space: nowrap; overflow: hidden; }
.var-celda .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.var-celda input { width: 100%; text-align: center; padding: 7px 6px; }
.var-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 14px 18px; }
.var-caja { background: var(--gray-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.var-caja label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.prod-pie { padding: 10px 18px 14px; }
.prod-card.anadido { border-color: var(--green); }
.prod-card.anadido .btn-anadir { background: var(--green-soft); color: #15803d; border-color: transparent; }
.grid-pedido { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .grid-pedido { grid-template-columns: 1fr; } }
.fila-ref { display: flex; gap: 10px; align-items: center; }
.fila-ref input[type="text"] { flex: 1; }
.buscador-piezas { display: flex; gap: 10px; align-items: center; }
.sugerencias { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 60; max-height: 300px; overflow: auto; }
.sug-item { padding: 9px 12px; font-size: 13px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--border); }
.sug-item:last-child { border-bottom: none; }
.sug-item:hover { background: var(--primary-soft); }
.sug-item span { margin-left: auto; color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.menu-descarga { position: relative; }
.menu-descarga .menu-opciones { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 70; min-width: 150px; overflow: hidden; }
.menu-descarga.abierto .menu-opciones { display: block; }
.menu-opciones a { display: flex; gap: 8px; align-items: center; padding: 9px 14px; font-size: 13px; color: var(--text); text-decoration: none; }
.menu-opciones a:hover { background: var(--primary-soft); color: var(--primary); }
.menu-opciones a svg { width: 14px; height: 14px; }
.buscador-piezas { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pz-resultados { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; max-height: 280px; overflow: auto; background: var(--card); }
.pz-vacio { padding: 16px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.pz-fila { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pz-fila:last-child { border-bottom: none; }
.pz-fila:hover { background: var(--gray-soft); }
.pz-ref { font-weight: 700; min-width: 96px; }
.pz-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-meta { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.pz-fila .btn { padding: 5px 9px; }
.rejilla-precios { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rejilla-precios label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.rejilla-precios input { text-align: center; padding: 7px; }
#btnMic.grabando { background: var(--red); color: #fff; border-color: var(--red); animation: pulso 1.2s infinite; }
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow: 0 0 0 7px rgba(220,38,38,0); } }

/* ===== Zona de piezas y repuestos ===== */
.zona-piezas { display: grid; grid-template-columns: 250px 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .zona-piezas { grid-template-columns: 220px 1fr; } .zona-piezas > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 800px) { .zona-piezas { grid-template-columns: 1fr; } }
.pz-modelos { display: flex; flex-direction: column; gap: 8px; }
.pz-modelo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; text-align: left; font: inherit; color: var(--text); font-weight: 600; font-size: 13px; transition: all .15s; }
.pz-modelo small { color: var(--text-3); font-weight: 500; font-size: 11.5px; }
.pz-modelo:hover { border-color: var(--primary); }
.pz-modelo.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.pz-modelo.activo small { color: rgba(255,255,255,.75); }
.pz-grupos { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-grupo { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-2); }
.pz-grupo small { color: var(--text-3); }
.pz-grupo.activo { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.pz-carrito { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.pz-carrito-vacio { color: var(--text-3); font-size: 12.5px; text-align: center; padding: 14px; border: 1px dashed var(--border); border-radius: 10px; }
.pz-linea { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--gray-soft); }
.pz-linea-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pz-linea-info b { font-size: 12.5px; }
.pz-linea-info span { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-linea-info small { font-size: 11px; color: var(--text-3); }
.pz-linea input[type="number"] { width: 62px; text-align: center; padding: 6px 4px; }

/* ===== Zona "He recibido mercancía" ===== */
.recepcion-zona { padding: 26px 24px; border-bottom: 1px solid var(--border); }
.recepcion-hero { text-align: center; margin-bottom: 18px; }
.recepcion-hero h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.recepcion-hero p { color: var(--text-2); font-size: 13.5px; margin-top: 4px; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border: 2px dashed var(--border); border-radius: 16px; cursor: pointer; text-align: center; transition: all .18s; background: var(--gray-soft); }
.dropzone:hover, .dropzone.encima { border-color: var(--primary); background: var(--primary-soft); }
.dropzone > svg { width: 34px; height: 34px; color: var(--primary); }
.dropzone b { font-size: 14.5px; }
.dropzone span { color: var(--text-3); font-size: 12.5px; }
.dropzone.con-archivo { border-style: solid; border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--card)); }
.dropzone-archivo { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--green); }
.dropzone-archivo svg { width: 18px; height: 18px; }
.dropzone-archivo em { font-style: normal; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recepcion-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.btn-grande { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); font: inherit; font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; transition: all .15s; box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.05)); }
.btn-grande:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn-grande svg { width: 19px; height: 19px; }
.recepcion-dictado { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--card); }
.recepcion-dictado-cab { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.recepcion-dictado-cab svg { width: 16px; height: 16px; color: var(--green, #16a34a); }
.recepcion-dictado textarea { width: 100%; }
.recepcion-dictado-pie { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .recepcion-botones { grid-template-columns: 1fr; } .recepcion-dictado-pie .btn-primario { width: 100%; justify-content: center; margin-left: 0 !important; } }

/* ===== Inputs de archivo modernos en todo el CMS ===== */
input[type="file"] { font-size: 12.5px; color: var(--text-2); }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
input[type="file"]::file-selector-button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.editor-medidas { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fila-medida { display: flex; gap: 8px; align-items: center; }
.fila-medida input[name="medida_n[]"] { flex: 1; }
.fila-medida .precio-caja { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 9px; padding: 0 10px 0 0; background: var(--card); }
.fila-medida .precio-caja input { border: none; background: transparent; width: 84px; text-align: right; padding: 9px 4px 9px 10px; }
.fila-medida .precio-caja input:focus { outline: none; }
.fila-medida .precio-caja b { color: var(--text-3); font-size: 13px; }
.campo-switch { flex-direction: row !important; align-items: center; gap: 10px; }
.campo-switch input { width: auto; }
.selector-idioma { padding: 6px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Inputs de archivo: nunca desbordan su contenedor (claro y oscuro) */
input[type="file"] { width: 100%; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
input[type="file"]::file-selector-button { margin-right: 10px; }
.modal .campo input[type="file"] { min-width: 0; }
.modal { max-height: 92vh; overflow: auto; }

/* ===== Panel logístico (kanban) ===== */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.kanban-col { min-width: 235px; width: 235px; flex-shrink: 0; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 14px; transition: background .15s; }
.kanban-col.encima { background: var(--primary-soft); border-color: var(--primary); border-style: dashed; }
.kanban-cab { display: flex; align-items: center; gap: 8px; padding: 11px 13px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.kanban-n { margin-left: auto; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--text-2); }
.punto-estado { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.estado-green { background: #22c55e; } .estado-blue { background: #3b82f6; } .estado-amber { background: #f59e0b; }
.estado-red { background: #ef4444; } .estado-purple { background: #a855f7; } .estado-cyan { background: #06b6d4; }
.estado-gray { background: #94a3b8; } .estado-indigo { background: #6366f1; }
.kanban-lista { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 320px); overflow-y: auto; }
.kanban-tarjeta { background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: all .14s; }
.kanban-tarjeta:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.kanban-tarjeta[draggable="true"] { cursor: grab; }
.kt-numero { font-weight: 800; font-size: 12.5px; margin-bottom: 4px; }
.kt-tienda, .kt-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); margin-bottom: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kt-tienda svg, .kt-meta svg { width: 12px; height: 12px; flex-shrink: 0; }
.kanban-vacia { text-align: center; color: var(--text-3); padding: 14px; font-size: 12px; }
.kt-pie { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 5px; border-top: 1px dashed var(--border); padding-top: 5px; }

/* ===== Scrollbars finos y elegantes en todo el CMS ===== */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .45) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .45); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .75); }
::-webkit-scrollbar-corner { background: transparent; }
.sidebar { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }

/* Kanban: las columnas vacías se pliegan a una tira fina (casi sin scroll) */
.kanban { scrollbar-width: thin; }
.kanban-col.plegada { width: 52px; min-width: 52px; }
.kanban-col.plegada .kanban-lista { display: none; }
.kanban-col.plegada .kanban-cab { writing-mode: vertical-rl; border-bottom: none; padding: 14px 0; gap: 8px; justify-content: flex-start; align-items: center; height: 190px; white-space: nowrap; }
.kanban-col.plegada .kanban-cab b { font-size: 12px; color: var(--text-2); }
.kanban-col.plegada .kanban-n { margin-left: 0; margin-top: auto; writing-mode: horizontal-tb; }
.kanban-col.plegada .punto-estado { writing-mode: horizontal-tb; }
.kanban-col.plegada.encima { width: 200px; min-width: 200px; }

/* ===== Sección Logística ===== */
.rejilla-trans { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.tarjeta-trans { display: flex; flex-direction: column; gap: 10px; }
.tt-cab { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tt-color { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.tt-datos { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.tt-datos span { display: flex; align-items: center; gap: 7px; }
.tt-datos svg { width: 13px; height: 13px; }
.tt-cp { color: var(--amber, #d97706); font-weight: 600; }
.tt-pie { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--border); padding-top: 10px; font-size: 12.5px; color: var(--text-2); }
.barra-fiab { width: 84px; height: 7px; background: var(--gray-soft); border-radius: 99px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 7px; }
.barra-fiab div { height: 100%; border-radius: 99px; }

/* Conversación de incidencias */
.conversacion { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; }
.msj-inc { max-width: 78%; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 9px 13px; }
.msj-inc.mio { align-self: flex-end; background: var(--primary-soft); border-color: transparent; border-radius: 12px 12px 4px 12px; }
.msj-cab { display: flex; gap: 10px; align-items: baseline; margin-bottom: 3px; }
.msj-cab b { font-size: 12px; }
.msj-cab span { font-size: 11px; color: var(--text-3); }
.msj-txt { font-size: 13.5px; white-space: pre-wrap; }
.pc-anadir { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer; }
.pc-anadir:hover { color: var(--primary); border-color: var(--primary); }
.pc-anadir svg { width: 13px; height: 13px; }

/* ===== PROCOMPRA v2 ===== */
.pc-vistas { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.pc-vista { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); background: var(--card); border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all .14s; }
.pc-vista svg { width: 14px; height: 14px; }
.pc-vista:hover { border-color: var(--primary); color: var(--primary); }
.pc-vista.activa { background: var(--primary); border-color: var(--primary); color: #fff; }
.pc-filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pc-filtros select, .pc-filtros input[type=text] { max-width: 210px; }
.pc-sel-alerta { border-color: #fca5a5 !important; color: #b91c1c; background: #fef2f2; }
[data-theme="dark"] .pc-sel-alerta { background: #3f1d1d; color: #fca5a5; }
.pc-orden { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); padding: 6px 10px; border-radius: 10px; background: var(--gray-soft); font-size: 12px; }
.pc-orden select { border: none; background: transparent; padding: 0; font-size: 12px; }
.pc-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); padding: 7px 12px; border-radius: 10px; cursor: pointer; background: var(--gray-soft); }
.pc-check input { width: auto; }
.pc-kanban .kanban-col { min-width: 265px; width: 265px; }
.pc-card { position: relative; }
.pc-card.pc-archivada { opacity: .55; filter: grayscale(.4); }
.pc-alertas { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.pc-alerta { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .3px; }
.pc-alerta.roja { background: #fee2e2; color: #b91c1c; animation: pcParpadeo 1.6s infinite; }
.pc-alerta.ambar { background: #fef3c7; color: #b45309; }
@keyframes pcParpadeo { 50% { opacity: .55; } }
.pc-chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 5px 0; }
.pc-chip { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.pc-metas { font-size: 11px; color: var(--text-2); line-height: 1.7; overflow: hidden; }
.pc-fechas-mini { display: flex; gap: 4px 10px; flex-wrap: wrap; border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 5px; }
.pc-fecha-mini { font-size: 9.5px; color: var(--text-3); font-family: ui-monospace, monospace; display: inline-flex; align-items: center; gap: 3px; }
.pc-salto { text-decoration: none; font-size: 10px; padding: 0 3px; border-radius: 4px; transition: transform .12s; display: inline-block; }
.pc-salto:hover { transform: scale(1.35); }
.pc-salto.grande { font-size: 15px; }
.pc-anadir { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer; width: 100%; }
.pc-anadir:hover { color: var(--primary); border-color: var(--primary); }
.pc-toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px); background: #0e1526; color: #fff; padding: 11px 20px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all .25s; z-index: 300; }
.pc-toast.ver { opacity: 1; transform: translate(-50%, 0); }
/* Modal súper ficha */
.pc-modal { max-width: 1060px; width: 96vw; }
.pc-titulo-edit { flex: 1; border: none !important; background: transparent !important; font-size: 17px !important; font-weight: 800; padding: 4px 0 !important; }
.pc-titulo-edit:focus { outline: none; border-bottom: 2px solid var(--primary) !important; }
/* Las dos columnas de la ficha con su propio scroll. Con un solo scroll para
   las dos, cuando la izquierda crecía (una descripción larga, muchas piezas)
   la derecha se salía de la pantalla y no había forma de llegar a ella. */
.pc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; max-height: 66vh; align-items: start; }
.pc-split > * { min-width: 0; max-height: 66vh; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
.pc-split > *::-webkit-scrollbar { width: 7px; }
.pc-split > *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* Nada de lo que va dentro puede empujar la columna a lo ancho */
.pc-split input, .pc-split select, .pc-split textarea { max-width: 100%; }
.pc-split .tabla-wrap { overflow-x: auto; }
@media (max-width: 900px) {
  .pc-split { grid-template-columns: 1fr; max-height: none; }
  .pc-split > * { max-height: none; overflow: visible; }
}
@media (max-width: 900px) { .pc-split { grid-template-columns: 1fr; } }
.pc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.pc-grid2 .campo { margin-bottom: 2px; }
.pc-checklist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pc-chk-fila { display: flex; gap: 8px; align-items: center; }
.pc-chk-fila input[type=checkbox] { width: auto; }
.pc-chk-fila input[type=text] { flex: 1; padding: 6px 10px; font-size: 12.5px; }
.pc-drop { border: 2px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; color: var(--text-3); font-size: 12.5px; cursor: pointer; transition: all .15s; }
.pc-drop:hover, .pc-drop.encima { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pc-adjuntos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pc-adj { display: inline-flex; align-items: center; gap: 4px; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 12px; }
.pc-historial { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; font-size: 11.5px; color: var(--text-3); max-height: 130px; overflow-y: auto; line-height: 1.8; }
.pc-hitos-cab { font-weight: 700; font-size: 13px; margin: 14px 0 8px; }
.pc-hitos-cab small { color: var(--text-3); font-weight: 500; }
.pc-hitos { display: flex; flex-direction: column; gap: 7px; }
.pc-hito { display: grid; grid-template-columns: 128px 128px 1fr 26px; gap: 7px; align-items: center; }
.pc-hito-nombre { font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-hito input { padding: 6px 8px; font-size: 11.5px; }
/* Cronograma */
.pc-crono-cab { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 13px; }
.pc-crono-cab span { color: var(--text-3); font-size: 12px; }
.pc-crono { position: relative; display: flex; flex-direction: column; gap: 9px; }
.pc-hoy { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); opacity: .6; z-index: 2; margin-left: 210px; transform: translateX(0); left: calc(210px + (100% - 210px) * var(--pos, 0)); }
.pc-crono-fila { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pc-crono-fila:hover .pc-crono-nombre { color: var(--primary); }
.pc-crono-nombre { width: 198px; flex-shrink: 0; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-crono-pista { flex: 1; height: 20px; background: var(--gray-soft); border-radius: 99px; position: relative; }
.pc-crono-barra { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; min-width: 10px; opacity: .9; }
.pc-crono-punto { position: absolute; top: 4px; width: 12px; height: 12px; background: #fff; border: 3px solid var(--primary); border-radius: 50%; }
/* Timeline hitos */
.pc-timeline { display: flex; flex-direction: column; gap: 7px; }
.pc-tl-fecha { font-weight: 800; font-size: 12px; color: var(--text-2); margin-top: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 4px; }
.pc-tl-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; cursor: pointer; padding: 3px 0; }
.pc-tl-item:hover b { color: var(--primary); }
.pc-tl-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* Registros */
.pc-acordeon { margin-bottom: 12px; }
.pc-acordeon summary { display: flex; justify-content: space-between; padding: 13px 18px; cursor: pointer; font-size: 13.5px; list-style: none; }
.pc-acordeon summary::-webkit-details-marker { display: none; }
.pc-acordeon summary span { color: var(--text-3); font-size: 12px; }
.pc-acordeon summary:before { content: "▸"; margin-right: 8px; transition: transform .15s; }
.pc-acordeon[open] summary:before { transform: rotate(90deg); }
.pc-tabla th, .pc-tabla td { white-space: nowrap; }
/* Configuración */
.pc-ayuda { color: var(--text-2); font-size: 12.5px; margin: 4px 0 14px; }
.pc-ayuda code { background: var(--gray-soft); padding: 2px 6px; border-radius: 6px; font-size: 11px; }
.pc-grid-conf { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pc-conf-caja { background: var(--gray-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.pc-conf-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.pc-conf-caja p { font-size: 11.5px; color: var(--text-3); margin-bottom: 10px; }
.pc-conf-caja label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; }
.pc-conf-caja input[type=number] { width: 70px; text-align: center; padding: 5px; }
.pc-reglas { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.pc-regla { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.pc-regla code, .pc-regla span { font-size: 11.5px; }
.pc-grid-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; }
.pc-sw-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; }
.pc-col-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; }
.pc-col-fila input[type=color] { width: 38px; height: 34px; padding: 2px; flex-shrink: 0; }
.pc-grid-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }

/* Historial compacto del pedido */
.historial-compacto { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.hist-linea { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.hist-linea:last-child { border-bottom: none; }
.hist-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; align-self: center; opacity: .6; }
.hist-fecha { color: var(--text-3); font-size: 11px; flex-shrink: 0; width: 76px; }
.hist-texto { color: var(--text-1); line-height: 1.45; }
.hist-texto small { color: var(--text-3); }

/* Catálogo de piezas */
.rejilla-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tarjeta-modelo { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; position: relative; transition: all .15s; }
.tarjeta-modelo:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tarjeta-modelo b { font-size: 14.5px; }
.tarjeta-modelo span { color: var(--text-3); font-size: 12px; }
.tm-icono { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.tm-icono svg { width: 20px; height: 20px; }
.tm-flecha { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); transition: all .15s; }
.tarjeta-modelo:hover .tm-flecha { color: var(--primary); transform: translateY(-50%) translateX(3px); }
.chips-grupos { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-grupo { padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 600; color: var(--text-2); text-decoration: none; transition: all .13s; }
.chip-grupo:hover { border-color: var(--primary); color: var(--primary); }
.chip-grupo.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-mini { display: inline-block; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 6px; padding: 1px 8px; font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.tabla-compacta td, .tabla-compacta th { padding: 7px 14px; font-size: 12.5px; }
.paginador { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12.5px; }
.btn.deshabilitado { opacity: .4; pointer-events: none; }
.menu-ricoh .menu-opciones { min-width: 230px; }
.menu-nota { padding: 8px 12px; font-size: 11px; color: var(--text-3); border-bottom: 1px dashed var(--border); }

/* Historial de gestión plegable */
.historial-detalle summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; color: var(--text-2); }
.historial-detalle summary::-webkit-details-marker { display: none; }
.historial-detalle summary svg { width: 15px; height: 15px; }
.historial-detalle summary span { color: var(--text-3); font-weight: 500; font-size: 12.5px; }
.historial-detalle summary:before { content: "▸"; margin-right: 2px; transition: transform .15s; color: var(--text-3); }
.historial-detalle[open] summary:before { transform: rotate(90deg); }

/* Footer del CMS */
.cms-footer { margin-top: 34px; padding: 18px 4px 8px; border-top: 1px solid var(--border); text-align: center; color: var(--text-3); font-size: 11.5px; }
.cms-footer b { color: var(--text-2); }

/* Selector de tienda global en la topbar */
.selector-tienda-global { padding: 6px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--text-1); max-width: 210px; cursor: pointer; }
.selector-tienda-global:hover { border-color: var(--primary); }

/* ===== Hero del pedido (proceso rediseñado) ===== */
.pedido-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--c-estado) 8%, var(--card)), var(--card)); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; position: relative; overflow: hidden; }
.pedido-hero:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--c-estado); }
.ph-cima { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.ph-icono { width: 52px; height: 52px; border-radius: 15px; background: var(--c-estado); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--c-estado) 55%, transparent); }
.ph-icono svg { width: 25px; height: 25px; }
.ph-texto { display: flex; flex-direction: column; }
.ph-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); font-weight: 700; }
.ph-estado { font-size: 21px; font-weight: 800; letter-spacing: -.4px; color: var(--c-estado); }
.ph-num { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--text-2); background: var(--card); border: 1px solid var(--border); padding: 6px 14px; border-radius: 10px; }
.ph-barra { height: 6px; background: var(--gray-soft); border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
.ph-relleno { height: 100%; background: var(--c-estado); border-radius: 99px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.ph-stepper { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.ph-paso { flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; }
.ph-paso:not(:last-child):after { content: ""; position: absolute; top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--border); }
.ph-paso.hecho:not(:last-child):after { background: var(--c-estado); }
.ph-punto { width: 32px; height: 32px; border-radius: 50%; background: var(--gray-soft); color: var(--text-3); display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); position: relative; z-index: 1; transition: all .2s; }
.ph-punto svg { width: 15px; height: 15px; }
.ph-paso.hecho .ph-punto { background: var(--c-estado); color: #fff; }
.ph-paso.actual .ph-punto { background: var(--c-estado); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-estado) 22%, transparent); animation: phPulso 2s infinite; }
@keyframes phPulso { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-estado) 8%, transparent); } }
.ph-paso-txt { font-size: 11px; font-weight: 600; color: var(--text-2); line-height: 1.25; max-width: 96px; }
.ph-paso.actual .ph-paso-txt { color: var(--c-estado); font-weight: 800; }
.ph-paso-fecha { font-size: 10px; color: var(--text-3); font-family: ui-monospace, monospace; }
.ph-envio { display: flex; gap: 13px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; }
.ph-envio-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-envio-ico svg { width: 19px; height: 19px; }
.ph-envio-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.ph-envio-links a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: none; }
.ph-envio-links a:hover { text-decoration: underline; }
.ph-envio-links svg { width: 13px; height: 13px; }
.ph-envio-estado { margin-top: 7px; font-size: 12.5px; color: var(--text-1); background: var(--gray-soft); padding: 5px 10px; border-radius: 8px; display: inline-block; }
.ph-envio-fecha { font-size: 11px; color: var(--text-3); margin-top: 5px; }
#resTrk { font-size: 12px; color: var(--text-3); }

/* Confirmación de pedido creado */
.pedido-exito { display: flex; align-items: center; gap: 15px; background: linear-gradient(135deg, #dcfce7, var(--card)); border: 1px solid #86efac; border-radius: 15px; padding: 16px 20px; margin-bottom: 18px; animation: peEntra .5s cubic-bezier(.34,1.56,.64,1); }
[data-theme="dark"] .pedido-exito { background: linear-gradient(135deg, #14311f, var(--card)); border-color: #22c55e55; }
@keyframes peEntra { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
.pe-check { width: 46px; height: 46px; border-radius: 50%; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: peCheck .5s .2s both cubic-bezier(.34,1.56,.64,1); box-shadow: 0 6px 16px -4px rgba(34,197,94,.5); }
.pe-check svg { width: 24px; height: 24px; }
@keyframes peCheck { from { transform: scale(0) rotate(-45deg); } }
.pedido-exito b { display: block; font-size: 15.5px; color: var(--text-1); }
.pedido-exito span { font-size: 13px; color: var(--text-2); }
.pedido-exito .btn { margin-left: auto; }

/* ===== Documentos del pedido ===== */
.doc-subir { background: var(--gray-soft); border-bottom: 1px solid var(--border); }
.doc-subir-fila { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.doc-subir-fila .campo span { font-size: 12px; }
.doc-subir-fila select, .doc-subir-fila input { min-width: 150px; }
.doc-drop { border: 2px dashed var(--border); border-radius: 13px; padding: 22px; text-align: center; cursor: pointer; transition: all .15s; background: var(--card); }
.doc-drop:hover, .doc-drop.encima { border-color: var(--primary); background: var(--primary-soft); }
.doc-drop svg { width: 26px; height: 26px; color: var(--primary); }
.doc-drop b { display: block; font-size: 13.5px; margin: 8px 0 3px; }
.doc-drop span { font-size: 12px; color: var(--text-3); }
.doc-nombres { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.doc-chip { background: var(--primary-soft); color: var(--primary); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; }
.doc-lista { display: flex; flex-direction: column; }
.doc-item { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.doc-item:last-child { border-bottom: none; }
.doc-ico { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-ico svg { width: 20px; height: 20px; }
.doc-ico.doc-factura { background: #dbeafe; color: #2563eb; }
.doc-ico.doc-albaran { background: #e0e7ff; color: #4f46e5; }
.doc-ico.doc-garantia { background: #dcfce7; color: #16a34a; }
.doc-ico.doc-documento { background: var(--gray-soft); color: var(--text-2); }
[data-theme="dark"] .doc-ico.doc-factura { background: #1e3a5f; color: #60a5fa; }
[data-theme="dark"] .doc-ico.doc-albaran { background: #312e81; color: #a5b4fc; }
[data-theme="dark"] .doc-ico.doc-garantia { background: #14311f; color: #4ade80; }
.doc-info { flex: 1; min-width: 0; }
.doc-info b { display: block; font-size: 13.5px; }
.doc-info span { font-size: 12px; color: var(--text-3); }
.doc-acciones { display: flex; gap: 6px; flex-shrink: 0; }

/* ===== Topbar rediseñada ===== */
.topbar { height: 66px; padding: 0 28px; gap: 16px; backdrop-filter: saturate(1.1); }
.topbar-ident { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ti-empresa { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-sep { color: var(--text-3); }
.ti-tienda { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--gray-soft); padding: 4px 11px; border-radius: 8px; white-space: nowrap; }
.ti-tienda svg { width: 13px; height: 13px; }
.topbar-derecha { gap: 10px; }

/* Selectores con icono y flecha, aire suficiente para no cortar el texto */
.tb-select { position: relative; display: inline-flex; align-items: center; }
.tb-select select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 11px; height: 40px; padding: 0 34px 0 13px; transition: all .15s;
}
.tb-select-tienda select { padding-left: 34px; max-width: 200px; text-overflow: ellipsis; }
.tb-select-idioma select { padding-left: 15px; font-weight: 700; }
.tb-select select:hover { border-color: var(--primary); background: var(--primary-soft); }
.tb-select select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tb-select-ico { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.tb-select-flecha { position: absolute; right: 11px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }

.btn-icono { width: 40px; height: 40px; border-radius: 11px; }
.btn-icono svg { width: 18px; height: 18px; }

/* Avatar con anillo */
.tb-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--indigo));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .3px;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--border), 0 3px 8px rgba(37,99,235,.28);
  transition: transform .15s;
}
.tb-avatar:hover { transform: scale(1.06); }

@media (max-width: 720px) {
  .topbar { padding: 0 16px; }
  .ti-empresa { max-width: 120px; }
  .tb-select-tienda { display: none; }
}

/* ===== Dashboard rediseñado ===== */
.dash-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: 26px; padding: 26px 28px;
  background: linear-gradient(120deg, var(--primary-soft) 0%, var(--card) 55%);
  border: 1px solid var(--border); border-radius: 20px; position: relative; overflow: hidden;
}
.dash-hero:before {
  content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(37,99,235,.10), transparent 70%); pointer-events: none;
}
.dash-hero-txt { min-width: 0; position: relative; z-index: 1; }
.dash-saludo { font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.dash-saludo b { color: var(--primary); font-weight: 800; }
.dash-hero h1 { font-size: 27px; font-weight: 800; letter-spacing: -.6px; margin: 4px 0 5px; }
.dash-hero p { color: var(--text-2); font-size: 13.5px; }
.btn.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; border-radius: 12px; position: relative; z-index: 1; }

/* KPIs con hover y acento */
.dash-kpis { gap: 15px; }
.dash-kpis .kpi { padding: 19px; border-radius: 16px; transition: transform .16s, box-shadow .16s, border-color .16s; position: relative; overflow: hidden; }
.dash-kpis .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.dash-kpis .kpi .icono { width: 48px; height: 48px; border-radius: 14px; }
.dash-kpis .kpi .icono svg { width: 22px; height: 22px; }
.kpi-datos b { font-size: 25px; }
.kpi-destacado:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; opacity: 0; }
.dash-kpis .kpi.kpi-destacado:hover:before { opacity: .5; }

/* Avisos de atención */
.dash-avisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 13px; margin-bottom: 24px; }
.aviso {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid; text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.aviso:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.aviso-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aviso-ico svg { width: 19px; height: 19px; }
.aviso b { font-size: 19px; font-weight: 800; display: block; line-height: 1.1; }
.aviso span { font-size: 12px; font-weight: 600; }
.aviso-info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.aviso-info, .aviso-info b { color: var(--primary); }
.aviso-info .aviso-ico { background: var(--primary); color: #fff; }
.aviso-info span { color: var(--text-2); }
.aviso-rojo { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 22%, transparent); }
.aviso-rojo, .aviso-rojo b { color: var(--red); }
.aviso-rojo .aviso-ico { background: var(--red); color: #fff; }
.aviso-rojo span { color: var(--text-2); }
.aviso-ambar { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 22%, transparent); }
.aviso-ambar, .aviso-ambar b { color: var(--amber); }
.aviso-ambar .aviso-ico { background: var(--amber); color: #fff; }
.aviso-ambar span { color: var(--text-2); }

/* Actividad reciente */
.dash-actividad { padding: 8px; max-height: 420px; overflow-y: auto; }
.act-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 12px; transition: background .13s; }
.act-item:hover { background: var(--gray-soft); }
.act-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--gray-soft); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.act-ico svg { width: 16px; height: 16px; }
.act-txt { flex: 1; min-width: 0; }
.act-txt b { font-size: 13px; font-weight: 700; display: block; }
.act-txt span { font-size: 12px; color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-item time { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* Gráficos del dashboard */
.dash-grafico { border-radius: 16px; }
.graf-titulo { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 15px; font-weight: 700; }
.graf-titulo svg { width: 17px; height: 17px; color: var(--primary); }
.graf-titulo small { color: var(--text-3); font-weight: 500; font-size: 12.5px; }

/* Acento de color por tipo de KPI */
.dash-kpis .kpi { border-top: 3px solid transparent; }
.dash-kpis .kpi-azul:hover { border-top-color: var(--primary); }
.dash-kpis .kpi-verde:hover { border-top-color: var(--green); }
.dash-kpis .kpi-ambar:hover { border-top-color: var(--amber); }
.dash-kpis .kpi-rojo:hover { border-top-color: var(--red); }
.dash-kpis .kpi-indigo:hover { border-top-color: var(--indigo); }
.dash-kpis .kpi-gris:hover { border-top-color: var(--text-3); }

/* ===== Banner de alertas (arriba del contenido) ===== */
.alertas-banner { display: flex; flex-direction: column; }
.alerta-banda {
  display: flex; align-items: center; gap: 14px; padding: 13px 26px;
  border-bottom: 1px solid var(--border); overflow: hidden;
  transition: height .25s, opacity .25s, padding .25s;
}
.alerta-banda.cerrando { height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; }
.ab-ico { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ab-ico svg { width: 18px; height: 18px; }
.ab-txt { flex: 1; min-width: 0; }
.ab-txt b { font-size: 13.5px; font-weight: 700; display: block; }
.ab-txt span { font-size: 12.5px; color: var(--text-2); display: block; }
.ab-autor { font-size: 11.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.ab-cerrar { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 6px; border-radius: 8px; flex-shrink: 0; display: flex; }
.ab-cerrar:hover { background: rgba(0,0,0,.06); color: var(--text); }
.ab-cerrar svg { width: 16px; height: 16px; }
/* niveles */
.ab-info { background: var(--primary-soft); }
.ab-info .ab-ico { background: var(--primary); color: #fff; }
.ab-info b { color: var(--primary); }
.ab-aviso { background: var(--amber-soft); }
.ab-aviso .ab-ico { background: var(--amber); color: #fff; }
.ab-aviso b { color: var(--amber); }
.ab-urgente { background: var(--red-soft); }
.ab-urgente .ab-ico { background: var(--red); color: #fff; }
.ab-urgente b { color: var(--red); }
.ab-urgente { animation: abPulso 2.4s infinite; }
@keyframes abPulso { 50% { background: color-mix(in srgb, var(--red) 14%, var(--card)); } }

/* ===== Página de alertas ===== */
.al-niveles { display: flex; gap: 8px; }
.al-nivel { flex: 1; cursor: pointer; }
.al-nivel input { display: none; }
.al-nivel span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); transition: all .13s; }
.al-nivel:hover span { border-color: var(--text-3); }
.al-info input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.al-aviso input:checked + span { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.al-urgente input:checked + span { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.al-historial { padding: 6px; max-height: 560px; overflow-y: auto; }
.al-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; transition: background .12s; }
.al-item:hover { background: var(--gray-soft); }
.al-item.al-caducada { opacity: .5; }
.al-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.al-p-info { background: var(--primary); }
.al-p-aviso { background: var(--amber); }
.al-p-urgente { background: var(--red); }
.al-item-txt { flex: 1; min-width: 0; }
.al-item-txt b { font-size: 13.5px; display: block; }
.al-item-txt span { font-size: 11.5px; color: var(--text-3); }

/* ===== Chat interno ===== */
.chat-wrap { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 210px); min-height: 460px; overflow: hidden; padding: 0; }
.chat-lateral { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.chat-tabs { display: flex; padding: 10px 10px 0; gap: 4px; }
.chat-tab { flex: 1; padding: 9px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-3); cursor: pointer; border-radius: 9px 9px 0 0; border-bottom: 2px solid transparent; }
.chat-tab.activa { color: var(--primary); border-bottom-color: var(--primary); }
.chat-buscar { display: flex; align-items: center; gap: 8px; margin: 8px 12px; padding: 8px 11px; background: var(--gray-soft); border-radius: 10px; }
.chat-buscar svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.chat-buscar input { border: none; background: none; font: inherit; font-size: 13px; width: 100%; color: var(--text); outline: none; }
.chat-lista { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.chat-persona, .chat-conv-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; cursor: pointer; transition: background .12s; }
.chat-persona:hover, .chat-conv-item:hover { background: var(--gray-soft); }
.chat-conv-item.activa { background: var(--primary-soft); }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--indigo)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex-shrink: 0; position: relative; }
.chat-avatar-grupo { background: linear-gradient(135deg, var(--indigo), #8b5cf6); }
.chat-punto { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-3); border: 2px solid var(--card); }
.chat-punto.on { background: #22c55e; }
.chat-persona-txt, .chat-conv-item-txt { min-width: 0; flex: 1; }
.chat-persona-txt b, .chat-conv-item-txt b { font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-persona-txt span, .chat-conv-item-txt span { font-size: 11.5px; color: var(--text-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-item-top { display: flex; align-items: center; gap: 6px; }
.chat-conv-item-top b { flex: 1; }
.chat-badge { background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

.chat-panel { display: flex; flex-direction: column; min-width: 0; }
.chat-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); }
.chat-vacio svg { width: 46px; height: 46px; opacity: .5; }
.chat-vacio b { font-size: 15px; color: var(--text-2); }
.chat-vacio span { font-size: 13px; }
.chat-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-conv-cab { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.chat-conv-info b { font-size: 15px; display: block; }
.chat-conv-info span { font-size: 12px; color: var(--text-3); }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; background: var(--gray-soft); }
.chat-dia { align-self: center; font-size: 11px; color: var(--text-3); background: var(--card); padding: 3px 12px; border-radius: 99px; margin: 8px 0; border: 1px solid var(--border); }
.chat-cargando { align-self: center; color: var(--text-3); font-size: 13px; margin: auto; }
.chat-msg { max-width: 72%; align-self: flex-start; }
.chat-msg.mio { align-self: flex-end; }
.chat-msg-autor { font-size: 11px; font-weight: 700; color: var(--primary); margin: 0 0 2px 12px; }
.chat-burbuja { background: var(--card); border: 1px solid var(--border); padding: 9px 13px 6px; border-radius: 14px 14px 14px 4px; font-size: 13.5px; line-height: 1.45; position: relative; word-wrap: break-word; }
.chat-msg.mio .chat-burbuja { background: var(--primary); color: #fff; border-color: var(--primary); border-radius: 14px 14px 4px 14px; }
.chat-burbuja time { font-size: 10px; opacity: .6; margin-left: 8px; float: right; margin-top: 4px; }
.chat-escribir { display: flex; gap: 10px; padding: 13px 16px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-escribir textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 13.5px; background: var(--card); color: var(--text); max-height: 120px; }
.chat-escribir textarea:focus { outline: none; border-color: var(--primary); }
.chat-enviar { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; flex-shrink: 0; }
.chat-enviar svg { width: 18px; height: 18px; }
.chat-grupo-lista { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 11px; padding: 6px; }
.chat-grupo-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.chat-grupo-item:hover { background: var(--gray-soft); }
.chat-grupo-item input { width: auto; }
.chat-grupo-item small { color: var(--text-3); }
/* insignia de no leídos en el menú */
.menu-badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-left: auto; }
@media (max-width: 720px) { .chat-wrap { grid-template-columns: 1fr; } .chat-lateral { display: none; } }

/* Punto de "en línea" en badges */
.punto-online { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 4px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(34,197,94,.25); animation: pulsoOnline 2s infinite; }
@keyframes pulsoOnline { 50% { box-shadow: 0 0 0 4px rgba(34,197,94,.08); } }

/* ============================================================
   WIDGET DE CHAT FLOTANTE — estilo WhatsApp (verde/limpio)
   ============================================================ */
:root {
  --wa-green: #25d366;
  --wa-green-dark: #128c7e;
  --wa-teal: #075e54;
  --wa-bg-chat: #efeae2;
  --wa-bubble-mine: #d9fdd3;
  --wa-bubble-other: #ffffff;
}
[data-theme="dark"] {
  --wa-bg-chat: #0b141a;
  --wa-bubble-mine: #005c4b;
  --wa-bubble-other: #202c33;
}

.cw { position: fixed; right: 26px; bottom: 26px; z-index: 900; }

/* Burbuja flotante */
.cw-boton {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(37,211,102,.45); position: relative; transition: transform .18s, box-shadow .18s;
}
.cw-boton:hover { transform: scale(1.07); box-shadow: 0 9px 28px rgba(37,211,102,.55); }
.cw-boton svg { width: 27px; height: 27px; }
.cw-ico-cerrar { display: none; }
.cw.abierto .cw-ico-abrir { display: none; }
.cw.abierto .cw-ico-cerrar { display: block; }
.cw-badge {
  position: absolute; top: -4px; right: -4px; background: #ef4444; color: #fff;
  font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; padding: 0 6px; border: 2.5px solid var(--card);
  animation: cwBadgePulse 1.8s infinite;
}
@keyframes cwBadgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Panel — más ancho y alto */
.cw-panel {
  position: absolute; right: 0; bottom: 76px; width: 420px; height: 620px;
  max-height: calc(100vh - 130px); max-width: calc(100vw - 40px);
  background: var(--card); border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(11,20,26,.28); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; transition: opacity .2s, transform .2s;
  border: 1px solid var(--border);
}
.cw.abierto .cw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cw-vista { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Cabecera verde estilo WhatsApp */
.cw-cab {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--wa-teal), var(--wa-green-dark)); color: #fff;
}
.cw-cab > b { font-size: 17px; flex: 1; font-weight: 700; }
.cw-cab-acc { display: flex; gap: 3px; }
.cw-icobtn { background: none; border: none; color: rgba(255,255,255,.85); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .13s; }
.cw-icobtn:hover { background: rgba(255,255,255,.18); color: #fff; }
.cw-icobtn svg { width: 19px; height: 19px; }
.cw-cab-conv { gap: 11px; }
.cw-cab-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.25); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.cw-cab-avatar.grupo { background: rgba(255,255,255,.3); }
.cw-cab-info { min-width: 0; flex: 1; }
.cw-cab-info b { font-size: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.cw-cab-info span { font-size: 12px; color: rgba(255,255,255,.8); }

/* Banda de online */
.cw-online { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; background: var(--card); }
.cw-online::-webkit-scrollbar { height: 0; }
.cw-online-lbl { font-size: 11px; font-weight: 700; color: var(--wa-green-dark); white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 5px; }
.cw-online-lbl::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wa-green); box-shadow: 0 0 0 2px rgba(37,211,102,.25); }
.cw-online-av { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark)); color: #fff; font-weight: 800; font-size: 15px; position: relative; flex-shrink: 0; transition: transform .13s; }
.cw-online-av:hover { transform: scale(1.08); }

/* Tabs */
.cw-tabs { display: flex; padding: 0; flex-shrink: 0; background: var(--card); border-bottom: 1px solid var(--border); }
.cw-tab { flex: 1; padding: 13px; border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); cursor: pointer; border-bottom: 3px solid transparent; transition: all .13s; }
.cw-tab.activa { color: var(--wa-green-dark); border-bottom-color: var(--wa-green); }

/* Buscar */
.cw-buscar { display: flex; align-items: center; gap: 9px; margin: 10px 14px; padding: 9px 13px; background: var(--gray-soft); border-radius: 22px; flex-shrink: 0; }
.cw-buscar svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.cw-buscar input { border: none; background: none; font: inherit; font-size: 13.5px; width: 100%; color: var(--text); outline: none; }

/* Listas */
.cw-lista { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; }
.cw-item { display: flex; align-items: center; gap: 13px; padding: 11px 16px; cursor: pointer; transition: background .12s; }
.cw-item:hover { background: var(--gray-soft); }
.cw-av { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex-shrink: 0; position: relative; }
.cw-av.grupo { background: linear-gradient(135deg, var(--wa-green-dark), var(--wa-teal)); }
.cw-punto { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); border: 2.5px solid var(--card); }
.cw-punto.on { background: var(--wa-green); }
.cw-item-txt { min-width: 0; flex: 1; border-bottom: 1px solid var(--border); padding-bottom: 11px; margin-top: 11px; margin-top: 0; }
.cw-item:last-child .cw-item-txt { border-bottom: none; }
.cw-item-top { display: flex; align-items: center; gap: 6px; }
.cw-item-top b { font-size: 14.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cw-item-txt span { font-size: 12.5px; color: var(--text-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-item-hora { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.cw-badge-mini { background: var(--wa-green); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; }
.cw-vacio { text-align: center; color: var(--text-3); font-size: 13px; padding: 34px 20px; line-height: 1.6; }
.cw-nuevogrupo { display: flex; align-items: center; gap: 11px; width: calc(100% - 20px); margin: 6px 10px; padding: 13px; border: none; background: var(--gray-soft); border-radius: 12px; color: var(--wa-green-dark); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .13s; }
.cw-nuevogrupo:hover { background: color-mix(in srgb, var(--wa-green) 14%, var(--gray-soft)); }
.cw-nuevogrupo svg { width: 18px; height: 18px; }

/* Mensajes — fondo estilo WhatsApp */
.cw-mensajes { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 0;
  background-color: var(--wa-bg-chat);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Cpath d='M30 30c0-5 5-5 5-10s-5-5-5-10M20 40c0-5 5-5 5-10'/%3E%3C/g%3E%3C/svg%3E");
}
.cw-dia { align-self: center; font-size: 11.5px; color: var(--text-2); background: var(--card); padding: 4px 13px; border-radius: 8px; margin: 8px 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cw-cargando { align-self: center; color: var(--text-2); font-size: 13px; margin: auto; text-align: center; line-height: 1.6; background: var(--card); padding: 12px 18px; border-radius: 10px; }
.cw-msg { max-width: 80%; align-self: flex-start; margin-bottom: 2px; }
.cw-msg.mio { align-self: flex-end; }
.cw-msg-autor { font-size: 12px; font-weight: 700; color: var(--wa-green-dark); margin: 0 0 1px 10px; }
.cw-burbuja {
  background: var(--wa-bubble-other); padding: 7px 11px 5px; border-radius: 9px; font-size: 14px; line-height: 1.4;
  position: relative; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.13); color: var(--text);
}
.cw-msg:first-child .cw-burbuja, .cw-msg.mio .cw-burbuja { border-radius: 9px; }
.cw-msg.mio .cw-burbuja { background: var(--wa-bubble-mine); }
.cw-burbuja time { font-size: 10.5px; color: var(--text-3); margin-left: 8px; float: right; margin-top: 5px; position: relative; top: 2px; }

/* Escribir */
.cw-escribir { display: flex; gap: 7px; padding: 10px 12px; align-items: center; flex-shrink: 0; background: var(--gray-soft); }
.cw-accion-btn { width: 38px; height: 38px; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .13s; }
.cw-accion-btn:hover { background: rgba(0,0,0,.06); color: var(--wa-green-dark); }
.cw-accion-btn svg { width: 21px; height: 21px; }
.cw-escribir textarea { flex: 1; resize: none; border: none; border-radius: 20px; padding: 10px 15px; font: inherit; font-size: 14px; background: var(--card); color: var(--text); max-height: 90px; outline: none; }
.cw-enviar { width: 44px; height: 44px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark)); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .13s; }
.cw-enviar:hover { transform: scale(1.06); }
.cw-enviar svg { width: 19px; height: 19px; }

/* Emojis */
.cw-emoji-panel { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px 14px; max-height: 160px; overflow-y: auto; background: var(--card); border-top: 1px solid var(--border); }
.cw-emoji-panel button { border: none; background: none; font-size: 23px; cursor: pointer; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: all .1s; line-height: 1; }
.cw-emoji-panel button:hover { background: var(--gray-soft); transform: scale(1.2); }

/* Preview adjunto */
.cw-adjunto-preview { display: flex; align-items: center; gap: 11px; padding: 11px 15px; background: color-mix(in srgb, var(--wa-green) 12%, var(--card)); border-top: 1px solid var(--border); }
.cw-prev-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.cw-prev-ico { width: 40px; height: 40px; border-radius: 8px; background: var(--wa-green-dark); color: #fff; display: flex; align-items: center; justify-content: center; }
.cw-prev-nombre { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-prev-quitar { border: none; background: none; color: var(--text-3); cursor: pointer; padding: 6px; border-radius: 50%; display: flex; }
.cw-prev-quitar:hover { background: rgba(0,0,0,.08); color: var(--red); }

/* Adjuntos en burbujas */
.cw-adj-img { display: block; margin-bottom: 3px; }
.cw-adj-img img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; }
.cw-adj-file { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: rgba(0,0,0,.05); border-radius: 8px; text-decoration: none; margin-bottom: 3px; }
.cw-msg.mio .cw-adj-file { background: rgba(0,0,0,.07); }
.cw-adj-ico { flex-shrink: 0; color: var(--wa-green-dark); }
.cw-adj-txt { min-width: 0; }
.cw-adj-txt b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; color: var(--text); }
.cw-adj-txt small { font-size: 11px; color: var(--text-3); }

/* Grupos */
.cw-grupo-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.cw-grupo-nombre { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; font: inherit; font-size: 14px; background: var(--card); color: var(--text); }
.cw-grupo-nombre:focus { outline: none; border-color: var(--wa-green); }
.cw-grupo-lista { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 6px; min-height: 0; }
.cw-grupo-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.cw-grupo-item:hover { background: var(--gray-soft); }
.cw-grupo-item input { width: auto; accent-color: var(--wa-green); }
.cw-grupo-item small { color: var(--text-3); }
.cw-grupo-crear { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: none; background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark)); color: #fff; border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.cw-grupo-crear svg { width: 18px; height: 18px; }

/* Toasts de notificación */
.cw-toasts { position: fixed; right: 26px; bottom: 100px; z-index: 950; display: flex; flex-direction: column; gap: 11px; pointer-events: none; }
.cw-toast { display: flex; align-items: center; gap: 12px; width: 320px; padding: 14px 16px; background: var(--card); border-radius: 14px; box-shadow: 0 10px 34px rgba(11,20,26,.26); cursor: pointer; pointer-events: auto; transform: translateX(360px); opacity: 0; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s; border-left: 4px solid var(--wa-green); }
.cw-toast.visible { transform: translateX(0); opacity: 1; }
.cw-toast:hover { box-shadow: 0 12px 40px rgba(11,20,26,.34); }
.cw-toast-av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.cw-toast-txt { min-width: 0; flex: 1; }
.cw-toast-txt b { display: block; font-size: 14px; margin-bottom: 1px; }
.cw-toast-txt span { display: block; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  .cw-panel { width: calc(100vw - 32px); height: calc(100vh - 120px); }
  .cw { right: 16px; bottom: 16px; }
  .cw-toasts { right: 16px; left: 16px; }
  .cw-toast { width: auto; }
}

/* ===== Avatares (helper avatar_html) ===== */
.avatar-img, .avatar-ini { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; overflow: hidden; vertical-align: middle; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ini { color: #fff; font-weight: 800; }

/* Pie del sidebar clicable */
.sidebar-pie-user { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; border-radius: 9px; padding: 4px; margin: -4px; transition: background .13s; }
.sidebar-pie-user:hover { background: rgba(255,255,255,.06); }
.sidebar-pie-user .info { min-width: 0; }
.sidebar-pie-user .info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avatar topbar */
.tb-avatar-link { display: inline-flex; text-decoration: none; transition: transform .13s; }
.tb-avatar-link:hover { transform: scale(1.08); }

/* Fila de usuario clicable */
.usuario-fila-link { display: flex; gap: 11px; align-items: center; text-decoration: none; color: inherit; }
.usuario-fila-link:hover b { color: var(--primary); }

/* ===== Página de perfil ===== */
.perfil-hero { position: relative; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--border); margin-bottom: 18px; }
.perfil-hero-bg { height: 96px; width: 100%; opacity: .9; background-image: linear-gradient(135deg, rgba(255,255,255,.15), transparent); }
.perfil-hero-cont { display: flex; align-items: flex-end; gap: 20px; padding: 0 26px 22px; margin-top: -46px; flex-wrap: wrap; }
.perfil-avatar-grande { position: relative; flex-shrink: 0; }
.perfil-avatar-grande .avatar-img, .perfil-avatar-grande .avatar-ini { border: 4px solid var(--card); box-shadow: 0 4px 14px rgba(15,23,42,.15); }
.perfil-online { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; border: 3px solid var(--card); }
.perfil-hero-info { flex: 1; min-width: 200px; padding-bottom: 4px; }
.perfil-hero-info h2 { font-size: 24px; margin: 0 0 3px; }
.perfil-cargo { display: inline-block; color: var(--text-2); font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.perfil-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: var(--gray-soft); border-radius: 20px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.perfil-chip svg { width: 14px; height: 14px; }
.perfil-chip.chip-online { background: rgba(34,197,94,.14); color: #16a34a; }
.perfil-chip.chip-online svg { fill: #22c55e; stroke: #22c55e; }
.perfil-hero-cont .btn { margin-bottom: 4px; }

.perfil-bio { display: flex; gap: 14px; margin-bottom: 18px; }
.perfil-bio svg { width: 24px; height: 24px; color: var(--text-3); flex-shrink: 0; }
.perfil-bio p { margin: 0; color: var(--text-2); line-height: 1.6; }

.perfil-datos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.perfil-sec-tit { display: flex; align-items: center; gap: 9px; font-size: 15px; margin: 0 0 16px; }
.perfil-sec-tit svg { width: 18px; height: 18px; color: var(--primary); }
.perfil-dato { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.perfil-dato:last-child { border-bottom: none; }
.perfil-dato span { color: var(--text-3); font-size: 13px; }
.perfil-dato b { font-size: 13.5px; }

.perfil-avatar-edit { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.perfil-avatar-btns { display: flex; flex-direction: column; gap: 8px; }
.perfil-colores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.perfil-color-op { cursor: pointer; }
.perfil-color-op input { display: none; }
.perfil-color-op span { display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; transition: transform .13s; }
.perfil-color-op input:checked + span { border-color: var(--text); transform: scale(1.12); box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* ===== PROCOMPRA: editor de descripción con formato ===== */
.pc-editor-barra { display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
.pc-editor-barra button { width: 32px; height: 30px; border: 1px solid var(--border); background: var(--card); border-radius: 7px; cursor: pointer; color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pc-editor-barra button:hover { background: var(--gray-soft); color: var(--primary); border-color: var(--primary); }
.pc-editor-barra button svg { width: 15px; height: 15px; }
.pc-editor { min-height: 120px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.5; background: var(--card); color: var(--text); }
.pc-editor:focus { outline: none; border-color: var(--primary); }
.pc-editor:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.pc-editor a { color: var(--primary); text-decoration: underline; }
.pc-editor table { border-collapse: collapse; margin: 4px 0; }
.pc-editor td, .pc-editor th { border: 1px solid var(--border); padding: 3px 7px; font-size: 12px; }

/* Pedidos desde Lowcost */
.pc-pedidos-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pc-pedido-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--primary-soft); color: var(--primary); border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: all .13s; }
.pc-pedido-chip:hover { background: var(--primary); color: #fff; }
.pc-pedido-chip svg { width: 14px; height: 14px; }

/* Documentos */
.pc-docs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pc-doc-fila { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--gray-soft); border-radius: 10px; flex-wrap: wrap; }
.pc-doc-tipo { font-size: 12.5px; font-weight: 700; color: var(--text-2); min-width: 92px; }
.pc-doc-num { flex: 1; min-width: 120px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; background: var(--card); color: var(--text); }
.pc-doc-num:focus { outline: none; border-color: var(--primary); }
.pc-doc-fecha { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 12px; background: var(--card); color: var(--text); }
.pc-doc-acc { display: flex; gap: 3px; align-items: center; }
.pc-doc-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; border: 1px solid var(--border); background: var(--card); border-radius: 7px; cursor: pointer; color: var(--text-2); text-decoration: none; font-size: 12px; }
.pc-doc-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.pc-doc-btn svg { width: 14px; height: 14px; }
.pc-doc-btn.pc-doc-del:hover { background: rgba(239,68,68,.1); color: var(--red); border-color: var(--red); }
.pc-doc-btn.pc-doc-subir { color: var(--primary); border-color: var(--primary); font-weight: 600; }

/* ===== Buscador y escáner en Crear pedido ===== */
.ped-buscador { display: flex; gap: 10px; margin-bottom: 16px; }
.ped-buscador-campo { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0 13px; }
.ped-buscador-campo:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ped-buscador-campo svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.ped-buscador-campo input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 14.5px; padding: 12px 0; color: var(--text); }
.ped-buscador-campo button { border: none; background: none; cursor: pointer; color: var(--text-3); display: flex; padding: 4px; border-radius: 6px; }
.ped-buscador-campo button:hover { background: var(--gray-soft); color: var(--text); }
.ped-buscador > .btn { flex-shrink: 0; }

.ped-escaner { margin-bottom: 16px; border-radius: 14px; overflow: hidden; background: #000; position: relative; }
.ped-escaner video { width: 100%; max-height: 340px; object-fit: cover; display: block; }
.ped-escaner-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--card); }
.ped-escaner-pie span { font-size: 13px; color: var(--text-2); font-weight: 600; }

.prod-escaneado { animation: pedPulso 1.2s ease; }
@keyframes pedPulso { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--primary), 0 8px 24px rgba(37,99,235,.3); } }

.ped-flash { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--card); padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 950; }
.ped-flash.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================== Pedidos regulares ===================== */
.pr-wrap { margin-top: 4px; }
.pr-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid var(--border); }
.pr-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border: none; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pr-tab svg { width: 16px; height: 16px; }
.pr-tab:hover { color: var(--primary); }
.pr-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.pr-panel { display: none; }
.pr-panel.active { display: block; }
.pr-sec { font-size: 15px; margin: 0 0 16px; }
.pr-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }

.pr-tabla th, .pr-tabla td { vertical-align: middle; }
.pr-qty { width: 62px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font-size: 13px; background: var(--card); color: var(--text); }
.pr-fecha { border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font-size: 12px; background: var(--card); color: var(--text); }
.pr-qty:focus, .pr-fecha:focus { outline: none; border-color: var(--primary); }
.pr-custom { color: var(--warning); font-weight: 700; }
.pr-fila-futura { opacity: .82; background: linear-gradient(90deg, rgba(126,34,206,.04), transparent); }

/* Badges */
.pr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.pr-badge-active { background: #d1fae5; color: #047857; }
.pr-badge-paused { background: #fee2e2; color: #991b1b; }
.pr-badge-day { background: #dbeafe; color: #1e40af; }
.pr-badge-transito { background: #fef3c7; color: #b45309; }
.pr-badge-recibido { background: #d1fae5; color: #047857; }
.pr-badge-futuro { background: #f3e8ff; color: #6b21a8; }

/* Expediente documental (pills) */
.pr-doc-cont { display: flex; flex-direction: column; gap: 3px; }
.pr-doc-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700; width: fit-content; }
.pr-doc-complete { background: #d1fae5; color: #047857; border: 1px solid #6ee7b7; }
.pr-doc-partial { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.pr-doc-empty { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.pr-pills { display: flex; gap: 3px; }
.pr-pill { font-size: 9.5px; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
.pr-pill-ok { background: #10b981; color: #fff; }
.pr-pill-exempt { background: #f97316; color: #fff; }
.pr-pill-missing { background: var(--gray-soft); color: var(--text-3); text-decoration: line-through; }

/* Métricas */
.pr-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pr-metrica { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; text-align: center; }
.pr-metrica span { display: block; font-size: 26px; font-weight: 800; color: var(--primary); }
.pr-metrica small { color: var(--text-3); font-size: 12px; }
.pr-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }

/* Gantt híbrido */
.pr-gantt-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
.pr-gantt-scroll { overflow-x: auto; }
.pr-hybrid { position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 860px; }
.pr-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 5; }
.pr-today-label { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.pr-hybrid-row { display: flex; align-items: center; height: 52px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; }
.pr-hybrid-label { width: 230px; font-size: 12px; font-weight: 700; color: #1e293b; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #cbd5e1; flex-shrink: 0; }
.pr-hybrid-track { flex-grow: 1; height: 100%; position: relative; }
.pr-card-block { position: absolute; top: 50%; transform: translate(-50%, -50%); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,.12); cursor: pointer; border: 1px solid transparent; z-index: 10; min-width: 56px; text-align: center; transition: transform .15s ease; }
.pr-card-block:hover { transform: translate(-50%, -58%) scale(1.08); box-shadow: 0 4px 8px rgba(0,0,0,.22); z-index: 30; }
.pr-card-qty { white-space: nowrap; }
.pr-card-dia { font-size: 9.5px; opacity: .85; font-weight: 600; }
.pr-card-red { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pr-card-orange { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.pr-card-green { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.pr-card-purple { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }

/* Upload en expediente */
.pr-upload { background: var(--gray-soft); border: 2px dashed var(--border); border-radius: 10px; padding: 14px; }
.pr-upload h4 { margin: 0 0 10px; font-size: 13px; }
.pr-upload-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pr-upload-fila select, .pr-upload-fila input[type=text] { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--card); color: var(--text); }
.pr-upload-fila input[type=text] { flex: 1; min-width: 140px; }

/* Botón enlace en las vistas de PROCOMPRA */
.pc-vista-enlace { text-decoration: none; }

/* Toast */
.pr-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--card); padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 1200; }
.pr-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Pie de los modales de pedidos regulares */
.pr-modal-pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ===================== Selector de zona (Pedidos / META) ===================== */
.zona-selector { display: flex; gap: 4px; margin: 0 14px 14px; padding: 4px; background: rgba(255,255,255,.06); border-radius: 10px; }
.zona-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: #94a3b8; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.zona-btn svg { width: 15px; height: 15px; }
.zona-btn:hover { color: #e2e8f0; background: rgba(255,255,255,.05); }
.zona-btn.activa { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.35); }

/* ===================== Trazabilidad del pedido ===================== */
.tz-card { margin-bottom: 18px; }
.tz-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tz-cab b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.tz-cab b svg { width: 16px; height: 16px; color: var(--primary); }
.tz-leyenda { font-size: 11.5px; color: var(--text-3); }
.tz-linea { display: flex; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.tz-fase { flex: 1; min-width: 165px; position: relative; padding: 0 10px; }
.tz-fase::before { content: ''; position: absolute; top: 17px; left: 0; right: 50%; height: 2px; background: var(--border); }
.tz-fase::after { content: ''; position: absolute; top: 17px; left: 50%; right: 0; height: 2px; background: var(--border); }
.tz-fase:first-child::before, .tz-fase:last-child::after { display: none; }
.tz-punto { position: relative; z-index: 2; width: 36px; height: 36px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gray-soft); border: 2px solid var(--border); }
.tz-punto svg { width: 17px; height: 17px; color: var(--text-3); }
.tz-cuerpo { text-align: center; display: flex; flex-direction: column; gap: 3px; }
.tz-cuerpo b { font-size: 12.5px; line-height: 1.35; }
.tz-fecha { font-size: 11px; color: var(--text-3); }
.tz-detalle { font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
.tz-enlace { font-size: 11.5px; font-weight: 700; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; justify-content: center; margin-top: 2px; }
.tz-enlace svg { width: 12px; height: 12px; }
.tz-enlace:hover { text-decoration: underline; }
/* Estados */
.tz-hecho .tz-punto { background: #d1fae5; border-color: #6ee7b7; }
.tz-hecho .tz-punto svg { color: #047857; }
.tz-hecho::before, .tz-hecho::after { background: #6ee7b7; }
.tz-pendiente .tz-punto { background: #fef3c7; border-color: #fcd34d; }
.tz-pendiente .tz-punto svg { color: #b45309; }
.tz-vacio .tz-punto { background: var(--gray-soft); border-style: dashed; }
.tz-cancelado .tz-punto { background: #fee2e2; border-color: #fca5a5; }
.tz-cancelado .tz-punto svg { color: #991b1b; }

/* ===================== Expediente Dinámico ===================== */
.exp-widget { margin-bottom: 18px; }
.exp-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.exp-cab-izq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exp-cab-izq b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.exp-cab-izq b svg { width: 16px; height: 16px; color: var(--primary); }
.exp-cab-der { font-size: 12px; color: var(--text-3); }

.exp-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; }
.exp-badge-completo { background: #d1fae5; color: #047857; }
.exp-badge-parcial { background: #fef3c7; color: #b45309; }
.exp-badge-vacio { background: #fee2e2; color: #991b1b; }
.exp-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.exp-pill { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; letter-spacing: .3px; }
.exp-pill-ok { background: #10b981; color: #fff; }
.exp-pill-exento { background: #f97316; color: #fff; }
.exp-pill-falta { background: var(--gray-soft); color: var(--text-3); }
.exp-pill-extra { background: var(--card); border: 1px solid var(--primary); color: var(--primary); }

.exp-vinculos { background: var(--gray-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.exp-vinculos-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.exp-vinculos-cab > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.exp-vinculos-cab svg { width: 14px; height: 14px; }
.exp-vincular-form { display: flex; gap: 6px; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--primary); border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; }
.exp-chip a { color: var(--primary); text-decoration: none; }
.exp-chip a:hover { text-decoration: underline; }
.exp-chip button { background: none; border: none; color: var(--red); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.exp-vacio-inline { font-size: 11.5px; color: var(--text-3); font-style: italic; }

.exp-exenciones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.exp-exent-label { font-size: 11.5px; color: var(--text-3); }
.exp-exent-btn { background: var(--card); border: 1px solid var(--border); color: var(--text-2); border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.exp-exent-btn:hover { border-color: var(--warning); }
.exp-exent-btn.activo { background: #fef3c7; border-color: #fcd34d; color: #b45309; }

.exp-subida { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--gray-soft); border: 1px dashed var(--border); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.exp-input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; background: var(--card); color: var(--text); font-family: inherit; }
.exp-input:focus { outline: none; border-color: var(--primary); }
.exp-tipo { min-width: 210px; }
.exp-desc { flex: 1; min-width: 160px; }
.exp-file { font-size: 12px; max-width: 230px; }
.exp-input-tag { text-transform: uppercase; font-weight: 700; max-width: 110px; }

.exp-tabla th, .exp-tabla td { vertical-align: middle; }
.exp-tag { display: inline-block; background: var(--card); border: 1px solid var(--primary); color: var(--primary); padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; }
.exp-archivo { color: var(--text); font-weight: 600; text-decoration: none; word-break: break-all; }
.exp-archivo:hover { color: var(--primary); text-decoration: underline; }
.exp-desc-cell { color: var(--text-2); font-size: 12.5px; }
.exp-meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.exp-autor { font-size: 10.5px; }
.exp-acciones { display: flex; gap: 5px; }
.exp-vacio { text-align: center; color: var(--text-3); font-size: 13px; font-style: italic; padding: 22px; }

/* Página de expedientes */
.exp-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid var(--border); }
.exp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border: none; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.exp-tab svg { width: 16px; height: 16px; }
.exp-tab:hover { color: var(--primary); }
.exp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.exp-panel { display: none; }
.exp-panel.active { display: block; }
.exp-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.exp-sec { font-size: 15px; margin: 0 0 14px; }
.exp-tipo-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.exp-nota { font-size: 12px; color: var(--text-3); margin: 12px 0 0; }
.exp-origen-tag { display: inline-block; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.exp-sub { font-size: 11.5px; color: var(--text-3); }
.exp-usos { font-size: 12px; color: var(--text-2); }

.exp-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--card); padding: 12px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 1300; }
.exp-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.btn.cargando { opacity: .6; pointer-events: none; }

@media (max-width: 720px) {
  .exp-tipo-form { grid-template-columns: 1fr; }
  .exp-subida { flex-direction: column; align-items: stretch; }
  .exp-tipo, .exp-desc, .exp-file { max-width: none; width: 100%; }
}

/* Acceso al expediente desde PROCOMPRA */
.pc-exp-acceso { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.pc-exp-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-exp-pills { display: inline-flex; gap: 4px; }
.pc-exp-num { font-size: 12px; color: var(--text-3); }
.pc-exp-vacio { font-size: 12.5px; color: var(--text-3); font-style: italic; }
.pc-exp-nota { font-size: 11.5px; color: var(--text-3); margin: 8px 0 0; }
.pc-exp-badge { display: inline-flex; vertical-align: middle; }
.exp-cruzado-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin: 6px 0 8px; }
.exp-cruzado-cab svg { width: 15px; height: 15px; color: var(--primary); }

/* ===================== Dashboard de Inventario META ===================== */
.mi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.mi-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; text-align: center; }
.mi-kpi span { display: block; font-size: 24px; font-weight: 800; line-height: 1.2; }
.mi-kpi small { color: var(--text-3); font-size: 12px; }
.mi-kpi-critico span { color: var(--red); }
.mi-kpi-bajo span { color: var(--warning); }
.mi-kpi-optimo span { color: #10b981; }
.mi-kpi-valor span, .mi-kpi-futuro span { color: var(--primary); font-size: 20px; }

.mi-simulador { margin-bottom: 14px; }
.mi-sim-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mi-sim-cab b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.mi-sim-cab svg { width: 16px; height: 16px; color: var(--primary); }
.mi-sim-nota { font-size: 11.5px; color: var(--text-3); }
.mi-sim-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.mi-sim-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: 13px; font-weight: 700; text-decoration: none; }
.mi-sim-btn:hover { border-color: var(--primary); color: var(--primary); }
.mi-sim-btn.activo { background: var(--primary); border-color: var(--primary); color: #fff; }

.mi-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.mi-contador { font-size: 12px; color: var(--text-3); }
.mi-tabla .mi-num { text-align: right; white-space: nowrap; }
.mi-sku { font-size: 11px; color: var(--text-3); }
.mi-ud { font-size: 11px; color: var(--text-3); }
.mi-rojo { color: var(--red); font-weight: 700; }
.mi-ambar { color: var(--warning); font-weight: 700; }
.mi-pedir { color: var(--primary); }
.mi-estado { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mi-estado-critico { background: #fee2e2; color: #991b1b; }
.mi-estado-bajo { background: #fef3c7; color: #b45309; }
.mi-estado-optimo { background: #d1fae5; color: #047857; }
.mi-estado-sin_control { background: var(--gray-soft); color: var(--text-3); }
.csv-ayuda { background: var(--gray-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 12px; color: var(--text-2); line-height: 1.6; margin-top: 4px; }
.csv-ayuda code { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }

/* Rutinas multiproducto */
.pr-multi { background: var(--gray-soft); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin: 4px 0 16px; }
.pr-multi-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-multi-cab b { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.pr-multi-cab svg { width: 15px; height: 15px; color: var(--primary); }
.pr-multi-cab span { font-size: 11.5px; color: var(--text-3); }
.pr-multi-alta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pr-input { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--card); color: var(--text); font-family: inherit; }
.pr-input:focus { outline: none; border-color: var(--primary); }
#prItemProd { min-width: 240px; flex: 1; }
#prItemLibre { min-width: 150px; flex: 1; }
.pr-input-qty { width: 90px; }
.pr-items-lista { display: flex; flex-direction: column; gap: 6px; }
.pr-item-fila { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.pr-item-nombre { flex: 1; font-size: 13px; font-weight: 600; }
.pr-item-ref { font-size: 11px; color: var(--text-3); font-weight: 400; }
.pr-item-qty { font-weight: 800; color: var(--primary); font-size: 13px; }
.pr-item-total { font-size: 12px; color: var(--text-3); padding-top: 4px; }
.pr-items-vacio { font-size: 12.5px; color: var(--text-3); font-style: italic; padding: 8px 2px; }
.pr-rut-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pr-rut-item { font-size: 10.5px; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--text-2); }
.pr-rut-n { font-size: 10.5px; color: var(--text-3); }

/* ===================== Cronología 3 fases y auditoría ===================== */
.mc-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid var(--border); }
.mc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border: none; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.mc-tab svg { width: 16px; height: 16px; }
.mc-tab:hover { color: var(--primary); }
.mc-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.mc-panel { display: none; }
.mc-panel.active { display: block; }

.mc-leyenda { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--text-2); margin-bottom: 14px; }
.mc-leyenda b { display: inline-block; background: var(--primary); color: #fff; border-radius: 4px; padding: 1px 6px; font-size: 11px; margin-right: 4px; }
.mc-leyenda-nota { color: var(--text-3); font-size: 11.5px; }

.mc-pedido { margin-bottom: 16px; }
.mc-pedido-cab { align-items: flex-start; }
.mc-pedido-cab h3 { margin: 0 0 3px; }
.mc-sub { font-size: 12px; color: var(--text-3); }
.mc-cab-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-estado { padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mc-estado-completo { background: #d1fae5; color: #047857; }
.mc-estado-parcial { background: #fee2e2; color: #991b1b; }
.mc-estado-pendiente { background: #fef3c7; color: #b45309; }
.mc-estado-vacio { background: var(--gray-soft); color: var(--text-3); }

.mc-hub { padding: 12px 20px 0; }
.mc-tabla .mc-num { text-align: right; white-space: nowrap; }
.mc-input { width: 92px; border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 13px; text-align: right; background: var(--card); color: var(--text); font-family: inherit; }
.mc-input:focus { outline: none; border-color: var(--primary); }
.mc-ref { font-size: 11px; color: var(--text-3); }
.mc-falta { color: var(--red); font-weight: 700; }
.mc-exceso { color: var(--warning); font-weight: 700; }
.mc-ok { color: #10b981; font-weight: 700; }
.mc-col-hub.oculta { display: none; }
.mc-acciones { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.mc-generar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }

.mc-audit-intro { font-size: 13px; color: var(--text-2); margin: 0 0 14px; }
.mc-audit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 14px; }
.mc-audit-caja { background: var(--gray-soft); border: 1px dashed var(--border); border-radius: 10px; padding: 14px; }
.mc-audit-tit { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.mc-audit-info { font-size: 11.5px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }
.mc-err { color: var(--red); }
.mc-audit-btns { display: flex; gap: 10px; margin-bottom: 12px; }
.mc-audit-ayuda { background: var(--gray-soft); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--text-2); }
.mc-audit-ayuda code { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }

.mc-res-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 16px 0; }
.mc-res-kpi { text-align: center; }
.mc-res-kpi span { display: block; font-size: 24px; font-weight: 800; }
.mc-res-kpi small { color: var(--text-3); font-size: 12px; }
.mc-res-ok span { color: #10b981; }
.mc-res-falta span { color: var(--red); }
.mc-res-exceso span { color: var(--warning); }
.mc-res-extra span { color: var(--primary); }
.mc-res-tag { padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mc-res-tag-ok { background: #d1fae5; color: #047857; }
.mc-res-tag-falta, .mc-res-tag-nada { background: #fee2e2; color: #991b1b; }
.mc-res-tag-exceso { background: #fef3c7; color: #b45309; }
.mc-res-tag-extra { background: #e0e7ff; color: #3730a3; }

/* ===================== Cronograma unificado (PROCOMPRA) ===================== */
.pcu-filtros { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pcu-buscador { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; background: var(--card); }
.pcu-buscador svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.pcu-buscador input { border: none; outline: none; flex: 1; font: inherit; font-size: 13px; background: none; color: var(--text); }
.pcu-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pcu-chip { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 20px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.pcu-chip span { background: var(--gray-soft); border-radius: 10px; padding: 0 6px; font-size: 11px; }
.pcu-chip:hover { border-color: var(--primary); color: var(--primary); }
.pcu-chip.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.pcu-chip.activo span { background: rgba(255,255,255,.25); color: #fff; }
.pcu-flujo.activo { background: #2563eb; border-color: #2563eb; }
.pcu-rutina.activo { background: #7e22ce; border-color: #7e22ce; }
.pcu-pedidos.activo { background: #0d9488; border-color: #0d9488; }

.pcu-rango { font-size: 12px; color: var(--text-3); }
.pcu-gantt-wrap { overflow-x: auto; }
.pcu-gantt { position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 880px; padding-top: 10px; }
.pcu-hoy { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 20; }
.pcu-hoy span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.pcu-fila { display: flex; align-items: center; height: 52px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.pcu-lab { width: 220px; flex-shrink: 0; padding: 0 12px; border-right: 1px solid #cbd5e1; font-size: 12px; font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcu-lab small { display: block; font-weight: 500; color: #64748b; font-size: 10.5px; }
.pcu-track { flex: 1; height: 100%; position: relative; }
.pcu-bloque { position: absolute; top: 50%; transform: translate(-50%, -50%); padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center; cursor: pointer; border: 1px solid transparent; min-width: 58px; box-shadow: 0 2px 4px rgba(0,0,0,.12); z-index: 10; }
.pcu-bloque:hover { transform: translate(-50%, -58%) scale(1.06); z-index: 30; }
.pcu-bloque small { font-size: 9px; opacity: .85; font-weight: 600; }
.pcu-b-flujo { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.pcu-b-rutina { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
.pcu-b-pedidos { background: #ccfbf1; color: #0f766e; border-color: #5eead4; }
.pcu-b-ok { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.pcu-b-tarde { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.pcu-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); margin-top: 12px; }
.pcu-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pcu-l-flujo { background: #dbeafe; border: 1px solid #93c5fd; }
.pcu-l-rutina { background: #f3e8ff; border: 1px solid #d8b4fe; }
.pcu-l-pedidos { background: #ccfbf1; border: 1px solid #5eead4; }
.pcu-l-ok { background: #d1fae5; border: 1px solid #6ee7b7; }
.pcu-l-tarde { background: #fee2e2; border: 1px solid #fca5a5; }

.pcu-tabla td, .pcu-tabla th { vertical-align: middle; }
.pcu-num { text-align: right; white-space: nowrap; }
.pcu-id { font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.pcu-ref { font-size: 12px; color: var(--text-2); }
.pcu-fecha { white-space: nowrap; font-size: 12.5px; }
.pcu-org { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; }
.pcu-org-flujo { background: #dbeafe; color: #1e40af; }
.pcu-org-rutina { background: #f3e8ff; color: #6b21a8; }
.pcu-org-pedidos { background: #ccfbf1; color: #0f766e; }
.pcu-fase { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pcu-fase-pendiente { background: #fef3c7; color: #b45309; }
.pcu-fase-transito { background: #dbeafe; color: #1e40af; }
.pcu-fase-recibido { background: #d1fae5; color: #047857; }
.pcu-toggle { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text-3); padding: 2px 4px; font-family: inherit; }
.pcu-toggle:hover { color: var(--primary); }
.pcu-exp { font-size: 11.5px; font-weight: 700; color: var(--primary); text-decoration: none; }
.pcu-exp:hover { text-decoration: underline; }
.pcu-sindoc { font-size: 11.5px; color: var(--text-3); font-style: italic; }
.pcu-lineas td { background: var(--gray-soft); padding: 0 12px 10px; }
.pcu-lineas-caja { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; }
.pcu-linea { display: flex; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 12.5px; }
.pcu-l-nom { font-weight: 600; }
.pcu-l-ref { font-size: 11px; color: var(--text-3); font-weight: 400; }
.pcu-l-cant { font-weight: 800; color: var(--primary); white-space: nowrap; }
.pcu-l-cant small { color: var(--text-3); font-weight: 500; }
.pv-nota { font-size: 11.5px; color: var(--text-3); margin: 2px 0 0; grid-column: 1 / -1; }
.pr-aviso-unificado { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.alerta-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.alerta-info a { color: #1d4ed8; font-weight: 700; }

/* ===================== Panel de expediente embebible ===================== */
.expp-cargando { padding: 18px; text-align: center; color: var(--text-3); font-size: 13px; font-style: italic; }
.expp { border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; }
.expp-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--gray-soft); }
.expp-cab-izq { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; }
.expp-cab-der { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }
.expp-vista-btn { background: none; border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; color: var(--text-2); cursor: pointer; font-family: inherit; }
.expp-vista-btn:hover { border-color: var(--primary); color: var(--primary); }

.expp-drop { margin: 12px 14px; border: 2px dashed var(--border); border-radius: 10px; padding: 14px; background: var(--gray-soft); transition: border-color .15s, background .15s; }
.expp-drop.encima { border-color: var(--primary); background: #eff6ff; }
.expp-drop-txt { text-align: center; margin-bottom: 10px; }
.expp-drop-txt b { display: block; font-size: 13px; }
.expp-drop-txt span { font-size: 11.5px; color: var(--text-3); }
.expp-alta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.expp-input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; background: var(--card); color: var(--text); font-family: inherit; }
.expp-input:focus { outline: none; border-color: var(--primary); }
.expp-desc { flex: 1; min-width: 140px; }
.expp-file { font-size: 12px; max-width: 220px; }
.expp-progreso { font-size: 11.5px; color: var(--primary); margin-top: 8px; font-weight: 600; }

.expp-exent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.expp-exent-lab { font-size: 11.5px; color: var(--text-3); }
.expp-exent-btn { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.expp-exent-btn:hover { border-color: var(--warning); }
.expp-exent-btn.activo { background: #fef3c7; border-color: #fcd34d; color: #b45309; }

.expp-docs { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; }
.expp-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.expp-mini { width: 40px; height: 40px; border-radius: 8px; background: var(--gray-soft); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.expp-mini img { width: 100%; height: 100%; object-fit: cover; }
.expp-doc-cuerpo { flex: 1 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 3px; }
.expp-doc-nom a { font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; word-break: normal; line-height: 1.35; }
.expp-doc-nom a:hover { color: var(--primary); text-decoration: underline; }
.expp-doc-desc { border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; font-size: 12px; background: var(--gray-soft); color: var(--text-2); font-family: inherit; }
.expp-doc-desc:focus { outline: none; border-color: var(--primary); background: var(--card); }
.expp-doc-meta { font-size: 10.5px; color: var(--text-3); }
.expp-doc-tipo { border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; font-size: 11px; font-weight: 800; background: var(--card); color: var(--primary); font-family: inherit; cursor: pointer; }
.expp-doc-acc { display: flex; gap: 5px; flex-shrink: 0; }
.expp-vacio { text-align: center; color: var(--text-3); font-size: 12.5px; font-style: italic; padding: 16px; }
.expp-vacio-inline { font-size: 11.5px; color: var(--text-3); font-style: italic; }

.expp-vinc { padding: 0 14px 14px; }
.expp-vinc-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.expp-vinc-cab > span { font-size: 12.5px; font-weight: 700; }
.expp-vinc-form { display: flex; gap: 6px; }
.expp-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.expp-hist { border-top: 1px solid var(--border); padding: 12px 14px; background: var(--gray-soft); }
.expp-hist-tit { font-size: 12.5px; font-weight: 700; margin-bottom: 9px; }
.expp-ev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.expp-ev:last-child { border-bottom: none; }
.expp-ev-acc { font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
.expp-ev-subida { color: #047857; border-color: #6ee7b7; }
.expp-ev-borrado { color: #991b1b; border-color: #fca5a5; }
.expp-ev-exencion, .expp-ev-exencion_off { color: #b45309; border-color: #fcd34d; }
.expp-ev-referencia, .expp-ev-vinculo, .expp-ev-desvinculo { color: var(--primary); border-color: #93c5fd; }
.expp-ev-det { color: var(--text-2); flex: 1; min-width: 120px; }
.expp-ev-meta { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }

/* Referencia en la ficha de PROCOMPRA */
.pc-ref-bloque { margin-bottom: 12px; }
.pc-ref-campo input { font-weight: 700; }
.pc-ref-campo input:disabled { opacity: .5 }
.pc-ref-nota { display: block; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.pc-chip-ref { border-style: dashed !important; font-weight: 800; }
.pc-exp-panel { margin-top: 4px; }
.pc-exp-vacio { padding: 16px; text-align: center; color: var(--text-3); font-size: 12.5px; font-style: italic; border: 1px dashed var(--border); border-radius: 10px; }
.pcu-exp-fila td { background: var(--gray-soft); padding: 0 12px 12px; }
.pcu-exp-panel { padding-top: 10px; }
button.pcu-exp { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }

/* ===================== Expediente en ventana flotante =====================
   Se abre encima de la pantalla en la que estás: nunca te saca de tu sitio. */
.exp-modal-fondo { position: fixed; inset: 0; background: rgba(10,15,28,.55); z-index: 1250; display: none; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.exp-modal-fondo.abierto { display: flex; }
body.exp-modal-activo { overflow: hidden; }
.exp-modal { background: var(--card); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.32); width: 100%; max-width: 760px; animation: expSube .2s ease; }
@keyframes expSube { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
.exp-modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; }
.exp-modal-x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--text-3); cursor: pointer; padding: 0 4px; font-family: inherit; }
.exp-modal-x:hover { color: var(--red); }
.exp-modal-cuerpo { padding: 16px 20px 20px; }
.exp-modal-cuerpo .expp { border: none; }
.exp-modal-cuerpo .expp-cab { border-radius: 10px; margin-bottom: 4px; }
@media (max-width: 720px) {
  .exp-modal-fondo { padding: 2vh 8px; }
  .exp-modal-cuerpo { padding: 12px; }
}

/* Botonera por documento */
.expp-acc { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap; }
.expp-acc:hover { border-color: var(--primary); color: var(--primary); }
.expp-acc-del { color: var(--red); }
.expp-acc-del:hover { border-color: var(--red); color: var(--red); background: #fee2e2; }
.expp-doc-acc { display: flex; gap: 5px; flex-wrap: wrap; }

/* Chip de pedido vinculado con sus acciones */
.expp-chip-ped { gap: 4px; padding: 3px 6px 3px 10px; }
.expp-chip-ver { background: none; border: none; color: var(--primary); font-weight: 700; font-size: 11.5px; cursor: pointer; font-family: inherit; padding: 0; }
.expp-chip-ver:hover { text-decoration: underline; }
.expp-chip-json { font-size: 10px; font-weight: 800; color: var(--text-3); text-decoration: none; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.expp-chip-json:hover { border-color: var(--primary); color: var(--primary); }
.expp-chip-x { background: none; border: none; color: var(--red); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; font-family: inherit; }

/* Visor de archivo y ficha del pedido */
.exp-visor-fondo { position: fixed; inset: 0; background: rgba(10,15,28,.72); z-index: 1400; display: none; align-items: center; justify-content: center; padding: 4vh 16px; }
.exp-visor-fondo.abierto { display: flex; }
.exp-visor { background: var(--card); border-radius: 14px; width: 100%; max-width: 900px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.exp-visor-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.exp-visor-acc { display: flex; align-items: center; gap: 8px; }
.exp-visor-cuerpo { padding: 14px 18px 18px; overflow: auto; }
.exp-visor-cuerpo img { max-width: 100%; border-radius: 8px; display: block; margin: 0 auto; }
.exp-visor-cuerpo iframe { width: 100%; height: 72vh; border: 1px solid var(--border); border-radius: 8px; }
.exp-visor-otro { text-align: center; padding: 30px 10px; color: var(--text-2); font-size: 13px; line-height: 2; }
.exp-ped { max-width: 620px; }

.expped-cab { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.expped-cab b { font-size: 16px; margin-right: 10px; }
.expped-estado { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.expped-pendiente { background: #fef3c7; color: #b45309; }
.expped-aprobado, .expped-preparando { background: #dbeafe; color: #1e40af; }
.expped-transito, .expped-reparto, .expped-recogido { background: #e0e7ff; color: #3730a3; }
.expped-entregado, .expped-revisado { background: #d1fae5; color: #047857; }
.expped-cancelado { background: #fee2e2; color: #991b1b; }
.expped-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.expped-tl-tit { font-size: 12.5px; font-weight: 700; margin: 14px 0 8px; }
.expped-tl { display: flex; flex-direction: column; gap: 0; }
.expped-fase { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; position: relative; }
.expped-fase::before { content: ''; position: absolute; left: 5px; top: 20px; bottom: -7px; width: 2px; background: var(--border); }
.expped-fase:last-child::before { display: none; }
.expped-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--gray-soft); border: 2px solid var(--border); flex-shrink: 0; margin-top: 3px; z-index: 2; }
.expped-f-hecho .expped-punto { background: #10b981; border-color: #6ee7b7; }
.expped-f-pendiente .expped-punto { background: #fef3c7; border-color: #fcd34d; }
.expped-f-cancelado .expped-punto { background: #fee2e2; border-color: #fca5a5; }
.expped-fase b { font-size: 12.5px; display: block; }
.expped-fecha { font-size: 11px; color: var(--text-3); display: block; }
.expped-det { font-size: 11.5px; color: var(--text-2); display: block; }
.expped-tabla th, .expped-tabla td { font-size: 12.5px; padding: 7px 9px; }

/* Filtros del cronograma en dos filas y zonas plegables */
.pcu-filtros { display: block; }
.pcu-filtros-fila { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pcu-filtros-avanzados { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); gap: 10px; }
.pcu-f { display: flex; flex-direction: column; gap: 3px; }
.pcu-f > span { font-size: 11px; color: var(--text-3); font-weight: 600; }
.pcu-f select, .pcu-f input { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; background: var(--card); color: var(--text); font-family: inherit; max-width: 190px; }
.pcu-f select:focus, .pcu-f input:focus { outline: none; border-color: var(--primary); }
.pcu-cab-pleg { cursor: pointer; user-select: none; }
.pcu-cab-pleg:hover h3 { color: var(--primary); }
.pcu-cab-pleg h3 { display: flex; align-items: center; gap: 8px; }
.pcu-pleg { background: none; border: none; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; width: 16px; }
.pcu-cab-pleg:hover .pcu-pleg { color: var(--primary); }
/* El expediente dentro de la ficha del kanban ocupa el ancho de la columna */
.campo > .pc-exp-panel { margin-top: 4px; }
.campo > .pc-exp-nota { display: block; margin-top: 6px; }

/* Aviso de documentación en META desde la Zona Pedidos (solo lectura) */
.meta-aviso { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; border-left: 3px solid var(--primary); }
.meta-aviso-izq { display: flex; align-items: center; gap: 12px; }
.meta-aviso-izq svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
.meta-aviso-izq b { display: block; font-size: 13.5px; }
.meta-aviso-izq span { font-size: 12.5px; color: var(--text-2); }
.meta-aviso-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Eje de fechas en la base del cronograma */
.pcu-eje { display: flex; align-items: flex-start; height: 46px; margin-top: 4px; border-top: 1px solid var(--border); padding-top: 6px; }
.pcu-eje-lab { width: 220px; flex-shrink: 0; padding: 0 12px; font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }
.pcu-eje-track { flex: 1; position: relative; height: 100%; }
.pcu-marca { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pcu-marca-linea { width: 1px; height: 7px; background: var(--border); }
.pcu-marca-txt { font-size: 10.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.pcu-marca-dia { font-size: 9px; color: var(--text-3); text-transform: uppercase; }
.pcu-marca-hoy .pcu-marca-linea { background: var(--red); width: 2px; height: 9px; }
.pcu-marca-hoy .pcu-marca-txt { color: var(--red); }
.pcu-marca-hoy .pcu-marca-dia { color: var(--red); }

/* Selección: bloque del cronograma y fila de la tabla */
.pcu-bloque-sel { outline: 3px solid #7c3aed; outline-offset: 2px; box-shadow: 0 4px 14px rgba(124,58,237,.4) !important; z-index: 25 !important; }
.pcu-tr-sel > td { background: #f5f3ff !important; }
.pcu-tr-sel > td:first-child { box-shadow: inset 3px 0 0 #7c3aed; }
.pcu-tr-sel .pcu-id { color: #6d28d9; }

/* Referencia como botón hacia la tarjeta del tablero */
.pcu-ref-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--card); color: var(--primary); border-radius: 7px; padding: 4px 9px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; max-width: 100%; }
.pcu-ref-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.pcu-ref-btn:hover { border-color: var(--primary); background: #eff6ff; }

/* Zona única de vinculación con pedidos */
.vinc-alta { display: flex; gap: 6px; margin-bottom: 10px; }
.vinc-input { flex: 1; min-width: 0; }
.vinc-vacio { font-size: 12px; color: var(--text-3); font-style: italic; line-height: 1.5; }
.vinc-lista { display: flex; flex-direction: column; gap: 8px; }
.vinc-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; background: var(--card); }
.vinc-item-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.vinc-item-cab b { font-size: 13px; color: var(--primary); }
.vinc-x { background: none; border: none; color: var(--red); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; font-family: inherit; }
.vinc-acc { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
.vinc-doc-estado { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.vinc-ndocs { color: var(--text-3); }

/* Carpeta de documentos que proceden del pedido */
.exp-carp { max-width: 780px; }
.carp-nota { background: var(--gray-soft); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 11.5px; color: var(--text-2); margin-bottom: 12px; }
.exp-carp .expp-docs { padding: 0; }

/* Rutinas: alta de líneas con referencias y precio */
.pr-alta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; align-items: end; }
.pr-mini { display: flex; flex-direction: column; gap: 3px; }
.pr-mini > span { font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.pr-mini .pr-input { width: 100%; }
.pr-mini-ancho { grid-column: span 2; }
.pr-alta-btn { align-self: end; height: 36px; }
.pr-hub-check { margin: 4px 0 12px; }
.pr-items-tabla th, .pr-items-tabla td { font-size: 12px; padding: 7px 9px; }
.pr-items-tabla .pr-num { text-align: right; white-space: nowrap; }
.pr-rut-ref { display: inline-block; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; margin-left: 6px; }
.pr-rut-hub { display: inline-block; background: #fef3c7; color: #b45309; border-radius: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; margin-left: 4px; }

/* ===================== Recepción de mercancía ===================== */
.rec-card { margin-bottom: 18px; }
.rec-titulo { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.rec-sub { text-align: center; color: var(--text-2); font-size: 13px; margin: 0 0 16px; }
.rec-drop { border: 2px dashed var(--border); border-radius: 12px; background: var(--gray-soft); padding: 26px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.rec-drop:hover, .rec-drop.encima { border-color: var(--primary); background: #eff6ff; }
.rec-drop svg { width: 30px; height: 30px; color: var(--primary); margin-bottom: 8px; }
.rec-drop b { display: block; font-size: 14px; }
.rec-drop span { font-size: 12px; color: var(--text-3); }
.rec-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.rec-lista-cab { font-size: 11.5px; color: var(--primary); font-weight: 700; }
.rec-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; }
.rec-item-mini { width: 36px; height: 36px; border-radius: 7px; background: var(--gray-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.rec-item-mini img { width: 100%; height: 100%; object-fit: cover; }
.rec-item-info { flex: 1; min-width: 0; }
.rec-item-info b { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.rec-item-info span { font-size: 11px; color: var(--text-3); }
.rec-item-x { background: none; border: none; color: var(--red); font-size: 18px; cursor: pointer; padding: 0 4px; font-family: inherit; }
.rec-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.rec-btn { justify-content: center; padding: 12px; }
.rec-dictado { border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.rec-dic-lab { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #10b981; margin-bottom: 8px; }
.rec-dic-lab svg { width: 15px; height: 15px; }
.rec-dictado textarea { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 13px; resize: vertical; background: var(--card); color: var(--text); }
.rec-dictado textarea:focus { outline: none; border-color: var(--primary); }
.rec-dic-pie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rec-select { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: var(--card); color: var(--text); }
.rec-registrar { margin-left: auto; }
.rec-voz-estado { font-size: 11.5px; color: var(--text-3); margin-top: 8px; }
#recVozBtn.grabando { border-color: var(--red); color: var(--red); background: #fee2e2; }
.rec-conf { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; margin-right: 5px; cursor: help; }
.rec-conf-media { background: #fef3c7; color: #b45309; }
.rec-conf-baja { background: #fee2e2; color: #991b1b; }
@media (max-width: 640px) { .rec-botones { grid-template-columns: 1fr; } .rec-registrar { margin-left: 0; width: 100%; } }

/* Historial de recepciones */
.apr-hist-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.apr-buscador { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; background: var(--card); min-width: 220px; }
.apr-buscador svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.apr-buscador input { border: none; outline: none; font: inherit; font-size: 12.5px; background: none; color: var(--text); width: 100%; }
.apr-hist-acc select { border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text); }
.apr-origen { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.apr-org-foto { background: #e0e7ff; color: #3730a3; }
.apr-org-pdf { background: #fee2e2; color: #991b1b; }
.apr-org-multi { background: #f3e8ff; color: #6b21a8; }
.apr-org-voz { background: #d1fae5; color: #047857; }
.apr-org-manual { background: var(--gray-soft); color: var(--text-3); }
.apr-acc { display: flex; gap: 5px; }
.apr-contador { padding: 10px 18px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--border); }
.badge-red { background: #fee2e2; color: #991b1b; }

/* Detalle a pantalla completa */
.apr-modal-fondo { position: fixed; inset: 0; background: rgba(10,15,28,.6); z-index: 1350; display: none; align-items: stretch; justify-content: center; padding: 3vh 3vw; }
.apr-modal-fondo.abierto { display: flex; }
.apr-modal { background: var(--card); border-radius: 16px; width: 100%; max-width: 1100px; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden; }
.apr-modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.apr-modal-cab b { display: block; font-size: 16px; }
.apr-modal-cab span { font-size: 12px; color: var(--text-3); }
.apr-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 2px solid var(--border); overflow-x: auto; }
.apr-tab { border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 11px 14px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.apr-tab:hover { color: var(--primary); }
.apr-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.apr-modal-cuerpo { padding: 16px 20px; overflow: auto; flex: 1; }
.apr-panel { display: none; }
.apr-panel.active { display: block; }
.apr-modal-pie { display: flex; gap: 10px; justify-content: flex-end; padding: 13px 20px; border-top: 1px solid var(--border); }
.apr-modal-pie .btn-peligro { margin-right: auto; }

.apr-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.apr-doc { border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.apr-doc-vista { height: 120px; border-radius: 8px; background: var(--gray-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; }
.apr-doc-vista img { width: 100%; height: 100%; object-fit: cover; }
.apr-doc-pdf { font-size: 13px; font-weight: 800; color: var(--red); }
.apr-doc-nom { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.apr-doc-meta { font-size: 10.5px; color: var(--text-3); margin-bottom: 7px; }
.apr-doc-acc { display: flex; gap: 4px; flex-wrap: wrap; }

.apr-conf { font-size: 12.5px; margin-bottom: 12px; }
.apr-obs { margin-bottom: 14px; }
.apr-obs b { font-size: 12.5px; display: block; margin-bottom: 5px; }
.apr-obs p { margin: 0; font-size: 13px; color: var(--text-2); background: var(--gray-soft); border-radius: 8px; padding: 10px 12px; }
.apr-json { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px; font-size: 11.5px; overflow: auto; max-height: 340px; margin: 0; white-space: pre-wrap; word-break: break-word; }
.apr-sin { font-size: 11.5px; color: var(--text-3); font-style: italic; }
.apr-mas { color: #047857; }
.apr-menos { color: var(--red); }
.apr-aud { display: flex; flex-direction: column; gap: 0; }
.apr-ev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.apr-ev:last-child { border-bottom: none; }
.apr-ev-acc { font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--gray-soft); font-size: 11.5px; }
.apr-ev-det { color: var(--text-2); flex: 1; min-width: 140px; }
.apr-ev-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.apr-borrar-aviso { font-size: 13px; color: var(--text-2); background: #fee2e2; border: 1px solid #fca5a5; border-radius: 9px; padding: 11px 13px; margin: 0 0 14px; }
.apr-docs-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.apr-docs-n { font-size: 11.5px; color: var(--text-3); margin-left: auto; }

/* ===================== Comparativa pedido ↔ recibido ===================== */
.comp-vincular { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; }
.comp-vincular select { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text); }
.comp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.comp-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 11px; text-align: center; }
.comp-kpi span { display: block; font-size: 20px; font-weight: 800; }
.comp-kpi small { font-size: 11px; color: var(--text-3); }
.comp-ok span { color: #10b981; }
.comp-falta span { color: var(--red); }
.comp-sobra span { color: var(--warning); }
.comp-precio span { color: #7c3aed; }
.comp-imp span { color: var(--primary); font-size: 17px; }
.comp-cab { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.comp-imp-det { color: var(--text-3); }
.comp-tabla th, .comp-tabla td { font-size: 12px; padding: 7px 8px; vertical-align: middle; }
.comp-f-falta > td, .comp-f-no_recibido > td { background: #fef2f2; }
.comp-f-sobra > td, .comp-f-no_pedido > td { background: #fffbeb; }
.comp-neg { color: var(--red); font-weight: 800; }
.comp-pos { color: var(--warning); font-weight: 800; }
.comp-precio-mal { color: #7c3aed; font-weight: 800; }
.comp-lote { font-size: 11px; color: var(--text-3); }
.comp-est { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10.5px; font-weight: 700; margin-right: 3px; white-space: nowrap; }
.comp-est-ok { background: #d1fae5; color: #047857; }
.comp-est-falta, .comp-est-no_recibido { background: #fee2e2; color: #991b1b; }
.comp-est-sobra, .comp-est-no_pedido { background: #fef3c7; color: #b45309; }
.comp-est-precio { background: #ede9fe; color: #5b21b6; }
.comp-accion { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 10px; padding: 12px 14px; margin-top: 14px; font-size: 13px; }
.comp-accion-ok { background: #d1fae5; border-color: #6ee7b7; color: #047857; justify-content: flex-start; }

/* En móvil, la captura y las tablas se apilan para el personal de almacén */
@media (max-width: 640px) {
  .apr-modal-fondo { padding: 0; }
  .apr-modal { border-radius: 0; max-width: none; }
  .comp-kpis { grid-template-columns: repeat(2, 1fr); }
  .apr-hist-acc { flex-direction: column; align-items: stretch; }
  .apr-buscador { min-width: 0; }
  .rec-titulo { font-size: 17px; }
}

/* ===================== Catálogo en modo tabla ===================== */
.cat-barra { margin-bottom: 14px; }
.cat-acciones { display: flex; gap: 7px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.cat-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cat-buscar { flex: 1; min-width: 200px; }
.cat-guardar { display: flex; align-items: center; gap: 12px; }
.cat-aviso { font-size: 11.5px; color: var(--warning); font-weight: 600; }
.cat-wrap { max-height: 68vh; overflow: auto; }
.cat-tabla { font-size: 12px; }
.cat-tabla th { position: sticky; top: 0; z-index: 5; background: var(--gray-soft); white-space: nowrap; font-size: 10px; padding: 8px 6px; }
.cat-tabla td { padding: 5px 6px; vertical-align: middle; }
.cat-tabla .cat-num { text-align: right; }
.cat-centro { text-align: center; }
.cat-fija { position: sticky; left: 0; background: var(--card); z-index: 4; }
.cat-tabla th.cat-fija { z-index: 6; background: var(--gray-soft); }
.cat-in { border: 1px solid transparent; border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 12px; background: transparent; color: var(--text); width: 100%; min-width: 60px; }
.cat-in:hover { border-color: var(--border); background: var(--card); }
.cat-in:focus { outline: none; border-color: var(--primary); background: var(--card); }
.cat-in-ref { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; color: #7c3aed; min-width: 82px; }
.cat-in-prov { color: #0d9488; }
.cat-in-nombre { min-width: 190px; font-weight: 600; }
.cat-in-corto { min-width: 88px; }
.cat-in-mini { min-width: 62px; }
.cat-in-num { min-width: 68px; text-align: right; }
.cat-sel { min-width: 118px; }
.cat-ubic-campos { display: flex; gap: 2px; }
.cat-in-ubi { min-width: 30px; width: 32px; text-align: center; font-size: 11px; padding: 4px 2px; }
.cat-ubic-cod { display: block; font-family: ui-monospace, monospace; font-size: 9.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; }
.cat-ancho { min-width: 190px; }

/* Líneas del pedido con sus fases y acción de almacén */
.pcu-lin-tit { font-size: 12px; font-weight: 700; color: #6b21a8; padding: 10px 2px 8px; }
.pcu-lin-tabla { font-size: 12px; background: var(--card); border-radius: 8px; }
.pcu-lin-tabla th { font-size: 10px; padding: 7px 8px; }
.pcu-lin-tabla td { padding: 8px; }
.pcu-l-sku { font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; background: #f3e8ff; color: #6b21a8; border-radius: 4px; padding: 1px 6px; }
.pcu-l-refprov { font-family: ui-monospace, monospace; font-size: 10px; color: #0d9488; }
.pcu-l-precio { font-size: 10.5px; color: var(--text-3); }
.pcu-l-omit { font-size: 11px; color: var(--text-3); font-style: italic; }
.pcu-diag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pcu-diag::before { content: '●'; font-size: 9px; }
.pcu-diag-ok { background: #d1fae5; color: #047857; }
.pcu-diag-falta { background: #fee2e2; color: #991b1b; }
.pcu-diag-sobra { background: #fef3c7; color: #b45309; }
.pcu-diag-pend { background: var(--gray-soft); color: var(--text-3); }
.btn-exito { background: #10b981; border-color: #10b981; color: #fff; }
.btn-exito:hover { background: #059669; border-color: #059669; color: #fff; }

/* Autoguardado y acciones del catálogo */
.cat-estado { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.cat-estado-pendiente { color: var(--warning); }
.cat-estado-trabajando { color: var(--primary); }
.cat-estado-ok { color: #10b981; }
.cat-estado-error { color: var(--red); }
.cat-sel { font-size: 11.5px; color: var(--primary); font-weight: 700; margin-right: 4px; }
.cat-fila-ok > td { background: #ecfdf5 !important; transition: background .4s; }
.cat-acc { display: flex; gap: 2px; white-space: nowrap; }
.cat-borrar:hover { color: var(--red); }
.cat-in[readonly] { background: var(--gray-soft); color: var(--text-3); cursor: not-allowed; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.cat-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; background: var(--gray-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-2); white-space: nowrap; }
.cat-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.cat-chip-med::before { display: none; }
.cat-chip-med { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }

/* Ficha del producto */
.catf-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.catf-img { width: 74px; height: 74px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.catf-refs { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.catf-barras { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-3); }
.catf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.catf-dato span { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; }
.catf-dato b { font-size: 13px; }
.catf-tit { font-size: 12.5px; font-weight: 700; margin: 14px 0 7px; }
.catf-aviso { background: #fef3c7; border: 1px solid #fcd34d; color: #b45309; border-radius: 9px; padding: 10px 12px; font-size: 12.5px; }

/* Familias de variantes en el catálogo */
.cat-familia > td { background: #f5f3ff !important; padding: 8px 10px !important; font-size: 12px; }
.cat-familia b { color: #6b21a8; }
.cat-familia svg { width: 13px; height: 13px; color: #7c3aed; vertical-align: -2px; margin-right: 5px; }
.cat-fam-n { font-size: 10.5px; color: var(--text-3); margin-left: 8px; }
.cat-familia-sueltos > td { background: var(--gray-soft) !important; }
.cat-familia-sueltos b { color: var(--text-2); }
.cat-var > td:nth-child(3) { border-left: 2px solid #ddd6fe; }
.cat-var-marca { display: inline-block; font-size: 8.5px; font-weight: 800; background: #ede9fe; color: #6b21a8; border-radius: 3px; padding: 0 4px; margin-left: 3px; vertical-align: 1px; }

/* Aviso de productos sin desplegar */
.cat-desplegar { border-left: 3px solid #7c3aed; margin-bottom: 14px; }
.cat-desplegar b { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.cat-desplegar b svg { width: 16px; height: 16px; color: #7c3aed; }
.cat-desplegar p { font-size: 12.5px; color: var(--text-2); margin: 5px 0 12px; }
.cat-desplegar-lista { display: flex; flex-direction: column; gap: 7px; }
.cat-desp-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; }

/* Panel de cambios en bloque */
.cat-mas-aviso { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 9px; padding: 10px 12px; font-size: 12.5px; margin: 0 0 14px; }
.cat-mas-ejemplo { background: var(--gray-soft); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--text-2); min-height: 18px; }

/* ===================== Selector de catálogo y visor de contenido ===================== */
.sel-fondo { position: fixed; inset: 0; background: rgba(10,15,28,.6); z-index: 1450; display: none; align-items: center; justify-content: center; padding: 4vh 3vw; }
.sel-fondo.abierto { display: flex; }
.sel-modal { background: var(--card); border-radius: 16px; width: 100%; max-width: 1000px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden; }
.sel-modal-cont { max-width: 880px; }
.sel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.sel-cab b { display: block; font-size: 16px; }
.sel-cab span { font-size: 12px; color: var(--text-3); }
.sel-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--gray-soft); }
.sel-buscador { flex: 1; min-width: 220px; }
.sel-buscador input { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13px; background: var(--card); color: var(--text); }
.sel-buscador input:focus { outline: none; border-color: var(--primary); }
.sel-filtros select { border: 1px solid var(--border); border-radius: 9px; padding: 8px 9px; font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text); max-width: 175px; }
.sel-cuerpo { flex: 1; overflow: auto; padding: 0; }
.sel-tabla { font-size: 12.5px; }
.sel-tabla th { position: sticky; top: 0; z-index: 3; background: var(--gray-soft); font-size: 10px; padding: 8px; white-space: nowrap; }
.sel-tabla td { padding: 7px 8px; vertical-align: middle; }
.sel-tabla .sel-num { text-align: right; white-space: nowrap; }
.sel-familia > td { background: #f5f3ff !important; padding: 6px 8px !important; }
.sel-familia b { color: #6b21a8; font-size: 11.5px; }
.sel-fila-on > td { background: #eff6ff !important; }
.sel-in { width: 82px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12px; text-align: right; background: var(--card); color: var(--text); }
.sel-in:focus { outline: none; border-color: var(--primary); }
.sel-meta { font-size: 10.5px; color: var(--text-3); }
.sel-pie { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--border); }
.sel-resumen { flex: 1; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 700px) {
  .sel-fondo { padding: 0; }
  .sel-modal { border-radius: 0; max-height: 100vh; }
  .sel-filtros select { max-width: none; flex: 1; }
}

/* Artículos de la tarjeta de PROCOMPRA */
.pc-arts { margin-bottom: 14px; }
.pc-arts-lista { margin-top: 10px; }
.pc-arts-vacio { font-size: 12.5px; color: var(--text-3); font-style: italic; padding: 10px 2px; }
.pc-arts-tabla { font-size: 12px; }
.pc-arts-tabla th { font-size: 10px; padding: 6px 7px; }
.pc-arts-tabla td { padding: 6px 7px; vertical-align: middle; }
.pc-arts-total { font-size: 11.5px; color: var(--text-3); padding-top: 7px; }
.pc-chip-arts { cursor: pointer; background: #ecfdf5 !important; border-color: #6ee7b7 !important; color: #047857 !important; font-weight: 700; }
.pc-chip-arts:hover { background: #d1fae5 !important; }
.pcu-td-acc { display: flex; gap: 2px; white-space: nowrap; }
.pcu-prov { font-size: 9.5px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 3px; padding: 0 4px; cursor: help; }
.pcu-bloque-prov { border-style: dashed !important; }

/* Compartir la tarjeta */
.pc-ref-fila { display: flex; gap: 10px; align-items: flex-end; }
.pc-ref-fila .pc-ref-campo { flex: 1; }
.pc-share-btn { white-space: nowrap; height: 38px; }
.share-bloque { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.share-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.share-cab b { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; }
.share-cab svg { width: 15px; height: 15px; color: var(--primary); }
.share-tag { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.share-tag-int { background: #e0e7ff; color: #3730a3; }
.share-tag-pub { background: var(--gray-soft); color: var(--text-3); }
.share-tag-on { background: #d1fae5; color: #047857; }
.share-nota { font-size: 12px; color: var(--text-2); margin: 0 0 10px; line-height: 1.5; }
.share-caja { display: flex; gap: 7px; }
.share-caja input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-family: ui-monospace, monospace; font-size: 12px; background: var(--gray-soft); color: var(--text); }
.share-caja input:focus { outline: none; border-color: var(--primary); }
.share-codigo { font-size: 11.5px; color: var(--text-3); margin-top: 8px; }
.share-codigo b { font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: 2px; color: var(--primary); }
.share-acciones { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }

/* Configuración del informe de pedido */
.inf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .inf-grid { grid-template-columns: 1fr; } }
.inf-nota { font-size: 11.5px; color: var(--text-3); line-height: 1.55; margin: 4px 0 10px; }
.inf-nota a { color: var(--primary); font-weight: 600; }
.inf-chks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
@media (max-width: 620px) { .inf-chks { grid-template-columns: 1fr; } }
.inf-cols { display: flex; flex-direction: column; gap: 5px; }
.inf-col { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; background: var(--card); }
.inf-col.off { opacity: .45; }
.inf-col > span:first-of-type { flex: 1; }
.inf-mover { display: flex; flex-direction: column; gap: 1px; }
.inf-mover button { border: none; background: none; cursor: pointer; color: var(--text-3); font-size: 9px; line-height: 1; padding: 1px 4px; font-family: inherit; }
.inf-mover button:hover { color: var(--primary); }
.inf-guardar { display: flex; justify-content: flex-end; padding-bottom: 20px; }

/* Menú de descarga del informe */
.inf-menu { position: relative; display: inline-block; }
.inf-menu-op { display: none; position: absolute; right: 0; top: calc(100% + 5px); background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 26px rgba(15,23,42,.16); min-width: 230px; z-index: 60; overflow: hidden; }
.inf-menu.abierto .inf-menu-op { display: block; }
.inf-menu-op a { display: flex; align-items: center; gap: 9px; padding: 9px 13px; font-size: 12.5px; color: var(--text-2); text-decoration: none; }
.inf-menu-op a:hover { background: var(--gray-soft); color: var(--primary); }
.inf-menu-op svg { width: 14px; height: 14px; }
.inf-menu-sep { height: 1px; background: var(--border); }
.inf-menu-tit { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); padding: 8px 13px 4px; font-weight: 700; }

/* Tarjeta destacada al llegar por un enlace compartido */
.pc-card-destacada { outline: 3px solid #7c3aed; outline-offset: 3px; box-shadow: 0 8px 26px rgba(124,58,237,.35) !important; animation: pcLatido 1.1s ease 3; }
@keyframes pcLatido { 0%,100% { outline-color: #7c3aed } 50% { outline-color: #c4b5fd } }
.pc-resumen-txt { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.65; background: var(--gray-soft); color: var(--text); resize: vertical; }
.pc-resumen-txt:focus { outline: none; border-color: var(--primary); }
.inf-previa { display: none; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 13px; font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; margin-top: 10px; max-height: 300px; overflow: auto; }
.inf-previa.visible { display: block; }
.h-bloques-3 { grid-template-columns: repeat(3, 1fr) !important; }
.inf-sub { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 5px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.inf-sub:first-of-type { margin-top: 4px; }

/* ===================== Control de gestión y alertas ===================== */
.pcu-alertas { margin-bottom: 14px; border-left: 3px solid var(--warning); }
.pcu-al-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.pcu-al-cab b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.pcu-al-cab svg { width: 16px; height: 16px; color: var(--warning); }
.pcu-al-cab > span { font-size: 12px; color: var(--text-3); }
.pcu-al-hay { color: var(--red); }
.pcu-al-ok { color: #10b981; }
.pcu-al-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pcu-al-chip { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 20px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.pcu-al-chip span { background: var(--gray-soft); border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.pcu-al-chip:hover { border-color: var(--primary); color: var(--primary); }
.pcu-al-chip.vacio { opacity: .5; }
.pcu-al-chip.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.pcu-al-chip.activo span { background: rgba(255,255,255,.25); color: #fff; }
.pcu-al-con.activo { background: var(--red); border-color: var(--red); }
.pcu-al-sin.activo { background: #10b981; border-color: #10b981; }
.pcu-al-t-retraso.activo { background: #b91c1c; border-color: #b91c1c; }
.pcu-al-t-parcial.activo { background: #b45309; border-color: #b45309; }
.pcu-al-t-sin_docs.activo { background: #7c3aed; border-color: #7c3aed; }
.pcu-al-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }

/* Etiqueta de alerta en cada fila */
.pcu-al { display: inline-block; margin: 2px 3px 0 0; padding: 2px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.pcu-al-alto { background: #fee2e2; color: #991b1b; }
.pcu-al-medio { background: #fef3c7; color: #b45309; }

/* Contador de productos en el cronograma y el kanban */
.pcu-paq { background: none; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; padding: 2px 7px; color: var(--text-2); white-space: nowrap; }
.pcu-paq:hover { border-color: var(--primary); color: var(--primary); }
.pcu-paq-cero { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.pcu-paq-cero:hover { border-color: var(--red); color: #991b1b; }
.pc-chip-cero { cursor: pointer; background: #fee2e2 !important; border-color: #fca5a5 !important; color: #991b1b !important; font-weight: 700; }

/* ===================== Calendario operativo ===================== */
.cal-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 7px; }
.cal-titulo { font-size: 15px; min-width: 190px; text-transform: capitalize; }
.cal-vistas { display: flex; gap: 3px; background: var(--gray-soft); border-radius: 9px; padding: 3px; }
.cal-vbtn { border: none; background: none; padding: 6px 13px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.cal-vbtn.activo { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.cal-tipos { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cal-chip { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 20px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }
.cal-chip span { background: var(--gray-soft); border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.cal-chip:hover { border-color: var(--primary); color: var(--primary); }
.cal-chip.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.cal-chip.activo span { background: rgba(255,255,255,.25); color: #fff; }
.cal-c-lle.activo { background: #2563eb; border-color: #2563eb; }
.cal-c-rut.activo { background: #7c3aed; border-color: #7c3aed; }
.cal-c-ped.activo { background: #0d9488; border-color: #0d9488; }
.cal-c-ret.activo { background: var(--red); border-color: var(--red); }

.cal-rejilla-caja { overflow: hidden; }
.cal-cabecera { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--gray-soft); border-bottom: 1px solid var(--border); }
.cal-cabecera div { padding: 8px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dia { min-height: 104px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5px 6px; cursor: pointer; transition: background .12s; }
.cal-dia:nth-child(7n) { border-right: none; }
.cal-dia:hover { background: #f8fafc; }
.cal-dia.fuera { background: #fafbfc; opacity: .45; }
.cal-dia.finde { background: #fcfdfe; }
.cal-dia.hoy { background: #eff6ff; }
.cal-dia.sel { background: #ede9fe; box-shadow: inset 0 0 0 2px #7c3aed; }
.cal-num { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.cal-dia.hoy .cal-num { color: var(--primary); }
.cal-hoy-tag { font-size: 8.5px; background: var(--primary); color: #fff; border-radius: 10px; padding: 1px 6px; font-weight: 700; text-transform: uppercase; }
.cal-evs { display: flex; flex-direction: column; gap: 2px; }
.cal-ev { font-size: 10px; padding: 2px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; border-left: 3px solid; }
.cal-ev.cal-c-lle { background: #eff6ff; color: #1e40af; border-color: #2563eb; }
.cal-ev.cal-c-rut { background: #f5f3ff; color: #5b21b6; border-color: #7c3aed; }
.cal-ev.cal-c-ped { background: #f0fdfa; color: #115e59; border-color: #0d9488; }
.cal-ev-ret { background: #fef2f2 !important; color: #991b1b !important; border-color: var(--red) !important; }
.cal-mas { font-size: 9.5px; color: var(--text-3); padding-left: 5px; font-weight: 600; }

.cal-agenda { padding: 4px 0; }
.cal-ag-dia { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cal-ag-dia:last-child { border-bottom: none; }
.cal-ag-dia.hoy { background: #eff6ff; }
.cal-ag-fecha { font-size: 12.5px; font-weight: 700; text-transform: capitalize; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.cal-ag-evs { display: flex; flex-direction: column; gap: 6px; }

.cal-detalle { margin-top: 14px; border-left: 3px solid #7c3aed; }
.cal-det-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cal-det-cab b { font-size: 14px; text-transform: capitalize; }
.cal-det-cab span { font-size: 12px; color: var(--text-3); flex: 1; }
.cal-ficha { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-left: 3px solid; border-radius: 9px; padding: 9px 12px; }
.cal-ficha.cal-c-lle { border-left-color: #2563eb; }
.cal-ficha.cal-c-rut { border-left-color: #7c3aed; }
.cal-ficha.cal-c-ped { border-left-color: #0d9488; }
.cal-ficha-ret { border-left-color: var(--red); background: #fef2f2; }
.cal-ficha-ico { font-size: 17px; }
.cal-ficha-txt { flex: 1; min-width: 0; }
.cal-ficha-txt b { display: block; font-size: 13px; }
.cal-ficha-txt > span { font-size: 11.5px; color: var(--text-3); }
.cal-ficha-det { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.cal-ficha-acc { display: flex; gap: 5px; flex-shrink: 0; }
@media (max-width: 760px) {
  .cal-dia { min-height: 68px; }
  .cal-ev { font-size: 0; padding: 3px; }
  .cal-ev::first-letter { font-size: 11px; }
  .cal-tipos { margin-left: 0; }
}

/* ===================== Centro de enlaces ===================== */
.enl-cab { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.enl-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 13px; text-align: center; }
.enl-kpi span { display: block; font-size: 22px; font-weight: 800; }
.enl-kpi small { font-size: 11px; color: var(--text-3); }
.enl-kpi-pub span { color: #0d9488; }
.enl-zona { margin-bottom: 16px; }
.enl-zona-pub { border-left: 3px solid #0d9488; }
.enl-zona .card-cab h3 { font-size: 14px; }
.enl-zona .card-cab h3 small { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.enl-acc { display: flex; gap: 7px; }
.enl-tabla { font-size: 12.5px; }
.enl-tabla td { padding: 8px; vertical-align: middle; }
.enl-sel > td { background: #eff6ff !important; }
.enl-url { width: 100%; min-width: 190px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font-family: ui-monospace, monospace; font-size: 10.5px; background: var(--gray-soft); color: var(--text-2); }
.enl-url:focus { outline: none; border-color: var(--primary); }
.enl-codigo { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--primary); }
.enl-fila-acc { display: flex; gap: 3px; white-space: nowrap; }
.enl-visto { color: #0d9488; }
.pr-check-ojo { color: #b45309; font-weight: 600; }

/* Corrección de entregas */
.corr-cab { background: var(--gray-soft); border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; }
.corr-cab b { display: block; font-size: 14px; }
.corr-cab span { display: block; font-size: 11.5px; color: var(--text-3); }
.corr-tabla { font-size: 12.5px; }
.corr-tabla td { padding: 7px 8px; vertical-align: middle; }
.corr-in { width: 78px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12.5px; text-align: right; background: var(--card); color: var(--text); }
.corr-in:focus { outline: none; border-color: var(--primary); }
.corr-dif { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.corr-ok { background: #d1fae5; color: #047857; }
.corr-falta { background: #fee2e2; color: #991b1b; }
.corr-sobra { background: #fef3c7; color: #b45309; }
.corr-nota { font-size: 11.5px; color: var(--text-3); line-height: 1.6; margin: 10px 0 0; }
.corr-vacio { text-align: center; padding: 26px 16px; }
.corr-vacio b { display: block; font-size: 14px; margin-bottom: 6px; }
.corr-vacio p { font-size: 12.5px; color: var(--text-2); margin: 0 0 14px; line-height: 1.6; }
.hist-acc { display: flex; gap: 3px; white-space: nowrap; }
.pcu-al-accion { cursor: pointer; text-decoration: underline; }
.pcu-al-accion:hover { filter: brightness(.92); }

/* ===================== Proveedores ===================== */
.prov-filtros { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.prov-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.prov-chip { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.prov-chip span { background: var(--gray-soft); border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.prov-chip:hover { border-color: var(--primary); color: var(--primary); }
.prov-chip.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.prov-chip.activo span { background: rgba(255,255,255,.25); color: #fff; }
.prov-c-meta.activo { background: #7c3aed; border-color: #7c3aed; }
.prov-c-emp.activo { background: #0d9488; border-color: #0d9488; }
.prov-c-tie.activo { background: #b45309; border-color: #b45309; }
.prov-buscar { display: flex; gap: 7px; }
.prov-buscar input { border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 12.5px; min-width: 240px; background: var(--card); color: var(--text); }
.prov-buscar input:focus { outline: none; border-color: var(--primary); }

.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.prov-card { padding: 15px; }
.prov-inactivo { opacity: .6; }
.prov-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.prov-cab b { display: block; font-size: 15px; margin-bottom: 4px; }
.prov-ambito { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 20px; padding: 2px 8px; }
.prov-a-meta { background: #f5f3ff; color: #6b21a8; }
.prov-a-empresa { background: #f0fdfa; color: #115e59; }
.prov-a-tienda { background: #fffbeb; color: #b45309; }
.prov-interno { display: inline-block; font-size: 10px; font-weight: 700; background: #dbeafe; color: #1e40af; border-radius: 20px; padding: 2px 8px; margin-left: 3px; }
.prov-off { display: inline-block; font-size: 10px; font-weight: 700; background: var(--gray-soft); color: var(--text-3); border-radius: 20px; padding: 2px 8px; margin-left: 3px; }
.prov-datos { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-2); margin-bottom: 11px; }
.prov-datos span { display: flex; align-items: center; gap: 6px; }
.prov-datos svg { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
.prov-datos a { color: var(--text-2); text-decoration: none; }
.prov-datos a:hover { color: var(--primary); }
.prov-enlaces { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.prov-usuario { font-size: 11px; color: var(--text-3); margin-bottom: 10px; }
.prov-agenda { border-top: 1px solid var(--border); padding-top: 10px; }
.prov-agenda-tit { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); font-weight: 700; margin-bottom: 7px; }
.prov-contacto { margin-bottom: 9px; }
.prov-contacto b { font-size: 12.5px; }
.prov-ppal { font-size: 9px; background: #d1fae5; color: #047857; border-radius: 10px; padding: 1px 6px; font-weight: 700; }
.prov-cargo { display: block; font-size: 11px; color: var(--text-3); }
.prov-vias { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.prov-vias a { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--primary); text-decoration: none; }
.prov-vias svg { width: 12px; height: 12px; }
.prov-contacto small { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.prov-cond { border-top: 1px solid var(--border); padding-top: 9px; margin-top: 9px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

.prov-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.prov-sec small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.prov-sec .btn { margin-left: auto; }
.prov-lista { display: flex; flex-direction: column; gap: 7px; }
.prov-fila { border: 1px solid var(--border); border-radius: 9px; padding: 9px; display: flex; gap: 9px; align-items: flex-start; }
.prov-fila-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.prov-fila-enlace { grid-template-columns: 1.4fr .8fr; }
.prov-fila input, .prov-fila select { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 12px; background: var(--card); color: var(--text); width: 100%; }
.prov-fila input:focus, .prov-fila select:focus { outline: none; border-color: var(--primary); }
.prov-fila-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.prov-fila-acc .pr-check { font-size: 11px; white-space: nowrap; }
.prov-flags { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }

/* Ficha rápida desde un pedido */
.pc-prov-fila { display: flex; gap: 6px; align-items: flex-end; }
.pc-prov-fila .campo { flex: 1; min-width: 0; }
.pc-prov-fila select { width: 100%; }
.pc-prov-acc { display: flex; gap: 4px; flex-shrink: 0; }
.pc-prov-btn { width: 34px; padding: 0 !important; justify-content: center; }
.pc-prov-btn { height: 38px; }
.pcprov-cab { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.pcprov-dato { font-size: 11.5px; color: var(--text-3); background: var(--gray-soft); border-radius: 20px; padding: 2px 9px; }
.pcprov-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); font-weight: 700; margin: 14px 0 7px; }
.pcprov-enlaces { display: flex; gap: 6px; flex-wrap: wrap; }
.pcprov-usuario { font-size: 11.5px; color: var(--text-3); margin-top: 7px; }
.pcprov-contacto { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; }
.pcprov-cond { background: var(--gray-soft); border-radius: 9px; padding: 10px 12px; font-size: 12px; color: var(--text-2); margin-top: 12px; line-height: 1.5; }

/* Plegado del centro de enlaces */
.enl-cab-plegable { cursor: pointer; user-select: none; }
.enl-cab-plegable:hover h3 { color: var(--primary); }
.enl-flecha { display: inline-block; width: 14px; color: var(--text-3); font-size: 11px; }
.enl-zona.plegada .tabla-wrap,
.enl-zona.plegada .expp-vacio { display: none; }
.enl-zona.plegada { padding-bottom: 0; }

/* Selector de empresa y tienda en Proveedores */
.prov-selector { display: flex; gap: 7px; }
.prov-selector select { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text); }
.prov-selector select:focus { outline: none; border-color: var(--primary); }

/* Accesos directos del proveedor en la ficha */
.pc-prov-acc { display: flex; gap: 4px; }
.pc-prov-off { opacity: .35; pointer-events: none; }

/* Acciones del proveedor en la tarjeta del tablero */
.pc-acciones { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; z-index: 3; }
.kanban-tarjeta { position: relative; }
.pc-acc { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border); background: var(--card); border-radius: 7px; font-size: 12px; text-decoration: none; cursor: pointer; padding: 0; line-height: 1; transition: transform .1s; }
.pc-acc:hover { transform: scale(1.15); border-color: var(--primary); box-shadow: 0 2px 8px rgba(37,99,235,.2); }
.pc-acc-falta { opacity: .45; }
.pc-acc-falta:hover { opacity: 1; border-color: var(--warning); }

/* Secciones plegables de la ficha del pedido */
.pc-plegable { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 7px; }
.pc-plegable:hover { color: var(--primary); }
.pc-flecha { display: inline-block; width: 12px; color: var(--text-3); font-size: 11px; }
.pc-resumen { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--gray-soft); border-radius: 20px; padding: 2px 9px; }
.pc-plegado { display: none !important; }

/* Reclasificación en bloque de proveedores */
.prov-masivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px; }
.prov-sel-n { font-size: 12px; font-weight: 700; color: var(--primary); flex: 1; }
.prov-masivo-sel { border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; font-family: inherit; background: var(--card); color: var(--text); }
.prov-masivo-sel:focus { outline: none; border-color: var(--primary); }
.prov-chk-lbl { display: inline-block; margin-right: 7px; vertical-align: 2px; }
.prov-chk { cursor: pointer; }
.prov-puente { display: inline-block; font-size: 10px; font-weight: 700; background: #ede9fe; color: #5b21b6; border-radius: 20px; padding: 2px 8px; margin-left: 3px; }
.prov-global { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 20px; padding: 5px 12px; }
.prov-global svg { width: 13px; height: 13px; }
.prov-global a { color: #1e40af; font-size: 11px; text-decoration: underline; }
/* Botón de acción sin dato: se puede pulsar para completarlo */
.pc-prov-pend { border-style: dashed !important; border-color: var(--warning) !important; color: var(--warning) !important; opacity: .85; }
.pc-prov-pend:hover { opacity: 1; background: #fffbeb; }

/* Indicador de autoguardado de la ficha */
.pc-estado { font-size: 11.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.pc-estado-pendiente { color: var(--warning); }
.pc-estado-trabajando { color: var(--primary); }
.pc-estado-ok { color: #10b981; }
.pc-estado-error { color: var(--red); }

/* ===================== Columna 0 · pendientes ===================== */
.pc-col-pend { background: #fffbeb; border: 1px solid #fcd34d; }
.pc-col-cab { cursor: pointer; user-select: none; }
.pc-col-cab:hover b { color: var(--primary); }
.pc-col-flecha { display: inline-block; width: 12px; color: var(--text-3); font-size: 11px; margin-right: 2px; }
.pc-col-plegada { width: 46px !important; min-width: 46px !important; max-width: 46px; overflow: hidden; }
.pc-col-plegada .kanban-lista { display: none; }
.pc-col-plegada .kanban-cab { flex-direction: column; gap: 6px; padding: 10px 4px; height: 100%; }
.pc-col-plegada .kanban-cab b { writing-mode: vertical-rl; text-orientation: mixed; font-size: 11.5px; white-space: nowrap; }
.pc-col-plegada .punto-estado { margin: 0; }
.pc-col-vacia { font-size: 11.5px; color: var(--text-3); font-style: italic; padding: 14px 8px; text-align: center; line-height: 1.5; }

.pc-card-pend { background: #fef3c7 !important; border-left: 3px solid var(--warning) !important; cursor: pointer; }
.pc-card-pend:hover { background: #fde68a !important; }
.pc-card-pend-vieja { border-left-color: var(--red) !important; }
.pc-pend-tit { font-size: 12.5px; font-weight: 800; color: #92400e; margin-bottom: 5px; }
.pc-pend-datos { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.pc-pend-datos span { font-size: 10px; background: rgba(255,255,255,.7); border-radius: 4px; padding: 1px 6px; color: #78350f; }
.pc-pend-tienda { font-weight: 800; }
.pc-pend-pie { display: flex; justify-content: space-between; font-size: 10.5px; color: #92400e; }
.pc-pend-dias { color: var(--red); font-weight: 700; }
.pend-aviso { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }

/* Ficha del proveedor dentro del tablero */
.fp-ambito { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; margin-left: 8px; }
.fp-atajos { display: flex; gap: 6px; flex-wrap: wrap; background: var(--gray-soft); border-radius: 10px; padding: 11px 13px; margin-bottom: 6px; }
.fp-sin { font-size: 12px; color: var(--text-3); font-style: italic; }

/* ===================== Pedido de piezas ===================== */
.pz-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.pz-tabla { font-size: 12px; }
.pz-tabla th { font-size: 10px; padding: 6px 7px; }
.pz-tabla td { padding: 6px 7px; vertical-align: middle; }
.pz-ref { font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; background: #f3e8ff; color: #6b21a8; border-radius: 4px; padding: 1px 6px; }
.pz-modelo { font-size: 9.5px; color: var(--text-3); }
.pz-cat { color: #10b981; font-weight: 800; margin-left: 4px; }
.pz-tipo { display: inline-block; font-size: 9px; font-weight: 700; border-radius: 10px; padding: 1px 6px; }
.pz-tipo-consumible { background: #fef3c7; color: #b45309; }
.pz-tipo-cargo { background: #e0e7ff; color: #3730a3; }
.pz-t-cargo > td { background: #fafbff; }
.pz-pegar { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 11px; font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.5; background: var(--gray-soft); color: var(--text); resize: vertical; }
.pz-pegar:focus { outline: none; border-color: var(--primary); background: var(--card); }
.pz-pegar-acc { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.pz-pegar-acc .pr-check { flex: 1; }
.pz-previa-cab { background: #ecfdf5; border: 1px solid #6ee7b7; color: #047857; border-radius: 9px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.pz-res { max-height: 380px; overflow: auto; }

/* ===================== Aprendizaje de documentos ===================== */
.apr-motores { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; margin-bottom: 16px; }
.apr-motor { border: 1px solid var(--border); border-radius: 11px; padding: 13px; }
.apr-motor b { display: block; font-size: 13px; margin-bottom: 3px; }
.apr-motor span { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; margin-bottom: 7px; }
.apr-motor small { display: block; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.apr-on { border-color: #6ee7b7; background: #f0fdf9; }
.apr-on span { background: #d1fae5; color: #047857; }
.apr-off span { background: var(--gray-soft); color: var(--text-3); }
.apr-form { border-top: 1px solid var(--border); padding-top: 14px; }

.apr-lista { display: flex; flex-direction: column; gap: 11px; }
.apr-formato { border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; }
.apr-e-maduro { border-left: 3px solid #10b981; }
.apr-e-aprendiendo { border-left: 3px solid var(--warning); }
.apr-e-nuevo { border-left: 3px solid var(--red); }
.apr-f-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.apr-f-cab b { font-size: 14px; }
.apr-tipo { font-size: 10.5px; color: var(--text-3); background: var(--gray-soft); border-radius: 20px; padding: 2px 9px; margin-left: 7px; }
.apr-estado { font-size: 11.5px; font-weight: 700; }
.apr-f-datos { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; }
.apr-f-datos b { color: var(--text); }
.apr-barra { height: 5px; background: var(--gray-soft); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.apr-barra div { height: 100%; background: linear-gradient(90deg, var(--warning), #10b981); }
.apr-f-acc { display: flex; gap: 6px; flex-wrap: wrap; }

.apr-resumen { display: flex; gap: 16px; background: var(--gray-soft); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; margin-bottom: 6px; }
.apr-huella { display: flex; gap: 6px; flex-wrap: wrap; }
.apr-huella code { background: #f3e8ff; color: #6b21a8; border-radius: 5px; padding: 3px 8px; font-size: 11px; font-family: ui-monospace, monospace; }
.apr-nota { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 9px; padding: 10px 13px; font-size: 12px; line-height: 1.55; margin-top: 10px; }
.apr-mal { background: #fee2e2; color: #991b1b; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-family: ui-monospace, monospace; }
.apr-bien { background: #d1fae5; color: #047857; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-family: ui-monospace, monospace; }
.apr-vocab { display: flex; gap: 5px; flex-wrap: wrap; max-height: 200px; overflow: auto; }
.apr-ref { font-size: 10.5px; font-family: ui-monospace, monospace; background: var(--gray-soft); border-radius: 5px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; }
.apr-ref small { background: var(--primary); color: #fff; border-radius: 8px; padding: 0 5px; font-size: 9px; font-weight: 700; }

/* Canales de un pedido */
.can-lista { display: flex; flex-direction: column; gap: 10px; }
.can-canal { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.can-metaweb { border-color: #c4b5fd; background: #faf5ff; }
.can-retraso { border-left: 3px solid var(--red); }
.can-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.can-cab b { font-size: 13.5px; }
.can-cod { font-size: 10.5px; font-family: ui-monospace, monospace; color: var(--text-3); }
.can-datos { display: flex; gap: 13px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); margin-bottom: 7px; }
.can-datos b { color: var(--text); }
.can-barra { height: 5px; background: var(--gray-soft); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.can-barra div { height: 100%; background: var(--primary); }
.can-alerta { color: var(--red); font-weight: 700; }
.can-estado-sel { border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 12px; font-family: inherit; background: var(--card); color: var(--text); }
.ped-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; background: var(--gray-soft); border-radius: 20px; padding: 5px 14px; }

/* ===================== Reconocimiento de documentos ===================== */
.rec-intro { background: var(--gray-soft); border-radius: 11px; padding: 14px 16px; margin-bottom: 14px; }
.rec-intro p { margin: 0 0 11px; font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.rec-error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; border-radius: 10px; padding: 12px 15px; font-size: 12.5px; line-height: 1.5; }
.rec-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
.rec-cab-l b { font-size: 14.5px; }
.rec-madurez { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; margin-left: 8px; }
.rec-m-maduro { background: #d1fae5; color: #047857; }
.rec-m-aprendiendo { background: #fef3c7; color: #b45309; }
.rec-m-nuevo { background: #fee2e2; color: #991b1b; }
.rec-motor { font-size: 11px; color: var(--text-3); }
.rec-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; margin-bottom: 12px; }
.rec-datos > div { background: var(--gray-soft); border-radius: 9px; padding: 8px 11px; }
.rec-datos span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); font-weight: 700; }
.rec-datos b { font-size: 12.5px; }
.rec-sin { color: var(--red); font-weight: 400; font-size: 12px; }
.rec-aviso { border-radius: 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55; margin-bottom: 11px; }
.rec-a-cambio { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.rec-a-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.rec-a-ojo { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.rec-semaforo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rec-s { font-size: 12px; border-radius: 20px; padding: 4px 12px; font-weight: 600; }
.rec-s-verde { background: #d1fae5; color: #047857; }
.rec-s-ambar { background: #fef3c7; color: #b45309; }
.rec-s-rojo { background: #fee2e2; color: #991b1b; }
.rec-s-pct { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-3); }
.rec-tabla { font-size: 12px; }
.rec-tabla td { padding: 6px 8px; vertical-align: middle; }
.rec-f-verde > td { background: #f0fdf9; }
.rec-f-ambar > td { background: #fffbeb; }
.rec-f-rojo > td { background: #fef2f2; }
.rec-in { width: 78px; border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 12px; text-align: right; background: var(--card); color: var(--text); }
.rec-in-ref { width: 122px; text-align: left; font-family: ui-monospace, monospace; }
.rec-in:focus { outline: none; border-color: var(--primary); }
.rec-leida { font-size: 10px; color: var(--red); margin-top: 2px; }
.rec-dif { color: var(--warning); font-weight: 700; }
.rec-circulo { font-size: 10.5px; color: var(--text-3); }
.rec-pie { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.rec-anterior { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--border); opacity: .7; }

/* Comparativa por canal */
.comp-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 11px; padding: 13px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.comp-ok { background: #ecfdf5; border: 1px solid #6ee7b7; }
.comp-falta { background: #fffbeb; border: 1px solid #fcd34d; }
.comp-cab b { display: block; font-size: 14px; }
.comp-cab span { font-size: 11.5px; color: var(--text-2); }
.comp-cifras { display: flex; gap: 6px; flex-wrap: wrap; }
.comp-cifras span { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; background: rgba(255,255,255,.75); }
.comp-c-ok { color: #047857; }
.comp-c-par { color: #b45309; }
.comp-c-falta { color: #991b1b; }
.comp-c-sobra { color: #1e40af; }
.comp-envios { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 9px; padding: 9px 13px; font-size: 12px; margin-bottom: 11px; line-height: 1.5; }
.comp-tabla { font-size: 12px; }
.comp-f-ok > td { background: #f0fdf9; }
.comp-f-falta > td { background: #fef2f2; }
.comp-f-parcial > td { background: #fffbeb; }
.comp-f-sobra > td { background: #eff6ff; }
.comp-dif-neg { color: var(--red); }
.comp-dif-pos { color: #1e40af; }
.comp-sust { font-size: 10px; color: #7c3aed; margin-top: 2px; }
.comp-modo { font-size: 9.5px; background: var(--gray-soft); border-radius: 10px; padding: 1px 6px; color: var(--text-3); }
.comp-env { font-size: 10.5px; color: var(--text-3); }
.comp-cargos { background: var(--gray-soft); border-radius: 9px; padding: 10px 13px; font-size: 12px; margin-top: 11px; line-height: 1.5; }
.comp-desvio { border-radius: 9px; padding: 10px 13px; font-size: 12.5px; margin-top: 10px; }
.comp-d-mas { background: #fef2f2; color: #991b1b; }
.comp-d-menos { background: #ecfdf5; color: #047857; }
.comp-acciones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Confirmación con firma */
.conf-acc-rapida { margin-bottom: 12px; }
.conf-tabla td { padding: 8px; vertical-align: middle; }
.conf-tabla small { color: var(--text-3); font-size: 11px; }
.conf-in { width: 84px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; text-align: right; background: var(--card); color: var(--text); }
.conf-in:focus { outline: none; border-color: var(--primary); }
.conf-firma { width: 100%; height: 150px; border: 2px dashed var(--border); border-radius: 11px; background: var(--card); cursor: crosshair; touch-action: none; }
.conf-firma-acc { margin-top: 7px; }
.pend-modo { border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; font-family: inherit; background: var(--card); color: var(--text); }

/* Formatos del informe de piezas, en línea: un desplegable dentro de un modal
   con scroll queda cortado por abajo y hay que adivinar dónde están. */
.pz-formatos { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pz-formatos .btn { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; }
.pz-formatos .btn i, .pz-formatos .btn svg { width: 13px; height: 13px; }
.pz-acciones { align-items: center; }

/* La firma real es el registro de quién y cuándo; el trazo es opcional */
.conf-registro { background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 11px; padding: 13px 16px; margin: 16px 0 10px; }
.conf-registro b:first-child { display: block; font-size: 13px; color: #047857; margin-bottom: 5px; }
.conf-registro span { display: block; font-size: 12.5px; color: var(--text-2); }
.conf-registro small { display: block; font-size: 11px; color: var(--text-3); margin-top: 5px; }
.conf-firma-det { border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; margin-bottom: 8px; }
.conf-firma-det summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.conf-firma-det summary:hover { color: var(--primary); }
.conf-firma-det summary small { font-weight: 400; color: var(--text-3); }
.conf-firma-det .nota { margin: 9px 0; }

/* El motor que resolvió va discreto: lo que importa es el resultado */
.rec-motor-det { color: var(--text-3); opacity: .75; }
.rec-manuscrito { background: #f5f3ff; border: 1px solid #c4b5fd; color: #5b21b6; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 11px; line-height: 1.5; }

/* ═══════════════ FLUJO DE RECEPCIÓN · común a META y CLC ═══════════════ */
.flujo { margin-top: 4px; }
.flujo-pasos { display: flex; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.flujo-paso { flex: 1; padding: 10px 8px; text-align: center; font-size: 11.5px; color: var(--text-3); border-right: 1px solid var(--border); position: relative; }
.flujo-paso:last-child { border-right: none; }
.flujo-paso b { display: block; font-size: 12.5px; }
.flujo-paso small { font-size: 10px; }
.flujo-paso.on { background: #eff6ff; color: var(--primary); }
.flujo-paso.hecho { background: #f0fdf9; color: #047857; }
.flujo-paso.hecho::after { content: '✓'; position: absolute; top: 5px; right: 8px; font-size: 10px; }

.flujo-zona { border: 2px dashed var(--border); border-radius: 13px; padding: 28px 20px; text-align: center; background: var(--gray-soft); cursor: pointer; transition: all .15s; }
.flujo-zona:hover, .flujo-zona.encima { border-color: var(--primary); background: #eff6ff; }
.flujo-zona-ico { font-size: 30px; margin-bottom: 7px; }
.flujo-zona b { display: block; font-size: 14px; margin-bottom: 4px; }
.flujo-zona span { font-size: 12px; color: var(--text-3); }
.flujo-entrada { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.flujo-dictado { margin-top: 14px; background: var(--gray-soft); border-radius: 11px; padding: 14px; }
.flujo-dictado-acc { display: flex; gap: 7px; margin-top: 9px; }
.flujo-dictado textarea { width: 100%; }
#flujoVozBtn.grabando { background: #fee2e2; border-color: var(--red); color: #991b1b; animation: lat 1s infinite; }
@keyframes lat { 0%,100% { opacity: 1 } 50% { opacity: .6 } }

.flujo-subidos { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.flujo-fich { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; }
.flujo-fich > span:first-child { font-size: 17px; }
.flujo-fich div { flex: 1; min-width: 0; }
.flujo-fich b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flujo-fich small { font-size: 10.5px; color: var(--text-3); }
.flujo-fich-est { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.flujo-fich-est.ok { color: #047857; font-weight: 700; }

.flujo-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.flujo-cab b { display: block; font-size: 14.5px; }
.flujo-cab span { font-size: 12px; color: var(--text-3); }
.flujo-agentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 11px; }
.flujo-agente { border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; }
.flujo-agente b { display: block; font-size: 12px; }
.ag-est { display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: 20px; padding: 1px 8px; margin: 4px 0; }
.flujo-agente small { display: block; font-size: 10px; color: var(--text-3); line-height: 1.45; }
.ag-on { border-color: #a7f3d0; background: #f0fdf9; }
.ag-on .ag-est { background: #d1fae5; color: #047857; }
.ag-off .ag-est { background: var(--gray-soft); color: var(--text-3); }
.ag-uso { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }
.ag-uso .ag-est { background: #dbeafe; color: #1e40af; }

.flujo-consola { background: #0f172a; border-radius: 10px; padding: 11px 14px; font-family: ui-monospace, monospace; font-size: 11.5px; color: #94a3b8; line-height: 1.8; margin-bottom: 13px; }
.flujo-consola .ok { color: #4ade80; }
.flujo-consola .sk { color: #64748b; }
.flujo-consola .ru { color: #60a5fa; }
.flujo-consola .er { color: #f87171; }

.flujo-cab2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
.flujo-cab2-l b { font-size: 14.5px; }
.flujo-mad { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; margin-left: 8px; }
.mad-maduro { background: #d1fae5; color: #047857; }
.mad-aprendiendo { background: #fef3c7; color: #b45309; }
.mad-nuevo { background: #fee2e2; color: #991b1b; }

.flujo-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.flujo-datos > div { background: var(--gray-soft); border-radius: 9px; padding: 8px 11px; }
.flujo-datos > div.hit { background: #f0fdf9; border: 1px solid #6ee7b7; }
.flujo-datos span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); font-weight: 700; }
.flujo-datos b { font-size: 12.5px; }
.flujo-sin { color: var(--red); font-weight: 400; }

.flujo-aviso { border-radius: 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55; margin-bottom: 11px; }
.fa-i { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.fa-w { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.fa-r { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.fa-ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #047857; }
.fa-p { background: #f5f3ff; border: 1px solid #c4b5fd; color: #5b21b6; }

.flujo-sem { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.fs { font-size: 12px; border-radius: 20px; padding: 4px 12px; font-weight: 600; }
.fs-v { background: #d1fae5; color: #047857; }
.fs-a { background: #fef3c7; color: #b45309; }
.fs-r { background: #fee2e2; color: #991b1b; }
.fs-pct { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-3); }

.flujo-tabla { font-size: 12px; }
.flujo-tabla td { padding: 6px 8px; vertical-align: middle; }
.ff-v > td { background: #f0fdf9; }
.ff-a > td { background: #fffbeb; }
.ff-r > td { background: #fef2f2; }
.ff-b > td { background: #eff6ff; }
.flujo-ref { font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700; background: #f3e8ff; color: #6b21a8; border-radius: 4px; padding: 1px 6px; }
.flujo-in { border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; font: inherit; font-size: 11.5px; background: var(--card); color: var(--text); }
.flujo-in-ref { width: 118px; font-family: ui-monospace, monospace; }
.flujo-in-n { width: 64px; text-align: right; }
.flujo-in:focus { outline: none; border-color: var(--primary); }
.flujo-leida { font-size: 9.5px; color: var(--red); margin-top: 2px; }
.flujo-dif { color: var(--warning); font-weight: 700; }
.flujo-circ { font-size: 10px; color: var(--text-3); }
.flujo-sust { font-size: 9.5px; color: #7c3aed; margin-top: 2px; }
.flujo-nota { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 0; }
.flujo-pie { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.flujo-sec { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); font-weight: 700; margin: 15px 0 7px; }
.flujo-vacio, .flujo-cargando { text-align: center; color: var(--text-3); font-style: italic; padding: 22px; font-size: 12.5px; }

.flujo-comp-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 11px; padding: 13px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cc-ok { background: #ecfdf5; border: 1px solid #6ee7b7; }
.cc-falta { background: #fffbeb; border: 1px solid #fcd34d; }
.flujo-comp-cab b { display: block; font-size: 14px; }
.flujo-comp-cab span { font-size: 11.5px; color: var(--text-2); }
.flujo-cifras { display: flex; gap: 6px; flex-wrap: wrap; }
.flujo-cifras span { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; background: rgba(255,255,255,.75); }
.cf-ok { color: #047857; } .cf-par { color: #b45309; } .cf-falta { color: #991b1b; } .cf-sobra { color: #1e40af; }

.flujo-registro { background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 11px; padding: 13px 16px; margin-bottom: 12px; }
.flujo-registro > b { display: block; font-size: 13px; color: #047857; margin-bottom: 5px; }
.flujo-registro span { display: block; font-size: 12.5px; color: var(--text-2); }
.flujo-registro small { display: block; font-size: 11px; color: var(--text-3); margin-top: 5px; }
.flujo-firma-det { border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; margin: 12px 0; }
.flujo-firma-det summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.flujo-firma-det summary:hover { color: var(--primary); }
.flujo-firma-det summary small { font-weight: 400; color: var(--text-3); }
.flujo-firma { width: 100%; height: 130px; border: 2px dashed var(--border); border-radius: 11px; background: var(--card); cursor: crosshair; touch-action: none; margin-top: 9px; }

.flujo-final { text-align: center; padding: 26px 20px; }
.ff-ico { font-size: 44px; margin-bottom: 9px; }
.flujo-final b { display: block; font-size: 17px; margin-bottom: 4px; }
.flujo-final > span { font-size: 12.5px; color: var(--text-3); }
.ff-detalle { background: var(--gray-soft); border-radius: 10px; padding: 13px; font-size: 12px; color: var(--text-2); line-height: 1.75; margin: 15px auto 0; max-width: 380px; text-align: left; }
.ff-acc { display: flex; gap: 8px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }

.flujo-elegir { background: var(--gray-soft); border-radius: 12px; padding: 17px; text-align: center; }
.flujo-elegir b { display: block; font-size: 14px; margin-bottom: 4px; }
.flujo-elegir p { font-size: 12.5px; color: var(--text-3); margin: 0 0 13px; }
.flujo-elegir-op { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Flujo: navegación libre y gestión de archivos */
.flujo-paso.clicable { cursor: pointer; }
.flujo-paso.clicable:hover { background: var(--gray-soft); }
.flujo-opcional b::after { content: ' ·'; color: var(--text-3); font-weight: 400; }
.flujo-fich-x { border: none; background: none; color: var(--text-3); font-size: 15px; cursor: pointer; padding: 0 4px; line-height: 1; }
.flujo-fich-x:hover { color: var(--red); }
.flujo-fich-aviso { flex-basis: 100%; font-size: 10.5px; color: var(--warning); margin-top: 4px; }
.flujo-fich-pie { display: flex; gap: 7px; justify-content: space-between; margin-top: 9px; flex-wrap: wrap; }

/* ═══ Recepción: una pantalla que cambia, sin pasos ═══ */
.flujo-leyendo { text-align: center; padding: 42px 20px; }
.flujo-spin { width: 42px; height: 42px; margin: 0 auto 16px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg) } }
.flujo-leyendo b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.flujo-leyendo span { font-size: 12.5px; color: var(--text-3); }

.flujo-leido { background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 12px; padding: 14px 17px; margin-bottom: 15px; }
.flujo-leido b { display: block; font-size: 15px; color: #047857; margin-bottom: 3px; }
.flujo-leido span { display: block; font-size: 12.5px; color: var(--text-2); }
.flujo-leido small { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 5px; }

.flujo-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px; margin-bottom: 12px; }
.flujo-pedido { margin-bottom: 13px; }
.fp-hallado { display: flex; align-items: center; gap: 10px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; flex-wrap: wrap; }
.fp-sin { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 12px 15px; }
.fp-sin b { display: block; font-size: 13px; color: #92400e; margin-bottom: 3px; }
.fp-sin span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 9px; }
.fp-acc { display: flex; gap: 7px; flex-wrap: wrap; }
.fp-pendiente { background: var(--gray-soft); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: var(--text-2); }

.flujo-in-nom { width: 100%; min-width: 130px; }
.flujo-pie-izq { display: flex; gap: 7px; }
.flujo-tecnico { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.flujo-tecnico summary { cursor: pointer; font-size: 11.5px; color: var(--text-3); }
.flujo-tecnico summary:hover { color: var(--primary); }
.flujo-consola-in { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-3); background: var(--gray-soft); border-radius: 8px; padding: 9px 12px; margin-top: 8px; }

/* Varias fotos o documentos antes de leer */
.flujo-fich-cab { padding: 9px 2px 6px; }
.flujo-fich-cab b { display: block; font-size: 13px; }
.flujo-fich-cab span { font-size: 11.5px; color: var(--text-3); }
.flujo-fich-mas { display: flex; gap: 6px; flex-wrap: wrap; }