/*
 * El libro de reclamaciones virtual: la hoja oficial del Anexo 1, en pantalla.
 *
 * El documento (`.hojaof` y sus `.of-*`) es gris y negro a propósito: tiene
 * que parecerse a la hoja que genera Indecopi, no a la marca del sitio. El
 * resto de la página sí usa el color de marca (`--marca`), pero solo fuera
 * de la hoja.
 *
 * Sin modo oscuro a propósito: el resto del sitio (index.php, admin/,
 * delivery/) tampoco lo tiene, y una hoja "oficial" con fondo oscuro se aleja
 * todavía más del papel que imita.
 */

:root{
  --marca:      #0056a1;
  --marca-suave:#e7f0f9;
  --crema:      #f5f1e8;
  --panel:      #ffffff;
  --tinta:      #201a15;
  --tinta-med:  #5d554d;
  --tinta-sua:  #8a8179;
  --linea:      #ddd6c9;
  --linea-sua:  #eae4d8;

  --doc-borde:  #6f6a63;
  --doc-barra:  #c9c5be;
  --doc-tinta:  #16130f;
  --doc-fondo:  #ffffff;
  --doc-campo:  #fbfaf7;

  --ok:         #1f6b45;
  --ok-fondo:   #eaf5ef;
  --ok-borde:   #bfdfcd;
  --alerta:     #9c2f24;
  --alerta-fondo:#fbecea;
  --alerta-borde:#e8c2bc;

  --r-sm: 5px; --r-md: 10px; --r-lg: 16px;
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font:400 15px/1.55 var(--ui); -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- cabecera y pie del sitio ---------- */
.rq-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px clamp(14px,4vw,24px);
  background:var(--panel); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:5;
}
.rq-marca{font-weight:800; font-size:17px; color:var(--marca); text-decoration:none; letter-spacing:-.01em; display:flex; align-items:center}
/* El logo manda su propia altura; el ancho se limita para que un logo muy
   apaisado no empuje al «Volver a la carta» fuera de la pantalla en móvil. */
.rq-logo{display:block; height:auto; width:auto; max-height:40px; max-width:52vw; object-fit:contain}
.rq-volver{font-size:13.5px; color:var(--tinta-med); text-decoration:none; font-weight:600}
.rq-volver:hover{color:var(--marca)}

.rq-foot{padding:22px clamp(14px,4vw,24px) 40px; text-align:center}
.rq-foot p{margin:0; font-size:12.5px; color:var(--tinta-sua)}

/* ---------- contenido ---------- */
.rq-main{max-width:46rem; margin:0 auto; padding:clamp(20px,4vw,36px) clamp(14px,4vw,24px) 60px}
.rq-main-min{max-width:34rem; padding-top:15vh}
.rq-h1{font-size:clamp(22px,4vw,28px); letter-spacing:-.01em; margin:0 0 10px; color:var(--tinta)}
.rq-intro{color:var(--tinta-med); margin:0 0 22px; font-size:14.5px}

.rq-alerta{
  background:var(--alerta-fondo); border:1px solid var(--alerta-borde); color:var(--alerta);
  padding:12px 14px; border-radius:var(--r-md); font-weight:600; font-size:14px; margin-bottom:18px;
}

.caja{background:var(--panel); border:1px solid var(--linea); border-radius:var(--r-lg); padding:22px}
.caja h1{font-size:19px; margin:0 0 8px}
.caja p{margin:0; color:var(--tinta-med)}
.caja-alerta{border-color:var(--alerta-borde)}
.caja-alerta h1{color:var(--alerta)}
.caja-ok{border-color:var(--ok-borde)}
.caja-ok h1{color:var(--ok)}

/* ---------- selector de local ---------- */
.sel-local{margin-bottom:14px}
.sel-local label{font:600 13px/1 var(--ui); display:block; margin-bottom:6px}
.sel-local select{
  width:100%; padding:10px 12px; border:1.5px solid var(--marca); border-radius:var(--r-sm);
  font:500 14px/1.3 var(--ui); background:var(--panel); color:var(--tinta);
}
.sel-local select:focus{outline:2px solid var(--marca); outline-offset:1px}
.sel-pista{font:400 12px/1.5 var(--ui); color:var(--tinta-sua); margin:6px 0 0}

