* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "welcometitle";
  src: url("LibreBaskerville-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #006b6b;
  color: white;
  padding: 10px 20px;
  z-index: 10;
}

.title {
  font-size: 1.8rem;
  font-family: welcometitle; 
  cursor: pointer;
  color: white;
}

.hamburger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: white;
}

.menu {
  display: none;
  flex-direction: column;
  background-color: #004b4b;
  position: absolute;
  top: 60px;
  right: 20px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 999;
}

.menu a {
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #006b6b;
}

.menu a:hover {
  background-color: #007d7d;
}

.menu.open {
  display: flex;
}

.section {
  display: none;
  padding: 0;
  width: 100%;
  height: 100%;
}
.section.active {
  display: block;
  width: 100%;
}



form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

textarea {
  width: 100%;
  max-width: 300px;
  height: 50px;
  resize: vertical;
}

.ai-button {
  background-color: aliceblue;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 30px;
}

footer {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
  color: rgb(75, 74, 74);
  font-family: Georgia, serif;
}



.welcome {
  font-size: 2.5em;
  font-weight: bold;
  font-family: welcometitle;
}


.welcome-p {
  font-size: 1.2em;
  max-width: 800px;
  font-family: welcometitle;
}


h2 {
  text-align: center;
}

.intro {
  width: 100%;
  background-color: #e1e1e1;
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.intro img {
  max-width: 100%;
  height: auto;
}


#inicio {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
  background-color: #e8e8e8;
  min-width: 100vw;
}

.welcome-container {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;    
  height: 100vh;
  background-color: #ffffff;
  text-align: center;
  padding: 0 20px;
}


#epiderm-1, #acerca, #configuracion {
  padding: 30px 20px;
  background-color: #ffffff;
  min-height: 100vh;
  text-align: center;
  font-family: Cambria, Georgia, Times, 'Times New Roman', serif;
}

#welcome, .intro {
  width: 100%;
}

main {
  flex: 1;
}

.ans{
  padding-bottom: 10px;
}

.anstxt{
  text-align: left;
}

#epiderm-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 60px 20px 100px; 
  background-color: #ffffff;
  min-height: 100vh;
}

#ia-form {
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 10px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 20px auto;
}



.only-inicio {
  width: 100%;
}

.intro.only-inicio {
  display: flex;
  justify-content: center;
  align-items: center;
}


.welcome-container.only-inicio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 95vh;
  background-color: #ffffff;
  text-align: center;
}
.imagen{
  float: left;
}

@media (max-width: 900px) {

  .intro {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    gap: 16px;
    text-align: center;
  }

  
  .intro img.imagen {
    max-width: min(420px, 80vw);
    height: auto;
    display: block;
  }


  .intro p {
    margin: 0;
    line-height: 1.6;
    max-width: 65ch;        
    min-width: 0;           
    overflow-wrap: anywhere; 
  }

  .intro img.imagen, .intro p {
    float: none !important;
    position: static !important;
  }
}

.intro-p{
  padding-left:100px;
  padding-right: 100px;
}

#respuesta {
  border: 2px dashed #333;
  padding: 15px;
  margin-top: 10px;
  width: 100%;
  max-width: 600px;
  text-align: center;
  font-family: Georgia, serif;
  background-color: #ffffffc7;
  margin-left: auto;
  margin-right: auto;
}



.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.respuesta-box {
  margin-top: 20px;
  padding: 15px;
  border: 2px dashed #004b4b;
  background-color: #ffffff;
  color: #333;
  max-width: 600px;
  word-break: break-word;
}


#ia-form input[type="file"],
#ia-form textarea,
#ia-form button {
  flex: 1;
  min-width: 120px;
}

.loading-dots::after {
  content: '';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80% {
    content: '...';
  }
  100% {
    content: '';
  }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }                
}

.fade{
  align-items: center;
    animation: fade-out 2.5s ease-out infinite alternate;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #89d8d3;
}

.fade1{
  animation-delay: 2.5s;
  z-index: 1;
}

.fade2{
  animation-delay: 5s;
  background-color: #ffffff;
}

