/* DeMark, sitio publico: estados de los formularios y paginas de error.
   Lo carga cada plantilla que lo usa (contacto, reservar, gracias, 404, 500)
   desde {% block cabeza %}; va despues de sitio.css y solo afina lo suyo.

   Reparto con transiciones.css: alli vive el filete que se ilumina en foco
   (.campo::after con :focus-within). Aqui, el error, lo invalido y el envio;
   nada de :focus salvo el color del filete cuando el campo es invalido.

   --sello es el tono de lacre de los avisos. Si la hoja de la identidad no lo
   define, vale el mismo que --error: 7,4:1 sobre --fondo, 7,6:1 sobre
   --superficie. */

/* ---- campos invalidos ---- */
.sitio .form-sitio .campo.invalido input,
.sitio .form-sitio .campo.invalido textarea,
.sitio .form-sitio .campo.invalido select,
.sitio .form-sitio [aria-invalid="true"]:not([type="hidden"]) {
  border-color: var(--sello, #b3261e);
}
.sitio .form-sitio .campo.invalido input:focus,
.sitio .form-sitio .campo.invalido textarea:focus,
.sitio .form-sitio [aria-invalid="true"]:focus {
  border-color: var(--sello, #b3261e); outline-color: var(--sello, #b3261e);
}
/* El filete de foco de transiciones.css (background-image sobre el campo),
   en lacre si el campo es invalido. Solo la imagen: el tamano y la
   transicion siguen siendo suyos. Mismos :not() que alli: con menos peso
   perdia contra su filete azul aunque esta hoja va despues. */
.sitio .form-sitio .campo.invalido input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.sitio .form-sitio .campo.invalido textarea:focus {
  background-image: linear-gradient(var(--sello, #b3261e), var(--sello, #b3261e));
}
.sitio .form-sitio .campo.invalido > label { color: var(--sello, #b3261e); }

/* Mensaje bajo el campo, en mono con un punto de lacre delante. Vacio no
   ocupa sitio: el elemento existe siempre para que aria-describedby tenga a
   donde apuntar. Mismo aspecto para los que pinta el servidor. */
.sitio .form-sitio .error {
  display: flex; align-items: baseline; gap: 10px; margin: 0;
  font-family: var(--fuente-mono); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: .02em;
  color: var(--sello, #b3261e);
}
.sitio .form-sitio .error::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translateY(-2px);
}
.sitio .form-sitio .error:empty { display: none; }
/* El error general (sello caducado, limite, fallo del servidor) y el de la
   reserva por API: una franja con filete de lacre a la izquierda. */
.sitio .form-sitio .form-error { padding: 14px 18px; background: var(--fondo-2); border-left: 2px solid var(--sello, #b3261e); }
.sitio .form-sitio .error-hueco { margin-top: 14px; }

/* ---- resumen de errores ----
   Siempre en el DOM (aria-live necesita existir antes de hablar); vacio no
   pinta caja. */
.sitio .form-resumen:empty { display: none; }
.sitio .form-resumen {
  padding: 22px 24px; background: var(--fondo-2); border: 1px solid var(--linea); border-left: 2px solid var(--sello, #b3261e);
  border-radius: var(--radio);
}
.sitio .form-resumen:focus { outline: none; }
.sitio .form-resumen .form-resumen-titulo {
  margin: 0 0 12px; font-family: var(--fuente-mono); font-size: 14px; line-height: 1.4; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sello, #b3261e);
}
.sitio .form-resumen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sitio .form-resumen li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--tinta); }
.sitio .form-resumen li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--sello, #b3261e); }
.sitio .form-resumen a { color: var(--tinta); text-decoration-color: var(--sello, #b3261e); }
.sitio .form-resumen a:hover { color: var(--verde); }
/* Corregido antes de volver a enviar: se tacha, no se quita (quitarlo moveria el boton). */
.sitio .form-resumen li.resuelto::before { background: var(--texto-3); }
.sitio .form-resumen li.resuelto a { color: var(--texto-3); text-decoration: line-through 1px var(--texto-3); }

/* ---- envio en curso ----
   El boton en color pasa a contorno: el punto que pulsa es azul y sobre el
   verde pastel del relleno no se veria. Deshabilitado a proposito, pero sin
   la atenuacion de :disabled, que se leeria como "no se puede". */
.sitio .boton.enviando,
.sitio .boton.enviando:hover,
.sitio .boton.enviando:disabled {
  background-color: transparent; color: var(--tinta); border-color: var(--azul); box-shadow: none; opacity: 1; cursor: progress;
}
.sitio .boton .punto-envio {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--azul);
  box-shadow: 0 0 0 0 rgba(43, 106, 159, .5); animation: punto-envio 1.1s ease-in-out infinite;
}
@keyframes punto-envio {
  0%   { transform: scale(.7); box-shadow: 0 0 0 0 rgba(43, 106, 159, .5); }
  60%  { transform: scale(1);  box-shadow: 0 0 0 8px rgba(43, 106, 159, 0); }
  100% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(43, 106, 159, 0); }
}

/* ---- gracias: el numero de ticket como un sello ---- */
.sitio .gracias-sello {
  display: block; width: fit-content; max-width: 100%; margin: clamp(40px, 5vw, 56px) 0; padding: clamp(22px, 3vw, 34px) clamp(28px, 4vw, 52px);
  border: 1px solid var(--azul); border-radius: var(--radio); outline: 1px solid var(--linea); outline-offset: 6px;
  box-shadow: var(--halo); transform-origin: 50% 55%;
}
.sitio .gracias-sello > div { display: grid; gap: 14px; }
.sitio .gracias-sello dt {
  margin: 0; font-family: var(--fuente-mono); font-size: 14px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--azul);
}
.sitio .gracias-sello dd {
  margin: 0; font-family: var(--fuente-titular); font-weight: 500; font-size: clamp(72px, 12vw, 152px); line-height: .9;
  letter-spacing: -.02em; color: var(--verde); font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere;
}
.sitio .gracias-sello + .gracias-accion { margin-top: 0; }

/* ---- 404 y 500 ---- */
.sitio .error-pagina .error-codigo {
  display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 28px);
  margin: 0 0 clamp(24px, 3vw, 40px); color: var(--verde);
}
.sitio .error-pagina .error-codigo::after {
  content: ""; flex: 1 1 auto; max-width: 320px; height: 1px; margin-bottom: .14em; background: var(--filete-fila);
}
.sitio .error-pagina .intro { max-width: 56ch; }
.sitio .error-acciones { display: flex; flex-wrap: wrap; gap: 16px; margin: clamp(32px, 4vw, 48px) 0 0; }
@media (max-width: 640px) {
  .sitio .error-pagina .error-codigo::after { display: none; }
  .sitio .error-acciones .boton, .sitio .error-acciones .boton-suave { flex: 1 1 100%; justify-content: center; }
}

/* El 500 no carga la cabecera ni el pie de base.html: una sola columna con
   la marca arriba, sin JS. */
.sitio.error-solo { min-height: 100vh; display: flex; flex-direction: column; }
.sitio.error-solo main { flex: 1 0 auto; }
.sitio .error-solo-cabecera { border-bottom: 1px solid var(--linea); }
.sitio .error-solo-cabecera .cabecera-fila { height: 76px; }
.sitio .error-solo-pie { padding: 28px 0; border-top: 1px solid var(--linea); color: var(--texto-2); font-size: 14px; }
.sitio .error-solo-pie p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .sitio .boton .punto-envio { animation: none; transform: none; }
}