/* Formulario de levantamiento: pensado primero para el celular del técnico.
   Colores y letra (Comfortaa) iguales a la Planificación de SEGUIMIENTO JEFF (pedido 2026-10-08). */
:root {
  --azul: #1f5fbf;
  --azul-osc: #16243a;
  --tinta: #1d2533;
  --suave: #6b7686;
  --borde: #dfe4eb;
  --tarjeta: #fff;
  --grupo: #dbeaf8;
  --grupo-borde: #b7d2ef;
  --grupo-texto: #1f3f6e;
  --ok: #15803d;
  --ok-fondo: #dcfce7;
  --mal: #b91c1c;
  --mal-fondo: #fee2e2;
  --pend: #b45309;
  --pend-fondo: #fef3c7;
  --radio: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 14px/1.45 Comfortaa, system-ui, "Segoe UI", sans-serif;
  color: var(--tinta);
  background: #e8f1fa;
}

/* ---------- barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--azul-osc);
  color: #fff;
}
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--azul); font-size: 20px; flex: none; }
.barra h1 { margin: 0; font-size: 18px; text-transform: uppercase; }
.barra p { margin: 0; font-size: 12px; opacity: .75; }
.barra-der { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tecnico { display: flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; min-width: 0; }
.tecnico[hidden] { display: none; }
.tecnico b { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .barra p { display: none; }
  .tecnico b { max-width: 90px; }
}
.btn-salir { margin-left: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 12px; }
#form-ingreso { display: flex; flex-direction: column; gap: 12px; max-width: 380px; margin: 0 auto; }
#form-ingreso input { font: inherit; font-size: 18px; text-align: center; padding: 12px; border: 2px solid var(--borde); border-radius: 12px; width: 100%; }
#form-ingreso input:focus { outline: none; border-color: var(--azul); }
.conexion { font-size: 12px; white-space: nowrap; opacity: .9; }
.conexion.ok { color: #86efac; }
.conexion.mal { color: #fca5a5; }

main { width: 100%; max-width: 860px; margin: 0 auto; padding: 16px 16px 120px; }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: var(--tarjeta);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--borde);
  box-shadow: 0 1px 3px rgba(22, 36, 58, .06);
}
.tarjeta h2 { margin: 0 0 6px; font-size: 15px; }
.ayuda { margin: 4px 0 12px; color: var(--suave); font-size: 13px; }

.inicio { margin-top: 12vh; text-align: center; }
.inicio h2 { font-size: 18px; }
#form-tarea { display: flex; flex-direction: column; gap: 12px; max-width: 380px; margin: 0 auto; }
#numero {
  font: inherit; font-size: 22px; text-align: center; letter-spacing: 1px;
  padding: 14px; border: 2px solid var(--borde); border-radius: 12px; width: 100%;
}
#numero:focus { outline: none; border-color: var(--azul); }
.mensaje { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; }
.mensaje.error { color: var(--mal); }

/* ---------- botones y campos ---------- */
button { font: inherit; cursor: pointer; }
.btn-principal {
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 8px;
  background: var(--azul); color: #fff; font-weight: 700;
}
.btn-principal:hover { background: #184c99; }
.btn-principal:disabled { opacity: .5; cursor: not-allowed; }
.btn-sec {
  min-height: 42px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--borde); background: #fff; color: var(--tinta);
}
.btn-chico { min-height: 40px; padding: 0 12px; font-size: 14px; }

