/* ==================================================
   TEMA AMBIENTAL TERAPÉUTICO
   Archivo: css/tema_ambiental.css
   ================================================== */

:root {
    --verde-bosque: #0F3D3E;
    --verde-salvia: #6F806E;
    --verde-hoja: #8FA58B;

    --terracota: #C08A6B;
    --terracota-oscuro: #9E6F56;

    --beige-fondo: #F5ECE3;
    --beige-profundo: #EADBCF;
    --beige-card: #FFF8F2;

    --texto-principal: #3A312C;
    --texto-suave: #7A6A60;
}

/* Fondo general ambiental */
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    color: var(--texto-principal) !important;

    
 background:
        /* radial-gradient(circle at 20% 20%, rgba(15, 61, 62, 0.28), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(111, 128, 110, 0.25), transparent 45%), */
         radial-gradient(circle at 20% 20%, rgba(15, 61, 62, 0.8), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(111, 128, 110, 0.727), transparent 45%),
        linear-gradient(180deg, #F5ECE3 0%, #EADBCF 100%);



    background-attachment: fixed;
}

/* Contenedor principal */
.container {
    width: 92%;
    max-width: 768px;
    margin: 24px auto;
    padding: 20px 18px 28px;
    border-radius: 28px;
    background: rgba(255, 248, 242, 0.82) !important;
    border: 1px solid rgba(192, 138, 107, 0.18) !important;
    box-shadow: 0 22px 50px rgba(86, 60, 45, 0.14) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Quitamos los brillos viejos azules/morados */
.container::before,
.container::after {
    display: none !important;
}

/* Robot: se respeta tu posición original */
.robot-image {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain;
    position: absolute;
    top: 50px !important;
    left: 50px !important;
    margin: 0 auto;
    transform: translate(-50%, -50%) scale(0.5);
    transition: opacity 0.3s ease;
}

.robot-image-container {
    position: relative;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* Pulso cálido del botón */
.btn-idle-pulse {
    animation: idlePulseAmbiental 1.6s infinite ease-in-out !important;
    box-shadow: 0 0 0 rgba(192, 138, 107, 0.45);
}

@keyframes idlePulseAmbiental {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(192, 138, 107, 0.35);
    }

    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 12px rgba(192, 138, 107, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(192, 138, 107, 0);
    }
}

/* Nota inferior del chat */
.chat-footer-note {
    text-align: center;
    font-size: 12px;
    color: var(--texto-principal) !important;
    padding: 4px 6px;
    background: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.chat-footer-note .note-icon {
    margin-right: 5px;
    font-size: 10px;
}

.chat-footer-note .note-text {
    letter-spacing: 0.3px;
}

/* Textos principales */
#titulo-corazon,
.dashboard-mini-head h2,
.dashboard-panel-head strong,
.demo-compact-title {
    color: var(--texto-principal) !important;
}

#subtitle,
.dashboard-mini-head p,
.dashboard-mini-text,
.dashboard-footer-note,
.dashboard-demo-note,
.dashboard-comparativa-subtext {
    color: var(--texto-suave) !important;
}

/* Inputs */
.input-group,
#edad-input,
#genero,
#emocion_select,
#emocion_otra_input,
#usr {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(111, 128, 110, 0.25) !important;
    color: var(--texto-principal) !important;
}

#usr::placeholder,
#emocion_otra_input::placeholder {
    color: #9B8A7C !important;
}

/* Botones */
.btn-start,
.btn-dashboard-cta,

#confirm-yes,
.start-button {
    background: linear-gradient(90deg, var(--terracota), var(--verde-salvia)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 22px rgba(111, 128, 110, 0.20) !important;
}

.btn-start:hover,
.btn-dashboard-cta:hover
 {
    transform: translateY(-1px) scale(1.02);
    background: linear-gradient(90deg, var(--terracota-oscuro), var(--verde-bosque)) !important;
}

/* Emociones */
.emotion-container {
    background: rgba(255, 248, 242, 0.55) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(192, 138, 107, 0.10) !important;
    transition: all 0.25s ease;
}

.emotion-container:hover {
    background: rgba(246, 238, 231, 0.95) !important;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 18px rgba(86, 60, 45, 0.10);
}

.emotion-label {
    color: var(--texto-suave) !important;
}

.fugraemotion,
.Holasoy {
    filter: drop-shadow(0 6px 12px rgba(15, 61, 62, 0.16)) !important;
}

/* Dashboard */
.dashboard-mini-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(192, 138, 107, 0.18) !important;
    color: var(--texto-principal) !important;
    border-radius: 12px !important;
}