/* ---------- la hoja oficial ---------- */
.doc{margin-top:6px}
.hojaof{
  border:1px solid var(--doc-borde); background:var(--doc-fondo); color:var(--doc-tinta);
  font:400 13px/1.4 var(--ui);
}

.of-top{display:grid; grid-template-columns:minmax(0,1fr) 12rem; border-bottom:1px solid var(--doc-borde)}
.of-tit,.of-tit2{background:var(--doc-barra); font-weight:700; font-size:13px; text-align:center; padding:8px}
.of-tit{border-right:1px solid var(--doc-borde)}

.of-fecha{display:grid; grid-template-columns:minmax(0,1fr) 12rem; border-bottom:1px solid var(--doc-borde)}
.of-fecha > div{padding:7px 10px}
.of-fecha > div:first-child{border-right:1px solid var(--doc-borde)}
.of-fecha b{font-weight:600; margin-right:6px}
.num-hoja{font-family:var(--mono); font-weight:700}
.num-hoja.pendiente{font-family:var(--ui); font-weight:500; font-style:italic; color:var(--tinta-sua)}

.of-prov{
  padding:9px 10px; border-bottom:1px solid var(--doc-borde); display:grid;
  grid-template-columns:6.5rem minmax(0,1fr); gap:3px 8px; font-size:12.5px;
}
.of-prov b{font-weight:600}
.of-prov span{font-weight:600}
.rellenado{background:var(--marca-suave); padding:1px 5px; border-radius:3px}

.of-sec{
  background:var(--doc-barra); font-weight:700; font-size:11.5px; padding:6px 10px;
  letter-spacing:.02em; border-bottom:1px solid var(--doc-borde); border-top:1px solid var(--doc-borde);
}

.of-fila{display:grid; grid-template-columns:9rem minmax(0,1fr); border-bottom:1px solid var(--doc-borde)}
.of-fila.dos{grid-template-columns:9rem minmax(0,1fr) 6.5rem minmax(0,1fr)}
.of-et{
  padding:8px 10px; font-weight:600; font-size:11.5px;
  border-right:1px solid var(--doc-borde); display:flex; align-items:center;
}
.of-et label{cursor:pointer}
.of-et-borde{border-left:1px solid var(--doc-borde)}
.of-fila.et-mini .of-et{font-size:10.5px; line-height:1.3}
.of-in{padding:6px 8px; background:var(--doc-campo); display:flex; align-items:center}
.of-vacio{color:var(--tinta-sua)}
.of-multilinea{white-space:pre-wrap; word-break:break-word}

.campo{
  width:100%; border:1px solid var(--linea); border-radius:3px; background:var(--panel);
  padding:6px 8px; font:400 13px/1.35 var(--ui); color:var(--doc-tinta);
}
.campo:focus{outline:2px solid var(--marca); outline-offset:0; border-color:var(--marca)}
.campo.alto{min-height:5.5rem}
textarea.campo{resize:vertical}
.campo::placeholder{color:var(--tinta-sua)}

.of-marcas{display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:7px 10px; border:0; margin:0}
.of-marcas label{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; cursor:pointer}
.of-marcas input[type=radio]{accent-color:var(--marca); width:15px; height:15px; margin:0}
.of-nota{font-size:10.5px; color:var(--tinta-sua); font-weight:400}
.marca-fija{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:2px 0 2px 22px; position:relative;
}
.marca-fija::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border:1px solid var(--doc-borde); border-radius:2px; background:var(--panel);
}
.marca-fija.on::before{background:var(--marca); border-color:var(--marca)}
.marca-fija.on::after{
  content:"\2713"; position:absolute; left:1px; top:50%; transform:translateY(-56%);
  width:14px; text-align:center; color:#fff; font-size:10px; line-height:14px;
}

