/* Basado en el prototipo protocolo_trazado_corte.html.
   Prioridad: legible a pleno sol, botones grandes, cero ambiguedad. */
:root{
  --azul:#12305c;
  --azul-claro:#1e4a8a;
  --fondo:#f4f6f9;
  --tarjeta:#ffffff;
  --borde:#d7dce4;
  --texto:#1b2430;
  --texto-suave:#5b6474;
  --verde:#1a7d3c;
  --rojo:#c23b2e;
  --ambar:#c8790f;
  --radio:14px;
}
*{box-sizing:border-box;}
body{
  margin:0;padding:0;background:var(--fondo);color:var(--texto);
  font-family:-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.app{max-width:680px;margin:0 auto;padding:0 0 90px 0;}

header.top{background:var(--azul);color:#fff;padding:18px 20px 16px;border-radius:0 0 20px 20px;}
header.top .eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a9c2ea;margin:0 0 4px;}
header.top h1{margin:0;font-size:20px;line-height:1.25;}
header.top .code{margin-top:6px;font-size:13px;color:#c7d7f0;}
header.top a.volver{color:#c7d7f0;text-decoration:none;font-size:14px;display:inline-block;margin-bottom:8px;}

main{padding:16px;}
.card{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:18px;margin-bottom:16px;}
.card h2{font-size:14px;margin:0 0 14px;color:var(--azul);text-transform:uppercase;letter-spacing:.04em;}

label{display:block;font-size:14px;font-weight:600;margin:0 0 6px;}
input[type=text],input[type=date],textarea,select{
  width:100%;font-size:17px;padding:12px;border:1.5px solid var(--borde);
  border-radius:10px;margin-bottom:14px;font-family:inherit;background:#fff;color:var(--texto);
}
textarea{min-height:80px;resize:vertical;}

.item-row{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #eef1f5;}
.item-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.item-label{font-size:16px;font-weight:600;margin-bottom:4px;}
.item-tol{font-size:13px;color:var(--texto-suave);margin-bottom:10px;}

/* Datos por fila de los protocolos de temperatura: patente, m3, CI y CF.
   Dos columnas para que en un telefono los cuatro campos entren sin scroll
   lateral y sigan siendo comodos de tocar. */
.entradas{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:8px 0 12px;}
.entrada label{
  display:block;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;color:var(--texto-suave);margin-bottom:3px;
}
.entrada input{margin-bottom:0;padding:11px 10px;font-size:16px;}

/* El "A CONSIDERAR" de la planilla. En el papel va al pie; aquí va arriba de
   los ítems, porque hay que leerlo antes de medir, no después. */
.notas{
  background:#f6f8fb;border:1px solid var(--borde);border-left:4px solid var(--texto-suave);
  border-radius:8px;padding:12px 14px;margin:0 0 18px;
}
.notas-titulo{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--texto-suave);margin-bottom:6px;
}
/* Subtitulo dentro de la lista de items (p.ej. ENSAYOS). Separa un grupo de
   filas sin ser una fila que se marque. */
.item-seccion{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-suave);border-bottom:2px solid var(--borde);
  padding-bottom:6px;margin:4px 0 16px;
}

.notas ul{margin:0;padding-left:18px;}
.notas li{font-size:14px;line-height:1.5;margin-bottom:4px;}
.notas li:last-child{margin-bottom:0;}

.btn-group{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;}
.opt{
  padding:16px 4px;border-radius:10px;border:1.5px solid var(--borde);
  background:#fff;font-size:15px;font-weight:700;cursor:pointer;color:var(--texto-suave);
}
.opt.sel-si{background:var(--verde);border-color:var(--verde);color:#fff;}
.opt.sel-no{background:var(--rojo);border-color:var(--rojo);color:#fff;}
.opt.sel-na{background:var(--ambar);border-color:var(--ambar);color:#fff;}

.grid-prot{display:grid;grid-template-columns:1fr;gap:10px;}
.prot{
  display:block;background:#fff;border:1px solid var(--borde);border-radius:12px;
  padding:16px;text-decoration:none;color:var(--texto);
}
.prot .n{font-size:12px;color:var(--azul-claro);font-weight:700;letter-spacing:.06em;}
.prot .t{font-size:16px;font-weight:600;margin-top:2px;}
.prot.listo{border-color:var(--verde);background:#f2fbf5;}
.prot .estado{font-size:13px;color:var(--verde);font-weight:600;margin-top:6px;}

/* Tarjeta de un protocolo YA ENVIADO. No es un enlace al formulario: solo dice
   que esta hecho y ofrece verlo. La nota explica a donde ir si quedo mal, para
   que el supervisor no se quede sin salida. */
.nota-enviado{
  font-size:13px;color:var(--texto-suave);margin-top:8px;line-height:1.45;
}
.ver-envio{
  display:inline-block;margin-top:10px;padding:9px 14px;border-radius:9px;
  border:1.5px solid var(--verde);color:var(--verde);background:#fff;
  font-size:14px;font-weight:700;text-decoration:none;
}

/* Vista de solo lectura de un envio. */
.ver-campo{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid #eef1f5;font-size:15px;
}
.ver-campo:last-child{border-bottom:none;}
.ver-campo b{color:var(--texto-suave);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.02em;}
.ver-campo span{text-align:right;white-space:pre-wrap;}
.ver-seccion{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--azul-claro);margin:16px 0 8px;
}
.ver-estado{
  display:inline-block;padding:3px 10px;border-radius:99px;background:#eef1f5;
  font-size:13px;font-weight:700;color:var(--texto);
}
.ver-vacio{font-size:13px;color:var(--texto-suave);font-style:italic;}
.ver-datos{display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 6px;}
.ver-dato{font-size:13px;color:var(--texto-suave);}
.ver-obs{font-size:14px;margin-top:6px;white-space:pre-wrap;color:var(--texto-suave);}

.barra{
  position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--borde);
  padding:12px 16px;display:flex;gap:10px;justify-content:center;
}
.barra .inner{width:100%;max-width:680px;display:flex;gap:10px;}
button.enviar{
  flex:1;padding:16px;font-size:17px;font-weight:700;border:none;border-radius:12px;
  background:var(--azul);color:#fff;cursor:pointer;
}
button.enviar:disabled{background:#9aa6b8;}

.aviso{padding:12px 16px;border-radius:10px;margin:0 16px 16px;font-size:14px;}
.aviso.ok{background:#e8f6ed;color:var(--verde);border:1px solid #b9e3c8;}
.aviso.pend{background:#fdf3e3;color:var(--ambar);border:1px solid #f0d6a8;}
.aviso.err{background:#fdecea;color:var(--rojo);border:1px solid #f3c2bc;}

table.envios{width:100%;border-collapse:collapse;font-size:14px;}
table.envios th,table.envios td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--borde);}
table.envios th{color:var(--texto-suave);font-size:12px;text-transform:uppercase;}