.dashboard-mini-card:hover,
.dashboard-mini-card.is-active {
    background: rgba(111, 128, 110, 0.18) !important;
    border-color: rgba(15, 61, 62, 0.28) !important;
    box-shadow: 0 12px 24px rgba(15, 61, 62, 0.14) !important;
}

.dashboard-mini-icon {
    color: var(--verde-bosque) !important;
    filter: none !important;
}

.dashboard-mini-title {
    color: var(--texto-principal) !important;
}

.dashboard-mini-panel,
.dashboard-demo-compact,
.dashboard-chart-wrap {
    background: rgba(255, 248, 242, 0.66) !important;
    border: 1px solid rgba(192, 138, 107, 0.14) !important;
    border-radius: 18px !important;
}

/* Gráfica */
.chart-bar,
.demo-compact-bar i {
    background: linear-gradient(180deg, var(--verde-salvia), var(--terracota)) !important;
    box-shadow: 0 0 10px rgba(111, 128, 110, 0.20) !important;
}

.chart-bar-area {
    background: rgba(15, 61, 62, 0.08) !important;
}

.chart-value,
.chart-label {
    color: var(--texto-principal) !important;
}

/* Chat */
.chat-popup {
    
    background: rgba(255, 248, 242, 0.96) !important;
    color: var(--texto-principal) !important;
    border: 1px solid #0F3D3E !important;
    border-radius: 22px !important;

    width: 410px;
    height: 500px;
    padding: 20px 20px 0 20px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    /* overflow: hidden !important; */
     overflow: visible !important;
    
 box-shadow:
        0 20px 40px rgba(46, 32, 24, 0.8),   /* sombra base */
        0 8px 16px rgba(0, 0, 0, 0.9),       /* profundidad */
        0 0 0 1px rgba(255, 255, 255, 0.7);   /* brillo sutil */
}

.chat-popup {
    padding: 20px 20px 0 20px !important;
}


.chat-history {
    flex: 1 1 auto !important; 
    
    height: auto !important;
    overflow-y: auto !important;
    /* margin-bottom: 0 !important; */
    color: var(#2F3E34) !important;
    border: 1px solid #0f3d3e6c !important;
    border-radius: 7px !important;

    background-image: url('../images/fondo_chat.jpg'); /* 🔥 tu imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
}


.chat-input-wrap {
    padding: 0 5px 6px 5px;
}

.chat-bottom {
    position: static !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    margin-top: 10px !important;

    padding: 3px 6px !important;
    box-sizing: border-box !important;

    border-radius: 0 0 22px 22px;
    border-top: 1px solid rgba(192, 138, 107, 0.2);
    /* background: #0F3D3E !important; */
     background: rgba(255, 248, 242, 0.96) !important;
}

#user-input {
    display: block;
    margin: 0 auto;
    width: 100%;
    padding: 6px 10px;
    line-height: 18px;
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid rgba(111, 128, 110, 0.3);
    color: #3A312C;
    background: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
}

.chat-actions{
text-align: center !important;
}


#btn-escuchar-chat {
    font-size: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 20px !important;
}


#send-button {
    padding: 5px 12px;
    font-size: 11px;

    background: linear-gradient(90deg, #C08A6B, #6F806E);
    color: white;

    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 20px;
}



#send-button {
    background: var(--verde-bosque) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* Nota legal */
.dashboard-legal-note {
    color: var(--texto-suave) !important;
}

.dashboard-mini-card,
.dashboard-mini-panel {
    background: #FFF8F2 !important;
    /* box-shadow: 0 10px 30px rgba(60, 40, 20, 0.12) !important; */
     box-shadow: 0 14px 35px rgba(60, 40, 20, 0.12)!important;
}

.dashboard-chart-wrap {
    background: #F6EEE7 !important;
    padding: 15px;
    border-radius: 20px;
}

.btn-dashboard-cta {
    /* background: linear-gradient(90deg, #C08A6B, #6F806E);
    box-shadow: 0 12px 30px rgba(111, 128, 110, 0.25); */

     background: linear-gradient(90deg, #C08A6B, #6F806E);
    padding: 12px 18px;
    font-size: 13px;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(111, 128, 110, 0.30)
}


.dashboard-mini-head {
    margin-bottom: 20px;
}

.dashboard-mini-grid {
    gap: 12px !important;
}

.dashboard-mini-panel {
    margin-top: 20px;
}

.robot-image-container {
    margin-bottom: 10px !important;
}

.chart-bar {
    background: linear-gradient(180deg, #6F806E, #C08A6B) !important;
    border-radius: 6px;
}

#usr {
    background: #ffffff !important;
    border: 2px solid rgba(111, 128, 110, 0.35) !important;
    box-shadow: 0 8px 20px rgba(111, 128, 110, 0.12);
    height: 42px;
    font-size: 14px;
    
}

.chatusr {
    background: #ffffff !important;
    border: 2px solid rgba(111, 128, 110, 0.35) !important;
    box-shadow: 0 8px 20px rgba(111, 128, 110, 0.12);
    height: 42px;
    font-size: 14px;
}



.emotion-container {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(192, 138, 107, 0.15);
}

.emotion-container:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 24px rgba(111, 128, 110, 0.18);
}

