@import "icons/icomoon/styles.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* VARIABLES */
:root {
  --color-strawberry: rgb(255, 18, 122);
  --color-eerie-black: rgb(21, 18, 36);
  --color-primary-magenta: rgb(241, 18, 111);
  --color-plump-purple: #673ab7;
  --color-lemon-glacier: rgb(242, 255, 0);
  --color-floral-white: rgb(255, 248, 241);
  --color-middle-red-purple: rgb(25, 7, 64);
  --color-primary-lust-priestess: rgb(184, 43, 137);
  --color-sugar-crystal: rgb(251, 249, 255);
  --color-primary-dark: rgb(195, 9, 88);
  --color-primary-light: rgb(241, 192, 207);

  --color-secondary: rgb(25, 7, 64);
  --color-secondary-light: rgb(37, 13, 87);
  --color-secondary-lighter: rgb(134 116 173);
  --color-secondary-dark: rgb(18, 5, 46);
  --color-secondary-darker: rgb(28, 36, 47);
  --color-dark-back: rgb(22, 27, 35);
  --color-middark-grey: rgb(94, 102, 110);
  --color-light-text: rgb(222, 222, 222);
  --color-semi-white: rgb(248, 249, 249);
  --color-text: rgb(73, 88, 110);
  --color-pizarra: rgb(29, 35, 38);
  --color-tiza: rgb(220, 228, 232);

  --color-black: rgb(0, 0, 0);
  --color-dark-grey: rgb(73, 80, 87);
  --color-mid-grey: rgb(172, 181, 189);
  --color-light-grey: rgb(237, 237, 237);
  --color-mid-white: rgba(255, 255, 255, 0.502);
  --color-white: rgb(255, 255, 255);
  --color-grey-33: rgb(51, 51, 51);
  --color-grey-4f: rgb(79, 79, 79);
  --color-grey: rgb(119, 119, 119);
  --color-grey-9b: rgb(155, 155, 155);
  --color-grey-bd: rgb(189, 189, 189);
  --color-grey-e0: rgb(224, 224, 224);
  --color-grey-f2: rgb(242, 242, 242);

  --color-blue: rgb(33, 150, 243);
  --color-blue-light: rgb(211, 234, 253);
  --color-purple: rgb(155, 81, 224);
  --color-purple-light: hsl(271, 71%, 92%);
  --color-red: rgb(244, 67, 54);
  --color-red-light: rgb(255, 188, 182);
  --color-orange: rgb(250, 105, 15);
  --color-orange-light: rgb(255, 213, 187);
  --color-yellow: rgb(255, 167, 38);
  --color-yellow-light: rgb(255, 238, 214);
  --color-green: rgb(15, 175, 97);
  --color-green-light: rgb(173, 255, 214);
  --color-yellow-basic: rgb(255, 216, 0);
  --color-yellow-basic-light: rgb(255, 247, 204);
  --color-bright-yellow: rgb(252, 249, 52);
  --color-bright-yellow-light: rgb(254, 254, 214);

  --color-instagram: rgb(225, 48, 108);
  --color-facebook: rgb(57, 73, 171);
  --color-whatsapp: rgb(37, 211, 102);
  --color-twitter: rgb(29, 161, 242);
  --color-youtube: rgb(255, 0, 0);
  --color-tripadvisor: rgb(0, 175, 135);
  --color-pinterest: rgb(189, 8, 28);
  --color-mybusiness: rgb(72, 128, 230);
  --color-skype: rgb(0, 175, 240);
  --color-linkedin: rgb(0, 119, 181);
  --color-messenger: rgb(0, 132, 255);
  --color-snapchat: rgb(255, 252, 0);

  --appnice-linear: linear-gradient(208.82deg, #FF2064 10.91%, #4D0071 159.39%);
  --color-linear-nice: linear-gradient(180.1deg, #190740 27%, #673AB7 101.04%);
  --color-linear-sunset: linear-gradient(97.37deg, #FFBD1B -0.21%, #F22198 85.16%);
  --color-linear-sunrise: linear-gradient(170.45deg, #FF2064 23.78%, #F8EF1C 95.04%);
  --color-linear-bluesky: linear-gradient(170.45deg, #006CC8 23.78%, #5BAEFD 95.04%);
  --color-linear-mint: linear-gradient(170.45deg, #00E3BB 23.78%, #00A5D9 95.04%);

  --font-titles: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --line-grey: 1px solid rgb(221, 221, 221);
  --line-dark: 1px solid rgb(237, 237, 237);
  --border-radius: 0.5rem;
  --gutter: 2rem;
  --space-h: 1.6rem;
  --space-v: 2.4rem;
  --space-v2: 3.2rem;

  /* ===== Colors ===== */
  --body-color: #FFFFFF;
  --sidebar-color: #FFF;
  --primary-color: #695CFE;
  --primary-color-light: #F6F5FF;
  --toggle-color: #DDD;
  --text-color: #707070;

  /* ====== Transition ====== */
  --tran-02: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.3s ease;
  --tran-05: all 0.3s ease;

  /*Light colors*/
  --bg-body: rgb(248, 247, 250);
  --bg-card: rgb(255, 255, 255);
  /*Dark colors*/
}

/* RESEAT */
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1.6rem;
  min-height: 100vh;
  background: var(--color-white);
  position: initial;
}

button:focus {
  outline: 0;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

/* CONTAINERS */
.app-container {
  font-family: var(--font-primary);
  min-height: calc(100vh - 12rem);
}

.appnice__container {
  margin: 0 auto;
  max-width: 140rem;
  padding: 0 1.5rem;
  width: 100%;
}

/*NICEEAT GRID SYSTEM*/
.nice__gridRow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2rem;
}

.gap-0 {
  grid-gap: 0;
  align-items: center;
}

.nice__gridCol-6a {
  grid-column: 1 / span 6;
}

.nice__gridCol-6b {
  grid-column: 7 / span 6;
}

.nice__gridCol-4a {
  grid-column: 1 / span 4;
}

.nice__gridCol-4b {
  grid-column: 5 / span 4;
}

.nice__gridCol-4c {
  grid-column: 9 / span 4;
}

.nice__gridCol-5a {
  grid-column: 1 / span 5;
}

.nice__gridCol-7b {
  grid-column: 6 / span 7;
}

.nice__gridCol-3a {
  grid-column: 1 / span 3;
}

.nice__gridCol-3b {
  grid-column: 4 / span 3;
}

.nice__gridCol-3c {
  grid-column: 7 / span 3;
}

.nice__gridCol-3d {
  grid-column: 10 / span 3;
}

.fl-end {
  align-self: flex-end;
}

.alg-center {
  align-items: center;
}

.jfy-center {
  display: flex;
  justify-content: center;
}

.h-100 {
  height: 100%;
}

.nice__container {
  display: grid;
  margin: 0 auto;
  max-width: 120rem;
  padding: 0 3rem;
  width: 100%;
}

/*Niceeat Design System Styles*/
.n-card {
  background-color: var(--bg-card);
  border-radius: 0.8rem;
  box-shadow: 0 3px 9px 1px rgba(51, 48, 60, 0.03), 0 9px 8px rgba(51, 48, 60, 0.02), 0 1px 6px 4px rgba(51, 48, 60, 0.01);
  transition: var(--tran-03);
}

.n-card-header {
  padding: 2.4rem;
}

.n-card-text {
  padding: 0 2.4rem 2.4rem;
}

.n-card-item {
  padding: 2.4rem;
}

.n-card-table-item {
  padding: 1.6rem;
}

.n-sidecard-right,
.n-sidecard-left {
  border-radius: 0;
  box-shadow: 0 3px 9px 1px rgba(51, 48, 60, 0.03), 0 9px 8px rgba(51, 48, 60, 0.02), 0 1px 6px 4px rgba(51, 48, 60, 0.01);
}

.n-sidecard-right,
.n-sidecard-left {
  background-color: var(--bg-card);
}

.n-grid {
  display: grid;
}

.n-vh-padding {
  padding: 1.2rem;
}

.n-w100 {
  width: 100%;
}

.n-btn {
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 400;
  height: 4rem;
  line-height: 1.4em;
  padding: 0.8rem 2rem;
  transition: var(--tran-02);
  width: initial;
  min-width: max-content;
}

.n-btn-icon i {
  margin-right: 0.8rem;
  font-size: 2rem;
}

.n-icon-btn {
  border-radius: 3rem;
  width: 4rem;
  padding: 0.8rem;
  background-color: transparent !important;
}

.n-pilltab {
  border: 0;
  border-radius: 3.2rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 400;
  height: 4rem;
  padding: 0.8rem 2rem;
  transition: var(--tran-02);
  width: initial;
  min-width: max-content;
}

/* Tooltip container */
.n-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

.n-text-primary {
  color: var(--color-strawberry);
}

.n-text-secondary {
  color: var(--color-eerie-black);
}

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

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

.text-center {
  text-align: center;
}

/*/Niceeat Design System Styles*/
/*GENERAL*/
.login-form a {
  color: var(--color-white);
}

.login-form label.error {
  color: var(--color-snapchat);
  display: block;
  margin-top: 0.3rem;
  font-size: 1.2rem;
  text-transform: none;
}

.login-container {
  max-width: 30rem;
  font-size: 1.6rem;
}

.login-container__header h2 {
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 2.4rem;
}

.login-container__header h3 {
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.login-container__logo img {
  height: 6rem;
  width: 24rem;
}

.app-name {
  font-size: 2.3rem;
  color: var(--color-white);
  padding: 1.5rem;
}

.login-text {
  padding-bottom: 1.6rem;
  text-align: center;
  color: var(--color-white);
}

.login-container__userbox {
  margin-bottom: 2.4rem;
}

.login-container__userbox h3 {
  margin-bottom: 1rem;
  text-align: center;
  color: var(--color-white)
}

.registerNewAccount {
  display: inline-block;
  border-bottom: 1px solid;
  font-size: 1.6rem;
  padding-bottom: 0.4rem;
  font-weight: 500;
}

.login-accept {
  font-size: 1.2rem;
  color: var(--color-white);
  text-align: justify;
  line-height: 1.5em;
}

.login-accept a {
  color: var(--color-white);
  cursor: pointer;
  text-decoration: underline;
}

/*FORMS*/
.login-formContainer {
  padding: 3.4rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2.4rem;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="search"],
.login-form input[type="email"],
.login-form input[type="number"],
.login-form input[type="datetime"],
.login-form input[type="datetime-local"],
.login-form input[type="date"],
.login-form input[type="month"],
.login-form input[type="time"],
.login-form input[type="week"],
.login-form input[type="url"],
.login-form input[type="tel"],
.login-form textarea,
.login-form select {
  font-size: 1.6rem;
  border: 2px solid var(--color-grey-e0);
  border-radius: 0.8rem;
  background: var(--color-white);
  color: var(--color-eerie-black);
  box-shadow: none;
  padding: 0.8rem 1.6rem;
  height: 4.8rem;
  display: block;
  width: 100%;
  font-family: var(--font-body);
}

.login-form i {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-size: 1.6rem;
  color: var(--color-eerie-black);
}

p.nice__infoRegister {
  font-size: 1.6rem;
  line-height: 1.4em;
  margin-bottom: 2rem;
}

.login-form hr {
  border-top: 1px solid var(--color-eerie-black)
}

.btn-signup {
  padding: 1rem;
  font-size: 1.6rem;
  height: 4.6rem !important;
}

.bg-facebook {
  background-color: var(--color-facebook) !important;
  border-color: var(--color-facebook) !important;
  color: var(--color-white);
}

.btn-security {
  width: 100%;
  max-width: 35rem;
  border: 0;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 600;
  height: 4rem;
  line-height: 1.4em;
  padding: 0.8rem 1.6rem;
  color: var(--color-white);
  transition: all ease 0.3s;
  font-family: var(--font-body);
  position: relative;
}

.password-recovery-link {
  line-height: 1.6em;
}

.underline {
  text-decoration: underline;
}

.help-block {
  color: var(--color-white);
  font-size: 1.3rem;
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}

.app-container .help-block {
  color: var(--color-secondary-dark);
}

.modal .help-block {
  color: var(--color-secondary-dark);
}

.privacy-authBox {
  padding: 4rem;
  display: flex;
  justify-content: center;
}

.privacy-authContainer {
  background: var(--color-eerie-black);
  padding: 2rem 4rem;
  border-radius: 1rem;
  font-weight: 600;
  max-width: 43rem;
  color: var(--color-tiza);
  line-height: 1.4em;
}

.privacy-authContainer h2 {
  margin-bottom: 2.4rem;
  font-weight: 600;
}

.privacy-authContainer p {
  margin-bottom: 2rem;
}

.privacy-authContainer .containercheck {
  color: var(--color-tiza);
  font-size: 1.3rem
}

.privacy-authContainer .appHeader__content-logo a {
  color: var(--color-strawberry);
}

label {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--color-eerie-black);
  font-weight: 500;
  font-family: var(--font-primary);
}

.privacy-authContainer .containercheck a,
.privacy-authContainer .containercheck a:hover,
.privacy-authContainer .containercheck a:focus,
.privacy-authContainer .containercheck a:visited {
  color: var(--color-yellow-basic);
  font-weight: 600;
  font-size: 1.3rem
}

.btn-boxP {
  display: flex;
  justify-content: center;
}

.security-wrapper {
  background: var(--color-eerie-black);
  color: var(--color-white);
  min-height: 100vh;
}

.signup-container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99;
}

.cta-signupBox {
  max-width: 60rem;
  padding: 2.4rem 0;
}

.cta-signupBox a {
  display: block;
}

.login-form,
.signup-formContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  /*width: 50rem;*/
  width: 100%;
  box-shadow: 0 0 1.5rem rgb(0 0 0 / 25%);
  min-height: 100vh;
  position: relative;
  z-index: 99;
}

.cta-signupBox img {
  max-width: 24rem;
}

h1 {
  color: var(--color-white);
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1.6rem;
  font-family: var(--font-body);
}

.signup__label {
  font-size: 1.8rem;
  line-height: 1.4em;
  font-weight: 400;
  margin-bottom: 2.4rem;
}

.fill-white {
  fill: var(--color-white);
}

.fill-green {
  fill: var(--color-green);
}

.fill-primary {
  fill: var(--color-strawberry);
}

.fill-yellow {
  fill: var(--color-yellow);
}

.fill-yellow-basic {
  fill: var(--color-yellow-basic);
}

.fill-black {
  fill: var(--color-black);
}

.text-primary {
  color: var(--color-strawberry) !important;
}

.text-green {
  color: var(--color-green) !important;
}

.text-yellow {
  color: var(--color-yellow) !important;
}

.text-yellow-basic {
  color: var(--color-yellow-basic) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-color {
  color: var(--color-text) !important;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left !important;
}

.d-none {
  display: none;
}

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

.fl-end {
  align-self: flex-end;
}

.alg-center {
  align-items: center;
}

.alg-end {
  align-items: end;
}

.jfy-center {
  display: flex;
  justify-content: center;
}

.grid-center {
  justify-content: center;
}

.flex-center {
  justify-content: center !important;
  gap: 0.8rem;
}

.jfy-spc-btw {
  justify-content: space-between;
}

.h-100 {
  height: 100%;
}

.gap-0 {
  gap: 0;
}

.gap-8 {
  gap: 0.8rem;
}

.gap-16 {
  gap: 1.6rem;
}

.gap-24 {
  gap: 2.4rem;
}

.gap-32 {
  gap: 3.2rem
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-8 {
  margin-bottom: 0.8rem;
}

.mb-10 {
  margin-bottom: 1rem;
}

.mb-16 {
  margin-bottom: 1.6rem;
}

.mb-20 {
  margin-bottom: 2rem;
}

.mb-24 {
  margin-bottom: 2.4rem;
}

.mb-30 {
  margin-bottom: 3rem;
}

.mb-32 {
  margin-bottom: 3.2rem;
}

.mb-40 {
  margin-bottom: 4rem;
}

.mb-50 {
  margin-bottom: 5rem;
}

.mb-60 {
  margin-bottom: 6rem;
}

.mb-70 {
  margin-bottom: 7rem;
}

.mb-80 {
  margin-bottom: 8rem;
}

.mb-90 {
  margin-bottom: 9rem;
}

.mb-100 {
  margin-bottom: 10rem;
}

.mb-120 {
  margin-bottom: 12rem;
}

.pt-10 {
  padding-top: 1rem;
}

.pt-16 {
  padding-top: 1.6rem;
}

.pt-24 {
  padding-top: 2.4rem;
}

.pt-32 {
  padding-top: 3.2rem;
}

.pt-40 {
  padding-top: 4rem !important;
}

.pt-48 {
  padding-top: 4.8rem;
}

.border-1 {
  border: 1px solid;
}

.border-2 {
  border: 2px solid;
}

.border-3 {
  border: 3px solid;
}

.border-4 {
  border: 4px solid;
}

.border-5 {
  border: 5px solid;
}

.border-b-1 {
  border-bottom: 1px solid;
}

/*//NICEEAT GRID SYSTEM*/
/*NICEEAT FONT SYSTEM */
.f-12 {
  font-size: 1.2rem;
}

.f-14 {
  font-size: 1.4rem;
}

.f-16 {
  font-size: 1.6rem;
}

.f-18 {
  font-size: 1.8rem;
}

.f-20 {
  font-size: 2rem;
}

.f-24 {
  font-size: 2.4rem;
}

.f-28 {
  font-size: 2.8rem;
}

.f-32 {
  font-size: 3.2rem;
}

.f-40 {
  font-size: 4rem;
}

.f-48 {
  font-size: 4.8rem;
}

.f-56 {
  font-size: 5.6rem;
}

.f-64 {
  font-size: 6.4rem;
}

.f-70 {
  font-size: 7rem;
}

.f-80 {
  font-size: 8rem;
}

.f-90 {
  font-size: 9rem;
}

.lh-10 {
  line-height: 1em;
}

.lh-12 {
  line-height: 1.2em;
}

.lh-14 {
  line-height: 1.4em;
}

.lh-16 {
  line-height: 1.6em;
}

.containercheck {
  display: block;
  position: relative;
  padding-left: 3.5rem;
  cursor: pointer;
  font-size: 1.4rem !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-transform: initial !important;
  font-weight: normal !important;
}

.input-group-btn .btn {
  height: 4rem;
}

/* Hide the browser's default checkbox */
.containercheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.9rem;
  width: 1.9rem;
  background-color: var(--color-white);
  border: 0.2rem solid var(--color-eerie-black);
  border-radius: 0.3rem;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input~.checkmark {
  background-color: var(--color-white);
}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked~.checkmark {
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  line-height: 1;
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
  content: "\e600";
  font-family: 'icomoon';
  font-size: 18px;
  line-height: 1;
  position: absolute;
  top: -1px;
  left: -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 1;
  filter: alpha(opacity=0);
}

/************ COLORS ************/
.bg-nice {
  background-color: var(--color-strawberry) !important;
  color: var(--color-white);
}

.bg-middle-red-purple {
  background-color: var(--color-middle-red-purple) !important;
  color: var(--color-white);
}

.bg-nice2 {
  background-color: var(--color-eerie-black) !important;
  border-color: var(--color-eerie-black) !important;
  color: var(--color-white);
}

.bg-blue {
  background-color: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  color: var(--color-white);
}

.bg-red {
  background-color: var(--color-red) !important;
  border-color: var(--color-red) !important;
  color: var(--color-white);
}

.bg-yellow {
  background-color: var(--color-yellow) !important;
  border-color: var(--color-yellow) !important;
  color: var(--color-white);
}

.bg-yellow-basic {
  background-color: var(--color-yellow-basic) !important;
  border-color: var(--color-yellow-basic) !important;
  color: var(--color-secondary-dark);
}

.bg-green {
  background-color: var(--color-green) !important;
  border-color: var(--color-green) !important;
  color: var(--color-white) !important;
}

.bg-purple {
  background-color: var(--color-purple) !important;
  border-color: var(--color-purple) !important;
  color: var(--color-white);
}

.bg-orange {
  background-color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-white);
}

.bg-mid-grey {
  background-color: var(--color-mid-grey) !important;
  border-color: var(--color-mid-grey) !important;
  color: var(--color-white);
}

.bg-facebook {
  background-color: var(--color-facebook) !important;
  border-color: var(--color-facebook) !important;
  color: var(--color-white);
}

.icon-hereBanner {
  background-position: center;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover !important;
  top: 0;
  left: 0;
  background-size: 100%;
  opacity: 0.1;
}

/*RESPONSIVE*/
@media (max-width: 768px) {
  .signup__label {
    font-size: 1.6rem;
  }

  .signup-container {
    display: grid;
  }

  .signup-formContainer {
    width: 100%;
  }

  .cta-signup {
    display: none;
  }

  .login-form,
  .signup-formContainer {
    width: 100%;
  }
}

/* ============================================================
   modal.css — Modal de notificaciones Niceeat
   Cubre: errores, éxito, advertencias, info.
   Compatible con Bootstrap .modal.fade + data-dismiss.
   ============================================================ */

/* ── BACKDROP ────────────────────────────────────────────── */
#modalDialog.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(13, 11, 26, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: niceModalBackdropIn .2s ease;
}

/* Cuando Bootstrap le añade .show o se quita display:none desde JS */
#modalDialog.modal.show,
#modalDialog.modal[style*="display: flex"],
#modalDialog.modal[style*="display:flex"],
#modalDialog.modal[style*="display: block"],
#modalDialog.modal[style*="display:block"] {
  display: flex !important;
}

@keyframes niceModalBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── DIALOG ──────────────────────────────────────────────── */
.modal-dialog {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  animation: niceModalSlideIn .25s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes niceModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── CONTENT ─────────────────────────────────────────────── */
.modal-content {
  background: #1C1830;
  border: 1px solid rgba(105, 0, 204, .30);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(105, 0, 204, .20), 0 24px 48px rgba(0, 0, 0, .55);
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #FFFFFF;
}

/* ── HEADER ──────────────────────────────────────────────── */
.modal-header {
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(105, 0, 204, .10);
}

.modal-content__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  min-height: 56px;
}

.modal-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  /* Ícono de estado se inyecta por JS antes del texto — ver abajo */
}

/* ── BOTÓN CERRAR ────────────────────────────────────────── */
.close-nice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .55);
  font-size: 16px;
  cursor: pointer;
  transition: all .2s;
  padding: 0;
  line-height: 1;
}

