/* ==========================
   VARIABLES
========================== */

:root {
    --pink: #ec4d95;
    --pink-dark: #d6367d;
    --pink-light: #ffe7f2;
    --paper: #fffdf8;
    --black: #222;
}


/* ==========================
   GENERAL
========================== */

body {
    background: var(--paper);
    color: var(--black);
    /*font-family: "Comic Neue", cursive;*/
    /*font-family: "Patrick Hand", cursive;*/
    /*font-family: "Shantell Sans", cursive;*/
     font-family: "Hubballi", sans-serif;
}
h1,
h2,
h3,
h4,
h5, button {
    /*font-family: "Baloo 2", sans-serif;*/
     /*font-family: "Shantell Sans", cursive;*/
    font-family: "Hubballi", sans-serif;
}


.container {
    max-width: 500px;
}

/* ==========================
   FUENTES
========================== */
.gaegu-regular { /*no tildes*/
  font-family: "Gaegu", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.caprasimo-regular {
  font-family: "Caprasimo", serif;
  font-weight: 400;
  font-style: normal;
}

/* todo */
.kalnia-cambiar {
  font-family: "Kalnia", serif;
  font-optical-sizing: auto;
  font-weight: 700; /* 100-700*/
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.jetbrains-mono-light { /*italic 0-1*/
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100; /*100-800*/
  font-style: normal;
}
.nanum-pen-script-regular {/*no tildes*/
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-style: normal;
}

.shantell-sans-cambiar { /*italic 0-1 */
  font-family: "Shantell Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 300; /*300-800*/
  font-style: normal;
  font-variation-settings:
    "BNCE" 0, /*-100-100*/
    "INFM" 0, /*0-100*/
    "SPAC" 0;
}
.rubik-vinyl-regular {
  font-family: "Rubik Vinyl", system-ui;
  font-weight: 400;
  font-style: normal;
}

.stylish-regular { /*no tildes*/
  font-family: "Stylish", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fuzzy-bubbles-regular { /*no mg*/
  font-family: "Fuzzy Bubbles", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fuzzy-bubbles-bold {
  font-family: "Fuzzy Bubbles", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.cause-cambiar { /* muy ia no mg*/
  font-family: "Cause", cursive;
  font-optical-sizing: auto;
  font-weight: 100; /*100-900*/
  font-style: normal;
}

.hubballi-regular {
  font-family: "Hubballi", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.short-stack-regular { /* no mg*/
  font-family: "Short Stack", cursive;
  font-weight: 400;
  font-style: normal;
}

.playpen-sans-hebrew-cambiar { /*no mg*/
  font-family: "Playpen Sans Hebrew", cursive;
  font-optical-sizing: auto;
  font-weight: 100; /*100-800*/
  font-style: normal;
}
/* ==========================
   ICONOS
========================== */

.like{
    position: relative;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.like img{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.heart-fill{
    opacity: 0;
    transition: opacity .2s;
}

.like:hover .heart-fill{
    opacity: 1;
}

.like:hover .heart-outline{
    opacity: 0;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.material-symbols-outlined:hover { /* en el futuro .liked y controlar con JS */
    color: var(--pink);
    font-variation-settings:
        'FILL' 1,
        'wght' 700,
        'GRAD' 0,
        'opsz' 24;
}

/* ==========================
   HEADER
========================== */
.logo-title{
    margin-bottom: 1rem;
    line-height: .9;
}

.goats{
    display: block;
    font-family: "Caprasimo", serif;
    font-size: 5rem;
}

.goats-small{
    font-family: "Caprasimo", serif;
    font-size: 1.5rem;
}

.analyzer{
    display: block;
    /*font-family: "Gaegu", cursive;*/
    /*font-family: "Rubik Vinyl", system-ui;*/
    font-family: "Gaegu", sans-serif;
    font-size: 4rem;
    letter-spacing: .3rem;
    color: var(--pink)
}

.header-logo{
    width: 80px;
    margin-bottom: 1rem;
}

header p {
    font-family: "JetBrains Mono", monospace;
    margin-bottom: .2rem;
    font-size: 0.7rem;
    line-height: 1.4;
}


/* ==========================
   BOTONES
========================== */

.btn {
    font-family: "JetBrains Mono", monospace;
}
.btn-primary {
    background: var(--pink);
    border: none;
    border-radius: 16px;
    font-weight: bold;
    font-size: 1.2rem;
    transition: .2s;
}

.btn-primary:hover {
    background: var(--pink-dark);
    transform: translateY(-2px);
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    background: var(--pink-dark) !important;
    border-color: var(--pink-dark) !important;
    box-shadow: 0 0 0 .2rem rgba(236, 77, 149, .25) !important;
}

.btn-outline-dark {
    border-radius: 16px;
}


/* ==========================
   CONTADOR
========================== */
.contador {
    font-family: "Gaegu", sans-serif;
}

.display-2 {
    font-weight: 900;
    font-size: 4rem;
}

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

/* ==========================
   COMENTARIOS
========================== */

.comments{
    display: flex;
    flex-direction: column;
}

.comment{

    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid #f3bfd5;

}

.comment:last-child{
    border-bottom: none;
}

.comment-avatar{
    font-size: 2rem;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-content{
    flex: 1;
}

.comment-content strong{
    display: block;
    font-size: 1.1rem;
    margin-bottom: .2rem;
}

.comment-content p{
    margin: 0;
    line-height: 1.3;
}

.comment-like{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: 40px;
    font-size: .95rem;
}

.comments-title{
    position: relative;
    width: fit-content;
    margin: 0 auto 2rem;
    font-size: 2rem;
}

.comments-title::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    width: 90%;
    height: 4px;
    background: var(--pink);
    border-radius: 50px;
}

/* ==========================
   FORMULARIO
========================== */

.card {
    border-radius: 18px;
    border: 2px solid var(--pink-light);
}

.form-control {
    border-radius: 12px;
}

.form-control:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 .2rem rgba(236, 77, 149, .2);
}


/* ==========================
   FOOTER
========================== */

footer {
    color: #555;
    font-size: .95rem;
}

.goats-footer{
    margin-top: 4rem;
    background: var(--pink-light);
    padding-bottom: 2rem;
}

.footer-divider{
    display: block;
    width: 100%;
     height: 9px;
    object-fit: cover;
    margin: 0 auto 2rem;
    color: var(--pink);
}

.footer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:2rem;
}

.footer-goat{
    width:90px;
}

.goats-footer h4{
    color: var(--pink);
    margin-bottom:.5rem;
}

/* ==========================
   MAS
========================== */
.publish-section{
    padding: 2rem 0;

}

.publish-icon{
    font-size: 5rem !important;
    color: var(--pink);
    margin-bottom: .8rem;

}

.publish-title{
     font-family: "JetBrains Mono", monospace;
    font-size: 2rem;
    margin-bottom: .2rem;
}

.publish-subtitle{
    font-family: "Gaegu", cursive;
    color: var(--pink);
    font-size: 2.3rem;
    letter-spacing: .08rem;
}

/* ==========================
   SVG
========================== */

.separador-ondulado{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 2rem;
    color: var(--pink);
}


/* ==========================
   CARGA
========================== */

.loading-title{

    display:inline-block;

    background:var(--pink-light);

    padding:.9rem 2.5rem;

    border-radius:18px;

    font-family:"JetBrains Mono", monospace;

    font-size:2rem;

    margin-bottom:2rem;

}

.loading-progress{

    height:24px;

    border:3px solid var(--black);

    border-radius:16px;

    overflow:hidden;

}

.loading-progress .progress-bar {
    background: repeating-linear-gradient(
        45deg,
        var(--pink),
        var(--pink) 12px,
        #f7a5ca 12px,
        #f7a5ca 24px
    );

    transition: width .6s ease;
}


.scan-steps{

    display:flex;

    flex-direction:column;

    gap:1.2rem;

}


.scan-step{
    display:flex;
    align-items:center;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:1px dashed #efb9d3;

    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}


.scan-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.scan-icon{

    color:var(--pink);

    font-size:2rem !important;

}


.scan-text{

    flex:1;

    font-size:1.15rem;

}


.success{

    color:var(--pink);

    font-weight:bold;

}


.waiting-circle{

    width:18px;

    height:18px;

    border-radius:50%;

    border:3px dotted #d4d4d4;

}


.loading-goat{

    margin-top:3rem;

    position:relative;

}


.loading-goat-img{

    width:90px;

}


.loading-bubble{

    display:inline-block;
    margin-left:1rem;
    padding:.8rem 1.2rem;
    border:2px solid var(--black);
    border-radius:18px;
    background:white;
    /*font-family:"Shantell Sans", sans-serif;*/

}

/* ==========================
   RESULTADO
========================== */

.results{
    margin-bottom:2rem;
}

.result-header{
    margin-bottom:2.5rem;
}

.result-title{

    display:inline-block;

    background:var(--pink-light);

    padding:.7rem 2.2rem;

    border-radius:8px;

    font-family:"JetBrains Mono", monospace;

    font-size:1.9rem;

    letter-spacing:.08rem;

}

.result-item{
    display:grid;
    grid-template-columns:55px 1fr 90px;
    align-items:center;
    column-gap:1rem;
    row-gap:.45rem;
    padding:1.25rem 0;
    border-bottom:2px dashed #f3bfd5;
}

.result-item:last-child{

    border-bottom:none;

}

.result-icon{
    grid-column:1;
    grid-row:1;
    width:55px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--pink);
}
.result-icon .material-symbols-outlined{
    font-size: 2.5rem;
}

.result-content{
    grid-column:2;
    grid-row:1;
    flex:1;
}

.result-content h5{

    font-family:"JetBrains Mono", monospace;

    font-size:.95rem;

    margin-bottom:.6rem;

    line-height:1.2;

}

.result-bar{

    width:100%;

    height:20px;

    background:white;

    border:2px solid #222;

    border-radius:999px;

    overflow:hidden;

}

.result-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #f88cbc,
        var(--pink)
    );

}

.result-value{
    grid-column:3;
    grid-row:1;
    width:90px;
    text-align:right;
}

.result-value strong{
    font-family:"Gaegu", sans-serif;
    display:block;
    font-size:2rem;
    font-weight: 900;
    line-height:1;
    color:var(--pink);
}

.result-frase{
    grid-column:2 / 4;
    grid-row:2;
}

.result-frase span{
    display:block;
    font-family:"Shantell Sans", sans-serif;
    color:var(--pink);
    font-size:1rem;
    line-height:1.15;
}

.status-pill{

    display:inline-block;

    padding:.35rem 1rem;

    background:var(--pink-light);

    border-radius:10px;

    color:var(--pink);

    font-family:"Gaegu", sans-serif;

    font-size:1.5rem;

    font-weight:bold;

    transform:rotate(-2deg);

}


/* ==========================
   MURO DE LOS BORRACHOS
========================== */

.wall-header {
    margin-bottom: 2.2rem;
}


/* TÍTULO */

.wall-title {
    display: inline-block;

    background: var(--pink-light);
    color: var(--black);

    padding: .65rem 1.8rem;

    border-radius: 6px;

    font-family: "Gaegu", sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: .08rem;

    margin-bottom: 1.3rem;

    transform: rotate(-1deg);
}


/* SUBTÍTULO */

.wall-subtitle {
    font-family: "Shantell Sans", sans-serif;
    font-size: 1.15rem;

    margin: 0;
}

.wall-heart {
    color: var(--pink);
    font-size: 1.3rem !important;
    vertical-align: middle;
}


/* ==========================
   LISTA DE COMENTARIOS
========================== */

.wall-comments {
    display: flex;
    flex-direction: column;
    gap: .8rem;

    margin-bottom: 2rem;
}


/* TARJETA */

.wall-comment {
    display: flex;
    align-items: flex-start;

    gap: 1rem;

    padding: 1rem 1.1rem;

    border: 2px solid var(--pink);
    border-radius: 18px;

    background: rgba(255, 255, 255, .35);
}


/* ==========================
   AVATAR
========================== */

.wall-avatar {
    flex-shrink: 0;

    width: 52px;
    height: 52px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--pink);
}

.wall-avatar .material-symbols-outlined{
    font-size: 46px;
    line-height: 1;
}

/* ==========================
   CONTENIDO DEL COMENTARIO
========================== */

.wall-comment-content {
    flex: 1;
    min-width: 0;
}


/* CABECERA */

.wall-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    gap: .7rem;

    margin-bottom: .25rem;
}

.wall-user {
    min-width: 0;
}

.wall-name {
    font-family: "Shantell Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.wall-time {
    flex-shrink: 0;

    font-family: "JetBrains Mono", monospace;
    font-size: .68rem;

    color: #777;
}
.header-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.header-link:hover {
    color: inherit;
}

/* MENSAJE */

.wall-message {
    font-family: "Shantell Sans", sans-serif;

    font-size: 1rem;
    line-height: 1.35;

    margin: .2rem 0 .8rem;
}


/* ==========================
   ACCIONES
========================== */

.wall-actions {
    display: flex;
    align-items: center;

    gap: 1.4rem;
}

.wall-action {
    display: flex;
    align-items: center;
    gap: .3rem;

    padding: 0;

    border: none;
    background: none;

    color: var(--black);

    font-family: "Hubballi", sans-serif;
    font-size: .95rem;

    cursor: pointer;
}

.wall-action .material-symbols-outlined {
    font-size: 1.3rem;
    color: var(--pink);
}

.wall-action:hover {
    color: var(--pink);
}


/* COMPARTIR A LA DERECHA */

.wall-share {
    margin-left: auto;
    color: var(--pink);
}


/* ==========================
   FORMULARIO PUBLICAR
========================== */

.wall-publish {
    margin-top: 2rem;
    margin-bottom: 2rem;

    padding: 1.2rem;

    border: 2px solid var(--pink);
    border-radius: 18px;

    background: rgba(255, 255, 255, .4);
}


/* NOMBRE */

.wall-publish-name {
    margin-bottom: .8rem;
}

.wall-publish-name .form-control {
    border: none;
    border-bottom: 1px dashed #efb9d3;

    border-radius: 0;

    background: transparent;

    padding-left: .4rem;
}


/* ZONA MENSAJE */

.wall-publish-message {
    display: flex;
    align-items: flex-start;

    gap: .8rem;
}

.wall-publish-avatar {
    color: var(--pink);

    font-size: 2.4rem !important;

    margin-top: .4rem;
}

.wall-publish-message textarea {
    resize: none;

    border: none;
    background: transparent;

    box-shadow: none !important;

    font-family: "Shantell Sans", sans-serif;

    padding: .5rem;
}

.wall-publish-message textarea:focus {
    border: none;
    box-shadow: none;
}


/* ==========================
   PIE DEL FORMULARIO
========================== */

.wall-publish-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 1rem;

    margin-top: .5rem;
}

.wall-counter {
    font-family: "JetBrains Mono", monospace;
    font-size: .7rem;

    color: #999;
}


/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 450px) {

    .wall-title {
        font-size: 1.8rem;
        padding: .6rem 1.2rem;
    }

    .wall-comment {
        gap: .7rem;
        padding: .9rem;
    }

    .wall-avatar {
        width: 44px;
        height: 44px;
    }

    .wall-avatar .material-symbols-outlined {
        font-size: 1.8rem;
    }

    .wall-name {
        font-size: 1rem;
    }

    .wall-message {
        font-size: .95rem;
    }

    .wall-actions {
        gap: 1rem;
    }

}
@media (max-width:520px){

    .quiz-options{

        grid-template-columns:1fr;

    }

}
/* ==========================
   CUESTIONARIO
========================== */
.quiz-header{
    text-align:center;
    margin-bottom:2rem;
}

