/* GLOBAL STYLES
-------------------------------------------------- */
/* Import Open Sauce font */
@font-face {
  font-family: 'Open Sauce';
  src: url('./fonts/OpenSauceOne-Regular.woff2') format('woff2'),
       url('./fonts/OpenSauceOne-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('./fonts/OpenSauceOne-Bold.woff2') format('woff2'),
       url('./fonts/OpenSauceOne-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* Override Bootstrap's default font */
:root {
  --bs-body-font-family: 'Open Sauce',
  -apple-system, BlinkMacSystemFont,
  'Segoe UI',
  Roboto, sans-serif;

  /* G2 Your color palette */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-navy: #16354D;
  --color-charcoal: #4E4E4E;
  --color-sage: #869596;
  --color-lavender: #AB92BF;
  --color-cream: #F3F7F0;

  /* Override Bootstrap's default colors */
  --bs-primary: #16354D;      /* Navy */
  --bs-secondary: #4E4E4E;    /* Charcoal */
  --bs-dark: #000000;         /* Black */
  --bs-light: #F3F7F0;        /* Cream */
  --bs-body-bg: #F3F7F0;      /* Background color */
  --bs-body-color: #000000;   /* Text color */

  --body-background: #fff;
  --primary-foreground: #ffffff;
  --primary-background: #6ea8fe;
  --secondary-foreground: #000000;
  --secondary-background: #e9ecef;
  --primary-color: #a8d5e2;
  --secondary-color: #f9a8d4;
  --dark-color: #4a5568;
  --light-color: #fef3f7;
  --radius: .625rem;
  --card-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

html,
body {
	height: 100%;
	background-color: var(--body-background);
	font-family: var(--bs-body-font-family);
}

.container {
    padding-left: 0px;
    padding-right: 0px;        
}
    
#site-content {
	padding-top: 0px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 10 auto -50px;
}

#user-content {
	padding-top: 0px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-top: 0px;
}

#asistente-content {
	padding-top: 10px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -50px;      
}

#push,
#footer {
    height: 50px;
}
#footer {
    background-color: #000;
}

.small {
  font-size: 10px;
}

.black {
	color: black;
}

.error {
  color: red;
  font-size: 1.25rem;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.nowrap {
 white-space: nowrap;  
}

.link {
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}

.loginpanel {
	border: 2px solid #c0c0c0;
}


.user-profile h4, .user-form h4   {
  // border-bottom: 1px solid #D1D1D1;
}

.aside {
  float: left;
  width: 25%;
}

.user-profile h1 h2 {
  margin-top: 0;
}

div.jHtmlArea .ToolBar ul li a.h1 { margin-top: 0;}
div.jHtmlArea .ToolBar ul li a.h2 { margin-top: 0;}
div.jHtmlArea .ToolBar ul li a.h3 { margin-top: 0;}
div.jHtmlArea .ToolBar ul li a.h4 { margin-top: 0;}
div.jHtmlArea .ToolBar ul li a.h5 { margin-top: 0;}
div.jHtmlArea .ToolBar ul li a.h6 { margin-top: 0;}

.user-menu ul li a {
  border-bottom: 1px solid #D1D1D1;
  color: #333;
  padding: 15px;
  font-size: 13px;
}

.btn-black {
  color: #fff;
  background-color: #333;
}

.btn-black:hover {
  color: #ccc;
  background-color: #333;
}

.btn.sharp {
  border-radius:0;
}

#myModal1>div{
overflow-y: hidden;
overflow-x: hidden;
}


fieldset.custom-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.custom-border {
    font-size: 1.3em !important;    
    text-align: left !important;
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
	margin-bottom:0;
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}


.-jumbotron {
    position: relative;
    background: #000 url("../images/c12.jpg") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

.-jumbotron h1{
  color: #fff;
}


.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
  cursor: pointer;
}
.flag-icon:before {
  content: "\00a0";
}