.close-nice:hover {
  background: rgba(246, 0, 118, .15);
  border-color: rgba(246, 0, 118, .35);
  color: #FF80B0;
  transform: scale(1.08);
}

.close-nice i {
  display: block;
  line-height: 1;
}

/* ── BODY ────────────────────────────────────────────────── */
.modal-body,
#modalDialogMessage {
  padding: 22px 20px 24px;
  font-size: 14px;
  line-height: 1.70;
  color: rgba(255, 255, 255, .72);
}

/* Listas y párrafos dentro del mensaje */
#modalDialogMessage p {
  margin: 0 0 10px;
}

#modalDialogMessage p:last-child {
  margin-bottom: 0;
}

#modalDialogMessage ul,
#modalDialogMessage ol {
  padding-left: 20px;
  margin: 8px 0 0;
}

#modalDialogMessage li {
  margin-bottom: 5px;
}

#modalDialogMessage strong {
  color: #FFFFFF;
  font-weight: 700;
}

#modalDialogMessage a {
  color: #C9A0FF;
  text-decoration: underline;
}

/* Éxito — verde */
.modal-content--success {
  border-color: rgba(34, 197, 94, .35);
}

.modal-content--success .modal-header {
  background: rgba(34, 197, 94, .10);
  border-bottom-color: rgba(34, 197, 94, .18);
}

/* Error — strawberry */
.modal-content--error {
  border-color: rgba(246, 0, 118, .35);
}

.modal-content--error .modal-header {
  background: rgba(246, 0, 118, .10);
  border-bottom-color: rgba(246, 0, 118, .18);
}

/* Advertencia — amarillo */
.modal-content--warning {
  border-color: rgba(255, 203, 3, .30);
}

.modal-content--warning .modal-header {
  background: rgba(255, 203, 3, .08);
  border-bottom-color: rgba(255, 203, 3, .15);
}

/* Info — violeta (default, sin clase adicional) */
.modal-content--info {
  border-color: rgba(105, 0, 204, .35);
}

.modal-content--info .modal-header {
  background: rgba(105, 0, 204, .12);
  border-bottom-color: rgba(105, 0, 204, .20);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  #modalDialog.modal {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-dialog {
    max-width: 100%;
  }

  .modal-content {
    border-radius: 16px 16px 8px 8px;
  }

  @keyframes niceModalSlideIn {
    from {
      opacity: 0;
      transform: translateY(24px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}