.robot-image {
    opacity: 0.9;
}

.container {
    transition: all 0.4s ease;
}

.container:hover {
    transform: translateY(-2px);
}

#emocion_select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background: #FFF8F2 !important;
    border: 1px solid rgba(111, 128, 110, 0.35) !important;
    border-radius: 10px !important;

    padding: 8px 35px 8px 12px !important;
    font-size: 13px !important;
    color: #3A312C !important;
    width: 300px;

    box-shadow: 0 6px 14px rgba(86, 60, 45, 0.08) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.chat-popup {
    display: none !important;
}

.chat-popup.chat-abierto {
    display: flex !important;
    flex-direction: column !important;
}


.quick-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
    padding-left: 0;
}

.quick-btn {
    border: 1px solid rgba(15, 61, 62, 0.18);
    background: rgba(255, 248, 242, 0.72);
    color: #0F3D3E;

    font-size: 11px;
    font-weight: 600;
    padding: 7px 12px;

    border-radius: 999px;
    cursor: pointer;

    box-shadow: 0 6px 14px rgba(46, 32, 24, 0.10);
    transition: all 0.25s ease;
}

.quick-btn:hover {
    transform: translateY(-1px);
    background: rgba(15, 61, 62, 0.08);
    box-shadow: 0 8px 18px rgba(46, 32, 24, 0.14);
}

.quick-btn-soft {
    color: #7A6A60;
    background: rgba(255, 255, 255, 0.55);
}

/* ==================================================
   CAMPOS NUEVOS: OCUPACIÓN Y CONTRASEÑA
   ================================================== */

#id_ocupacion,
#id_password {
    margin-top: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#id_ocupacion label,
#id_password label {
    font-size: 13px;
    font-weight: 600;
    color: var(--verde-bosque);
}

#ocupacion,
#pw {
    width: 250px;
    height: 42px;
    padding: 6px 12px;
    border-radius: 12px;

    background: #ffffff !important;
    border: 2px solid rgba(111, 128, 110, 0.35) !important;
    color: var(--texto-principal) !important;

    font-size: 14px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;

    box-shadow: 0 8px 20px rgba(111, 128, 110, 0.12);
    box-sizing: border-box;
    outline: none;

    transition: all 0.25s ease;
}

#ocupacion::placeholder,
#pw::placeholder {
    color: #9B8A7C !important;
}

#ocupacion:focus,
#pw:focus {
    border-color: var(--terracota) !important;
    box-shadow: 0 0 0 4px rgba(192, 138, 107, 0.16),
                0 8px 20px rgba(111, 128, 110, 0.16);
    transform: translateY(-1px);
}
#ocupacion {
    width: 250px;
    height: 42px;
    padding: 6px 12px;
    border-radius: 12px;

    background: #ffffff;
    border: 2px solid rgba(111, 128, 110, 0.35);
    color: var(--texto-principal);

    font-size: 14px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;

    box-shadow: 0 8px 20px rgba(111, 128, 110, 0.12);
    outline: none;
    transition: all 0.25s ease;
}

#ocupacion:focus {
    border-color: var(--terracota);
    box-shadow: 0 0 0 4px rgba(192, 138, 107, 0.16);
}

/* Consentimiento legal */
.consentimiento-box {
    margin-top: 15px;
    padding: 10px 12px;
    background: #f5f7f8;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.consentimiento-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    cursor: pointer;
}

.consentimiento-label input[type="checkbox"] {
    margin-top: 3px;
    transform: scale(1.2);
    cursor: pointer;
    flex-shrink: 0;
}

.consentimiento-label strong {
    color: #0F3D3E;
    font-weight: 700;
}

.leyenda-legal-mini {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    text-align: center;
}

/* ==================================================
   MODAL CONTACTO
   ================================================== */

.modal-contacto {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-contacto.is-open {
    display: flex;
}

.modal-contacto-fondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 61, 62, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-contacto-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    background: rgba(255, 248, 242, 0.96);
    border: 1px solid rgba(192, 138, 107, 0.25);
    border-radius: 26px;
    padding: 28px 24px 24px;
    box-shadow: 0 24px 60px rgba(46, 32, 24, 0.35);
    animation: contactoEntrada 0.25s ease;
    box-sizing: border-box;
}

