@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Poppins:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
@font-face {
  font-family: "Pristina";
  font-style: normal;
  font-weight: normal;
  src: local("Pristina"), url("/fonts/PRISTINA.woff") format("woff");
}
/*link de descarga la app que ahora es registrate se pone en blanco el texto, con esto lo dejamos fijo ya que siempre tiene fondo morado*/
#tab-71.nav-link {
  color: #FFFFFF !important;
}

/* BLOG */
.listimage img {
  width: 100%;
}

.iti__flag {
  background-image: url("Scripts/intl-tel/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("Scripts/intl-tel/img/flags@2x.png");
  }
}
.iti__arrow {
  border: none;
}

/* Firefox */
html {
  scrollbar-color: #B225F4 #f1f1f1;
}

/* WebKit and Chromiums */
::-webkit-scrollbar {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #B225F4;
}

@media screen and (min-width: 768px) {
  .fa-10x {
    font-size: 10em !important;
  }
}
.fa-10x {
  font-size: 7em;
}

@media screen and (max-width: 768px) {
  .ui-dialog[role=dialog] {
    width: 55% !important;
    left: 30% !important;
  }
  .modal-dialog {
    width: 70% !important;
    left: 25% !important;
  }
}
html {
  scroll-behavior: smooth;
  width: 100%;
}

html, body, #siteWrapper {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}
html p, html span, html td, body p, body span, body td, #siteWrapper p, #siteWrapper span, #siteWrapper td {
  font-family: "Poppins", sans-serif;
  color: #000000;
  font-size: 18px;
  line-height: 27px;
}
html a, body a, #siteWrapper a {
  font-family: "Poppins", sans-serif;
}

.dnnModuleDigitalAssetsGrid {
  height: 700px !important;
}

#dnnModuleDigitalAssetsSelectionToolbar, .dnnModuleDigitalAssetsGrid > table > thead > tr {
  min-height: 40px !important;
}

/* FONTS */
.font-title {
  font-family: "Audiowide", cursive;
}

.font-primary {
  font-family: "Poppins", sans-serif;
}

.font-pristina {
  font-family: Pristina !important;
}

.font-anton {
  font-family: "Anton", sans-serif;
}

.font-audiowide {
  font-family: "Audiowide", cursive;
}

/* FONT SIZES */
.letter-spacing-5 {
  letter-spacing: 5px;
}