.flag-icon-ar {
  background-image: url(../images/ar.svg);
}
.flag-icon-us {
  background-image: url(../images/us.svg);
}

.popupevaluador > .jHtmlArea {
    width: 500px !important;
}
.popupevaluador > .jHtmlArea > .ToolBar{
    width: 500px !important;
}

.popupevaluador > .jHtmlArea > div > iframe{
    width: 500px !important;
    height: 200px !important;
}

.admin-form {
    margin-top: 20px;
    margin-left: 20px;
}

.aicon {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.iconClass{
  position: relative;
}
.iconClass span{
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
}

.fa-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.line_separator {
    border-bottom: 1px solid #D1D1D1;
}



.main-content-custom {
    background-color: var(--body-background);
}

.congreso-footer {
    background-color: #ccc;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    font-size: 0.8rem;
}

/* Welcome page styles */
.congreso-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.congreso-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.btn-custom {
    padding: 15px 40px;
    font-size: 1.1rem;
    border-radius: calc(var(--radius) - 2px);
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn-custom-primary {
    background: var(--color-navy);
    color: var(--color-cream);
}

.btn-custom-primary:hover {
    transform: translateY(-3px);
    color: var(--color-white);
}

.btn-custom-secondary {
    background: var(--color-sage);
    color: var(--color-black);
}

.btn-custom-secondary:hover {
    transform: translateY(-3px);
    color: var(--color-black);
}

.btn-custom-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.btn-custom-outline:hover {
    background: white;
    color: var(--primary-color);
}

/* Login Page Styles */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    // background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-charcoal) 100%);
    // background: linear-gradient(135deg, #a8d5e2 0%, #f9a8d4 100%);
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,101.3C1248,85,1344,75,1392,69.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
}

.login-container {
    position: relative;
    z-index: 1;
}

.login-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: fadeInUp 0.6s ease;
}

.login-left {
    // background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media (max-width: 576px) {
        display: none;
    }
}

.login-left h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.login-left p {
    opacity: 0.9;
    font-size: 1.1rem;
}

.login-right {
    padding-left: 40px;
    padding-top: 20px;
    @media (max-width: 576px) {
        padding-left: 30px;
        padding-right: 20px;

        .btn {
            width: 70% !important;
        }

        .input-group {
            width: 70% !important;
        }
    }
}

.fancy-error-alert {
    background-color: #fff5f5;
    border: none;
    border-left: 4px solid #dc3545;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    color: #dc3545;
    animation: slideInDown 0.4s ease-out, shake 0.5s cubic-bezier(.36,.07,.19,.97) 0.4s both;
}

.fancy-error-alert i {
    font-size: 1.25rem;
    margin-right: 1rem;
}

.is-invalid {
    border-color: #dc3545 !important;
    background-image: none !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

.fancy-error-alert .btn-close-custom {
    background: transparent;
    border: none;
    color: #dc3545;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.fancy-error-alert .btn-close-custom:hover {
    opacity: 1;
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Register form styles */
.registration-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 40px;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
    body {
        padding: 10px 0;
    }
    .registration-container {
        padding: 20px 15px;
        margin: 0 10px;
        border-radius: 8px;
    }
}

.registro_line {
    color: var(--color-navy);
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-navy);
    font-size: 1.25rem;
}

/* Participant home styles */
/* Header */
.participant-header {
    background: linear-gradient(to right, var(--color-navy), var(--color-charcoal));
    // background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-charcoal) 100%);
    // background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1.5rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.participant-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.participant-header h1 a {
    color: white;
}

/* Participant Info Card */
.participant-info-card {
    background: white;
    border-radius: 15px;
    padding: 1rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 1rem;
}

.participant-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-navy), var(--color-charcoal));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    font-weight: 700;
}

.participant-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.participant-profile {
  padding-top: 0px;
  min-height: 100%;
  margin-left: 10px;
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
}

.btn-logout {
    background: white;
    color: var(--dark-color);
    border: 2px solid white;
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}