.visit-welcome{
  margin-top: 2%;
  background-color: #e8e8e8;
  font-family: welcometitle; 
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  border-color: rgb(152, 152, 152);
  border-radius: 30px;
}

.coffee{
  color: black;
  margin: 0 0.5%
}



.acnediv{
  padding: 5vh;
  display: flex;
}



.acnediv3:hover{
  box-shadow: 0 0 2px 1px rgb(255, 255, 255);
}

.acnetxt{
  font-weight: bold;
  text-decoration: none;
  color: black;
}

.linkunderline:link {
      text-decoration: none;
}

.linkunderline:visited {
      text-decoration: none;
}

.linkunderline:hover {
      text-decoration: none;
}

.linkunderline:active {
      text-decoration: none;
}

#guiadiagnostico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; 
}


.acnesection{
  padding: 1% 5%;
}

.acneul{
  padding-left: 1%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
}

.sectiontitle{
  padding: 1% 0;
  font-size: xx-large;
  text-align: center;
}

.acneimg2{
  border-radius: 10px;
  border: 3px solid rgb(188, 188, 188);
  float: right;
} 

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}


.tooltip .tooltiptext {
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.622);
  color: #fff;
  text-align: center;
  padding: 5% 5%;
  border-radius: 6px;
  width: 30vh;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
 padding: 1vh 2vh;

  position: absolute;
  z-index: 1;
}


.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltiptext{
  padding: 0 5%;
}

.link_acne:hover{
  color:#00ACEE;
}

.padding1{
  padding-bottom: 1%;
}

.btnwrap{
  display: flex;
  justify-content:center;   
  align-items:center;
  gap: 20px;                
  margin-top: 24px;
  flex-wrap: wrap;          
}






.acneimg {
  width: 100%;
  height: auto;  
  display: block;
  border-radius: 8px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; 
  justify-content: center;
  padding: 20px;
}

.acnediv {
  width: calc(25% - 12px); 
  max-width: 300px; 
  text-align: center;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 10px;
  box-sizing: border-box; 
  display: flex;
  flex-direction: column;
  margin-bottom: 20px; 
}

.acnediv3 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.acnediv2 {
    margin-top: auto;
    background-color: white;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border-radius: 4px;
}

.acneimg {
  width: 100%;            
  height: 300px;           
  object-fit: cover;       
  display: block;
  border-radius: 8px 8px 0 0; 
  margin-bottom: 5px;
}


@media (max-width: 768px) {
  .acnediv {
    width: calc(50% - 8px); 
  }
}

@media (max-width: 500px) {
  .acnediv {
    width: 100%; 
  }
}

#epiderm-2{
  text-align: center;
  padding: 1%;
}

.ep2int{
  padding: 1%;
}

.ep2h4{
  padding-bottom: 1%;
}



#epi-preview-wrap{
  display: flex;
  justify-content: center;   
  align-items: center;       
  margin-top: 1rem;
}

#epi-preview{
  display: none;             
  max-width: 240px;
  height: auto;
  border-radius: 8px;
}


.dz{
  border: 2px dashed #6b7280; 
  border-radius: 12px;
  min-height: 10%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #444444;             
  background: rgb(188, 188, 188);      
  cursor: pointer;
  padding: 1rem;
}

.dz.dragover{ 
  border-color: #60a5fa;     
  color: #e5e7eb;            
  background: rgb(101, 101, 101);   
}



.center{ 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  margin-top:1rem; 
}

.preview{ 
  max-width:240px; 
  height:auto; 
  border-radius:8px; 
}

.hidden{ 
  display:none; 
}

.warning{
  font-size: smaller;
  padding-top: 1%;
}

.alt{
  margin-left: 8px;
}

.card{
  max-width:320px;
}

.checkboxlabel{
  display:block;
  margin:8px 0;
}


.hidden { 
  display: none !important; 
}

#loginform{
  justify-content: center;
  display: flex;
  text-align: center;
}

#signupform{
  justify-content: center;
  display: flex;
  text-align: center;
  align-items: center;
}

