/* =====================================================
   Contenedor principal
   ===================================================== */

.ayuda-web-container {
    display: flex;
    font-family: 'Open Sans', sans-serif;
}

/* =====================================================
   Panel izquierdo
   ===================================================== */

.ayuda-web-opciones {
    width: 30%;
    padding: 10px;
    background: #f9f9f9;
    border-right: 1px solid #cccccc;
}

/* =====================================================
   Panel derecho
   ===================================================== */

.ayuda-web-contenido {
    width: 70%;
    padding: 10px;
}

/* =====================================================
   Botones de opciones
   ===================================================== */

.ayuda-web-opcion {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;

    text-align: left;
    font-size: 14px;

    background: #ffffff;
    color: #333333;

    border: 1px solid #cccccc;
    border-radius: 4px;

    cursor: pointer;

    transition:
        background-color .20s ease,
        color .20s ease,
        border-color .20s ease;
}

/* Hover */

.ayuda-web-opcion:hover {
    background: #eeeeee;
}

/* Evitar el azul por defecto de WordPress */

.ayuda-web-opcion:focus,
.ayuda-web-opcion:active {
    outline: none !important;
    box-shadow: none !important;
}

/* =====================================================
   Opción seleccionada (AZUL)
   ===================================================== */

.ayuda-web-opcion.active,
.ayuda-web-opcion.activa,
.ayuda-web-opcion.seleccionada,
.ayuda-web-opcion.active:hover,
.ayuda-web-opcion.activa:hover,
.ayuda-web-opcion.seleccionada:hover,
.ayuda-web-opcion.active:focus,
.ayuda-web-opcion.activa:focus,
.ayuda-web-opcion.seleccionada:focus,
.ayuda-web-opcion.active:active,
.ayuda-web-opcion.activa:active,
.ayuda-web-opcion.seleccionada:active {

    background: #2271b1 !important;
    color: #ffffff !important;
    border-color: #2271b1 !important;

    outline: none !important;
    box-shadow: none !important;
}

/* =====================================================
   Coincidencias de búsqueda (VERDE OSCURO)
   ===================================================== */

.ayuda-web-opcion.ayuda-web-opcion-coincidencia,
.ayuda-web-opcion.ayuda-web-opcion-coincidencia:hover,
.ayuda-web-opcion.ayuda-web-opcion-coincidencia:focus,
.ayuda-web-opcion.ayuda-web-opcion-coincidencia:active {

    background: #2e7d32 !important;
    color: #ffffff !important;
    border-color: #2e7d32 !important;

    outline: none !important;
    box-shadow: none !important;
}

/* =====================================================
   Paginación
   ===================================================== */

.ayuda-paginacion {
    margin-top: 15px;
}

.ayuda-paginacion a {
    display: inline-block;

    padding: 6px 10px;
    margin-right: 5px;

    text-decoration: none;

    border: 1px solid #cccccc;
    background: #ffffff;

    color: #333333;
}

.ayuda-paginacion a:hover {
    background: #eeeeee;
}

/* Página actual */

.ayuda-paginacion a.actual {
    background: #2271b1;
    color: #ffffff;
    border-color: #2271b1;
}

/* =====================================================
   Botón Volver
   ===================================================== */

.ayuda-web-boton-volver {
    display: inline-block;
    margin-left: 20px;
    padding: 6px 14px;

    background: #2271b1;
    color: #ffffff !important;

    text-decoration: none;

    border: 1px solid #2271b1;
    border-radius: 4px;

    cursor: pointer;

    transition:
        background-color .20s ease,
        border-color .20s ease;
}

.ayuda-web-boton-volver:hover {
    background: #135e96;
    border-color: #135e96;
    color: #ffffff !important;
}

.ayuda-highlight {

    background: #fff3a0;
    padding: 1px 2px;
    border-radius: 2px;

}

.ayuda-web-opcion.active {

    background: #2271b1;
    color: #fff;

}

.ayuda-web-opcion-coincidencia {

    border-left: 4px solid #dba617;

}