.conforme{padding:9px 10px; display:flex; gap:8px; align-items:flex-start; border-bottom:1px solid var(--doc-borde); font-size:11.5px}
.conforme input[type=checkbox]{accent-color:var(--marca); width:16px; height:16px; margin-top:1px; flex:0 0 auto}
.conforme label{cursor:pointer}
.caja-marca{width:14px; height:14px; border:1px solid var(--doc-borde); border-radius:2px; background:var(--panel); display:inline-block; position:relative; flex:0 0 auto; margin-top:1px}
.caja-marca.on{background:var(--marca); border-color:var(--marca)}
.caja-marca.on::after{content:"\2713"; color:#fff; font-size:10px; position:absolute; inset:0; display:grid; place-items:center}

.of-pie{font-size:10.5px; color:var(--tinta-med); padding:8px 10px; line-height:1.5}
.of-pie b{color:var(--doc-tinta)}

/* ---------- enviar / botones ---------- */
.enviar-fila{margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.enviar-nota{font-size:12.5px; color:var(--tinta-sua)}
.btn{
  font:600 14px/1 var(--ui); padding:11px 18px; border-radius:var(--r-sm);
  border:1px solid var(--marca); background:var(--marca); color:#fff; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-sec{background:var(--panel); color:var(--marca)}

/* ---------- constancia ---------- */
.const-cab{
  background:var(--panel); border:1px solid var(--ok-borde); border-radius:var(--r-lg);
  padding:22px; text-align:center; margin-bottom:4px;
}
.const-cab .tick{
  width:42px; height:42px; border-radius:50%; background:var(--ok-fondo); border:1px solid var(--ok-borde);
  color:var(--ok); display:grid; place-items:center; margin:0 auto 10px; font-size:20px;
}
.const-cab h2{font:600 18px/1.3 var(--ui); margin:0 0 6px; color:var(--tinta)}
.const-cab p{font-size:13.5px; color:var(--tinta-med); margin:6px 0 0}
.const-num{font:700 18px/1 var(--mono); color:var(--marca); display:block; margin:6px 0 0}
.const-correo-mal{
  background:var(--alerta-fondo); border:1px solid var(--alerta-borde); color:var(--alerta);
  border-radius:var(--r-sm); padding:10px 12px; margin-top:10px !important; text-align:left;
}

/* ---------- el campo trampa contra bots ----------
 * Fuera de pantalla con CSS, no con display:none ni hidden: los bots que
 * miran el HTML saltan los campos ocultos de la forma obvia.
 *
 * Y por eso mismo Chrome lo considera VISIBLE y lo autorrellena si el nombre
 * o la etiqueta le suenan. El campo se llama `confirmar_enlace` justamente
 * para que no le suenen; no le pongas aquí un nombre de clase que lo delate
 * ni le cambies el nombre en el HTML sin mirar reclamaciones.php. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .of-top,.of-fecha,.of-prov{grid-template-columns:1fr}
  .of-top .of-tit{border-right:0; border-bottom:1px solid var(--doc-borde)}
  .of-fecha > div:first-child{border-right:0; border-bottom:1px solid var(--doc-borde)}
  .of-fila,.of-fila.dos{grid-template-columns:1fr}
  .of-et,.of-et-borde{border-right:0; border-left:0 !important; border-bottom:1px solid var(--linea-sua)}
}

/* ---------- impresión ----------
 * Imprimir es obligatorio por reglamento: la constancia tiene que salir
 * bien en papel, no solo en pantalla. Se deja SOLO la hoja —sin cabecera,
 * sin botones, sin nada más— y se fuerzan los colores de fondo, que Chrome y
 * Firefox no imprimen por defecto.
 */
@media print{
  body{background:#fff}
  .no-imprimir{display:none !important}
  body *{visibility:hidden}
  #hoja-imprimir, #hoja-imprimir *{visibility:visible}
  #hoja-imprimir{position:absolute; inset:0; width:100%; margin:0; padding:0}
  .hojaof{border-color:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .of-tit,.of-tit2,.of-sec{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .rellenado{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}