@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

.itl {
  --azul:#3789DD; --azul-900:#1F5FA3; --azul-050:#EAF2FC;
  --grafito:#2C2C2A; --grafito-700:#3E3E3B; --grafito-500:#5C5C58;
  --papel:#F4F4F4; --blanco:#FFFFFF; --linea:#DEDEDD;
  --texto:#2C2C2A; --texto-2:#6A6A66;
  --verde:#1B8A57; --verde-bg:#E6F3EC;
  --ambar:#B5730B; --ambar-bg:#FBF1DF;
  --rojo:#B93A2B; --rojo-bg:#FAE9E7;
  --azul-bg:var(--azul-050);
  --gris-bg:#EAEAE8;
  font-family:'Open Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--texto); background:var(--papel);
  display:flex; min-height:100vh; font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.itl *{box-sizing:border-box;}
.itl button{font-family:inherit;font-size:inherit;cursor:pointer;}
.itl input,.itl select,.itl textarea{font-family:inherit;font-size:inherit;}
.itl :focus-visible{outline:2px solid var(--azul);outline-offset:2px;}
.num{font-variant-numeric:tabular-nums;}

/* ---------- Navegación lateral ---------- */
.nav{width:230px;flex:0 0 230px;background:var(--grafito);color:#E8E8E6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.marca{padding:24px 20px 18px;}
.marca-txt{font-weight:700;letter-spacing:.26em;font-size:17px;color:#fff;line-height:1;}
.marca-linea{height:3px;width:32px;background:var(--azul);margin-bottom:10px;border-radius:2px;}
.marca-sub{font-size:11.5px;color:#9C9C98;margin-top:12px;letter-spacing:.01em;}
.nav-lista{padding:8px 10px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border:0;background:transparent;color:#C9C9C5;border-radius:5px;text-align:left;width:100%;border-left:3px solid transparent;}
.nav-item:hover{background:var(--grafito-700);color:#fff;}
.nav-item.on{background:var(--grafito-700);color:#fff;border-left-color:var(--azul);font-weight:600;}
.nav-pie{padding:14px 18px 92px;border-top:1px solid #464642;font-size:11.5px;color:#8E8E8A;}

/* ---------- Encabezado ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.top{background:var(--blanco);border-bottom:1px solid var(--linea);padding:14px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:sticky;top:0;z-index:20;}
.top h1{margin:0;font-size:19px;font-weight:700;}
.top p{margin:2px 0 0;font-size:12.5px;color:var(--texto-2);}
.top-der{margin-left:auto;display:flex;align-items:center;gap:10px;}
.cuerpo{padding:22px 26px 52px;max-width:1420px;width:100%;}

/* ---------- Superficies ---------- */
.panel{background:var(--blanco);border:1px solid var(--linea);border-radius:6px;}
.panel-cab{padding:13px 16px;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:10px;}
.panel-cab h2{margin:0;font-size:14.5px;font-weight:700;}
.panel-cab .sub{font-size:12px;color:var(--texto-2);}
.panel-cuerpo{padding:16px;}

/* ---------- Tira de indicadores ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);background:var(--blanco);border:1px solid var(--linea);border-radius:6px;overflow:hidden;}
.kpi{padding:15px 17px;border-right:1px solid var(--linea);}
.kpi:last-child{border-right:0;}
.kpi .et{font-size:12px;color:var(--texto-2);}
.kpi .vl{font-size:27px;font-weight:700;margin-top:3px;letter-spacing:-.02em;}
.kpi .nt{font-size:11.5px;color:var(--texto-2);margin-top:2px;}

/* ---------- Barra de capacidad ---------- */
.cap-fila{display:grid;grid-template-columns:128px 1fr 62px;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--linea);}
.cap-fila:last-child{border-bottom:0;}
.cap-tipo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px;}
.cap-barra{display:flex;height:26px;border-radius:4px;overflow:hidden;background:var(--gris-bg);}
.cap-seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:700;min-width:0;}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow-x:auto;}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{text-align:left;font-weight:700;font-size:12px;color:var(--texto-2);padding:9px 12px;border-bottom:1px solid var(--linea);background:#FAFBFC;white-space:nowrap;position:sticky;top:0;}
.tbl td{padding:9px 12px;border-bottom:1px solid #EDF0F2;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover{background:#F7FAFD;}
.tbl .der{text-align:right;}

/* ---------- Distintivos ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:11px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.punto{width:6px;height:6px;border-radius:50%;}

/* ---------- Controles ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:5px;border:1px solid var(--linea);background:var(--blanco);color:var(--texto);font-weight:600;font-size:13px;}
.btn:hover{background:#F4F6F8;}
.btn.pri{background:var(--azul);border-color:var(--azul);color:#fff;}
.btn.pri:hover{background:var(--azul-900);border-color:var(--azul-900);}
.btn.peli{color:var(--rojo);border-color:#E8C9C4;}
.btn.peli:hover{background:var(--rojo-bg);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn.chico{padding:5px 9px;font-size:12px;}
.icono{border:0;background:transparent;padding:5px;border-radius:4px;color:var(--texto-2);display:inline-flex;}
.icono:hover{background:var(--gris-bg);color:var(--texto);}

.campo{display:flex;flex-direction:column;gap:5px;}
.campo label{font-size:12.5px;font-weight:600;color:var(--texto-2);}
.campo input,.campo select,.campo textarea{padding:8px 10px;border:1px solid var(--linea);border-radius:5px;background:#fff;color:var(--texto);width:100%;}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px var(--azul-050);}
.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.buscador{display:flex;align-items:center;gap:8px;border:1px solid var(--linea);border-radius:5px;padding:0 10px;background:#fff;min-width:210px;}
.buscador input{border:0;padding:8px 0;width:100%;background:transparent;}
.buscador input:focus{outline:none;}

/* ---------- Capa modal ---------- */
.capa{position:fixed;inset:0;background:rgba(28,30,32,.45);display:flex;justify-content:flex-end;z-index:60;}
.hoja{background:#fff;width:min(560px,100%);height:100%;overflow-y:auto;display:flex;flex-direction:column;}
.hoja-cab{padding:17px 22px;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:#fff;z-index:2;}
.hoja-cab h2{margin:0;font-size:16px;font-weight:700;flex:1;}
.hoja-cuerpo{padding:22px;display:flex;flex-direction:column;gap:16px;flex:1;}
.hoja-pie{padding:15px 22px;border-top:1px solid var(--linea);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:#fff;}

/* ---------- Avisos / vacíos ---------- */
.aviso{display:flex;gap:11px;padding:11px 13px;border-radius:5px;align-items:flex-start;font-size:13px;border:1px solid transparent;}
.vacio{padding:44px 22px;text-align:center;color:var(--texto-2);}
.vacio h3{margin:0 0 6px;font-size:15px;color:var(--texto);font-weight:700;}

/* ---------- Pasos del asistente ---------- */
.pasos{display:flex;gap:0;border-bottom:1px solid var(--linea);}
.paso{flex:1;padding:11px 8px;text-align:center;font-size:12.5px;font-weight:600;color:var(--texto-2);border-bottom:3px solid transparent;}
.paso.on{color:var(--azul);border-bottom-color:var(--azul);}
.paso.listo{color:var(--verde);}

/* ---------- Calendario ---------- */
.cal{min-width:860px;border:1px solid var(--linea);border-radius:6px;overflow:hidden;background:#fff;}
.cal-fila{display:grid;grid-template-columns:150px repeat(7,1fr);border-bottom:1px solid var(--linea);}
.cal-fila:last-child{border-bottom:0;}
.cal-fila.cab{background:#FAFBFC;font-size:12px;font-weight:700;color:var(--texto-2);}
.cal-celda{padding:6px 7px;border-right:1px solid #EDF0F2;min-height:44px;}
.cal-celda:last-child{border-right:0;}
.cal-act{padding:7px 10px;border-right:1px solid var(--linea);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;}
.cal-bloque{border-radius:3px;padding:3px 6px;font-size:11px;font-weight:600;color:#fff;background:var(--azul);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-bloque.choque{background:var(--rojo);}

.hint{font-size:12px;color:var(--texto-2);}

/* ---------- Avisos flotantes ---------- */
.avisos{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:8px;max-width:340px;}
.avisito{background:var(--grafito);color:#fff;padding:11px 14px;border-radius:6px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.22);display:flex;gap:9px;align-items:flex-start;animation:entrar .18s ease-out;}
.avisito.bien{border-left:3px solid var(--verde);}
.avisito.alerta{border-left:3px solid var(--ambar);}
.avisito.error{border-left:3px solid var(--rojo);}
@keyframes entrar{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- Indicadores en la navegación ---------- */
.marca-nota{margin-left:auto;background:var(--azul);color:#fff;font-size:10.5px;font-weight:700;border-radius:9px;padding:1px 7px;min-width:18px;text-align:center;}
.marca-nota.urgente{background:var(--rojo);}
.guardado{font-size:11.5px;color:var(--texto-2);display:inline-flex;align-items:center;gap:6px;}
.guardado .punto{width:7px;height:7px;background:var(--verde);}

/* ---------- Mascota ---------- */
.mascota{position:fixed;left:16px;bottom:16px;z-index:80;display:flex;align-items:flex-end;gap:10px;}
.mascota-btn{background:transparent;border:0;padding:0;line-height:0;border-radius:50%;cursor:pointer;animation:flotar 4.5s ease-in-out infinite;}
.mascota-btn:hover{transform:translateY(-2px);}
.mascota-punto{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--grafito);}
.globo{background:#fff;border:1px solid var(--linea);border-left:3px solid var(--azul);border-radius:8px;padding:11px 13px;max-width:290px;box-shadow:0 6px 22px rgba(0,0,0,.16);animation:entrar .18s ease-out;}
.globo.error{border-left-color:var(--rojo);}
.globo.alerta{border-left-color:var(--ambar);}
.globo.bien{border-left-color:var(--verde);}
.globo-cab{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.globo-nombre{font-size:11.5px;font-weight:700;color:var(--azul-900);letter-spacing:.04em;}
.globo-txt{font-size:12.5px;line-height:1.45;color:var(--texto);}
.globo-pie{display:flex;gap:6px;margin-top:9px;align-items:center;}
@keyframes flotar{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@media (max-width: 900px){ .mascota{left:10px;bottom:10px;} .globo{max-width:220px;} }

/* ---------- Transiciones ---------- */
.btn,.icono,.nav-item,.tarjeta,.col{transition:background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;}
.tarjeta:hover{box-shadow:0 2px 8px rgba(0,0,0,.08);}
.tbl tbody tr{transition:background .1s ease;}

/* ---------- Tablero por día ---------- */
.tablero{display:grid;grid-template-columns:repeat(7,minmax(196px,1fr));gap:10px;min-width:1400px;align-items:start;}
.col{background:var(--gris-bg);border-radius:6px;display:flex;flex-direction:column;min-height:150px;}
.col.hoy{background:var(--azul-050);}
.col-cab{padding:9px 11px;font-size:12.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--linea);}
.col-cuerpo{padding:8px;display:flex;flex-direction:column;gap:8px;flex:1;}
.col-vacio{font-size:12px;color:var(--texto-2);text-align:center;padding:16px 4px;}
.tarjeta{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--azul);border-radius:5px;padding:9px 10px;display:flex;flex-direction:column;gap:6px;}
.tarjeta-top{display:flex;align-items:center;gap:8px;}
.tarjeta-hora{font-weight:700;font-size:13px;}
.tarjeta-cliente{font-weight:700;font-size:13px;line-height:1.25;}
.tarjeta-ruta{font-size:11.5px;color:var(--texto-2);line-height:1.35;}
.tarjeta-pie{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}
.grupo{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--azul);border-radius:5px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;}
.grupo-top{display:flex;align-items:center;gap:6px;}
.grupo-cant{margin-left:auto;background:var(--grafito);color:#fff;font-size:11px;font-weight:700;border-radius:9px;padding:1px 7px;}
.grupo-filas{display:flex;flex-direction:column;border-top:1px solid var(--linea);margin-top:2px;}
.grupo-fila{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid #EDF0F2;font-size:11.5px;}
.grupo-fila:last-child{border-bottom:0;}
.dia-resumen{padding:5px 11px;font-size:11px;color:var(--texto-2);border-bottom:1px solid var(--linea);display:flex;flex-direction:column;gap:4px;}
.dia-barra{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--linea);}
.tl{border:1px solid var(--linea);border-radius:6px;background:#fff;overflow-x:auto;}
.tl-in{min-width:900px;}
.tl-fila{display:grid;grid-template-columns:170px 1fr;border-bottom:1px solid #EDF0F2;}
.tl-fila:last-child{border-bottom:0;}
.tl-lbl{padding:6px 10px;border-right:1px solid var(--linea);font-size:12px;display:flex;flex-direction:column;justify-content:center;background:#FAFBFC;min-width:0;}
.tl-area{position:relative;}
.tl-hora{position:absolute;top:0;bottom:0;border-left:1px dashed #E3E3E1;}
.tl-bl{position:absolute;height:26px;min-width:62px;border-radius:4px;color:#fff;font-size:11px;font-weight:600;padding:0 6px;display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap;border:0;border-left:4px solid transparent;text-align:left;z-index:1;}
.tl-bl:hover{filter:brightness(1.15);box-shadow:0 2px 6px rgba(0,0,0,.22);z-index:3;}
.tl-ahora{position:absolute;top:0;bottom:0;border-left:2px solid var(--rojo);z-index:2;}
.semana-tr{display:grid;grid-template-columns:repeat(7,minmax(88px,1fr));gap:6px;overflow-x:auto;}
.dia-tr{border:1px solid var(--linea);background:#fff;border-radius:5px;padding:7px 8px;text-align:left;}
.dia-tr.on{border-color:var(--azul);box-shadow:0 0 0 2px var(--azul-050);}
.po-marco{background:#fff;border:1px solid var(--linea);border-radius:6px;padding:26px;}
@media (max-width: 900px){ .tablero{grid-template-columns:repeat(7,minmax(168px,1fr));min-width:1220px;} }

@media (max-width: 900px){
  .itl{flex-direction:column;}
  .nav{width:100%;flex:none;height:auto;position:static;flex-direction:column;}
  .nav-lista{flex-direction:row;overflow-x:auto;padding:6px 8px;gap:4px;}
  .nav-item{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:8px 12px;}
  .nav-item.on{border-left:0;border-bottom-color:var(--azul);}
  .nav-pie{display:none;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .kpi{border-bottom:1px solid var(--linea);}
  .cuerpo{padding:16px 14px 44px;}
  .top{padding:12px 14px;}
  .rejilla{grid-template-columns:1fr;}
  .cap-fila{grid-template-columns:104px 1fr 52px;gap:9px;}
}
@media (prefers-reduced-motion: reduce){ .itl *{transition:none!important;animation:none!important;} }

html,body{margin:0;padding:0;background:#F4F4F4;}
.cargando{font-family:'Open Sans',sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;color:#6A6A66;font-size:14px;}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--papel);}
.login-caja{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:30px 28px;width:min(380px,92vw);display:flex;flex-direction:column;gap:14px;}
.pestanas{display:flex;gap:0;border-bottom:1px solid var(--linea);margin-bottom:14px;flex-wrap:wrap;}
.pestana{border:0;background:transparent;padding:10px 14px;font-weight:600;color:var(--texto-2);border-bottom:3px solid transparent;}
.pestana.on{color:var(--azul);border-bottom-color:var(--azul);}
.error{color:var(--rojo);font-size:12.5px;}