.quiz-title{
    display:inline-block;

    background: var(--pink-light);

    padding:.65rem 1.8rem;

    border-radius:6px;

    font-family:"JetBrains Mono", sans-serif;
    font-size:2.2rem;
    font-weight:700;

    letter-spacing:.08rem;

    transform:rotate(-1deg);

    margin-bottom:1rem;
}

.quiz-subtitle{
    font-family:"JetBrains Mono", sans-serif;
    font-size:1.1rem;
}

.quiz-card{

    border:2px solid var(--pink);

    border-radius:18px;

    background:rgba(255,255,255,.35);

    padding:1.4rem;

    margin-bottom:1.2rem;

}

.quiz-question{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:.8rem;

    margin-bottom:1.3rem;

    text-align:center;

}

.quiz-question .material-symbols-outlined{

    color:var(--pink);

    font-size:2rem;

}

.quiz-question h3{

    margin:0;

    font-family:"Shantell Sans", sans-serif;
    font-size: 1.1rem;
}

.quiz-options{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:.9rem;

}
.quiz-option{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    padding:1rem;

    border:2px solid var(--pink-light);

    border-radius:14px;

    background:white;

    cursor:pointer;

    transition:.2s;

    text-align:center;

    font-family:"Shantell Sans", sans-serif;

}

