:root{
  --amar:#FFED00; --amar-osc:#E5D400;
  --teal:#00A5AD; --teal-osc:#00838A; --teal-pal:#E4F6F7;
  --naranja:#FFA81C;
  --mora:#A45FD8; --mora-osc:#8E45C6; --mora-prof:#4A1A5E;
  --bg:#EFEFEF; --linea:#C6C6C6; --linea2:#DDDDDD;
  /* Grises con contraste suficiente para leerse a plena luz: txt2 7.2:1 y
     txt3 5.0:1 sobre blanco. Con los anteriores (#8A8A8A y #B0B0B0, 3.4:1 y
     2.2:1) la letra pequeña se perdia en la calle. */
  --txt:#3A3A3A; --txt2:#575757; --txt3:#6E6E6E;
  --rojo:#D64545; --verde:#2E9E5B;
  --f:Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
/* Oculto es oculto. Cualquier regla de aqui con display propio (grid, flex...)
   le ganaba al atributo hidden del navegador, y lo escondido se seguia viendo:
   el cartel de "Acceso restringido" salia al pie del panel aun teniendo permiso.
   Por eso mas abajo hay parches sueltos .card[hidden], .bt[hidden] y demas; esta
   linea los cubre a todos. */
[hidden]{display:none!important}
/* Los saltos entre secciones se animan en vez de dar un tiron. */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--f);-webkit-font-smoothing:antialiased}
.app{max-width:1280px;margin:0 auto;padding:0 0 46px}

/* ---------- Cabecera ---------- */
header{background:var(--amar);padding:20px 34px 24px;display:flex;align-items:center;gap:20px;
  border-radius:0 0 26px 26px;flex-wrap:wrap}
.atras{width:40px;height:40px;flex:none;border:none;border-radius:12px;cursor:pointer;
  background:rgba(0,0,0,.10);color:var(--teal-osc);font-size:23px;line-height:1;display:grid;
  place-items:center;transition:.13s;font-family:var(--f)}
.atras:hover{background:rgba(0,0,0,.18)}
/* El titulo lleva al inicio: se comporta como enlace, pero sin recargar. */
header .titulo{display:block;padding:5px 9px;margin:-5px -9px;border-radius:14px;cursor:pointer;
  color:inherit;text-decoration:none;transition:.13s}
header .titulo:hover{background:rgba(0,0,0,.08)}
header .titulo:focus-visible{outline:3px solid var(--teal-osc);outline-offset:1px}
header h1{margin:0;font-size:25px;font-weight:700;color:var(--teal-osc);letter-spacing:.2px}
header .sub{margin:3px 0 0;font-size:13px;color:var(--teal-osc);opacity:.85}
.meta{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.meta .dato{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--teal-osc)}
.meta svg{width:16px;height:16px;flex:none}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.55);border-radius:30px;padding:7px 15px;font-size:12.5px;color:var(--teal-osc)}
.chip b{font-size:15px;font-weight:700}
.salir{background:rgba(0,0,0,.10);border:none;border-radius:30px;padding:8px 16px;cursor:pointer;
  font-family:var(--f);font-size:12.5px;font-weight:700;color:var(--teal-osc);transition:.13s}
.salir:hover{background:rgba(0,0,0,.2)}

