/* Avisos al movil de la clienta sobre SU CITA.
   Se usa en dos sitios con fondos distintos: la ventana de reservar de la
   mini-web (fondo oscuro) y la pagina de gestionar la cita (fondo claro).
   Por eso cada color sale de una variable que se cambia con el tema. */

.acxc {
  --acxc-borde: rgba(212,175,55,0.4);
  --acxc-fondo: rgba(212,175,55,0.10);
  --acxc-titulo: #f5efe6;
  --acxc-texto: #cfc2ab;
  --acxc-boton-si-fondo: #d4af37;
  --acxc-boton-si-texto: #2a2217;
  --acxc-boton-no-texto: #e8c56a;
  --acxc-ok-borde: rgba(124,255,155,0.45);
  --acxc-ok-fondo: rgba(124,255,155,0.08);
  --acxc-ok-texto: #bfe9c8;

  margin-top: 12px;
  text-align: left;
}

/* El tema claro: la pagina de gestionar la cita. */
.acxc[data-tema="claro"] {
  --acxc-borde: #e6d2a4;
  --acxc-fondo: #fdf6e4;
  --acxc-titulo: #6b5516;
  --acxc-texto: #70644a;
  --acxc-boton-si-fondo: #c99a2e;
  --acxc-boton-si-texto: #fff;
  --acxc-boton-no-texto: #8a6a12;
  --acxc-ok-borde: #bcd9bc;
  --acxc-ok-fondo: #eaf5ea;
  --acxc-ok-texto: #2e5d2e;
}

.acxc-card {
  background: var(--acxc-fondo);
  border: 1px solid var(--acxc-borde);
  border-radius: 12px;
  padding: 13px 14px;
}

.acxc-card h4 { color: var(--acxc-titulo); font-size: 14px; margin: 0 0 4px; font-weight: 700; }
.acxc-card p { color: var(--acxc-texto); font-size: 12.5px; line-height: 1.45; margin: 0 0 10px; }

.acxc-botones { display: flex; gap: 8px; flex-wrap: wrap; }

.acxc-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  background: var(--acxc-boton-si-fondo);
  color: var(--acxc-boton-si-texto);
}

.acxc-btn.sec {
  background: transparent;
  border-color: var(--acxc-borde);
  color: var(--acxc-boton-no-texto);
  font-weight: 600;
}

.acxc-btn[disabled] { opacity: .6; cursor: default; }

/* Ya esta encendido: confirmacion y la salida para apagarlo. */
.acxc-hecho {
  background: var(--acxc-ok-fondo);
  border: 1px solid var(--acxc-ok-borde);
  border-radius: 12px;
  padding: 11px 13px;
  color: var(--acxc-ok-texto);
  font-size: 12.5px;
  line-height: 1.45;
}

.acxc-apagar {
  display: inline-block;
  margin-top: 7px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: inherit;
  opacity: .8;
  text-decoration: underline;
  cursor: pointer;
}

/* El caso raro: bloqueo las notificaciones en el propio navegador. */
.acxc-bloqueado {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--acxc-texto);
}