:root{
  --verde:#16a34a; --amarillo:#d97706; --rojo:#dc2626; --azul:#2563eb; --gris:#64748b;
  --bg:#f1f5f9; --panel:#ffffff; --borde:#e2e8f0; --texto:#0f172a; --suave:#64748b;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--texto);font-size:14px}

/* Topbar */
.topbar{background:#0f172a;color:#fff;min-height:64px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;max-width:1500px;margin:0 auto;padding:10px 62px}
.brand{display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;background:#fff;border-radius:8px;padding:3px 12px;line-height:0}
.logo img{height:44px;width:auto;display:block}
.brand h1{margin:0;font-size:18px;font-weight:600}
.brand p{margin:0;font-size:12px;color:#94a3b8}
.usuario{display:flex;align-items:center;gap:10px}
.usuario label{font-size:13px;color:#cbd5e1}
.usuario select{padding:7px 10px;border-radius:6px;border:1px solid #334155;background:#1e293b;color:#fff}

main{max-width:1500px;margin:0 auto;padding:24px 62px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:16px;
  cursor:pointer;transition:.15s;border-left:5px solid var(--gris)}
.kpi:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.kpi.activo{box-shadow:0 0 0 2px var(--texto) inset}
.kpi .n{font-size:30px;font-weight:700;line-height:1}
.kpi .t{font-size:12px;color:var(--suave);margin-top:4px}
.kpi.rojo{border-left-color:var(--rojo)} .kpi.rojo .n{color:var(--rojo)}
.kpi.amarillo{border-left-color:var(--amarillo)} .kpi.amarillo .n{color:var(--amarillo)}
.kpi.verde{border-left-color:var(--verde)} .kpi.verde .n{color:var(--verde)}
.kpi.completado{border-left-color:var(--azul)} .kpi.completado .n{color:var(--azul)}
.kpi.no_aplica .n{color:var(--gris)}

/* Filtros */
.filtros{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.filtros input,.filtros select{padding:9px 12px;border:1px solid var(--borde);border-radius:8px;background:#fff;font-size:14px}
.filtros #buscar{flex:1;min-width:200px}

/* Tabla */
.tabla-wrap{background:var(--panel);border:1px solid var(--borde);border-radius:12px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:12px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--suave);background:#f8fafc;border-bottom:1px solid var(--borde)}
td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f8fafc}
tbody tr:last-child td{border-bottom:none}
.punto{width:12px;height:12px;border-radius:50%;display:inline-block}
.punto.rojo{background:var(--rojo)} .punto.amarillo{background:var(--amarillo)}
.punto.verde{background:var(--verde)} .punto.completado{background:var(--azul)}
.punto.no_aplica{background:var(--gris)}
.nombre-cell .desc{font-size:12px;color:var(--suave);margin-top:2px}
.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;color:#fff;font-weight:500}
.dias{font-weight:600}
.dias.neg{color:var(--rojo)} .dias.cerca{color:var(--amarillo)}
.pa-desc{font-weight:500;font-size:13px}
.pa-fecha{font-size:12px;color:var(--suave);margin-top:2px}
.pa-fecha.neg{color:var(--rojo);font-weight:600} .pa-fecha.cerca{color:var(--amarillo);font-weight:600}
.proxima-box{border-radius:10px;padding:12px 14px;margin:0 0 16px;border-left:5px solid var(--gris);background:#f8fafc}
.proxima-box.rojo{border-left-color:var(--rojo);background:#fef2f2}
.proxima-box.amarillo{border-left-color:var(--amarillo);background:#fffbeb}
.proxima-box.verde{border-left-color:var(--verde);background:#f0fdf4}
.proxima-box .pb-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);font-weight:600}
.proxima-box .pb-desc{font-weight:600;font-size:15px;margin:3px 0}
.proxima-box .pb-fecha{font-size:13px;color:#334155}
.vacio{text-align:center;color:var(--suave);padding:30px}

/* Botones */
.btn{padding:8px 14px;border-radius:8px;border:1px solid var(--borde);background:#fff;cursor:pointer;font-size:13px;font-weight:500}
.btn:hover{background:#f1f5f9}
.btn-primary{background:#2563eb;color:#fff;border-color:#2563eb}
.btn-primary:hover{background:#1d4ed8}
.btn-ok{background:var(--verde);color:#fff;border-color:var(--verde)}
.btn-danger{background:#fff;color:var(--rojo);border-color:#fecaca}
.btn-danger:hover{background:#fef2f2}
.btn-sm{padding:5px 10px;font-size:12px}

/* Panel lateral */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:40}
.panel{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:#fff;z-index:50;
  box-shadow:-8px 0 30px rgba(0,0,0,.15);overflow-y:auto;padding:24px}
.panel h2{margin:0 0 4px}
.panel .cerrar{position:absolute;top:18px;right:20px;font-size:24px;cursor:pointer;color:var(--suave);background:none;border:none}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:#334155}
.campo input,.campo select,.campo textarea{width:100%;padding:9px 12px;border:1px solid var(--borde);border-radius:8px;font-size:14px;font-family:inherit}
.campo textarea{resize:vertical;min-height:60px}
.fila{display:flex;gap:12px}.fila>*{flex:1}
.seccion-titulo{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);
  margin:24px 0 10px;border-bottom:1px solid var(--borde);padding-bottom:6px;display:flex;justify-content:space-between;align-items:center}

/* Pasos del procedimiento */
.paso{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--borde);border-radius:8px;margin-bottom:8px}
.paso.atrasado{border-left:4px solid var(--rojo);background:#fef2f2}
.paso.proximo{border-left:4px solid var(--amarillo);background:#fffbeb}
.paso.futuro{border-left:4px solid var(--borde)}
.paso.hecho{border-left:4px solid var(--verde);background:#f0fdf4;opacity:.75}
.paso input[type=checkbox]{width:18px;height:18px;margin-top:2px;cursor:pointer}
.p-desc-row{display:flex;align-items:center;gap:8px}
.p-desc-input{flex:1;font-weight:500;font-size:14px;font-family:inherit;color:var(--texto);padding:3px 6px;border:1px solid transparent;border-radius:6px;background:transparent}
.p-desc-input:hover{border-color:var(--borde)}
.p-desc-input:focus{outline:none;border-color:var(--azul);background:#fff}
.paso.hecho .p-desc-input{text-decoration:line-through;color:var(--suave)}
.p-notas-btn{flex:0 0 auto;border:1px solid var(--borde);background:#fff;border-radius:6px;cursor:pointer;padding:2px 7px;font-size:13px;line-height:1.4;opacity:.4;transition:opacity .15s}
.p-notas-btn:hover{opacity:.9}
.p-notas-btn.tiene-notas{opacity:1;background:#fef9c3;border-color:#fde047}
.p-notas{margin-top:7px}
.p-notas textarea{width:100%;min-height:64px;padding:8px;border:1px solid var(--borde);border-radius:7px;font-size:12px;font-family:inherit;color:var(--texto);resize:vertical;box-sizing:border-box}
.p-notas textarea:focus{outline:none;border-color:var(--azul)}
.paso .p-meta{font-size:12px;color:var(--suave);margin-top:3px}
.p-controles{display:flex;gap:14px;margin:5px 0;flex-wrap:wrap}
.p-controles label{font-size:11px;color:var(--suave);display:flex;align-items:center;gap:5px}
.p-controles input{padding:3px 6px;border:1px solid var(--borde);border-radius:5px;font-size:12px}
.p-controles input[type=number]{width:58px}
.p-controles input:disabled{background:#f1f5f9;color:#94a3b8}
.paso .p-fecha{font-weight:600}
.estado-badge{padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600}
.estado-badge.rojo{background:#fee2e2;color:var(--rojo)}
.estado-badge.amarillo{background:#fef3c7;color:var(--amarillo)}
.estado-badge.verde{background:#dcfce7;color:var(--verde)}
.estado-badge.completado{background:#dbeafe;color:var(--azul)}
.estado-badge.no_aplica{background:#f1f5f9;color:var(--gris)}
.acciones-panel{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.mini-form{display:flex;gap:8px;align-items:flex-end;margin-top:8px;flex-wrap:wrap}
.mini-form .campo{margin:0}
.hist{font-size:12px;color:var(--suave);padding:6px 0;border-bottom:1px dashed var(--borde)}
.gest-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.gest-row .g-rol{padding:7px;border:1px solid var(--borde);border-radius:7px;flex:0 0 auto}
.gest-row .g-ofis{display:flex;gap:8px;flex:0 0 auto}
.chk-mini{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--suave)}
.chk-mini input{width:14px;height:14px;margin:0}
.gest-row input[type=text],.gest-row input[type=password],.gest-row input:not([type]){flex:1;padding:7px 10px;border:1px solid var(--borde);border-radius:7px;font-size:13px}
.gest-row .g-usuario,.gest-row .g-clave{flex:0 1 120px;min-width:90px}
.gest-row input[type=color]{width:36px;height:34px;padding:2px;border:1px solid var(--borde);border-radius:7px;flex:0 0 auto;cursor:pointer}
.gest-row .btn{flex:0 0 auto}

/* Navegación entre módulos */
.nav{display:flex;gap:6px;flex:1}
.nav a{color:#cbd5e1;text-decoration:none;font-size:14px;font-weight:500;padding:7px 14px;border-radius:7px}
.nav a:hover{background:#1e293b;color:#fff}
.nav a.activo{background:#2563eb;color:#fff}

/* KPIs de tareas */
.kpis.tareas{grid-template-columns:repeat(5,1fr)}
.kpi.pendiente{border-left-color:var(--gris)} .kpi.pendiente .n{color:var(--gris)}
.kpi.proceso{border-left-color:var(--amarillo)} .kpi.proceso .n{color:var(--amarillo)}
.kpi.listo{border-left-color:var(--verde)} .kpi.listo .n{color:var(--verde)}
.kpi.vencidas{border-left-color:var(--rojo)} .kpi.vencidas .n{color:var(--rojo)}

/* Badges de estado y prioridad (tareas) */
.badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600}
.badge.e-pendiente{background:#f1f5f9;color:var(--gris)}
.badge.e-proceso{background:#fef3c7;color:var(--amarillo)}
.badge.e-listo{background:#dcfce7;color:var(--verde)}
.badge.p-urgente{background:#fee2e2;color:var(--rojo)}
.badge.p-alta{background:#ffedd5;color:#c2410c}
.badge.p-media{background:#fef9c3;color:#a16207}
.badge.p-baja{background:#f1f5f9;color:var(--gris)}
.fecha-lim.venc{color:var(--rojo);font-weight:700}
/* Desplegable multi-selección (componente multiselect.js) */
.ms{position:relative}
.ms-control{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px;
  border:1px solid var(--borde);border-radius:8px;padding:7px 10px;background:#fff;cursor:pointer}
.ms-ph{color:#94a3b8;font-size:14px}
.ms-caret{margin-left:auto;color:#64748b;font-size:12px}
.ms-chip{display:inline-flex;align-items:center;gap:5px;background:#dbeafe;color:#1e40af;
  border:1px solid #bfdbfe;border-radius:6px;padding:2px 4px 2px 9px;font-size:13px;font-weight:500}
.ms-chip .ms-x{border:none;background:none;color:#1e40af;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.ms-chip .ms-x:hover{color:#b91c1c}
.ms-menu{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);background:#fff;
  border:1px solid var(--borde);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:240px;overflow:auto;padding:6px}
.ms-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:13px;cursor:pointer}
.ms-item:hover{background:#f1f5f9}
.ms-item.sel{background:#eff6ff;color:#1e40af;font-weight:500}
.ms-item input{width:15px;height:15px;cursor:pointer;margin:0}
.ms-empty{padding:8px;color:#94a3b8;font-size:13px}
tr.fila-listo td{opacity:.6}
.hizo{color:var(--verde);font-weight:700;white-space:nowrap}
.progreso{font-size:12px;color:var(--suave);font-weight:600}
.btn-hecho{margin-top:6px}
.t-detalle{font-size:12px;color:var(--suave);margin-top:2px}

@media(max-width:720px){
  /* Padding lateral chico (en escritorio es 62px, come pantalla en móvil) */
  .topbar-inner{padding:10px 16px}
  main{padding:18px 16px}
  .brand{gap:14px}
  .brand h1{font-size:16px}
  .brand p{font-size:11px}
  .logo img{height:36px}
  .usuario{flex-wrap:wrap}

  /* Navegación de módulos a todo el ancho, debajo del logo */
  .nav{order:3;width:100%;flex:none;flex-wrap:wrap}
  .nav a{font-size:13px;padding:6px 11px}

  /* KPIs en 2 columnas (Vencimientos y Tareas) */
  .kpis,.kpis.tareas{grid-template-columns:repeat(2,1fr)}

  /* Tablas: en móvil se ocultan columnas secundarias por página (el detalle
     completo aparece al tocar la fila). Celdas más compactas. */
  .tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding:10px 8px}
  /* Vencimientos: oculta Responsable(4) y Recurrencia(6) */
  body.pg-venc th:nth-child(4),body.pg-venc td:nth-child(4),
  body.pg-venc th:nth-child(6),body.pg-venc td:nth-child(6){display:none}
  /* Tareas: oculta Asignado(3), Oficina(4) y Prioridad(5); deja Tarea, Fecha límite y Estado */
  body.pg-tareas th:nth-child(3),body.pg-tareas td:nth-child(3),
  body.pg-tareas th:nth-child(4),body.pg-tareas td:nth-child(4),
  body.pg-tareas th:nth-child(5),body.pg-tareas td:nth-child(5){display:none}
  /* Camiones: oculta Cliente(5), Transportista(6) y Estado(9); deja Fecha, Tipo, Hora,
     Vía, Patente, Condición y acción (el detalle completo aparece al editar la fila) */
  body.pg-cam th:nth-child(5),body.pg-cam td:nth-child(5),
  body.pg-cam th:nth-child(6),body.pg-cam td:nth-child(6),
  body.pg-cam th:nth-child(9),body.pg-cam td:nth-child(9){display:none}

  /* Formularios del panel y de carga apilados en una columna */
  .fila{flex-direction:column;gap:0}
  .panel{width:100%;padding:18px 16px}
  .filtros #buscar{min-width:140px}
}