/* =========================================================
   LOOK & FEEL STARKEN
   Estilos específicos para cuentas Starken (esCuentaStarken)
   ========================================================= */

/* --- Botones --- */
.btnComenzarQueopStarken {
    font-size: 17px;
    color: #ffffff;
    border: none;
    background: #009933;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    min-width: 120px;
    padding: 0 16px;
    font-family: Calibri;
}

.btnEnviarQueop2Starken {
    font-size: 17px;
    color: #009933;
    border: 1px solid #009933;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    min-width: 120px;
    padding: 0 20px;
    font-family: Calibri;
}

.btnEnviarDatosQueop2Starken {
    font-size: 17px;
    color: #ffffff;
    border: 1px solid #009933;
    background: #009933;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    min-width: 120px;
    padding: 0 20px;
    font-family: Calibri;
}

.btnOmitirQueop2Starken {
    font-size: 17px;
    color: #009933;
    border: 1px solid #009933;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    width: 120px;
    font-family: Calibri;
}

.btnComenzarQueopStarken:hover,
.btnLimpiarStarken:focus,
.btn_no_aplica_starken:hover {
    background: #007a29;
}

.btnOmitirQueop2Starken:hover {
    background: #f2f2f2;
    color: #007a29;
    border: 1px solid #009933;
}

.btnComenzarQueopStarken:active, .btnComenzarQueopStarken:focus {
    background: #009933 !important;
    border-color: #009933 !important;
    box-shadow: none !important;
}

.btnEnviarQueop2Starken:hover {
    background: #f2fff5;
    color: #007a29;
    border-color: #007a29;
}

.btnEnviarQueop2Starken:active, .btnEnviarQueop2Starken:focus {
    background: #ffffff !important;
    color: #009933 !important;
    border-color: #009933 !important;
    box-shadow: none !important;
}

.btnEnviarDatosQueop2Starken:hover {
    background: #007a29;
    border-color: #007a29;
}

.btnEnviarDatosQueop2Starken:active, .btnEnviarDatosQueop2Starken:focus {
    background: #006622 !important;
    border-color: #006622 !important;
    box-shadow: none !important;
}

.btnOmitirQueop2Starken:active, .btnOmitirQueop2Starken:focus {
    background: #fff !important;
    color: #009933 !important;
    border-color: #009933 !important;
    box-shadow: none !important;
}

.btnComenzarQueopStarken:focus {
    background: #007a29;
}

.btnLimpiarStarken {
    height: 22px;
}

.btnLimpiarStarken:focus {
    height: 22px;
}

.btn_no_aplica_starken {
    font-size: 17px;
    font-weight: bold;
    color: #999999;
    border-color: #E6E6E6;
    background: #E6E6E6;
    border-radius: 5px;
    cursor: pointer;
    height: 35px;
    width: 120px;
    font-family: Calibri;
}

/* --- Tipografía y campos --- */
.font_starken {
    font-family: Calibri;
}

.font_starken_rojo {
    color: #D2770F;
}

.font_starken_verde {
    color: #3E9B55;
}

.textbox_starken {
    border-radius: 8px;
    font-family: Calibri;
}

.input_campos_Starken {
    border-radius: 0px;
    font-family: Calibri;
}

/* --- Emojis FSR/DC con barras de color --- */
.starken-emoji-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 8px;
    width: 15.2%;
}
.starken-emoji-item img {
    width: 100%;
}
.starken-bar {
    width: 36px;
    height: 6px;
    border-radius: 6px;
    margin-top: 6px;
    opacity: 0.5;
}
.starken-bar-red    { background: #e53935; }
.starken-bar-yellow { background: #fdd835; }
.starken-bar-green  { background: #43a047; }
@media (max-width: 600px) {
    .starken-bar { width: 30px; height: 5px; }
}

/* --- Emojis FSR/DC: botón comentario --- */
.btnComentarioStarken {
    width: 11.2%;
    border: 0px solid #fff;
    margin: 2px;
    max-width: 70px;
    cursor: pointer;
}

/* --- Buzones: efecto hover en imagen --- */
.starken-buzon-img {
    cursor: pointer;
    transition: transform 0.2s;
}
.starken-buzon-img:hover {
    transform: scale(1.05);
}

/* --- Tipología --- */
.tipologia-starken {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    width: 100%;
}

.tipo-starken {
    padding: 18px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
}
.tipo-starken i {
    font-size: 28px;
}
.tipo-starken span {
    display: block;
    font-weight: bold;
    font-size: 14px;
}
.tipo-starken:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Responsive */
.tipologia-starken .tipo-starken {
    min-width: 160px;
    max-width: 100%;
    padding: 18px 30px;
}

/* Colores por tipo */
.reclamo-starken {
    border: 1px solid #e53935;
}
.reclamo-starken i {
    color: #e53935;
}