/* H7 · Cotizaciones (/viajes/<id>/opciones): las opciones A, B y C lado a lado, en el lenguaje «Bitácora».
   Movimiento con sentido (diseño §10): las columnas caen solo en la primera pintada ([data-entrada]; preguntar
   o editar repinta sin animarlas), y el sello cae solo cuando una opción se acaba de aprobar; «reducir
   movimiento» lo apaga portal.css para todo el portal. */
.cotizaciones { display: grid; gap: 22px; }
.cotizaciones__cargando { color: var(--gris); }
.cotizaciones__cabeza { display: grid; gap: 6px; }
.cotizaciones__rotulo { font: 600 10px var(--letra-codigo); letter-spacing: .16em; text-transform: uppercase; color: var(--oxido); }
.cotizaciones__cabeza h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; overflow-wrap: anywhere; }
.cotizaciones__ayuda { color: var(--gris); max-width: 64ch; }
.cotizaciones__estado { justify-self: start; }
.cotizaciones__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.cotizaciones__opcion { position: relative; display: grid; gap: 12px; }
.cotizaciones__opcion[data-entrada] { animation: aparecer .35s var(--suave) both; }
.cotizaciones__opcion[data-entrada]:nth-child(2) { animation-delay: 60ms; }
.cotizaciones__opcion[data-entrada]:nth-child(3) { animation-delay: 120ms; }
.cotizaciones__opcion[data-aprobada] { box-shadow: inset 0 0 0 2px var(--verde), var(--sombra); }
.cotizaciones__opcion-cabeza { display: flex; align-items: center; gap: 10px; padding-right: 76px; }
.cotizaciones__opcion-cabeza h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.cotizaciones__letra { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #F6F0E4; font: italic 600 18px var(--letra-titulo); }
.cotizaciones__nota { color: var(--gris); white-space: pre-line; overflow-wrap: anywhere; }
.cotizaciones__servicios { list-style: none; margin: 0; padding: 0; display: grid; }
.cotizaciones__servicio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-top: 1px dashed rgba(27, 36, 51, .18); }
.cotizaciones__tipo { grid-column: 1 / -1; font: 600 9.5px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.cotizaciones__nombre { font-weight: 600; overflow-wrap: anywhere; }
.cotizaciones__precio { font: 500 13px var(--letra-codigo); white-space: nowrap; }
.cotizaciones__detalle { grid-column: 1 / -1; color: var(--gris); font-size: 12.5px; overflow-wrap: anywhere; }
.cotizaciones__vacia { color: var(--gris); font-size: 13.5px; }
.cotizaciones__totales { margin: 0; padding-top: 10px; border-top: 1.5px solid var(--tinta); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
.cotizaciones__totales dt { grid-row: 1 / span 9; font-weight: 700; }
.cotizaciones__totales dt small { display: block; font-weight: 400; font-size: 11.5px; color: var(--gris); }
.cotizaciones__totales dd { margin: 0; text-align: right; font: 600 16px var(--letra-codigo); }
.cotizaciones__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cotizaciones__pregunta { display: grid; gap: 10px; padding: 12px; border-radius: var(--radio-chico); background: rgba(179, 67, 43, .07); animation: aparecer .25s var(--suave) both; }
.cotizaciones__editar { display: grid; gap: 12px; }
.cotizaciones__nueva { background: transparent; box-shadow: none; border: 1.5px dashed rgba(27, 36, 51, .35); }
.cotizaciones__sello {
  position: absolute; top: 14px; right: 14px; width: 74px; height: 74px; border-radius: 50%;
  border: 2.5px solid var(--verde); color: var(--verde); display: grid; place-items: center;
  font: 700 10px var(--letra-texto); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-10deg); opacity: .92;
}
.cotizaciones__sello::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed currentColor; }
.cotizaciones__sello[data-recien] { animation: sellar .7s cubic-bezier(.2, .9, .25, 1.25) both; }
.cotizaciones__intereses ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cotizaciones__interes { display: grid; gap: 6px; padding: 10px 0; border-top: 1px dashed rgba(27, 36, 51, .18); }
.cotizaciones__interes small { margin-left: 6px; color: var(--gris); font: 500 11.5px var(--letra-codigo); }
.cotizaciones__interes .boton { justify-self: start; }
.cotizaciones__nuevo { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--oxido); color: #FFFDF8; font: 700 9.5px var(--letra-codigo); letter-spacing: .12em; text-transform: uppercase; }
.cotizaciones__mensaje { margin: 0; padding-left: 12px; border-left: 2px solid var(--laton-claro); font-style: italic; white-space: pre-line; overflow-wrap: anywhere; }
.cotizaciones__comunes h2 { font-size: 18px; }
@media (max-width: 720px) {
  .cotizaciones__cabeza h1 { font-size: 30px; }
  .cotizaciones__botones .boton { flex: 1 1 auto; }
}