/* Panel de tramitación — estilo Lightning, adaptado a escritorio y móvil */
body { min-height: 100vh; background: var(--fondo); }
body.con-banda { background: linear-gradient(180deg, #cfe3f7 0, #e6eff9 150px, var(--fondo) 330px) no-repeat, var(--fondo); }

/* ------------------------------------------------ acceso */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: linear-gradient(160deg, #032d60 0%, #0b5cab 55%, #1b96ff 100%); }
.acceso .tarjeta-acceso { background: #fff; border-radius: 12px; box-shadow: var(--sombra-alta); width: min(400px, 100%); padding: 32px 28px; }
.acceso .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.acceso .logo b { font-size: 18px; display: block; }
.acceso .logo small { display: block; }
.acceso form { display: grid; gap: 14px; }
.acceso .demo { font-size: 12.5px; color: var(--texto-3); text-align: center; margin-top: 4px; }

/* ------------------------------------------------ estructura */
.sf-global { height: 52px; background: #fff; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px;
  padding: 0 16px; position: sticky; top: 0; z-index: 50; }
.sf-global .lanzador { color: var(--texto-3); }
.sf-global .marca-app { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.sf-buscar { flex: 1; max-width: 560px; margin: 0 auto; position: relative; }
.sf-buscar input { padding-left: 36px; border-radius: 6px; background: #fff; border-color: var(--borde-2); height: 34px; min-height: 34px; }
.sf-buscar .ico { position: absolute; left: 10px; top: 8px; color: var(--texto-3); }
.sf-global .derecha { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0; }
.modo-msg { font-size: 12px; padding: 2px 10px; border-radius: 15rem; background: var(--aviso-claro); color: #8c4b02; white-space: nowrap; }
.modo-msg.real { background: var(--exito-claro); color: #22683e; }

.sf-nav { height: 40px; background: #fff; border-bottom: 3px solid var(--marca); display: flex; align-items: stretch; gap: 0;
  padding: 0 12px 0 16px; position: sticky; top: 52px; z-index: 49; box-shadow: 0 2px 3px rgba(0,0,0,.06); overflow-x: auto; scrollbar-width: none; }
.sf-nav::-webkit-scrollbar { display: none; }
.sf-nav .nombre-app { font-size: 16px; font-weight: 400; align-self: center; padding-right: 20px; white-space: nowrap; }
.sf-nav a { display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--texto); font-size: 13.5px; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -3px; }
.sf-nav a:hover { background: #f3f3f3; text-decoration: none; }
.sf-nav a.activo { border-bottom-color: var(--marca-osc); font-weight: 600; background: #f3f8fe; }
.sf-nav a .cuenta, .sf-movil a .cuenta { font-size: 11px; background: var(--error); color: #fff; border-radius: 15rem; padding: 0 6px; font-weight: 700; line-height: 16px; }

.principal { padding: 12px; max-width: 1600px; margin: 0 auto; min-width: 0; }

/* Navegación inferior (móvil) */
.sf-movil { display: none; }
@media (max-width: 900px) {
  .sf-nav, .sf-buscar.escritorio, .sf-global .modo-msg { display: none; }
  .sf-global { padding: 0 10px; height: 50px; }
  .sf-movil { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 6px rgba(0,0,0,.06); }
  .sf-movil a, .sf-movil button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 58px;
    font-size: 11px; color: var(--texto-3); background: none; border: 0; font-family: inherit; position: relative; cursor: pointer; }
  .sf-movil a.activo { color: var(--marca); font-weight: 600; }
  .sf-movil a:hover { text-decoration: none; }
  .sf-movil .cuenta { position: absolute; top: 6px; right: calc(50% - 20px); }
  .principal { padding: 10px 10px 84px; }
}
.hoja-mas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hoja-mas a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: var(--radio);
  color: var(--texto); font-size: 13px; text-align: center; }
.hoja-mas a:hover { background: #f3f3f3; text-decoration: none; }
.buscar-movil { position: relative; }
.buscar-movil .ico { position: absolute; left: 10px; top: 11px; color: var(--texto-3); }
.buscar-movil input { padding-left: 36px; min-height: 42px; }

/* ------------------------------------------------ cabecera de página */
.cabecera { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); border: 1px solid var(--borde);
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.cabecera .izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cabecera .etiqueta { font-size: 12.5px; color: var(--texto-2); }
.cabecera h1 { font-size: 20px; }
.cabecera p { margin: 2px 0 0; color: var(--texto-3); font-size: 13px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.banda-sim { background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--aviso); border-radius: var(--radio-s);
  padding: 9px 12px; font-size: 13px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; color: var(--texto-2); }
.banda-sim .ico { color: var(--aviso); }
@media (max-width: 640px) {
  .cabecera { padding: 12px; }
  .cabecera h1 { font-size: 18px; }
  .cabecera p { display: none; }
  .cabecera .acciones { width: 100%; }
  .cabecera .acciones .btn { flex: 1; }
}

/* ------------------------------------------------ tarjetas */
.panel { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); min-width: 0; }
.panel > .titulo { padding: 12px 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel > .titulo h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.panel > .titulo small { white-space: nowrap; }
.panel > .contenido { padding: 12px 16px 16px; }
.panel.lista { overflow: hidden; }
.desplazable { overflow: auto; max-height: calc(100vh - 290px); }
.rejilla-paneles { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; }
@media (max-width: 1100px) { .col-8, .col-6, .col-4 { grid-column: span 12; } }

/* Indicadores */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cifra { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; color: var(--texto); position: relative; }
a.cifra:hover { text-decoration: none; border-color: var(--marca); }
.cifra .cab-cifra { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.cifra b { font-size: 28px; font-weight: 300; line-height: 1.1; }
.cifra span.pie-cifra { font-size: 12px; color: var(--texto-3); }
.cifra.alerta b { color: var(--error); font-weight: 400; }
.cifra .barra-mini { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.cifra .barra-mini > div { height: 100%; background: var(--marca); }
@media (max-width: 640px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cifra { padding: 10px 12px; }
  .cifra b { font-size: 24px; }
}
.grafico { position: relative; height: 260px; }
.grafico.bajo { height: 220px; }
.lista-atencion { list-style: none; margin: 0; padding: 0; }
.lista-atencion li a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--borde); color: var(--texto); }
.lista-atencion li:last-child a { border-bottom: 0; }
.lista-atencion li a:hover { background: #f8f8f8; text-decoration: none; }
.lista-atencion b { font-size: 18px; font-weight: 400; min-width: 34px; text-align: right; margin-left: auto; color: var(--marca); }

/* ------------------------------------------------ planificador */
.barra-plan-panel { padding: 10px 12px; margin-bottom: 12px; }
.barra-plan { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.barra-plan .acciones { margin-left: auto; }
.sel-zona { display: flex; align-items: center; gap: 2px; border: 1px solid var(--borde-2); border-radius: var(--radio-s); padding-left: 10px;
  background: #fff; color: var(--texto-3); height: 36px; }
.sel-zona select { border: 0; min-height: 34px; width: auto; padding-left: 6px; font-weight: 600; background: transparent; }
.sel-zona select:focus { box-shadow: none; }
.nav-fecha { display: flex; align-items: center; border: 1px solid var(--borde-2); border-radius: var(--radio-s); background: #fff; height: 36px; }
.nav-fecha button { border: 0; background: none; padding: 0 8px; height: 34px; cursor: pointer; color: var(--marca); display: flex; align-items: center; }
.nav-fecha button:hover { background: #f3f3f3; }
.nav-fecha .dia { padding: 0 6px; min-width: 210px; text-align: center; font-weight: 600; font-size: 13.5px; }
.nav-fecha .dia::first-letter { text-transform: uppercase; }
.nav-fecha .cal { position: relative; display: flex; align-items: center; padding: 0 8px; height: 34px; color: var(--marca); cursor: pointer;
  border-left: 1px solid var(--borde); border-right: 1px solid var(--borde); }
.nav-fecha .cal input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; cursor: pointer; }
.seg-plan { display: none; }
.plan-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.col-agenda { display: grid; gap: 12px; min-width: 0; align-content: start; }
.panel-agenda > .titulo { padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.panel-agenda .cronograma { border-radius: 0 0 var(--radio) var(--radio); }
.agenda-movil { display: none; }
@media (min-width: 1500px) { .plan-cuerpo { grid-template-columns: minmax(420px, .8fr) minmax(0, 1.2fr); } .plan-cuerpo #mapa { height: calc(100% - 34px); min-height: 560px; } }
#mapa { height: 380px; border-radius: var(--radio) var(--radio) 0 0; z-index: 0; }
.panel-mapa { overflow: hidden; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-3); padding: 8px 12px; border-top: 1px solid var(--borde); }
.leyenda i { display: inline-block; width: 16px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tec-gps i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

.cronograma { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crono-interior { min-width: 860px; }
.crono-horas, .crono-fila { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.crono-horas { border-bottom: 1px solid var(--borde); background: #f3f3f3; }
.crono-horas > div:first-child, .crono-tec { position: sticky; left: 0; z-index: 3; background: inherit; }
.crono-horas .pista { position: relative; height: 30px; }
.crono-horas .pista span { position: absolute; top: 7px; font-size: 11.5px; color: var(--texto-3); transform: translateX(-50%); }
.crono-fila { border-bottom: 1px solid var(--borde); min-height: 60px; background: #fff; }
.crono-fila:last-child { border-bottom: 0; }
.crono-fila.foco { background: #f3f8fe; }
.crono-tec { padding: 8px 12px; border-right: 1px solid var(--borde); display: flex; flex-direction: column; gap: 3px; cursor: pointer; background: #fff; }
.crono-fila.foco .crono-tec { background: #f3f8fe; }
.crono-tec .nombre { font-weight: 600; display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.crono-tec .nombre i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.crono-tec .datos { font-size: 11.5px; color: var(--texto-3); display: flex; gap: 8px; }
.ocup { height: 4px; background: #eee; border-radius: 2px; overflow: hidden; }
.ocup > div { height: 100%; background: var(--exito); }
.ocup.alta > div { background: var(--aviso); }
.ocup.baja > div { background: #aeaeae; }
.crono-fila .pista { position: relative; }
.crono-fila .pista .linea-h { position: absolute; top: 0; bottom: 0; width: 1px; background: #f0f0f0; }
.crono-fila .pista .fuera { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #f3f3f3, #f3f3f3 4px, #fafafa 4px, #fafafa 8px); }
.crono-fila .pista .ahora { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--error); z-index: 2; }
.bloque { position: absolute; top: 11px; height: 38px; border-radius: 4px; padding: 3px 6px; font-size: 11px; line-height: 1.25;
  overflow: hidden; cursor: pointer; border: 1px solid transparent; white-space: nowrap; z-index: 1; }
.bloque b { display: block; font-size: 11.5px; }
.bloque.confirmada { background: #d7f0dc; border-color: #91db8b; color: #194e31; }
.bloque.reservada { background: var(--aviso-claro); border-color: #f9e3b6; color: #8c4b02; }
.bloque.planificada { background: #fffbf3; border: 1.5px dashed var(--aviso); color: #8c4b02; }
.bloque.realizada { background: #e5e5e5; color: #444; }
.bloque.urgente { box-shadow: inset 3px 0 0 var(--error); }
.bloque:hover { filter: brightness(.97); z-index: 3; }
.crono-vacio { padding: 28px; text-align: center; color: var(--texto-3); }
.marcador { width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 11px/22px var(--sans); text-align: center;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.marcador.planificada { border-style: dashed; }
.marcador-base { width: 12px; height: 12px; border-radius: 3px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.marcador-gps { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(1, 118, 211, .25), 0 2px 6px rgba(0,0,0,.35); }
.marcador-gps.retraso { box-shadow: 0 0 0 5px rgba(186, 5, 23, .35), 0 2px 6px rgba(0,0,0,.35); }
.directo .fila-gps { display: grid; grid-template-columns: 180px 120px minmax(0, 1fr) 130px; gap: 10px; padding: 10px 16px;
  border-top: 1px solid var(--borde); align-items: center; font-size: 13px; }
.directo .retraso { color: var(--error); font-weight: 700; }
@media (max-width: 900px) {
  .barra-plan-panel { padding: 10px; }
  .sel-zona { flex: 1 1 100%; }
  .sel-zona select { flex: 1; }
  .nav-fecha { flex: 1 1 100%; }
  .nav-fecha .dia { min-width: 0; flex: 1; }
  .nav-fecha button { padding: 0 12px; }
  .barra-plan .acciones { width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .barra-plan .acciones .btn { width: 100%; }
  .barra-plan .acciones #p-descartar { grid-column: 1 / -1; }
  .seg-plan { display: flex; background: #fff; border: 1px solid var(--borde-2); border-radius: var(--radio-s); margin-bottom: 12px; overflow: hidden; }
  .seg-plan button { flex: 1; border: 0; background: none; padding: 9px 4px; font: 600 13px var(--sans); color: var(--marca);
    display: flex; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid var(--borde-2); cursor: pointer; }
  .seg-plan button:last-child { border-right: 0; }
  .seg-plan button.activo { background: var(--marca); color: #fff; }
  .plan-cuerpo[data-pv=agenda] .panel-mapa, .plan-cuerpo[data-pv=agenda] #p-directo { display: none; }
  .plan-cuerpo[data-pv=mapa] .col-agenda { display: none; }
  .plan-cuerpo[data-pv=directo] .panel-agenda { display: none; }
  .plan-cuerpo[data-pv=mapa] #mapa { height: calc(100vh - 360px); min-height: 320px; }
  .plan-cuerpo[data-pv=directo] #mapa { height: 240px; }
  .cronograma { display: none; }
  .agenda-movil { display: block; }
  .directo .fila-gps { grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; }
  .directo .fila-gps > span:nth-child(3) { grid-column: 1 / -1; color: var(--texto-2); }
  .directo .fila-gps > span:nth-child(2) { text-align: right; }
  .directo > .titulo { flex-wrap: wrap; padding-bottom: 8px; }
}
/* Agenda en lista (móvil) */
.tec-movil { border-bottom: 1px solid var(--borde); }
.tec-movil:last-child { border-bottom: 0; }
.tec-movil summary { list-style: none; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 12px; cursor: pointer; }
.tec-movil summary::-webkit-details-marker { display: none; }
.tec-movil[open] summary { background: #f3f8fe; }
.avatar-tec { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.tm-nombre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tm-nombre small { font-size: 12px; }
.tm-nombre .ocup { display: block; }
.tm-nombre .ocup > span { display: block; height: 100%; background: var(--exito); }
.tm-nombre .ocup.alta > span { background: var(--aviso); }
.tm-nombre .ocup.baja > span { background: #aeaeae; }
.tm-pct { font-size: 18px; font-weight: 300; }
.visitas-movil { list-style: none; margin: 0; padding: 0 12px 10px 58px; }
.visitas-movil li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-s); margin-top: 6px; cursor: pointer; background: #fff; }
.visitas-movil li.planificada { border-style: dashed; border-color: var(--aviso); }
.visitas-movil li.urgente { box-shadow: inset 3px 0 0 var(--error); }
.visitas-movil li.vacia { color: var(--texto-3); cursor: default; display: block; }
.visitas-movil .hora b { display: block; font-size: 15px; }
.visitas-movil .hora small, .visitas-movil .que small { display: block; font-size: 11.5px; }
.visitas-movil .que b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .visitas-movil { padding-left: 12px; } .visitas-movil li { grid-template-columns: 54px minmax(0, 1fr); } .visitas-movil li .chip { grid-column: 2; justify-self: start; } }

/* ------------------------------------------------ vistas de lista */
.cab-lista { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde); background: #f3f3f3; }
.cab-lista .meta { font-size: 12px; color: var(--texto-3); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros input[type=search] { width: 260px; }
.filtros select { width: auto; }
.pestanas { display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--borde); margin-bottom: 12px; scrollbar-width: none; }
.pestanas button { border: 0; background: none; padding: 10px 14px; font: 400 14px var(--sans); color: var(--texto); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas button:hover { border-bottom-color: #c9c9c9; }
.pestanas button.activo { color: var(--texto); font-weight: 700; border-bottom-color: var(--marca); }
.paginas { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; color: var(--texto-3); font-size: 13px; border-top: 1px solid var(--borde); }

/* Tablas que pasan a tarjetas en el móvil */
@media (max-width: 760px) {
  .filtros input[type=search], .buscar-lista, .buscar-lista input { width: 100%; }
  .buscar-lista { flex: 1 1 100%; }
  .cab-lista { padding: 10px 12px; }
  .filtros select { flex: 1; min-width: 45%; }
  .desplazable { max-height: none; }
  table.resp, table.resp tbody, table.resp tr, table.resp td { display: block; width: 100%; }
  table.resp tr:first-child:has(th) { display: none; }
  table.resp th { display: none; }
  table.resp tr { border-bottom: 1px solid var(--borde); padding: 10px 12px; position: relative; }
  table.resp td { border: 0; padding: 2px 0 2px 36%; position: relative; min-height: 22px; word-break: break-word; }
  table.resp td::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: 34%; color: var(--texto-3); font-size: 12.5px; }
  table.resp td[data-label=""], table.resp td:not([data-label]) { padding-left: 0; }
  table.resp td[data-label=""]::before, table.resp td:not([data-label])::before { display: none; }
  table.resp td.principal-celda { font-size: 15px; padding: 0 0 4px; }
  table.resp td.principal-celda::before { display: none; }
  table.resp td .sub { display: block; margin: 0; }
  table.resp td.principal-celda .sub { display: inline; margin-left: 6px; }
  table.resp td.acciones-celda { padding: 8px 0 0; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; white-space: normal !important; }
  table.resp td.acciones-celda::before { display: none; }
  table.resp tr.clic:hover td { background: transparent; }
}

/* ------------------------------------------------ ficha de registro */
.ficha-velo { position: fixed; inset: 0; background: rgba(8, 7, 7, .35); z-index: 90; }
.ficha { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100%); background: var(--fondo); z-index: 91;
  box-shadow: var(--sombra-alta); overflow-y: auto; animation: desliza .18s ease-out; }
@keyframes desliza { from { transform: translateX(30px); opacity: .4; } }
.ficha .cab-ficha { background: #fff; padding: 14px 16px 12px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 2; }
.ficha .fila-titulo { display: flex; align-items: center; gap: 12px; }
.ficha .fila-titulo .tit { flex: 1; min-width: 0; }
.ficha .fila-titulo .tit small { display: block; font-size: 12px; }
.ficha .fila-titulo h2 { font-size: 18px; font-weight: 700; }
.destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 18px; margin-top: 12px; }
.destacados div small { display: block; font-size: 12px; }
.destacados div span { font-size: 13.5px; }
.ficha .acciones { margin-top: 12px; }
.ficha .cuerpo-ficha { padding: 12px; display: grid; gap: 12px; }
.ficha .seccion { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 16px; }
.ficha .seccion h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ficha dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; font-size: 13.5px; }
.ficha dl > div { border-bottom: 1px solid var(--borde); padding-bottom: 6px; }
.ficha dt { color: var(--texto-3); font-size: 12px; }
.ficha dd { margin: 0; word-break: break-word; }
@media (max-width: 640px) {
  .ficha { width: 100%; }
  .ficha dl { grid-template-columns: 1fr; }
  .ficha .acciones .btn { flex: 1; }
}

/* Ruta de estados (path) */
.path { display: flex; margin-top: 12px; gap: 0; overflow-x: auto; scrollbar-width: none; }
.path span { flex: 1; min-width: 92px; text-align: center; font-size: 12.5px; padding: 0 14px 0 20px; height: 32px; line-height: 32px;
  background: #ecebea; color: var(--texto-2); position: relative; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); margin-right: -6px; }
.path span:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 16px 0 0 16px; padding-left: 14px; }
.path span:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 16px 16px 0; margin-right: 0; }
.path span.hecho { background: #3ba755; color: #fff; }
.path span.actual { background: var(--marca-osc); color: #fff; font-weight: 700; }
.path span.fallo { background: var(--error); color: #fff; font-weight: 700; }

/* Historial de actividad */
.historial { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.historial li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; position: relative; }
.historial li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--borde); }
.historial li:last-child::before { display: none; }
.historial .obj { width: 28px; height: 28px; border-radius: 50%; }
.historial small { display: block; }
.historial li > div { padding-top: 4px; }
.ficha .seccion h3 .extra { margin-left: auto; font-weight: 400; font-size: 13px; }
.ficha .nota { margin: 10px 0 0; background: #f3f3f3; padding: 8px 10px; border-radius: var(--radio-s); font-size: 13.5px; }
.ficha dd .sub { display: block; color: var(--texto-3); font-size: 12px; }
.filas-mini { list-style: none; margin: 0; padding: 0; }
.filas-mini li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.filas-mini li:last-child { border-bottom: 0; }
.filas-mini li > .ico { color: var(--texto-3); }
.filas-mini b { display: block; font-weight: 600; text-transform: none; }
.filas-mini small { display: block; font-size: 12px; }
.ficha .acciones { margin-top: 12px; }
.path span .ico { vertical-align: -2px; }
.titulo-lista { display: flex; align-items: center; gap: 10px; }
.titulo-lista b { font-size: 15px; }
.buscar-lista { position: relative; }
.buscar-lista .ico { position: absolute; left: 10px; top: 10px; color: var(--texto-3); }
.buscar-lista input { padding-left: 34px; width: 260px; }
.tabla td.vencida { color: var(--error); font-weight: 600; }
.paginas .btn:disabled { color: #aeaeae; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-s); }

/* ------------------------------------------------ conversaciones */
.chat-rejilla { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; height: calc(100vh - 250px); min-height: 480px; }
.lista-conv { display: flex; flex-direction: column; overflow: hidden; }
.cab-bandeja { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borde); background: #f3f3f3; }
.cab-bandeja small { margin-left: auto; }
#c-lista { overflow-y: auto; flex: 1; }
.conv { padding: 11px 14px; border-bottom: 1px solid var(--borde); cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.conv:hover, .conv.activo { background: #f3f8fe; }
.conv.activo { box-shadow: inset 3px 0 0 var(--marca); }
.conv .avatar, .cab-chat .avatar { width: 40px; height: 40px; background: #7f8de1; position: relative; cursor: default; }
.conv .avatar .canal { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; color: #fff; }
.conv-txt { min-width: 0; }
.conv-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conv-cab b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-cab small { flex: none; font-size: 11.5px; }
.conv small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.nueva .conv-txt > small { color: var(--texto); font-weight: 600; }
.chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cab-chat { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); background: #fff; }
.cab-chat .quien { flex: 1; min-width: 0; }
.cab-chat .quien b, .cab-chat .quien small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #f2f5f8; }
.burbuja { max-width: 78%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; font-size: 13.5px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.burbuja.saliente { align-self: flex-end; background: #fff; border: 1px solid var(--borde); border-bottom-right-radius: 4px; }
.burbuja.entrante { align-self: flex-start; background: #d8edff; border-bottom-left-radius: 4px; }
.burbuja .meta { display: block; font-size: 11px; color: var(--texto-3); margin-top: 4px; }
.burbuja.voz { border-left: 3px solid var(--violeta); }
.burbuja .ico { vertical-align: -2px; color: var(--violeta); }
.chat form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borde); background: #fff; }
.chat form input { border-radius: 18px; }
.chat form .btn { border-radius: 50%; flex: none; }
.chat .volver-chat { display: none; }
.botones-wa { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde); white-space: normal; }
.botones-wa button { flex: 1; border: 1px solid var(--borde); background: #fff; color: var(--marca); font: 600 13px var(--sans);
  padding: 7px 10px; border-radius: 6px; cursor: pointer; min-width: 90px; }
.botones-wa button:disabled { color: #aeaeae; cursor: default; }
@media (max-width: 900px) {
  .chat-rejilla { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .lista-conv { max-height: none; }
  .chat-rejilla.en-chat .lista-conv { display: none; }
  .chat-rejilla:not(.en-chat) .chat { display: none; }
  .chat { height: calc(100vh - 190px); height: calc(100dvh - 190px); }
  .chat .volver-chat { display: inline-flex; margin-left: -6px; }
  .cab-chat .avatar { display: none; }
  .escritorio-txt { display: none; }
  .burbuja { max-width: 90%; }
}
.teclado { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.teclado button { font-size: 20px; font-weight: 600; min-height: 52px; }
.bot-dice { background: #f3f0ff; border-left: 3px solid var(--violeta); padding: 12px; border-radius: var(--radio-s); font-size: 14px; }
.copiar { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.copiar code { background: #f3f3f3; padding: 4px 8px; border-radius: 4px; font-family: inherit; word-break: break-word; }
@media (max-width: 640px) { .copiar { grid-template-columns: 1fr auto; } .copiar > span { grid-column: 1 / -1; } }

/* ------------------------------------------------ conexiones */
.conexiones { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
@media (max-width: 600px) { .conexiones { grid-template-columns: 1fr; } }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.punto.ok { background: var(--exito); } .punto.aviso { background: var(--aviso); } .punto.no { background: var(--error); }
.datos-con { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: 13.5px; }
.datos-con dt { color: var(--texto-3); }
.datos-con dd { margin: 0; word-break: break-word; }
.probar { display: flex; gap: 8px; flex-wrap: wrap; }
.probar input { flex: 1; min-width: 180px; }
.res-prueba { margin: 8px 0 0; font-size: 13px; }
.res-prueba:empty { display: none; }
.res-prueba.ok { color: var(--exito); } .res-prueba.mal { color: var(--error); }
code.copiable { background: #f3f3f3; padding: 2px 6px; border-radius: 4px; font-family: inherit; font-size: 12.5px; cursor: pointer; word-break: break-all; }

/* Utilidades */
.con-ico { display: inline-flex; align-items: center; gap: 10px; }
.avatar-tec.peq { width: 30px; height: 30px; font-size: 11.5px; flex: none; }
.tit-modal { margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.chip .ico { vertical-align: -1px; }
.panel.lista .pestanas { border-bottom: 1px solid var(--borde); }
@media (max-width: 900px) {
  .rejilla-paneles { gap: 10px; }
  .panel > .titulo { padding: 12px 12px 0; }
  .panel > .contenido { padding: 10px 12px 14px; }
}
@media (max-width: 900px) {
  .cab-lista .filtros { width: 100%; }
  .cifras-plan { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -10px 12px; padding: 0 10px 2px; }
  .cifras-plan::-webkit-scrollbar { display: none; }
  .cifras-plan .cifra { flex: 0 0 150px; scroll-snap-align: start; }
  .cifras-plan .cifra b { font-size: 22px; }
  .principal:has(.chat-rejilla.en-chat) .cabecera, .principal:has(.chat-rejilla.en-chat) .banda-sim { display: none; }
  .chat-rejilla.en-chat .chat { height: calc(100vh - 140px); height: calc(100dvh - 140px - env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) { .panel-agenda > .titulo small { display: none; } }

/* Puesta en marcha de Twilio */
.tw { margin-bottom: 12px; }
.progreso-tw { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.progreso-tw > div { height: 100%; background: var(--exito); transition: width .3s; }
.pasos { list-style: none; margin: 0; padding: 0; }
.paso { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--borde); }
.paso:first-child { border-top: 0; padding-top: 0; }
.paso-n { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--marca); color: var(--marca);
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
.paso.hecho .paso-n { background: var(--exito); border-color: var(--exito); color: #fff; }
.paso-c h3 { font-size: 14.5px; margin: 4px 0 6px; }
.paso-c p { font-size: 13.5px; margin: 0 0 8px; }
.paso-c code { background: #f3f3f3; padding: 1px 5px; border-radius: 3px; font-size: 12.5px; }
.paso-c .acciones { margin: 4px 0 8px; }
.tw-tabla { margin: 6px 0 4px; border: 1px solid var(--borde); border-radius: var(--radio-s); overflow: hidden; }
.tw-error { color: var(--error); display: flex; gap: 6px; align-items: center; }
.plantillas-tw, .grabaciones { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.plantillas-tw { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.plantillas-tw li, .grabaciones li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px;
  background: #fafafa; border: 1px solid var(--borde); border-radius: var(--radio-s); font-size: 13.5px; }
.plantillas-tw small { display: block; color: var(--texto-3); font-size: 12px; }
.grabaciones audio { height: 34px; max-width: 260px; }
@media (max-width: 640px) { .paso { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } .paso-n { width: 26px; height: 26px; font-size: 13px; } }
.paso-c details, .tw-extra { margin: 6px 0 0; font-size: 13px; }
.paso-c details summary, .tw-extra summary { cursor: pointer; color: var(--marca); }
.tw-extra { border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 4px; }
.paso-c details code.copiable { word-break: break-all; cursor: copy; }

/* Claves que se pegan en Conexiones: ocultas sin ser campos de contraseña (así el navegador no mete la del panel) */
.campo-secreto { -webkit-text-security: disc; text-security: disc; font-family: monospace; }

/* Ausencias de técnicos: horas ocupadas y días no disponibles en el cronograma */
.crono-tec { position: sticky; }
.crono-fila .pista .ocupado-banda, .crono-fila .pista .ausente-banda {
  position: absolute; top: 6px; bottom: 6px; border-radius: 4px; z-index: 1; overflow: hidden; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 11.5px; color: #3b4b63;
  background: repeating-linear-gradient(135deg, #eef2f8, #eef2f8 6px, #e3e9f3 6px, #e3e9f3 12px); border: 1px dashed #9fb0c9; }
.crono-fila .pista .ausente-banda { left: 4px; right: 4px; font-size: 12.5px; }
.crono-fila.ausente { background: #fafbfd; }
.crono-fila.ausente .crono-tec { background: #fafbfd; cursor: default; }
.btn-ausencia { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: var(--texto-3);
  padding: 3px; border-radius: 4px; cursor: pointer; opacity: 0; display: flex; }
.crono-tec:hover .btn-ausencia, .btn-ausencia:focus-visible { opacity: 1; }
.btn-ausencia:hover { background: #eef4fb; color: var(--marca); }
@media (hover: none) { .btn-ausencia { opacity: 1; } }
.ocupado-movil { margin: 0 14px 10px 60px; font-size: 12.5px; color: #3b4b63; background: #eef2f8; border: 1px dashed #9fb0c9; border-radius: 4px; padding: 4px 8px; }
.tec-movil.ausente .fila-ausente { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; background: #fafbfd; }
.tec-movil.ausente small { display: block; color: var(--texto-3); font-size: 12px; }
/* Ventana de ausencias */
.lista-tecs-aus { max-height: 220px; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 6px 10px; margin-top: 4px; }
.lista-tecs-aus .grupo-zona { padding: 4px 0 6px; border-bottom: 1px solid #f0f0f0; }
.lista-tecs-aus .grupo-zona:last-child { border-bottom: 0; }
.lista-tecs-aus .gz-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin: 2px 0 4px; }
.lista-tecs-aus .gz-tecs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lista-tecs-aus label { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; min-width: 180px; }
.lista-tecs-aus input { width: auto; min-height: 0; }
.lista-tecs-aus label i { width: 9px; height: 9px; border-radius: 50%; }
.aus-ficha { border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 8px 10px; background: #fafafa; }
.aus-ficha .aus-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aus-ficha ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.aus-ficha li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.aus-ficha li > span:not(.chip) { flex: 1; }
/* Punto de salida del técnico: buscador de dirección y mapa */
.con-boton { display: flex; gap: 6px; } .con-boton input { flex: 1; min-width: 0; }
.resultados-dir { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio-s); }
.resultados-dir:empty { display: none; }
.resultados-dir li + li { border-top: 1px solid var(--borde); }
.resultados-dir button { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; background: #fff; border: 0; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.resultados-dir button:hover { background: #f3f8fe; }
.resultados-dir .sin { padding: 7px 10px; font-size: 13px; color: var(--error); }
.mini-mapa { height: 190px; border: 1px solid var(--borde); border-radius: var(--radio-s); margin: 6px 0 2px; z-index: 0; }
/* OpenStreetMap con colores algo más suaves, para que destaquen las rutas */
.leaflet-tile-pane { filter: saturate(.7) brightness(1.03); }

/* Calendario de días libres: planificador (semana del equipo) y agenda del técnico (mes / semana) */
.seg-mini { display: inline-flex; border: 1px solid var(--borde-2); border-radius: var(--radio-s); overflow: hidden; background: #fff; }
.seg-mini button { border: 0; background: none; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.seg-mini button + button { border-left: 1px solid var(--borde-2); }
.seg-mini button.activo { background: #eef4fb; color: var(--marca); }
.panel-agenda > .titulo { gap: 10px; flex-wrap: wrap; }
.semana-plan { display: none; padding: 10px 14px 14px; }
.panel-agenda[data-va="semana"] .cronograma, .panel-agenda[data-va="semana"] .agenda-movil { display: none !important; }
.panel-agenda[data-va="semana"] .semana-plan { display: block; }
.sem-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nav-fecha.peque { height: 32px; } .nav-fecha.peque button { height: 30px; } .nav-fecha.peque .dia { min-width: 170px; font-size: 13px; }
.pinceles-cal { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.pinceles-cal button { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--borde-2); background: #fff; border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.pinceles-cal button[aria-pressed="true"] { border-color: var(--marca); color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: #f3f8fe; }
.pinceles-cal .muestra { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #c9c9c9; display: inline-block; }
.muestra.p-trabaja { background: #91db8b; border-color: #6cc666; }
.muestra.p-libre { background: #e9ebef; }
.muestra.p-manana { background: linear-gradient(#91db8b 50%, #e9ebef 50%); }
.muestra.p-tarde { background: linear-gradient(#e9ebef 50%, #91db8b 50%); }
.muestra.p-vacaciones { background: #cfe2fb; border-color: #8fb8ef; }
.muestra.p-baja { background: #f8d3d3; border-color: #e79a9a; }
.rejilla-sem { display: grid; grid-template-columns: 170px repeat(var(--cols), minmax(92px, 1fr)); gap: 4px; min-width: 820px; }
.rejilla-sem.detalle { grid-template-columns: 0 repeat(var(--cols), minmax(118px, 1fr)); }
.rejilla-sem.detalle .rs-tec { visibility: hidden; padding: 0; }
.rs-cab { font-size: 12px; color: var(--texto-3); text-transform: capitalize; text-align: center; padding: 4px 0; }
.rs-cab b { color: var(--texto); font-size: 13.5px; }
.rs-cab.hoy b { color: #fff; background: var(--marca); border-radius: 999px; padding: 1px 6px; }
.rs-tec { display: flex; flex-direction: column; justify-content: center; padding: 4px 8px 4px 0; min-width: 0; }
.rs-tec a { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--texto); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-tec a:hover { color: var(--marca); }
.rs-tec a i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rs-tec small { color: var(--texto-3); font-size: 11.5px; margin-left: 17px; }
.celda-sem { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 9px 8px 6px;
  border: 1px solid var(--borde); border-radius: 6px; background: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.celda-sem:hover { border-color: var(--marca); }
.celda-sem .mitades { position: absolute; top: 0; left: 0; right: 0; height: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.celda-sem .mitades i { background: #e4e6ea; } .celda-sem .mitades i.on { background: #6cc666; }
.celda-sem .et { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.celda-sem .vis { font-size: 11.5px; color: var(--marca); font-weight: 600; }
.celda-sem .lista-vis { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--texto-2); margin-top: 2px; width: 100%; }
.celda-sem .lista-vis span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rejilla-sem.detalle .celda-sem { min-height: 150px; }
.celda-sem.e-no_trabaja { background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 5px, #fbfbfb 5px, #fbfbfb 10px); color: var(--texto-3); }
.celda-sem.e-no_trabaja .et { color: var(--texto-3); font-weight: 400; }
.celda-sem.e-libre, .celda-sem.e-otro, .celda-sem.e-permiso, .celda-sem.e-festivo { background: #f0f1f4; }
.celda-sem.e-vacaciones { background: #e8f1fd; } .celda-sem.e-vacaciones .et { color: #0b5cab; }
.celda-sem.e-baja { background: #fdeeee; } .celda-sem.e-baja .et { color: #b3261e; }
.celda-sem.e-manana, .celda-sem.e-tarde, .celda-sem.e-parcial, .celda-sem.e-otro_trabajo, .celda-sem.e-formacion { background: #fbf7ee; }
.celda-sem.pasado, .dia-cal.pasado { opacity: .5; cursor: default; }
.celda-sem.hoy, .dia-cal.hoy { box-shadow: inset 0 0 0 2px var(--marca); }
.celda-sem.pendiente, .dia-cal.pendiente { outline: 2px dashed var(--aviso); outline-offset: -2px; }
.marca-pend { position: absolute; top: 7px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); }
.pie-cambios { position: sticky; bottom: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px;
  background: #fff8ea; border: 1px solid #f9e3b6; border-radius: var(--radio-s); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pie-cambios span { flex: 1; font-size: 13.5px; }
/* Agenda del técnico: mes */
.agenda-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agenda-cab .nav-fecha .dia::first-letter { text-transform: uppercase; }
.agenda-cab select { width: auto; margin-left: auto; }
.mes-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; max-width: 760px; }
.mes-cal .sem { text-align: center; font-size: 12px; color: var(--texto-3); font-weight: 600; padding: 2px 0; }
.dia-cal { position: relative; aspect-ratio: 1 / .9; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; background: #f0f1f4;
  display: grid; grid-template-rows: 1fr 1fr; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.dia-cal .mitad { display: block; } .dia-cal .mitad + .mitad { border-top: 1px solid rgba(0,0,0,.05); }
.dia-cal .mitad.on { background: #d4f2d0; }
.dia-cal.e-vacaciones { background: #e1edfc; } .dia-cal.e-baja { background: #fbe3e3; }
.dia-cal.e-no_trabaja { background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 5px, #fafafa 5px, #fafafa 10px); }
.dia-cal .num { position: absolute; top: 5px; left: 7px; font-weight: 700; font-size: 14px; pointer-events: none; }
.dia-cal .nvis { position: absolute; top: 5px; right: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--marca); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; }
.dia-cal.pendiente .nvis { right: 18px; }
.dia-cal .et { position: absolute; left: 6px; right: 4px; bottom: 5px; font-size: 11px; font-weight: 600; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.dia-cal.e-vacaciones .et { color: #0b5cab; } .dia-cal.e-baja .et { color: #b3261e; }
.dia-cal.fuera { visibility: hidden; }
.dia-cal:hover:not(.pasado) { border-color: var(--marca); }
.leyenda-cal { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--texto-3); margin-top: 10px; }
.leyenda-cal span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-cal i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #d0d0d0; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px; }
.leyenda-cal .l-on { background: #d4f2d0; } .leyenda-cal .l-libre { background: #f0f1f4; } .leyenda-cal .l-vac { background: #e1edfc; }
.leyenda-cal .l-baja { background: #fbe3e3; } .leyenda-cal .l-nvis { background: var(--marca); color: #fff; border-color: var(--marca); border-radius: 7px; }
.enlace-agenda { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-left: 8px; white-space: nowrap; }
.aus-ficha .acciones { display: flex; gap: 6px; }
@media (max-width: 640px) {
  .dia-cal { aspect-ratio: 1 / 1.15; } .dia-cal .et { display: none; }
  .pinceles-cal button { padding: 5px 10px; font-size: 12.5px; }
  .agenda-cab select { margin-left: 0; width: 100%; }
}

/* Objetivo de trabajos por técnico y día */
.obj-ok { color: var(--exito); font-weight: 600; }
.obj-bajo { color: #b7791f; font-weight: 600; }
.obj-alto { color: var(--error); font-weight: 600; }
.objetivo-trabajos { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--fondo-2, #f7f7f7); }
.objetivo-trabajos label { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; }
.objetivo-trabajos input { width: 64px; min-height: 34px; }
.objetivo-trabajos small { flex-basis: 100%; color: var(--texto-2); font-size: 12.5px; }

/* Productividad */
.filtros-kpi .contenido { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros-kpi select, .filtros-kpi input[type=date] { min-height: 32px; width: auto; }
.fechas-kpi { display: inline-flex; gap: 6px; align-items: center; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranking li { display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; }
.ranking .pos { color: var(--texto-2); font-variant-numeric: tabular-nums; text-align: right; }
.ranking .quien { display: flex; gap: 6px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.ranking .quien i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ranking .barra { height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.ranking .barra span { display: block; height: 100%; background: var(--marca); border-radius: 4px; }
.ranking b { min-width: 48px; text-align: right; }
.tabla-kpi-caja { overflow-x: auto; }
.tabla-kpi { min-width: 1500px; }
.tabla-kpi th[data-orden] { cursor: pointer; user-select: none; white-space: nowrap; }
.tabla-kpi th.ordenada { color: var(--marca); }
.tabla-kpi td.num, .tabla-kpi th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-kpi .fija { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 190px; }
.tabla-kpi td.fija a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.tabla-kpi .sub { display: block; color: var(--texto-2); font-size: 11.5px; }
.punto-tec { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 760px) { .filtros-kpi .seg-mini { overflow-x: auto; max-width: 100%; } .filtros-kpi .seg-mini button { white-space: nowrap; } }
@media (min-width: 1100px) { .cifras.cifras-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .panel .titulo { flex-wrap: wrap; } .panel .titulo small { flex-basis: 100%; white-space: normal; } }

/* Planificación automática */
.opcion-piloto { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--borde); font-size: 14px; line-height: 1.5; }
.opcion-piloto > input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin-top: 3px; flex: none; }
.opcion-piloto input[type=time], .opcion-piloto input[type=number] { width: auto; min-height: 30px; padding: 2px 6px; display: inline-block; }
.opcion-piloto input[type=number] { width: 56px; }
.opcion-piloto small { display: block; color: var(--texto-2); }
.resumen-piloto { margin-top: 6px; padding: 10px 12px; background: var(--fondo-2, #f7f7f7); border-radius: var(--radio-s); font-size: 13.5px; }
.resumen-piloto p { margin: 0 0 6px; }
.lista-piloto { margin: 0 0 6px; padding-left: 18px; }
#p-piloto .punto { margin-left: 2px; }

/* Hoy/mañana: citas que el cliente no ha confirmado */
.bloque.sin-confirmar { outline: 2px solid var(--error); outline-offset: -2px; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.45) 6px 9px); }