@keyframes contactoEntrada {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-contacto-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 61, 62, 0.08);
    color: var(--verde-bosque);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.modal-contacto-card h2 {
    margin: 0;
    text-align: center;
    color: var(--texto-principal);
    font-size: 24px;
}

.modal-contacto-subtitle {
    margin: 8px auto 22px;
    text-align: center;
    color: var(--texto-suave);
    font-size: 14px;
    line-height: 1.4;
}

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

.contact-form-group input,
.contact-form-group textarea {
    width: 100%;
    padding: 15px 13px 9px;
    border-radius: 14px;
    border: 2px solid rgba(111, 128, 110, 0.28);
    background: #ffffff;
    color: var(--texto-principal);
    font-size: 14px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    box-shadow: 0 8px 18px rgba(111, 128, 110, 0.10);
    box-sizing: border-box;
    outline: none;
    resize: none;
}

.contact-form-group label {
    position: absolute;
    left: 14px;
    top: 12px;
    color: #9B8A7C;
    font-size: 13px;
    pointer-events: none;
    transition: all 0.2s ease;
    background: #ffffff;
    padding: 0 4px;
}

.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-color: var(--terracota);
    box-shadow: 0 0 0 4px rgba(192, 138, 107, 0.14);
}

.contact-form-group input:focus + label,
.contact-form-group textarea:focus + label,
.contact-form-group input:valid + label,
.contact-form-group textarea:valid + label {
    top: -8px;
    font-size: 11px;
    color: var(--verde-bosque);
}

.submit-contacto-button {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--terracota), var(--verde-salvia));
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(111, 128, 110, 0.28);
}

.submit-contacto-button:hover {
    background: linear-gradient(90deg, var(--terracota-oscuro), var(--verde-bosque));
    transform: translateY(-1px);
}

.submit-contacto-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mensaje-contacto {
    min-height: 18px;
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.mensaje-contacto.ok {
    color: var(--verde-bosque);
}

.mensaje-contacto.error {
    color: #9E3D32;
}

/* ===== MODAL ÚLTIMA EVALUACIÓN ===== */

.modal-evaluacion {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.modal-evaluacion.activo {
    display: flex;
}

.modal-evaluacion-fondo {
    position: absolute;
    inset: 0;
    background: rgba(15, 61, 62, 0.45);
    backdrop-filter: blur(6px);
}

.modal-evaluacion-card {
    position: relative;
    width: 90%;
    max-width: 380px;
    background: rgba(255, 248, 242, 0.96);
    border-radius: 24px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: fadeInModal 0.25s ease;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-evaluacion-card h3 {
    margin-bottom: 15px;
    color: var(--verde-bosque);
}

.modal-evaluacion-card p {
    margin: 8px 0;
    color: var(--texto-principal);
    font-size: 14px;
}

.modal-evaluacion-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--verde-bosque);
}

.btn-evaluacion-ok {
    margin-top: 18px;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--terracota), var(--verde-salvia));
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.termometro-container {
    margin-top: 15px;
    text-align: center;
}

.termometro {
    width: 36px;
    height: 140px;
    background: #eee;
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(0,0,0,0.1);
}

#termometro-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0%;
    border-radius: 20px;
    transition: all 0.6s ease;
}

#termometro-label {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: bold;
}

.termometro {
    margin-top: 10px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.12);
}

#termometro-fill {
    background: #00b894;
    box-shadow: 0 0 12px rgba(0,0,0,0.18);
}

#termometro-label {
    color: var(--verde-bosque);
    letter-spacing: 0.4px;
}

.modal-evaluacion-card {
    border: 1px solid rgba(192, 138, 107, 0.25);
}

.btn-evaluacion-ok:hover {
    transform: translateY(-1px);
    background: linear-gradient(90deg, var(--terracota-oscuro), var(--verde-bosque));
}

#id_btn_login .btn-aceptar {
    background: linear-gradient(90deg, #4A90E2, #357ABD); /* azul elegante */
    color: #fff;
}

#id_btn_login .btn-aceptar:hover {
    background: linear-gradient(90deg, #357ABD, #2C5F99);
}

.eval-resumen {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(15, 61, 62, 0.06);
    border-radius: 12px;
    font-size: 13px;
    color: #0F3D3E;
}

.eval-card {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 61, 62, 0.12);
    text-align: left;
}

.eval-card h4 {
    margin: 0 0 6px 0;
    font-size: 14px;
    color: #0F3D3E;
}

.eval-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #334;
}

.eval-emergencia {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #fff0f0;
    border: 1px solid #ffb3b3;
    color: #8a1f1f;
    font-size: 13px;
    text-align: left;
}