.quiz-option:hover{

    border-color:var(--pink);

    transform:translateY(-2px);

}

.quiz-option input{

    accent-color:var(--pink);

    transform:scale(1.2);

}

.quiz-option:has(input:checked){

    background:var(--pink-light);

    border-color:var(--pink);

}

/* ==========================
   RESULTADO GOAT
========================== */

.result-goat{

    text-align:center;

}

.result-goat-header{

    margin-bottom:2rem;

}

.result-goat-status{

    display:block;

    font-family:"JetBrains Mono", monospace;

    font-size:.8rem;

    color:#777;

    letter-spacing:.12rem;

    margin-bottom:1rem;

}

.result-goat-title{

    display:inline-block;

    background:var(--pink-light);

    padding:.65rem 1.8rem;

    border-radius:8px;

    font-family:"Gaegu", sans-serif;

    font-size:2.2rem;

    transform:rotate(-1deg);

    margin-bottom:1rem;

}

.result-goat-system{

    font-family:"JetBrains Mono", monospace;

    font-size:.75rem;

    color:#999;

}

.result-goat-content{

    padding: 0 1rem;

}

.result-goat-name{

    font-family:"Caprasimo", serif;

    font-size:3rem;

    margin-bottom:1.5rem;

}

.result-goat-image{

    width:320px;

    max-width:100%;

    border-radius:18px;
    height:auto;

    margin-bottom:1.5rem;

}