/* ---------- Pasos ---------- */
.pasos{display:flex;align-items:center;justify-content:center;margin:24px auto 4px;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:11px}
.paso .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:15px;font-weight:700;color:#fff;background:var(--teal);box-shadow:0 2px 5px rgba(0,0,0,.10);transition:.2s}
.paso .e{font-size:13.5px;font-weight:700;color:var(--teal-osc);transition:.2s}
.paso.off .n{background:#E2E2E2;color:#A8A8A8}
.paso.off .e{color:var(--txt3)}
.unir{width:74px;height:2px;background:var(--linea);margin:0 16px}

/* ---------- Tarjetas ---------- */
.zona{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;margin:18px 22px 0;align-items:start}
.card{background:#fff;border-radius:16px;padding:22px 24px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.card.ancho{margin:20px 22px 0;scroll-margin-top:14px}
.card[hidden]{display:none}
.rot{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);
  margin:0 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rot .n{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;color:var(--txt3);font-size:12.5px}
.rot .bs{margin-left:auto}   /* atajo a la otra seccion, al final del rotulo */

/* ---------- Tarjeta destacada ----------
   La cola de solicitudes es lo primero que atiende Scott, asi que lleva la
   franja amarilla de la marca y se distingue del resto de la pagina. */
.card.destacada{padding:0;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.10)}
.card.destacada > .rot{margin:0 0 16px;padding:15px 24px;background:var(--amar);color:var(--teal-osc);
  font-size:12.5px}
.card.destacada > .rot .n{color:var(--teal-osc);font-weight:700;opacity:.78}
.card.destacada > .barra{margin:0 24px 12px}
.card.destacada > .tabla-cont{margin:0 24px 22px}

/* ---------- Píldoras ---------- */
.pil{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);border-radius:26px;
  padding:10px 20px;background:#fff;min-height:46px;position:relative}
.pil[hidden]{display:none}
.pil .k{font-size:14.5px;font-weight:700;color:var(--txt);flex:none}
.pil .k i{font-style:normal;font-weight:400;font-size:12px;color:var(--txt3)}
.pil .v{margin-left:auto;font-size:14.5px;font-weight:700;color:var(--teal);text-align:right;word-break:break-word}
.pil .v.mono{font-family:var(--mono);letter-spacing:.6px;font-size:15px}

/* ---------- Lista desplegable propia ---------- */
.auto{position:absolute;left:12px;right:12px;z-index:40;max-height:230px;overflow-y:auto;background:#fff;
  border:1px solid var(--linea);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:5px}
.auto[hidden]{display:none}
.auto-op{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  font-family:var(--f);font-size:14px;font-weight:600;color:var(--txt);padding:9px 14px;border-radius:10px}
.auto-op:hover,.auto-op.sel{background:var(--teal-pal);color:var(--teal-osc)}
.auto::-webkit-scrollbar{width:8px}
.auto::-webkit-scrollbar-thumb{background:var(--linea);border-radius:8px}
.pil .v.na{color:var(--naranja)}
.pil .v.gris{color:var(--txt3);font-weight:400;font-style:italic}
.pil.destacado{border:2px solid var(--teal);background:var(--teal-pal);min-height:52px}
.pil.destacado .k{color:var(--teal-osc)}
.pil.destacado .v{font-size:18px;letter-spacing:1.2px;color:var(--teal-osc)}
.pil.destacado .ico{background:transparent;border-color:var(--teal-pal);color:var(--teal-osc);margin-left:14px}
.pil.destacado .ico:hover{background:#fff;border-color:var(--teal)}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rejilla .ancho2{grid-column:1 / -1}
.pil.entrada{padding:8px 10px 8px 24px}
/* min-width:0 o el ancho minimo del texto empuja la lupa fuera de la pantalla. */
.pil.entrada input{margin:0;flex:1;min-width:0;width:auto;border:none;outline:none;background:transparent;
  font-family:var(--mono);font-size:21px;letter-spacing:2px;color:var(--txt);font-weight:400}
.pil.entrada input::placeholder{letter-spacing:2px;color:var(--txt3)}
.pil.err{border-color:var(--rojo)}
.pil.ok{border-color:var(--teal)}
.validez{font-size:12.5px;color:var(--txt2)}
.validez.bien{color:var(--teal-osc);font-weight:700}
.validez.mal{color:var(--rojo);font-weight:700}
.etiqueta{font-size:12px;color:var(--txt3);letter-spacing:.3px}
#copiado{color:var(--teal-osc);font-weight:700}
.pil .vi.baja{text-transform:none}
.redondo{width:42px;height:42px;flex:none;border-radius:50%;border:none;cursor:pointer;background:var(--teal);
  color:#fff;display:grid;place-items:center;transition:.13s}
.redondo:hover{background:var(--teal-osc)}
.redondo:disabled{background:var(--linea);cursor:default}
.redondo svg{width:20px;height:20px}
.aviso{min-height:18px;margin:9px 0 0;font-size:13px;color:var(--rojo);padding-left:6px}
.bajo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:0 8px;
  font-size:12.5px;color:var(--txt2);flex-wrap:wrap}
.bajo input[type=checkbox]{width:15px;height:15px;accent-color:var(--teal);cursor:pointer;vertical-align:-3px}
.bajo label{cursor:pointer}
.bajo .cnt{font-family:var(--mono)}
.bajo .cnt b{color:var(--teal)}

/* ---------- Botones ---------- */
.botones{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.bt{padding:15px 34px;border:none;border-radius:999px;cursor:pointer;font-family:var(--f);font-size:16.5px;
  font-weight:500;color:#fff;background:var(--mora);box-shadow:0 3px 8px rgba(164,95,216,.30);transition:.13s}
.bt:hover{background:var(--mora-osc)}
.bt:disabled{background:#C9C9C9;box-shadow:none;cursor:default}
.bt.ancho3{flex:1 1 100%}
.bt.prof{background:var(--mora-prof);box-shadow:none}
.bt.prof:hover{background:#5e2276}
.bt.teal{background:var(--teal);box-shadow:0 3px 8px rgba(0,165,173,.28)}
.bt.teal:hover{background:var(--teal-osc)}
.bt.linea{background:#fff;color:var(--txt2);border:1px solid var(--linea);box-shadow:none}
.bt.linea:hover{background:#f7f7f7;color:var(--txt)}
.bt[hidden]{display:none}

/* ---------- Log ---------- */
.consola{background:#FAFAFA;border:1px solid var(--linea2);border-radius:12px;padding:12px 15px;height:298px;
  overflow-y:auto;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--txt2)}
.consola .l{display:flex;gap:8px;white-space:pre-wrap;word-break:break-word}
.consola .h{color:var(--txt3);flex:0 0 auto}
.consola .ok{color:var(--teal-osc);font-weight:700}
.consola .wr{color:#C88400}
.consola .er{color:var(--rojo)}
.consola .in{color:var(--txt2)}
.consola::-webkit-scrollbar{width:9px}
.consola::-webkit-scrollbar-thumb{background:#DADADA;border-radius:9px}

/* ---------- Tabla ---------- */
.barra{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.barra input{flex:1 1 260px;padding:12px 18px;font-size:14px;border-radius:30px;font-family:var(--f);
  border:1px solid var(--linea);background:#fff;color:var(--txt)}
.barra input:focus{outline:none;border-color:var(--teal)}
.barra input[type=search]::-webkit-search-cancel-button{cursor:pointer}
/* El relleno automatico del navegador pintaba los campos de azul y rompia la
   linea del sistema. Se mantiene el fondo y el color propios. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 40px #fff inset;
  -webkit-text-fill-color:var(--txt);
  caret-color:var(--txt);
}
.bs{background:#fff;border:1px solid var(--linea);color:var(--txt2);font-family:var(--f);font-size:12px;
  font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:11px 18px;border-radius:30px;
  cursor:pointer;transition:.13s}
.bs:hover{border-color:var(--teal);color:var(--teal)}
a.bs{text-decoration:none;display:inline-block}
.bs.peligro:hover{border-color:var(--rojo);color:var(--rojo)}
/* Teal oscuro y no el claro: el blanco sobre #00A5AD se lee mal a plena luz. */
.bs.activo{background:var(--teal-osc);border-color:var(--teal-osc);color:#fff}
.tabla-cont{border:1px solid var(--linea2);border-radius:12px;overflow:auto;max-height:430px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{position:sticky;top:0;background:var(--teal-pal);color:var(--teal-osc);text-align:left;font-size:11px;
  letter-spacing:.9px;text-transform:uppercase;padding:12px 15px;border-bottom:1px solid #CFEAEC}
tbody td{padding:12px 15px;border-bottom:1px solid var(--linea2);color:var(--txt2)}
tbody tr:last-child td{border-bottom:none}
tbody tr.dato{cursor:pointer;transition:.12s}
tbody tr.dato:hover{background:#F7FCFC}
/* Lo que espera respuesta de Scott, marcado con el amarillo de la marca. */
tbody tr.pend{background:#FFFEF2}
tbody tr.pend td:first-child{box-shadow:inset 4px 0 0 var(--amar)}
td.cod{font-family:var(--mono);font-size:12.5px;color:var(--txt3);white-space:nowrap}
td.imei{font-family:var(--mono);color:var(--txt);white-space:nowrap;font-weight:600}
td.tac{font-family:var(--mono);font-size:12.5px;color:var(--txt3)}
td.mar{color:var(--teal);font-weight:700;white-space:nowrap}
/* El nombre del cliente es el dato que se busca con la vista: destaca del resto. */
td .mar{color:var(--txt);font-weight:600}
td.fec{font-size:12.5px;color:var(--txt3);white-space:nowrap}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.5px;padding:5px 12px;border-radius:30px;
  background:var(--teal-pal);color:var(--teal-osc);white-space:nowrap}
.tag.sinluhn{background:#FFF4E0;color:#B87500}
.tag.espera{background:#FFF7A8;color:#7A6A00}
.tag.no{background:#FDECEC;color:var(--rojo)}
.tag.si{background:#E7F6EC;color:var(--verde)}
.acc{display:flex;gap:6px;justify-content:flex-end}
.ico{background:#fff;border:1px solid var(--linea);border-radius:50%;width:30px;height:30px;color:var(--txt3);
  cursor:pointer;display:grid;place-items:center;font-size:12px;transition:.13s}
.ico:hover{border-color:var(--teal);color:var(--teal)}
.ico.del:hover{border-color:var(--rojo);color:var(--rojo)}
.ico svg{width:14px;height:14px}
.vacio{padding:44px 20px;text-align:center;color:var(--txt3);font-size:13.5px}

/* Aviso de lo que acaba de entrar, sin tapar el trabajo. */
.toast{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:8px;
  padding:13px 20px;border:none;border-radius:30px;cursor:pointer;font-family:var(--f);font-size:14px;
  color:var(--teal-osc);background:var(--amar);box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;transform:translateY(12px);transition:.22s}
.toast.on{opacity:1;transform:none}
.toast b{font-size:16px;font-weight:700}
.toast[hidden]{display:none}
.pie{margin:24px 22px 0;text-align:center;font-size:11.5px;color:var(--txt3)}

/* ---------- Modal ---------- */
.fondo{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:26px;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .15s}
.fondo.on{opacity:1;pointer-events:auto}
.modal{position:relative;width:min(430px,100%);background:#fff;border-radius:14px;padding:26px 0 22px;
  text-align:center;transform:scale(.93);transition:transform .18s cubic-bezier(.2,.9,.3,1.3)}
/* Aspa para cerrar, arriba a la derecha del recuadro. */
.cerrar-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border:none;border-radius:50%;
  cursor:pointer;background:transparent;color:var(--txt3);font-size:17px;line-height:1;display:grid;
  place-items:center;transition:.13s;font-family:var(--f)}
.cerrar-x:hover{background:var(--linea2);color:var(--txt)}
.cerrar-x:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.fondo.on .modal{transform:none}
.blob{width:120px;height:120px;margin:0 auto 4px;display:block}
.blob path.cuerpo{fill:var(--naranja)}
/* Un color por servicio, dentro de la misma paleta: se distingue de un vistazo
   cual de los tres comprobantes se esta mirando, sin leerlo. */
.serv-premium .blob path.cuerpo{fill:var(--teal)}
.serv-preventivo .blob path.cuerpo{fill:var(--naranja)}
.serv-justificar .blob path.cuerpo{fill:var(--mora)}
.blob g.marca{stroke:#fff;stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.blob g.marca circle{stroke-dasharray:214;stroke-dashoffset:214}
.blob g.marca path{stroke-dasharray:56;stroke-dashoffset:56}
.fondo.on .blob g.marca circle{animation:arco .55s ease-out forwards}
.fondo.on .blob g.marca path{animation:tick .3s ease-out .38s forwards}
@keyframes arco{to{stroke-dashoffset:0}}
@keyframes tick{to{stroke-dashoffset:0}}
.modal h3{margin:10px 22px 20px;font-size:24px;font-weight:700;color:var(--teal);line-height:1.3}
.corte{border:none;border-top:1px dashed var(--linea);margin:0 12px 20px}
.m-txt{margin:0 26px;font-size:17px;color:var(--txt);line-height:1.5}
/* El IMEI del comprobante, con cifras de ancho fijo pero en la tipografia del
   sistema: el monoespaciado lo dejaba desparramado y con aire de terminal. */
.m-imei{display:block;margin:14px 0 3px;font-family:var(--f);font-size:23px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.4px;color:var(--txt);word-break:break-all}
.m-equipo{display:block;margin-top:5px;font-size:14px;font-weight:700;color:var(--teal)}
.m-cliente{display:block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--txt2);letter-spacing:.3px}
/* El comprobante acredita lo que cada servicio exige: no es lo mismo un
   Premium que una justificacion. El servicio se dice en el titulo. */
/* Los datos del titular van en su propia ficha: sueltos entre el equipo y la
   fecha parecian añadidos a ultima hora. */
.m-detalle{display:block;margin:16px 0 2px;padding:12px 15px 13px;border:1px solid var(--linea2);
  border-radius:14px;background:#FBFBFB;text-align:left}
.m-detalle:empty{display:none}
.m-detalle-t{display:block;margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid var(--linea2);
  font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--txt3)}
.m-titular{display:block;margin:0 0 7px;font-size:15.5px;font-weight:700;color:var(--txt);
  line-height:1.35;word-break:break-word}
.m-dato{display:flex;gap:12px;align-items:baseline;padding:4px 0;font-size:13.5px;color:var(--txt)}
.m-dato i{flex:none;width:82px;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--txt2)}
.m-dato b{flex:1;min-width:0;font-weight:600;word-break:break-word}
.pil .vi{margin-left:auto;flex:1;min-width:0;border:none;outline:none;background:transparent;
  text-align:right;font-family:var(--f);font-size:14.5px;font-weight:700;color:var(--teal);text-transform:uppercase}
.pil .vi::placeholder{color:var(--txt3);font-weight:400;font-style:italic;text-transform:none}
.m-nota{margin:16px 26px 0;font-size:12.5px;color:var(--txt2);line-height:1.55}
.m-nota strong{color:var(--teal-osc)}
.btn-cerrar{width:calc(100% - 52px);margin:22px 26px 0;padding:16px;border:none;border-radius:999px;cursor:pointer;
  font-family:var(--f);font-size:19px;font-weight:500;color:#fff;background:var(--mora);
  box-shadow:0 4px 12px rgba(164,95,216,.35);transition:.13s}
.btn-cerrar:hover{background:var(--mora-osc)}
.btn-cerrar:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ---------- Acceso ---------- */
.acceso{min-height:100vh;display:grid;place-items:center;padding:26px}
.acceso .caja{width:min(400px,100%);background:#fff;border-radius:16px;padding:34px 30px 30px;
  box-shadow:0 4px 24px rgba(0,0,0,.10)}
.acceso .marca-top{width:62px;height:62px;border-radius:18px;background:var(--amar);margin:0 auto 18px;
  display:grid;place-items:center}
.acceso .marca-top svg{width:34px;height:34px}
.acceso h1{margin:0 0 4px;font-size:22px;font-weight:700;color:var(--teal);text-align:center}
.acceso p.s{margin:0 0 26px;font-size:13px;color:var(--txt2);text-align:center}
.acceso label{display:block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt2);margin:0 0 7px 6px}
.acceso input{width:100%;padding:14px 20px;border:1px solid var(--linea);border-radius:30px;font-size:15px;
  font-family:var(--f);color:var(--txt);margin-bottom:16px;background:#fff}
.acceso input:focus{outline:none;border-color:var(--teal)}
.acceso .error{min-height:20px;font-size:13px;color:var(--rojo);text-align:center;margin-bottom:6px}
.acceso .bt{width:100%}
.acceso .pie2{margin:22px 0 0;text-align:center;font-size:11.5px;color:var(--txt3);line-height:1.6}

/* ---------- Administración ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.form-linea{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.form-linea input,.form-linea select{padding:11px 16px;border:1px solid var(--linea);border-radius:30px;
  font-size:13.5px;font-family:var(--f);color:var(--txt);background:#fff}
.form-linea input{flex:1 1 150px;min-width:0}
.form-linea input:focus,.form-linea select:focus{outline:none;border-color:var(--teal)}
.nota-clave{background:#FFF9DE;border:1px solid #F0E4A8;border-radius:12px;padding:13px 16px;font-size:13.5px;
  margin-bottom:14px;color:#7A6D00}
.nota-clave b{font-family:var(--mono);font-size:15px;color:var(--txt)}

/* ---------- Formulario del cliente (compacto, sin scroll) ---------- */
header.compacta{padding:14px 26px 16px;border-radius:0 0 20px 20px}
header.compacta h1{font-size:20px}
header.compacta .sub{margin-top:1px;font-size:12px}
header.compacta .meta{margin-left:auto}
.caja-form{max-width:760px;margin:14px auto 0;padding:18px 24px 18px;background:#fff;border-radius:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.caja-form .rot{margin:0 0 9px}

.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.serv{display:flex;flex-direction:column;gap:2px;align-items:flex-start;cursor:pointer;font-family:var(--f);
  padding:12px 16px;border:2px solid var(--linea);border-radius:14px;background:#fff;transition:.13s;text-align:left}
.serv b{font-size:15.5px;color:var(--txt)}
.serv span{font-size:11.5px;color:var(--txt2)}
.serv:hover{border-color:var(--teal-pal);background:#FAFEFE}
.serv.activo{border-color:var(--teal);background:var(--teal-pal)}
.serv.activo b{color:var(--teal-osc)}
.serv.activo span{color:var(--teal-osc)}

/* ---------- Elegir servicio ----------
   El aviso de entrada obliga a elegir uno de los tres antes de llenar nada:
   una solicitud con el servicio equivocado es trabajo perdido para Scott. */
.opciones{display:flex;flex-direction:column;gap:9px;padding:0 22px}
.opcion{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  padding:14px 18px;border:2px solid var(--linea);border-radius:14px;background:#fff;cursor:pointer;
  font-family:var(--f);text-align:left;transition:.13s}
.opcion:hover{border-color:var(--teal);background:var(--teal-pal)}
.opcion:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.opcion b{font-size:16px;color:var(--teal-osc)}
.opcion span{font-size:12.5px;color:var(--txt2)}

.rejilla-form{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* relative: la lista desplegable (.auto) se ancla al campo, no a la página. */
.campo{display:flex;flex-direction:column;gap:4px;position:relative}
.campo[hidden]{display:none}
.campo.ancho2{grid-column:1 / -1}
.campo>span{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--txt2);
  padding-left:14px}
.campo>span i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--txt3)}
.campo input,.campo select{width:100%;padding:10px 16px;border:1px solid var(--linea);border-radius:26px;
  font-size:15px;font-family:var(--f);color:var(--txt);background:#fff}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--teal)}
.campo input::placeholder{color:var(--txt3)}
.campo .pista{font-size:11.5px;color:var(--txt3);padding-left:14px;min-height:14px;font-style:normal}
.campo .pista.bien{color:var(--teal-osc);font-weight:700}
.campo .pista.mal{color:var(--rojo);font-weight:700}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:0 4px;font-size:12px;
  color:var(--txt2);line-height:1.45}
.consent[hidden]{display:none}
.consent input{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;flex:none;margin-top:1px}
.caja-form .bt{margin-top:12px}
.caja-form .aviso{text-align:center;margin:6px 0 0}

/* ---------- Telefono ----------
   Scott y los clientes trabajan casi siempre desde el movil: aqui la pagina
   deja de pedir arrastre lateral y los toques dejan de ser de precision. */
@media (max-width:640px){
  /* Cabecera: se comia media pantalla antes del primer dato. */
  header{padding:14px 16px 16px;gap:13px}
  header h1{font-size:19px}
  header .sub{font-size:12px}
  .meta{gap:9px}
  .meta .dato{font-size:12.5px}
  .chips{gap:6px}
  .chip{padding:6px 12px;font-size:12px}
  .chip b{font-size:14px}
  .salir{padding:7px 13px;font-size:12px}

  .card{padding:18px 16px}
  .card.ancho{margin:14px 12px 0}
  .card.destacada > .rot{padding:13px 16px}
  .card.destacada > .barra{margin:0 16px 10px}
  .card.destacada > .tabla-cont{margin:0 16px 16px}
  .barra{gap:7px}
  .bs{padding:9px 13px;font-size:11px;letter-spacing:.4px}
  .etiqueta{width:100%}

  /* Ninguna tabla de seis columnas entra en un telefono: cada fila pasa a ser
     una ficha. Antes habia que arrastrar la pagina de lado para ver el estado. */
  .tabla-cont{border:none;border-radius:0;max-height:none;overflow:visible}
  thead{display:none}
  table,tbody,tbody tr,tbody td{display:block;width:100%}
  tbody tr{border:1px solid var(--linea2);border-radius:12px;background:#fff;
    padding:12px 14px;margin-bottom:9px}
  tbody tr:last-child{margin-bottom:0}
  tbody td{border:none;padding:3px 0}
  tbody td:empty{display:none}
  tbody tr.pend{border-left:4px solid var(--amar)}
  tbody tr.pend td:first-child{box-shadow:none}
  td.cod,td.fec{white-space:normal}
  .acc{justify-content:flex-start;flex-wrap:wrap;gap:8px;margin-top:10px}
  .ico{width:36px;height:36px}
  .vacio{padding:28px 12px}

  /* Con menos de 16px el navegador hace zoom al enfocar y descuadra la pagina. */
  .barra input,.campo input,.campo select,.form-clave input,.acceso input,.pil .vi{font-size:16px}

  .servicios{grid-template-columns:1fr}
  .opciones{padding:0 16px}
  .opcion{padding:13px 16px}
  .rejilla-form{grid-template-columns:1fr}
  .caja-form{margin:12px 12px 0;padding:16px}

  /* Avisos casi a pantalla completa, con los botones al alcance del pulgar. */
  .fondo{padding:14px}
  .modal h3{margin:8px 18px 16px;font-size:21px}
  .m-txt{margin:0 18px}
  .m-nota{margin:14px 18px 0}
  .btn-cerrar{width:calc(100% - 36px);margin:18px 18px 0;font-size:17px}
  .btn-texto{width:calc(100% - 36px);margin:8px 18px 0}
  .modal.claro h3{margin:0 18px 16px}
  .form-clave{padding:0 18px}
  .copiar-lista{padding:0 16px;max-height:52vh}
  .copiar-fila{padding:13px 14px}
  /* La vista previa sigue siendo una tabla: es lo que se va a importar. */
  .imp{padding:0 16px}
  #impTexto{font-size:16px;min-height:104px}
  .imp-previa{max-height:170px;overflow:auto}
  .imp-previa thead{display:table-header-group}
  .imp-previa table{display:table;width:100%}
  .imp-previa tbody{display:table-row-group}
  .imp-previa tr{display:table-row;border:none;margin:0;padding:0;background:transparent}
  .imp-previa td{display:table-cell;border-bottom:1px solid var(--linea2);padding:8px 11px}
}

/* ---------- Panel de control ---------- */
header.oscuro{background:var(--teal);border-radius:0 0 26px 26px}
header.oscuro h1{color:#fff}
header.oscuro .sub{color:rgba(255,255,255,.85)}
header.oscuro .meta .dato{color:#fff}
header.oscuro .salir{background:rgba(255,255,255,.18);color:#fff;text-decoration:none;display:inline-block}
header.oscuro .salir:hover{background:rgba(255,255,255,.3)}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{border:1px solid var(--linea2);border-radius:14px;padding:16px 18px;background:#FCFDFD}
.kpi b{display:block;font-size:28px;line-height:1.1;color:var(--teal-osc);font-weight:700}
.kpi span{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--txt2)}
.kpi.alerta b{color:var(--naranja)}
select.mini{padding:6px 10px;border:1px solid var(--linea);border-radius:20px;font-size:12px;
  font-family:var(--f);color:var(--txt);background:#fff;cursor:pointer}
select.mini:focus{outline:none;border-color:var(--teal)}
/* El nombre se edita donde se lee: sin borde hasta que lo tocas. */
input.mini{padding:6px 10px;border:1px solid transparent;border-radius:20px;font-size:13px;
  font-family:var(--f);color:var(--txt);background:#fff;width:100%;max-width:200px}
input.mini:hover{border-color:var(--linea)}
input.mini:focus{outline:none;border-color:var(--teal)}
input.mini::placeholder{color:var(--txt3);font-style:italic}
.ayuda{margin:12px 4px 0;font-size:12px;color:var(--txt3);line-height:1.6}
.ayuda b{color:var(--txt2)}
.centrado{max-width:560px;margin:0 auto}

/* ---------- Modal claro (formularios) ---------- */
.modal.claro{padding:26px 0 20px;text-align:left}
.modal.claro h3{text-align:center;margin:0 26px 18px}
.form-clave{padding:0 26px}
/* Fuera de la vista pero existente para el navegador: display:none lo ignora. */
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form-clave label{display:block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt2);margin:0 0 6px 6px}
.form-clave input{width:100%;padding:13px 18px;border:1px solid var(--linea);border-radius:30px;font-size:15px;
  font-family:var(--f);color:var(--txt);margin-bottom:14px;background:#fff}
.form-clave input:focus{outline:none;border-color:var(--teal)}
.form-clave .aviso{padding-left:6px;margin:0}
.btn-texto{display:block;width:calc(100% - 52px);margin:10px 26px 0;padding:12px;border:none;background:none;
  font-family:var(--f);font-size:14.5px;color:var(--txt2);cursor:pointer;border-radius:999px}
.btn-texto:hover{background:var(--linea2);color:var(--txt)}
.btn-texto:empty{display:none}
/* ---------- Importar lista ---------- */
.modal.ancho{width:min(680px,100%)}
.imp{padding:0 22px}
.imp-guia{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--txt2)}
.imp-guia b{color:var(--txt);font-weight:600}
.imp-guia .chica{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--txt3)}
#impTexto{display:block;width:100%;min-height:118px;padding:12px 14px;border:1px solid var(--linea);
  border-radius:14px;background:#fff;color:var(--txt);font-family:var(--mono);font-size:12.5px;
  line-height:1.65;resize:vertical}
#impTexto:focus{outline:none;border-color:var(--teal)}
#impTexto::placeholder{color:var(--txt3)}
.imp .barra{margin:11px 0 0}
.imp-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txt2);cursor:pointer}
.imp-chk input{width:16px;height:16px;flex:none;accent-color:var(--teal);cursor:pointer}
.imp-resumen{margin-top:12px;padding:12px 15px;border-radius:12px;background:var(--teal-pal);
  font-size:13.5px;line-height:1.5;color:var(--teal-osc)}
.imp-resumen .sub2{display:block;margin-top:4px;font-size:12px;color:var(--txt2)}
.imp-resumen .mal{color:var(--rojo);font-weight:700}
.imp-previa{margin-top:10px;max-height:190px}
.imp-previa table{font-size:12px}
.imp-previa th,.imp-previa td{padding:8px 11px;white-space:nowrap}

/* ---------- Copiar dato por dato ----------
   Cada dato se pega en un sitio distinto del sistema de la operadora. */
.copiar-lista{display:flex;flex-direction:column;gap:7px;padding:0 22px;max-height:44vh;overflow-y:auto}
.copiar-fila{display:flex;align-items:center;gap:12px;width:100%;padding:11px 15px;cursor:pointer;
  border:1px solid var(--linea);border-radius:12px;background:#fff;font-family:var(--f);text-align:left;
  transition:.13s}
.copiar-fila:hover{border-color:var(--teal);background:var(--teal-pal)}
.copiar-fila:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.copiar-fila .k{flex:none;width:76px;font-size:10.5px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--txt2)}
.copiar-fila .v{flex:1;min-width:0;font-size:14px;color:var(--txt);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.copiar-fila .marca{flex:none;font-size:12px;color:var(--txt3)}
.copiar-fila .marca.ok{color:var(--verde);font-weight:700}
.m-txt.chico{font-size:15px;line-height:1.55;color:var(--txt2);text-align:center}
.m-txt.chico b{color:var(--txt);font-family:var(--mono)}
.modal.peligro h3{color:var(--rojo)}
.modal.peligro .btn-cerrar{background:var(--rojo);box-shadow:0 4px 12px rgba(214,69,69,.3)}
.modal.peligro .btn-cerrar:hover{background:#c03a3a}

/* Celdas con dato principal y detalle debajo */
td .sub2{display:block;font-size:11.5px;color:var(--txt3);margin-top:2px;font-family:var(--f);letter-spacing:0}
td .sub2 b{color:var(--txt2);font-weight:600}
td .sub2.enlace{color:var(--teal);font-weight:600;text-decoration:none}
td .sub2.enlace:hover{text-decoration:underline}
/* El enlace de cada tecnico: se lee entero de un vistazo para copiarlo. */
td .liga{font-family:var(--mono);font-size:12px;color:var(--txt2);word-break:break-all}
/* Un tecnico desactivado sigue a la vista, pero apagado: su enlace no recibe. */
tr.apagada td{opacity:.55}
.acc .bs{padding:7px 13px;font-size:11px}

@media (max-width:980px){
  .zona{grid-template-columns:1fr;margin:18px 14px 0}
  .card.ancho{margin:18px 14px 0}
  header{padding:16px 18px 20px}
  header h1{font-size:20px}
  .meta{width:100%;margin-left:0;gap:14px}
  .unir{width:34px;margin:0 8px}
  .paso .e{display:none}
  .rejilla{grid-template-columns:1fr}
  .bt{flex:1 1 100%}
}