label.campo { display: block; font-size: 12px; font-weight: 700; color: var(--suave); margin-bottom: 4px; }
select, input[type="text"], textarea {
  width: 100%; min-height: 44px; padding: 8px 10px;
  font: inherit; font-size: 16px; color: var(--tinta);   /* 16px: el celular no hace zoom al escribir */
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
textarea { min-height: 70px; resize: vertical; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
select:disabled, input:disabled, textarea:disabled { background: #f1f5f9; color: #94a3b8; }

/* ---------- cabecera de la tarea ---------- */
.cab-tarea { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cab-tarea h2 { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #e9eff8; color: #2b3a52; white-space: nowrap;
}
.chip.ok { background: var(--ok-fondo); color: var(--ok); }
.chip.mal { background: var(--mal-fondo); color: var(--mal); }
.chip.pend { background: var(--pend-fondo); color: var(--pend); }
.progreso { height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; margin: 12px 0 4px; }
.progreso > span { display: block; height: 100%; background: var(--ok); transition: width .3s; }

/* como las filas de grupo de la Planificación (franja celeste) */
.seccion-titulo {
  margin: 20px 0 10px; padding: 8px 12px; border-radius: 8px;
  background: var(--grupo); border: 1px solid var(--grupo-borde); color: var(--grupo-texto);
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}

/* datos en pares etiqueta/valor */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 11px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.datos dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.mono { font-size: 12px; letter-spacing: .01em; }
.vacio { color: #94a3b8; font-style: italic; }
a.enlace { color: var(--azul); font-weight: 600; text-decoration: none; }

/* ---------- caja (un elemento del levantamiento) ---------- */
details.elemento { padding: 0; overflow: hidden; }
details.elemento > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
}
details.elemento > summary::-webkit-details-marker { display: none; }
.etq {
  flex: none; display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 8px;
  border-radius: 10px; background: var(--azul); color: #fff; font-weight: 700; font-size: 14px;
}
.etq.l1 { background: #ea580c; }
.etq.mpls { background: #7c3aed; }
.sum-texto { flex: 1; min-width: 0; }
.sum-texto b { display: block; overflow-wrap: anywhere; font-size: 15px; }
.sum-texto small { color: var(--suave); }
.flecha { flex: none; transition: transform .2s; color: var(--suave); }
details[open] .flecha { transform: rotate(180deg); }
.cuerpo { padding: 0 16px 16px; border-top: 1px solid #eef1f6; }
details.elemento.completa { box-shadow: 0 0 0 2px var(--ok); }

.bloque { margin-top: 16px; }
.bloque h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--azul); }

/* resumen de lo que falta, como lo pidió Jefferson: "Estado de la caja: sin revisar"... */
.estado-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.estado-lista li { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--pend-fondo); color: var(--pend); }
.estado-lista li.ok { background: var(--ok-fondo); color: var(--ok); }
.estado-lista li.mal { background: var(--mal-fondo); color: var(--mal); }
.estado-lista b { font-weight: 600; }

/* splitters y logins */
.splitter { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.splitter-cab { padding: 8px 12px; background: #f1f5f9; font-size: 13px; }
.splitter-cab .mono { font-size: 12.5px; overflow-wrap: anywhere; }
table.logins { width: 100%; border-collapse: collapse; font-size: 14px; }
table.logins th, table.logins td { padding: 6px 12px; border-top: 1px solid #eef1f6; text-align: left; }
table.logins th { font-size: 12px; color: var(--suave); font-weight: 600; }
table.logins td.num { width: 60px; }

/* campos del levantamiento */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.inc-numero { display: flex; gap: 8px; margin-top: 8px; }
.inc-numero input { flex: 1; }
input[type="tel"], input[type="email"] {
  width: 100%; min-height: 46px; padding: 10px 12px;
  font: inherit; color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 10px; background: #fff;
}
input.mayus { text-transform: uppercase; }
.admin-form { margin-top: 4px; }
.ref-fila { display: flex; gap: 8px; align-items: flex-start; }
.ref-fila textarea { flex: 1; }

/* fotos por elemento */
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.foto {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 1; border: 2px dashed var(--borde); border-radius: 12px; overflow: hidden;
  background: #f8fafc; cursor: pointer; text-align: center; font-size: 12px; color: var(--suave);
}
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto b { position: relative; z-index: 1; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .9); color: var(--tinta); font-size: 12px; }
.foto.tiene { border-style: solid; border-color: var(--ok); }
.foto .icono { font-size: 26px; }
.foto.subiendo::after {
  content: "Subiendo…"; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, .8); color: var(--azul); font-weight: 600; z-index: 2;
}
.foto.opcional { border-color: #e2e8f0; }

.bloqueado { padding: 12px; border-radius: 10px; background: #f1f5f9; color: var(--suave); font-size: 14px; }
.copiado { padding: 10px 12px; border-radius: 10px; background: #e0f2fe; color: #075985; font-size: 14px; margin-top: 12px; }

/* cierre */
.cierre { text-align: center; }
.cierre .btn-principal { width: 100%; max-width: 380px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 14px; }

/* aviso flotante */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px;
  background: #0f172a; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.aviso.error { background: var(--mal); }
.aviso.ok { background: var(--ok); }

/* diálogo del cierre */
.dialogo { width: min(640px, calc(100% - 32px)); border: 0; border-radius: var(--radio); padding: 18px; }
.dialogo::backdrop { background: rgba(8, 18, 45, .6); }
.dialogo h2 { margin: 0; }
.cierre-texto {
  max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 13px/1.4 Consolas, monospace; background: #f1f5f9; padding: 12px; border-radius: 10px;
}
.dlg-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 520px) {
  .barra h1 { font-size: 14px; }
  .conexion { display: none; }
  .tarjeta { padding: 14px; }
  .fotos { gap: 6px; }
  .acciones > * { flex: 1; }
}

/* ---------- lo que falta del levantamiento (debajo de las fotos) ---------- */
.falta { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: var(--pend-fondo); color: var(--pend); }
.falta.ok { background: var(--ok-fondo); color: var(--ok); font-weight: 700; }

/* ---------- potencia del splitter (IN / OUT) ---------- */
.splitter-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.splitter-cab > div:first-child { min-width: 0; flex: 1 1 260px; }
.pot-splitter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pot-splitter label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--grupo-texto); }
.pot-splitter input { width: 78px; min-height: 36px; padding: 4px 6px; text-align: center; }
.pot-splitter .unidad { font-size: 12px; color: var(--suave); }

/* ---------- cliente en rango / atenuado ---------- */
table.logins td.marca-login { width: 1%; white-space: nowrap; }
.pareja { display: flex; gap: 6px; }
.btn-marca { min-height: 34px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--borde); background: #fff; color: var(--suave); }
.btn-marca.ok.activa { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok); }
.btn-marca.mal.activa { background: var(--mal-fondo); border-color: var(--mal); color: var(--mal); }
.pot-login { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pot-login input { width: 84px; min-height: 36px; padding: 4px 6px; text-align: center; }
.pot-login span { font-size: 12px; color: var(--suave); }
@media (max-width: 520px) {
  table.logins th, table.logins td { padding: 6px 8px; }
  table.logins td.mono { word-break: break-all; }
  .btn-marca { padding: 0 8px; }
}

/* ---------- copiar / enviar el resumen ---------- */
.copiar-fila { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.btn-whatsapp { display: inline-flex; align-items: center; text-decoration: none; background: #25d366; border-color: #25d366; color: #fff; font-weight: 700; }

/* subtareas de la tarea (solo lectura) */
.subtareas { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--grupo); border: 1px solid var(--grupo-borde); }
.subtareas h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--grupo-texto); }
.subtareas ul { margin: 0; padding-left: 18px; font-size: 13px; }
.subtareas li { margin: 4px 0; }