.letter-spacing-10 {
  letter-spacing: 10px;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.font-size-small {
  font-size: 14px !important;
  line-height: 22px !important;
}

.font-size-normal {
  font-size: 18px !important;
  line-height: 27px !important;
}

.font-size-medium {
  font-size: 22px !important;
  line-height: 30px !important;
}

.font-size-big-medium {
  font-size: 30px !important;
  line-height: 40px !important;
}

.font-size-big {
  font-size: 40px !important;
  line-height: 50px !important;
}

.font-size-extra-big {
  font-size: 50px !important;
  line-height: 80px !important;
}

@media screen and (min-width: 991px) {
  .font-size-lg-extra-big {
    font-size: 50px !important;
    line-height: 80px !important;
  }
}
/* TEXT COLOR */
.texto-primary {
  color: #B225F4 !important;
}

.texto-yellow {
  color: #FCFF6D !important;
}

.texto-gray {
  color: #999999 !important;
}

.texto-black {
  color: #000000 !important;
}

.texto-white {
  color: #FFFFFF !important;
}

.texto-red {
  color: #D9534F !important;
}

/* BACKGROUNDS */
.background-primary {
  background-color: #B225F4;
}

.background-primary-light {
  background-color: #c356f6;
}

.background-gray {
  background-color: #E1E3EF !important;
}

.background-dark-gray {
  background-color: #999999 !important;
}

.background-yellow {
  background-color: #f0ad4e !important;
}

.background-blue {
  background-color: #06b8fe !important;
}

.background-dark {
  background-color: #191919;
}

.background-black {
  background-color: #000000;
}

.background-white {
  background-color: #FFFFFF;
}

.background-green {
  background-color: #00BD00 !important;
}

.background-red {
  background-color: #D9534F !important;
}

.background-space-1 {
  background: url(/portals/0/images/backgrounds/bg-pago-1.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-galaxy-1 {
  background: url(/portals/0/images/backgrounds/bg-galaxy.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-horoscopo-1 {
  background: url(/portals/0/images/backgrounds/bg-horoscopo-1.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-cartas {
  background: url(/portals/0/images/backgrounds/bg-cartas.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-runas {
  background: url(/portals/0/images/backgrounds/bg-runas.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-amor {
  background: url(/portals/0/images/backgrounds/bg-amor.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-trabajo {
  background: url(/portals/0/images/backgrounds/bg-trabajo.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-salud {
  background: url(/portals/0/images/backgrounds/bg-salud.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-espiritual {
  background: url(/portals/0/images/backgrounds/bg-espiritual.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-dinero {
  background: url(/portals/0/images/backgrounds/bg-dinero.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-posos-cafe {
  background: url(/portals/0/images/backgrounds/bg-cafe.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-angeles {
  background: url(/portals/0/images/backgrounds/bg-angeles.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-astrologico {
  background: url(/portals/0/images/backgrounds/bg-astrologico.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-mail {
  background: url(/portals/0/images/backgrounds/bg-mail.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-article-promotion {
  background: url(/portals/0/images/backgrounds/bg-article-promotion.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.background-article {
  background: url(/Portals/0/Images/backgrounds/bg-article.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.cursor-pointer {
  cursor: pointer;
}

/* BUTTONS */
.button-primary {
  background: #B225F4;
  border-radius: 8px;
  /* Rev 4.0 item 5.1: <button class="button-primary"> inherited the
     browser's default button border (a 2px outset frame that renders
     dark grey/black under the corporate purple). The class was defined
     for <a> tags originally; when used on a real <button> the inherited
     border showed up. Reset it explicitly so both anchor and button
     variants render identically. */
  border: none;
  outline: none;
  padding: 10px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
.button-primary.aspNetDisabled {
  background-color: #999999;
}
.button-primary:hover, .button-primary:visited, .button-primary:focus, .button-primary:active {
  color: #FFFFFF;
}

.button-secondary {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #B225F4;
  padding: 10px;
  color: #B225F4;
  text-decoration: none;
}
.button-secondary:hover, .button-secondary:visited, .button-secondary:focus, .button-secondary:active {
  color: #B225F4;
}

.button-primary-gradient {
  background: linear-gradient(89.11deg, #4B45DA 4.84%, #BA20D7 92.04%);
  border-radius: 60px;
}
.button-primary-gradient:hover, .button-primary-gradient:visited, .button-primary-gradient:focus, .button-primary-gradient:active {
  color: #FFFFFF !important;
}

/* BORDERS */
.border-start {
  border-left: 2px solid #B225F4 !important;
}

.border-top {
  border-top: 2px solid #B225F4 !important;
}

.border-end {
  border-right: 2px solid #B225F4 !important;
}

.border-bottom {
  border-bottom: 2px solid #B225F4 !important;
}

.border {
  border: 2px solid #B225F4 !important;
}

@media screen and (min-width: 991px) {
  .border-lg-start {
    border-left: 2px solid #B225F4 !important;
  }
}
/* OTHERS */
.big-on-hover {
  transition: transform 0.2s;
}
.big-on-hover:hover {
  transform: scale(1.15);
}

.overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1001;
  background-color: black;
  opacity: 0.7;
}

.pager .page-item {
  margin-top: 0.5rem;
}
.pager .page-item a {
  width: 30px;
  height: 30px;
  background-color: #FFFFFF;
  color: #B225F4;
  border: 1px solid #B225F4;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: bold;
  margin-right: 1rem;
}
.pager .page-item a.active {
  background-color: #B225F4 !important;
  color: #FFFFFF !important;
}

/* HEADER DRAWER */
.drawer-container {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 1rem;
  z-index: 1002;
}
.drawer-container .header-drawer-menu a {
  color: #B225F4;
  font-weight: bold;
  font-size: 16px;
  white-space: pre-wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid #B225F4;
  padding-top: 1rem;
}
.drawer-container .header-drawer-menu a::after {
  color: #B225F4;
}
.drawer-container .header-drawer-menu .button-primary a {
  padding: 0;
  color: #FFFFFF;
}
.drawer-container .header-drawer-menu .button-primary a:hover {
  color: #FFFFFF;
}
.drawer-container .header-drawer-menu .nav-item.active a {
  color: #B225F4 !important;
}
.drawer-container .header-drawer-menu .dropdown-menu {
  width: 100%;
  border: 0;
}
.drawer-container .header-drawer-menu .dropdown-menu.level-1 {
  margin-left: 0.5rem;
  border: 1px solid #B225F4;
}
.drawer-container .header-drawer-menu .dropdown-menu.level-2 {
  margin-left: 1rem;
  border: 1px solid #B225F4;
}
.drawer-container .header-drawer-contacto {
  margin-top: 0.5rem;
}
.drawer-container .header-drawer-contacto a {
  text-decoration: none;
  margin-top: 1rem;
  width: 90%;
}

/* HEADER */
#header {
  background-size: cover !important;
}
#header .title-tarot {
  color: rgba(178, 37, 244, 0.6);
  font-size: 9rem;
  line-height: 200px;
  pointer-events: none;
}
#header a {
  color: #FFFFFF;
}
#header a:hover {
  color: #B225F4;
}
#header .slider-button {
  background: #B821D8;
  border: 3px solid #FFFFFF;
  box-sizing: border-box;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
}
#header .button-primary a {
  padding: 0;
}
#header .button-primary a:hover {
  color: #FFFFFF;
}
#header .dropdown-item.active, #header .dropdown-item:active {
  background-color: #FFFFFF;
  color: #000000 !important;
}
#header i {
  font-size: 2rem;
}
#header .dropdown i {
  font-size: 1rem;
}
#header .dropdown-item:focus, #header .dropdown-item:hover {
  color: #B225F4 !important;
}
#header .dropdown-menu {
  background-color: #B225F4 !important;
}
#header .dropdown-menu a:hover {
  color: #FFFFFF;
}
#header .dropdown-toggle::after {
  display: none;
}
#header .dropdown:hover > .dropdown-menu {
  display: block;
}
#header .dropdown-menu.level-1 {
  margin-left: 10rem;
  top: 0;
}
#header.header-alt {
  background-color: #FFFFFF;
}
#header.header-alt a {
  color: #000000;
}
#header.header-alt a:hover {
  color: #B225F4;
}
#header.header-alt .button-primary a {
  padding: 0;
  color: #FFFFFF;
}
#header.header-alt .button-primary a:hover {
  color: #FFFFFF;
}
#header.header-alt .dropdown-menu {
  background-color: #B225F4 !important;
}
#header.header-alt .dropdown-menu a {
  color: #FFFFFF;
}
#header.header-alt .dropdown-menu a:hover {
  color: #FFFFFF;
}

@media screen and (min-width: 991px) {
  #header .title-tarot {
    font-size: 20rem;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 300px;
    pointer-events: none;
  }
  #header i {
    font-size: 1.5rem;
  }
}
/* FOOTER */
#footer p {
  color: #FFFFFF;
}
#footer a {
  color: #FFFFFF;
  text-decoration: none;
}
#footer a:hover {
  color: #B225F4;
}
#footer a.button-primary:hover {
  color: #FFFFFF;
}

/* DNN */
.dnnPrimaryAction {
  background: #B225F4 !important;
}

.dnnPasswordReset {
  display: flex;
  justify-content: center;
}
.dnnPasswordReset .dnnPasswordResetContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dnnPasswordReset .dnnPasswordResetContent .dnnFormItem input, .dnnPasswordReset .dnnPasswordResetContent .dnnFormItem .password-strength-container {
  width: 100% !important;
  max-width: 100% !important;
}
.dnnPasswordReset .dnnPasswordResetContent .dnnPrimaryAction, .dnnPasswordReset .dnnPasswordResetContent .dnnSecondaryAction {
  border: 0;
}

/* BOOTSTRAP 5.1 */
.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

a {
  color: #B225F4;
  text-decoration: none;
}
a:hover {
  color: #B225F4;
  text-decoration: none;
}

/* POPUP NEEDCREDIT */
.NeedCredit-container {
  height: 10vh;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0vh;
  background: #4b45da;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #4b45da;
}
.NeedCredit-container span {
  color: #FFFFFF;
}
.NeedCredit-container span a {
  color: #FCFF6D;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}

.not-found-container {
  padding: 4rem;
  background-color: #B225F4;
}
.not-found-container .number {
  text-align: center;
  font-size: 3rem !important;
  color: #FFFFFF !important;
}
.not-found-container .text {
  text-align: center;
  color: #FFFFFF !important;
}

/* Tarot Member Cards */
.tarotistas-container .button-primary {
  border: none;
}
.tarotistas-container .tarot-member-card {
  background-color: #000000;
  border-radius: 16px;
  height: 90%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.tarotistas-container .tarot-member-card .tarot-member-image-container {
  position: relative;
}
.tarotistas-container .tarot-member-card .tarot-member-image-container img {
  max-height: 200px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 8px 8px 0 0;
}
.tarotistas-container .tarot-member-card .tarot-member-name span {
}
.tarotistas-container .tarot-member-card .options a,
.tarotistas-container .tarot-member-card .options span {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
@media screen and (min-width: 991px) {
  
}
@media screen and (min-width: 1200px) {
  
}

.button-phone-llama-ya {
  width: 100%;
  max-width: 600px;
  padding: 10px !important;
  min-height: auto;
}

/* TarotMember individual */
.comment-text {
  white-space: break-spaces;
  word-break: break-word;
}
#turn-selector th, #turn-selector td {
  text-align: center; font-size: 15px; margin: 0; padding: 0;
}
#turn-selector thead {
  background-color: #B225F4; color: white;
}
#turn-selector thead th {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid white;
  border-right: 1px solid white;
}
#turn-selector tbody th, #turn-selector tbody td {
  border: 1px solid #ccc; border-collapse: collapse; font-weight: normal;
}
#turn-selector tbody td.selected {
  background-color: #00BD00;
}

.promotion-card {
  background: linear-gradient(89.11deg, #4b45da 9.16%, #ba20d7 84.37%);
  box-shadow: 0 4px 4px rgba(0,0,0,.25), 0 4px 4px rgba(0,0,0,.25);
  border-radius: 8px;
}

/* Fix: botones en header - hover fondo blanco, borde morado, texto morado */
#header .button-primary:hover,
#header li.nav-item .button-primary:hover {
  background: #FFFFFF !important;
  color: #B225F4 !important;
  border: 1px solid #B225F4;
}
#header .button-primary:hover a,
#header li.nav-item .button-primary:hover a {
  color: #B225F4 !important;
}

/* Fix: cards Mis Datos altura uniforme */
.panel-data {
  height: 100%;
}
.row.align-items-stretch > [class*="col"] {
  display: flex;
  flex-direction: column;
}

/* drawer fix - display block para separadores */
.drawer-container .header-drawer-menu a {
  display: block;
  width: 100%;
}

/* === Admin: eliminar borde negro de botones Bootstrap === */
.btn, .btn-secondary, .btn-danger, .btn-warning, .btn-success, .btn-info, .btn-sm,
.button-primary, .button-secondary, button.button-primary, button.button-secondary {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* button-secondary keeps its purple outline since that's the design intent */
.button-secondary {
    border: 1px solid #B225F4 !important;
}
.btn-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}
.btn-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* === Fix borde negro en botones === */
button, .btn, .button-primary {
    outline: none !important;
    border: none !important;
}
button:focus, .btn:focus, .button-primary:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* === Artículos - previsualización === */
.article-card {
  background: linear-gradient(177.31deg, #D3D6E3 2.24%, #FFFFFF 44.26%);
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
  border-radius: 8px;
}
.article-card .promotion-container {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
  min-height: 160px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.article-card .promotion-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  border-radius: 8px !important;
}

/* === Phone buttons flex === */
.button-phone-llama-ya {




}
.button-phone-llama-ya .phone-line {
    display: block;
}

/* Grid de turnos del admin (Tarotistas.cshtml) */
.turn-grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.turn-grid thead th { background: #B225F4; color: white; padding: 6px 8px; text-align: center; border: 1px solid #9b1dd6; font-weight: 600; }
.turn-grid tbody th { padding: 4px 8px; font-weight: normal; white-space: nowrap; text-align: left; border: 1px solid #ddd; font-size: 13px; }
.turn-grid tbody td { border: 1px solid #ddd; width: 32px; height: 26px; cursor: pointer; text-align: center; }
.turn-grid tbody td.turn-selected { background-color: #00BD00; }
.turn-grid tbody td:hover { background-color: #e0e0e0; }
.turn-grid tbody td.turn-selected:hover { background-color: #00a000; }

/* Mobile: compactar el calendario para que entre sin scroll horizontal.
   En viewports menores a 768px, las celdas se hacen más chicas (28px en lugar
   de 40px) y la columna de "Hora" reduce su padding. La tabla además ajusta
   table-layout para que el navegador distribuya el ancho disponible. */
@media screen and (max-width: 768px) {
    .turn-grid { table-layout: fixed; font-size: 12px; width: 100%; }
    .turn-grid thead th { padding: 4px 2px; font-size: 12px; }
    .turn-grid thead th:first-child,
    .turn-grid tbody th { width: 110px; padding: 3px 6px; font-size: 12px; white-space: nowrap; }
    .turn-grid tbody td { width: auto; height: 26px; }
}

/* === GMM brand colors for toast notifications === */
/* Used by GMMNotify (warning level) instead of Bootstrap's yellow bg-warning,
   which doesn't have enough contrast with white text. The brand purple is the
   same #8b2fc9 used across buttons and primary accents. */
.bg-gmm-purple {
    background-color: #8b2fc9 !important;
    color: #ffffff !important;
}
.bg-gmm-purple .btn-close-white {
    filter: brightness(0) invert(1);
}