/* ===== COTIZADOR ===== */
/* Los botones de las tarjetas ahora son <button>, no <a>:
   heredan .boton pero necesitan estas tres cosas. */
button.boton {
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

/* Concepto ya elegido: se marca en dorado para que se vea de un vistazo */
.cot-agregar.elegido {
  background-color: var(--dorado);
  border-color: var(--dorado);
  color: #0d0d0d;
}

.cot-agregar.elegido.boton-fantasma {
  background-color: transparent;
  border-color: var(--dorado);
  color: var(--dorado);
}

/* ===== BARRA FLOTANTE ===== */
.cot-barra {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 12px 12px 26px;
  border: 1px solid #2e2e2e;
  border-radius: 60px;
  background-color: rgba(20, 20, 20, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6);
  /* Escondida: fuera de pantalla y sin capturar clics */
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s;
}

.cot-barra.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.cot-resumen {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
}

.cot-cuenta {
  color: #8a8a8a;
  font-size: 0.74rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.cot-monto {
  color: var(--dorado);
  font-size: 1.25rem;
  font-weight: 600;
}

.cot-barra .boton {
  padding: 11px 24px;
  font-size: 0.88rem;
}

/* ===== PANEL LATERAL ===== */
.cot-fondo {
  position: fixed;
  inset: 0;
  z-index: 95;
  background-color: rgba(6, 6, 6, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.cot-fondo.abierto {
  opacity: 1;
  pointer-events: auto;
}

.cot-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 100dvh;
  background-color: #101010;
  border-left: 1px solid #262626;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cot-panel.abierto {
  transform: none;
}

.cot-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 26px 18px;
  border-bottom: 1px solid #1f1f1f;
}

.cot-encabezado .eyebrow {
  margin-bottom: 0;
}

.cot-cerrar {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid #2e2e2e;
  border-radius: 50%;
  color: #b0b0b0;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}

.cot-cerrar:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}

/* El cuerpo es lo único que hace scroll: el total y el botón de enviar
   se quedan siempre a la vista. */
.cot-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px;
}

.cot-grupo {
  margin: 18px 0 8px;
  color: var(--dorado);
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.cot-grupo:first-child {
  margin-top: 0;
}

/* --- Renglón de concepto --- */
.cot-renglon {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid #1c1c1c;
}

.cot-titulo {
  font-size: 0.92rem;
  color: #e8e8e8;
}

.cot-precio {
  grid-column: 2;
  grid-row: 1;
  color: var(--dorado);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.cot-cant {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cot-cant:empty {
  display: none;
}

.cot-cant button {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid #2e2e2e;
  border-radius: 50%;
  color: #c0c0c0;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.cot-cant button:hover {
  border-color: var(--dorado);
  color: var(--dorado);
}

.cot-cant b {
  min-width: 14px;
  color: #b0b0b0;
  font-size: 0.85rem;
  text-align: center;
}

.cot-quitar {
  grid-column: 2;
  justify-self: end;
  padding: 0 2px;
  background: none;
  border: 0;
  color: #5e5e5e;
  font-family: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s;
}

.cot-quitar:hover {
  color: #d9534f;
}

.cot-vacio {
  padding: 40px 0;
  color: #7a7a7a;
  font-size: 0.92rem;
  text-align: center;
}

.cot-vacio b {
  color: #b0b0b0;
}

/* --- Datos del cliente --- */
.cot-datos {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #1f1f1f;
}

.cot-datos label {
  display: grid;
  gap: 6px;
}

.cot-datos span {
  color: #8a8a8a;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}

.cot-datos input,
.cot-datos textarea {
  width: 100%;
  padding: 11px 14px;
  background-color: #171717;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #f0f0f0;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
  transition: border-color 0.3s;
}

.cot-datos input:focus,
.cot-datos textarea:focus {
  outline: none;
  border-color: var(--dorado);
}

/* El calendario nativo sale blanco sobre blanco en tema oscuro */
.cot-datos input[type="date"] {
  color-scheme: dark;
}

/* --- Pie fijo --- */
.cot-pie {
  padding: 20px 26px 24px;
  border-top: 1px solid #1f1f1f;
  background-color: #0c0c0c;
}

.cot-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cot-total span {
  color: #8a8a8a;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.cot-total strong {
  color: var(--dorado);
  font-family: var(--fuente-titulo);
  font-size: 1.9rem;
  font-weight: 600;
}

.cot-enviar {
  width: 100%;
}

.cot-enviar:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  background-color: #f0f0f0;
  border-color: #f0f0f0;
}

.cot-nota {
  margin-top: 12px;
  color: #6e6e6e;
  font-size: 0.76rem;
  line-height: 1.5;
  text-align: center;
}

/* ===== AVISO FLOTANTE ===== */
.cot-aviso {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 91;
  padding: 11px 22px;
  border: 1px solid rgba(176, 141, 87, 0.45);
  border-radius: 50px;
  background-color: rgba(26, 22, 16, 0.96);
  color: #e8ddc9;
  font-size: 0.85rem;
  white-space: nowrap;
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s, opacity 0.35s;
}

.cot-aviso.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* --- Aviso destacado: el que manda a los extras --- */
/* Abajo se perdía: chiquito, de un renglón, hasta el fondo de la
   pantalla y peleando con la barra del cotizador, que aparece en ese
   mismo momento. Este sale ARRIBA, justo donde acaba de aterrizar el
   scroll, con el título en dorado y el detalle debajo. */
.cot-aviso.destacado {
  top: 92px;
  bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Ancho fijo, no max-width. Con position:fixed y left:50% el navegador
     solo le ofrece de la mitad de la pantalla hacia la derecha, y como
     aquí el texto sí puede partirse (white-space: normal), en celular se
     encogía a una columna de 188px. El aviso chico se salva porque va en
     nowrap y no le queda de otra más que ensancharse. */
  width: min(470px, calc(100vw - 32px));
  padding: 18px 28px;
  border-radius: 16px;
  border-color: rgba(176, 141, 87, 0.7);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65),
    0 0 0 6px rgba(176, 141, 87, 0.07);
  white-space: normal;
  text-align: center;
  /* Entra desde arriba y más despacio: si aparece de golpe, ni se lee. */
  transform: translate(-50%, -14px);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.55s;
}

/* Va después de .cot-aviso.visible a propósito: si no, el transform de
   aquí arriba le gana al de la entrada y el aviso nunca baja a su sitio. */
.cot-aviso.destacado.visible {
  transform: translate(-50%, 0);
}

.cot-aviso.destacado strong {
  color: var(--dorado);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.cot-aviso.destacado span {
  color: #cec3ae;
  font-size: 0.89rem;
  line-height: 1.5;
}

/* ===== PANTALLAS CHICAS ===== */
@media (max-width: 640px) {
  .cot-barra {
    left: 14px;
    right: 14px;
    bottom: 14px;
    gap: 12px;
    padding: 10px 10px 10px 20px;
    transform: translate(0, 140%);
  }

  .cot-barra.visible {
    transform: none;
  }

  .cot-barra .boton {
    padding: 10px 18px;
    font-size: 0.82rem;
  }

  .cot-panel {
    width: 100%;
    border-left: 0;
  }

  .cot-aviso {
    max-width: calc(100vw - 32px);
    white-space: normal;
    text-align: center;
  }

  /* En celular la sección arranca más arriba: el aviso se sube con ella */
  .cot-aviso.destacado {
    top: 70px;
    padding: 16px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cot-barra,
  .cot-panel,
  .cot-fondo,
  .cot-aviso {
    transition: none;
  }
}