.topbar{
  position: sticky; 
  top:0; 
  z-index:1000;
  position: relative;
  display:flex;
  align-items:center; 
  gap:16px;
  height:56px; 
  padding:0 16px;
  background:#006b6b; 
  color:#fff;
}
.brand{ 
  font-family:"Libre Baskerville",serif; 
  font-size:28px; 
  white-space:nowrap; 
  cursor:pointer; }


.nav-inline{ 
  margin-left:auto; 
  display:flex; 
  gap:24px; 
}
.nav-inline a{ 
  color:#e6f2f2; 
  text-decoration:underline; 
}
.nav-inline a:hover{ 
  text-decoration:none;
}

.hamburger{
  margin-left:8px; 
  background:none; 
  border:0; 
  cursor:pointer; 
  padding:6px;
}
.hamburger span{ 
  display:block; 
  width:22px; 
  height:2px; 
  background:#fff; 
  margin:4px 0; 
}


.mobile-menu{
  display:none;
  position:absolute; 
  right:12px; 
  top:100%;
  background:#fff; 
  color:#222;
  border:1px solid #d0d7de; 
  border-radius:10px;
  min-width:210px; 
  box-shadow:0 12px 24px rgba(0,0,0,.12); 
  overflow:hidden;
}
.mobile-menu a{ 
  display:block; 
  padding:10px 14px; 
  color:#222; 
  text-decoration:none; 
}
.mobile-menu a:hover{ 
  background:#f5f7fa; 
}
.mobile-menu.open{ 
  display:block; 
}


@media (max-width: 800px){
  .nav-inline{ 
    display:none; 
  }
}


@media (max-width: 420px){ 
  .welcome{ 
    font-size:2em; 
  } 
}

@media (max-width: 420px){ 
  .welcome-p{ 
    font-size:1em; 
  } 
}


footer {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
}

.content{
  min-height: 90vh;
  display: flex;
  flex-direction: column;
}

.logintitle{
  text-align: center;
}

.epiderm2txt{
  text-align: center;
  padding-bottom: 1%;
}

.credits{
  font-size: smaller;
  color: #808080;
}

.tooltipcontainer{
  display: flex;
  justify-content: start;
  gap: 5px;
}


.sectiontitle{
  font-family: "welcometitle";
  padding: 0.5%;
}

.acnesection h3{
  padding-bottom: 0.5%;
  padding-top: 0.4%
}

.acnesection ul{
  padding-left: 2%;
} 

.scttxt{
  text-align: center;
}

.csubtle{
  color: #bfbfbf;
  padding-left: 10%
}

.imgtxtint{
  display: block;
  
}


.creditlink:link {
  color: #bfbfbf;
}


.creditlink:visited {
  color: #bfbfbf;
}

.creditlink:hover {
  color: #8a8a8a;
}


.creditlink:active {
  color: #bfbfbf;
}

.content h1{
  padding-top: 1%
}


.loginwrap{
  padding-left: 37%;
  padding-top: 5%;
}


:root{
  --brand-teal: #0f766e;
  --card-w: clamp(340px, 48vw, 560px);
  --gap: 14px;
}


#iniciar-sesion .loginwrap{
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}


#iniciar-sesion .card{
  width: var(--card-w);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: clamp(20px, 3vw, 28px);
  margin: 0 auto;
}

#iniciar-sesion .logintitle{
  text-align: center;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  margin: 0 0 10px;
}


#iniciar-sesion form{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}



#iniciar-sesion input[type="email"],
#iniciar-sesion input[type="password"]{
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  background: #fff;
}
#iniciar-sesion input:focus{
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(15,118,110,.15);
}


#iniciar-sesion .btn{
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--brand-teal);
  color: #fff;
  cursor: pointer;
}
#iniciar-sesion .btn:hover{ filter: brightness(0.95); }

#iniciar-sesion .btn.alt{
  background: transparent;
  color: var(--brand-teal);
  border: 1px solid var(--brand-teal);
}


#iniciar-sesion .muted{ 
  text-align: center; 
  color: #64748b; 
}

#iniciar-sesion .captcha-wrap{ 
  display: flex; 
  justify-content: center; 
}


#iniciar-sesion{ 
  scroll-margin-top: 80px; 
}


@media (max-width: 480px){
  :root{ --card-w: 92vw; 
  }
}