.result-goat-phrase{

    font-family:"Shantell Sans", sans-serif;

    color:var(--pink);

    font-size:1.3rem;

    margin-bottom:1.5rem;

}

.result-goat-description{

    font-family:"JetBrains Mono", sans-serif;

    line-height:1.5;
    font-size:0.8rem;
    margin-bottom:2rem;

}

.result-goat-buttons{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.result-goat-stats{

    margin-top:3rem;

    font-family:"JetBrains Mono", monospace;

    font-size:.9rem;

}

.stats-title{

    font-family:"JetBrains Mono", sans-serif;

    font-size:2rem;

    margin-bottom:.8rem;

}

.stats-total{

    margin-bottom:1.5rem;

    color:#666;

}

.stats-list{

    display:flex;

    flex-direction:column;

    gap:.45rem;

}

.stats-list p{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:0;

}

.stats-list span{

    font-weight:bold;

    color:var(--pink);

    font-size:1rem;

}

.stats-divider{

    width:100%;

    height:2px;

    margin:1.2rem 0;

    background:repeating-linear-gradient(
        to right,
        var(--black) 0 8px,
        transparent 8px 12px
    );

}


.toast{
    background:#222;
    color:white;
    border:2px solid #ec4d95 !important;
    border-radius:15px;
}

.toast-body{
    padding:1rem 1.2rem;
    text-align: center;
    font-size:1.3rem;
}


/* ==========================
   ADMIN
========================== */

.admin-delete-form{
    margin-top: .8rem;
}

.admin-delete-btn{
    background: var(--pink-light);
    color: var(--pink-dark);

    border: 2px solid var(--pink);
    border-radius: 12px;

    padding: .35rem .9rem;

    font-family: "JetBrains Mono", monospace;
    font-size: .8rem;

    cursor: pointer;
    transition: .2s;
}

.admin-delete-btn:hover{
    background: var(--pink);
    color: white;

    transform: translateY(-2px);
}